chore: add a dev page for grid (#2458)

vaadin · Sep 6, 2021 · 903a6c5 · 903a6c5
1 parent 69c8296
commit 903a6c5
Showing 1 changed file with 40 additions and 0 deletions.
diff --git a/dev/grid.html b/dev/grid.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <script type="module">
+      import '@vaadin/vaadin-grid/all-imports';
+
+      const grid = document.querySelector('vaadin-grid');
+
+      grid.dataProvider = ({ parentItem, page, pageSize }, cb) => {
+        // Let's have 100 root-level items and 5 items on every child level
+        const levelSize = parentItem ? 5 : 100;
+
+        const pageItems = [...Array(Math.min(levelSize, pageSize))].map((_, i) => {
+          const indexInLevel = page * pageSize + i;
+
+          return {
+            name: `${parentItem ? parentItem.name + '-' : ''}${indexInLevel}`,
+            children: true
+          };
+        });
+
+        cb(pageItems, levelSize);
+      };
+    </script>
+
+    <vaadin-grid item-id-path="name">
+      <vaadin-grid-selection-column auto-select frozen></vaadin-grid-selection-column>
+      <vaadin-grid-tree-column frozen path="name" width="200px" flex-shrink="0"></vaadin-grid-tree-column>
+      <vaadin-grid-column path="name" width="200px" flex-shrink="0"></vaadin-grid-column>
+      <vaadin-grid-column path="name" width="200px" flex-shrink="0"></vaadin-grid-column>
+      <vaadin-grid-column path="name" width="200px" flex-shrink="0"></vaadin-grid-column>
+    </vaadin-grid>
+  </body>
+</html>