From c9e8555ce909ef5dbbf15e21167b157de8fe409c Mon Sep 17 00:00:00 2001
From: Bryan Lee <42545742+bryanmylee@users.noreply.github.com>
Date: Thu, 26 May 2022 15:59:09 +0800
Subject: [PATCH 1/2] doc: use `rowAttrs`, `tableBodyAttrs`, and `tableAttrs`

---
 README.md | 51 ++++++++++++++++++++++++++++++---------------------
 1 file changed, 30 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index 49db822..39e7a42 100644
--- 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={row.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>

From 206e76e6d80b1a84b74268dec3216bb4195dbb12 Mon Sep 17 00:00:00 2001
From: Bryan Lee <42545742+bryanmylee@users.noreply.github.com>
Date: Thu, 26 May 2022 16:03:57 +0800
Subject: [PATCH 2/2] fix (doc): `row` -> `headerRow`

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 39e7a42..f481f81 100644
--- a/README.md
+++ b/README.md
@@ -97,7 +97,7 @@ Svelte Headless Table comes with a stable plugin system that allows you to trans
 <table {...$tableAttrs}>
   <thead>
     {#each $headerRows as headerRow (headerRow.id)}
-      <Subscribe rowAttrs={row.attrs()} let:rowAttrs>
+      <Subscribe rowAttrs={headerRow.attrs()} let:rowAttrs>
         <tr {...rowAttrs}>
           {#each headerRow.cells as cell (cell.id)}
             <Subscribe attrs={cell.attrs()} let:attrs>