Merge branch 'main' of github.com:bryanmylee/svelte-headless-table

bryanmylee · May 26, 2022 · 588bf63 · 588bf63
2 parents 8fcaaa2 + 206e76e
commit 588bf63
Showing 1 changed file with 30 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -86,34 +86,43 @@ Svelte Headless Table comes with a stable plugin system that allows you to trans
     }),
   ]);
 
-  const { headerRows, rows } = table.createViewModel(columns);
+  const {
+    headerRows,
+    rows,
+    tableAttrs,
+    tableBodyAttrs,
+  } = table.createViewModel(columns);
 </script>
 
-<table>
+<table {...$tableAttrs}>
   <thead>
     {#each $headerRows as headerRow (headerRow.id)}
-      <tr>
-        {#each headerRow.cells as cell (cell.id)}
-          <Subscribe attrs={cell.attrs()} let:attrs>
-            <th {...attrs}>
-              <Render of={cell.render()} />
-            </th>
-          </Subscribe>
-        {/each}
-      </tr>
+      <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>
+  <tbody {...$tableBodyAttrs}>
     {#each $rows as row (row.id)}
-      <tr>
-        {#each row.cells as cell (cell.id)}
-          <Subscribe attrs={cell.attrs()} let:attrs>
-            <td {...attrs}>
-              <Render of={cell.render()} />
-            </td>
-          </Subscribe>
-        {/each}
-      </tr>
+      <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>