doc: add grid layout example

Author: bryanmylee

docs/package-lock.json

@@ -37,7 +37,7 @@
     "shiki": "^0.10.1",
     "svelte": "^3.44.0",
     "svelte-check": "^2.2.6",
-    "svelte-headless-table": "^0.15.0",
+    "svelte-headless-table": "^0.15.1",
     "svelte-preprocess": "^4.10.5",
     "tailwindcss": "^3.0.24",
     "tslib": "^2.3.1",

docs/package.json

@@ -12,3 +12,18 @@ sidebar_title: addGridLayout
 # {$frontmatter.title}
 
 `addGridLayout` configures the table to use [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) for laying out the table.
+
+## Examples
+
+### CSS Grid layout
+
+:::example
+
+[REPL](https://svelte.dev/repl/1cbeae0c59f0468d9d18b0b7d65e4b0e?version=3.50.1)
+
+<script>
+  import SimpleGridLayoutDemo from './_demo/SimpleGridLayoutDemo.svelte'
+</script>
+<SimpleGridLayoutDemo />
+
+:::

docs/src/routes/docs/[...3]plugins/[...13]add-grid-layout.md

@@ -0,0 +1,87 @@
+<script>
+  import { derived, readable } from 'svelte/store';
+  import { createTable, Subscribe, Render } from 'svelte-headless-table';
+  import { addGridLayout } from 'svelte-headless-table/plugins';
+  import { createSamples } from '$lib/utils/createSamples';
+
+  const data = readable(createSamples(10, 5, 3));
+
+  const table = createTable(data, {
+    grid: addGridLayout(),
+  });
+
+  const columns = table.createColumns([
+    table.group({
+      header: (_, { rows }) => derived([rows], ([_rows]) => `Name (${_rows.length} users)`),
+      columns: [
+        table.column({
+          header: 'First Name',
+          accessor: 'firstName',
+        }),
+        table.column({
+          header: 'Last Name',
+          accessor: 'lastName',
+        }),
+      ],
+    }),
+    table.group({
+      header: 'Info',
+      columns: [
+        table.column({
+          header: 'Age',
+          accessor: 'age',
+        }),
+        table.column({
+          header: 'Status',
+          accessor: 'status',
+        }),
+        table.column({
+          header: 'Visits',
+          accessor: 'visits',
+        }),
+        table.column({
+          header: 'Profile Progress',
+          accessor: 'progress',
+        }),
+      ],
+    }),
+  ]);
+
+  const { headerRows, rows, tableAttrs, tableHeadAttrs, tableBodyAttrs } =
+    table.createViewModel(columns);
+</script>
+
+<div class="overflow-x-auto">
+  <table class="demo my-0" {...$tableAttrs}>
+    <thead {...$tableHeadAttrs}>
+      {#each $headerRows as headerRow (headerRow.id)}
+        <Subscribe rowAttrs={headerRow.attrs()} let:rowAttrs>
+          <tr {...rowAttrs}>
+            {#each headerRow.cells as cell (cell.id)}
+              <Subscribe attrs={cell.attrs()} let:attrs>
+                <th {...attrs}>
+                  <Render of={cell.render()} />
+                </th>
+              </Subscribe>
+            {/each}
+          </tr>
+        </Subscribe>
+      {/each}
+    </thead>
+    <tbody {...$tableBodyAttrs}>
+      {#each $rows as row (row.id)}
+        <Subscribe rowAttrs={row.attrs()} let:rowAttrs>
+          <tr {...rowAttrs}>
+            {#each row.cells as cell (cell.id)}
+              <Subscribe attrs={cell.attrs()} let:attrs>
+                <td {...attrs}>
+                  <Render of={cell.render()} />
+                </td>
+              </Subscribe>
+            {/each}
+          </tr>
+        </Subscribe>
+      {/each}
+    </tbody>
+  </table>
+</div>