feat: refactor reactivity bindings to work without tanstack-store

examples/angular/basic-external-atoms/src/app/app.ts

@@ -51,10 +51,6 @@ export class App {
     injectTanStackTableDevtools(() => ({
       table: this.table,
     }))
-
-    effect(() => {
-      console.log('atom', this.paginationAtom.get())
-    })
   }
 
   readonly data = signal(makeData(1_000))

examples/angular/column-resizing-performant/src/app/app.html

@@ -3,7 +3,7 @@
   <button (click)="stressTest()" class="demo-button">Stress Test (2k rows)</button>
   <div class="spacer-md"></div>
   <pre [style.min-height]="'10rem'">
-    {{ columnSizingDebugInfo() }}
+    {{ stringifiedState() }}
   </pre>
   <div class="spacer-md"></div>
 

examples/angular/column-resizing-performant/src/app/app.ts

@@ -111,14 +111,8 @@ export class App {
     return colSizes
   })
 
-  readonly columnSizingDebugInfo = computed(() =>
-    JSON.stringify(
-      {
-        columnSizing: this.table.atoms.columnSizing.get(),
-      },
-      null,
-      2,
-    ),
+  readonly stringifiedState = computed(() =>
+    JSON.stringify(this.table.state, null, 2),
   )
 
   refreshData = () => this.data.set(makeData(200))

examples/lit/basic-external-atoms/src/main.ts

@@ -231,7 +231,7 @@ class LitTableExample extends LitElement {
           </select>
         </div>
         <div class="spacer-md"></div>
-        <pre>${JSON.stringify({ sorting, pagination }, null, 2)}</pre>
+        <pre>${JSON.stringify(table.state, null, 2)}</pre>
       </div>
       <style>
         * {

examples/lit/basic-external-state/src/main.ts

@@ -228,13 +228,7 @@ class LitTableExample extends LitElement {
           </select>
         </div>
         <div class="spacer-md"></div>
-        <pre>
-${JSON.stringify(
-            { sorting: this.sorting, pagination: this.pagination },
-            null,
-            2,
-          )}</pre
-        >
+        <pre>${JSON.stringify(table.state, null, 2)}</pre>
       </div>
       <style>
         * {

examples/lit/expanding/src/main.ts

@@ -316,15 +316,6 @@ class LitTableExample extends LitElement {
           </select>
         </div>
         <div>${table.getRowModel().rows.length.toLocaleString()} Rows</div>
-        <div>
-          <button
-            @click="${() => {
-              this._data = makeData(100, 5, 3)
-            }}"
-          >
-            Regenerate Data
-          </button>
-        </div>
         <pre>${JSON.stringify(table.state, null, 2)}</pre>
       </div>
       <style>

examples/lit/filters/src/main.ts

@@ -262,7 +262,7 @@ class LitTableExample extends LitElement {
           </strong>
         </span>
       </div>
-      <pre>${JSON.stringify(table.state.columnFilters, null, 2)}</pre>
+      <pre>${JSON.stringify(table.state, null, 2)}</pre>
       <style>
         * {
           font-family: sans-serif;

examples/lit/row-pinning/src/main.ts

@@ -326,16 +326,7 @@ class LitTableExample extends LitElement {
           </select>
         </div>
         <div class="spacer-sm"></div>
-        <pre>
-${JSON.stringify(
-            {
-              rowPinning: table.state.rowPinning,
-              pagination: table.state.pagination,
-            },
-            null,
-            2,
-          )}</pre
-        >
+        <pre>${JSON.stringify(table.state, null, 2)}</pre>
       </div>
       <style>
         * {

examples/lit/sorting-dynamic-data/src/main.ts

@@ -205,7 +205,7 @@ class LitTableExample extends LitElement {
             )}
         </tbody>
       </table>
-      <pre>${JSON.stringify(table.state.sorting, null, 2)}</pre>
+      <pre>${JSON.stringify(table.state, null, 2)}</pre>
       <style>
         * {
           font-family: sans-serif;

examples/lit/sorting/src/main.ts

@@ -158,7 +158,7 @@ class LitTableExample extends LitElement {
             )}
         </tbody>
       </table>
-      <pre>${JSON.stringify(table.state.sorting, null, 2)}</pre>
+      <pre>${JSON.stringify(table.state, null, 2)}</pre>
       <style>
         * {
           font-family: sans-serif;

examples/preact/basic-external-atoms/src/main.tsx

@@ -213,7 +213,7 @@ function App() {
       <button onClick={() => rerender(0)} className="demo-button">
         Rerender
       </button>
-      <pre>{JSON.stringify({ sorting, pagination }, null, 2)}</pre>
+      <pre>{JSON.stringify(table.state, null, 2)}</pre>
     </div>
   )
 }

examples/preact/basic-external-state/src/main.tsx

@@ -214,7 +214,7 @@ function App() {
       <button onClick={() => rerender(0)} className="demo-button">
         Rerender
       </button>
-      <pre>{JSON.stringify({ sorting, pagination }, null, 2)}</pre>
+      <pre>{JSON.stringify(table.state, null, 2)}</pre>
     </div>
   )
 }

examples/preact/row-pinning/src/main.tsx

@@ -350,7 +350,7 @@ function App() {
           Force Rerender
         </button>
       </div>
-      <div>{JSON.stringify(rowPinning, null, 2)}</div>
+      <pre>{JSON.stringify(table.state, null, 2)}</pre>
     </div>
   )
 }

examples/preact/with-tanstack-query/src/main.tsx

@@ -188,7 +188,7 @@ function App() {
       <div>
         <button onClick={() => rerender(0)}>Force Rerender</button>
       </div>
-      <pre>{JSON.stringify({ pagination }, null, 2)}</pre>
+      <pre>{JSON.stringify(table.state, null, 2)}</pre>
     </div>
   )
 }

examples/react/basic-external-atoms/src/main.tsx

@@ -219,16 +219,7 @@ function App() {
       <button onClick={() => rerender()} className="demo-button">
         Rerender
       </button>
-      <pre>
-        {JSON.stringify(
-          {
-            sorting: table.atoms.sorting.get(),
-            pagination: table.atoms.pagination.get(),
-          },
-          null,
-          2,
-        )}
-      </pre>
+      <pre>{JSON.stringify(table.state, null, 2)}</pre>
     </div>
   )
 }

examples/react/basic-external-state/src/main.tsx

@@ -217,7 +217,7 @@ function App() {
       <button onClick={() => rerender()} className="demo-button">
         Rerender
       </button>
-      <pre>{JSON.stringify({ sorting, pagination }, null, 2)}</pre>
+      <pre>{JSON.stringify(table.state, null, 2)}</pre>
     </div>
   )
 }

examples/react/row-pinning/src/main.tsx

@@ -365,7 +365,7 @@ function App() {
           Force Rerender
         </button>
       </div>
-      <div>{JSON.stringify(rowPinning, null, 2)}</div>
+      <pre>{JSON.stringify(table.state, null, 2)}</pre>
     </div>
   )
 }

examples/react/with-tanstack-query/src/main.tsx

@@ -186,7 +186,7 @@ function App() {
       <div>
         <button onClick={() => rerender()}>Force Rerender</button>
       </div>
-      <pre>{JSON.stringify({ pagination }, null, 2)}</pre>
+      <pre>{JSON.stringify(table.state, null, 2)}</pre>
     </div>
   )
 }

examples/solid/basic-external-atoms/src/App.tsx

@@ -205,13 +205,7 @@ function App() {
         </select>
       </div>
       <div class="spacer-md" />
-      <pre>
-        {JSON.stringify(
-          { sorting: sorting(), pagination: pagination() },
-          null,
-          2,
-        )}
-      </pre>
+      <pre>{JSON.stringify(table.state(), null, 2)}</pre>
     </div>
   )
 }

examples/solid/basic-external-state/src/App.tsx

@@ -204,13 +204,7 @@ function App() {
         </select>
       </div>
       <div class="spacer-md" />
-      <pre>
-        {JSON.stringify(
-          { sorting: sorting(), pagination: pagination() },
-          null,
-          2,
-        )}
-      </pre>
+      <pre>{JSON.stringify(table.state(), null, 2)}</pre>
     </div>
   )
 }

examples/solid/row-pinning/src/App.tsx

@@ -324,7 +324,7 @@ function App() {
           </label>
         </div>
       </div>
-      <div>{JSON.stringify(rowPinning(), null, 2)}</div>
+      <pre>{JSON.stringify(table.state(), null, 2)}</pre>
     </div>
   )
 }

examples/solid/with-tanstack-query/src/App.tsx

@@ -179,7 +179,7 @@ function App() {
         Showing {table.getRowModel().rows.length.toLocaleString()} of{' '}
         {dataQuery.data?.rowCount.toLocaleString()} Rows
       </div>
-      <pre>{JSON.stringify(pagination(), null, 2)}</pre>
+      <pre>{JSON.stringify(table.state(), null, 2)}</pre>
     </div>
   )
 }

examples/svelte/basic-external-atoms/src/App.svelte

@@ -201,5 +201,5 @@
     </select>
   </div>
   <div class="spacer-md"></div>
-  <pre>{JSON.stringify({ sorting: sorting.current, pagination: pagination.current }, null, 2)}</pre>
+  <pre>{JSON.stringify(table.state, null, 2)}</pre>
 </div>

examples/svelte/basic-external-state/src/App.svelte

@@ -199,11 +199,5 @@
     </select>
   </div>
   <div class="spacer-md"></div>
-  <pre>
-    {JSON.stringify(
-      { sorting: sorting(), pagination: pagination() },
-      null,
-      2,
-    )}
-  </pre>
+  <pre>{JSON.stringify(table.state, null, 2)}</pre>
 </div>

examples/svelte/column-ordering/src/App.svelte

@@ -141,12 +141,6 @@
   </div>
   <div class="spacer-md"></div>
   <div class="button-row">
-    <button onclick={() => refreshData()} class="demo-button demo-button-sm">
-      Regenerate Data
-    </button>
-    <button onclick={() => stressTest()} class="demo-button demo-button-sm">
-      Stress Test (500k rows)
-    </button>
     <button onclick={() => randomizeColumns()} class="demo-button demo-button-sm">
       Shuffle Columns
     </button>
@@ -179,6 +173,6 @@
       {/each}
     </tbody>
   </table>
-  <pre>{JSON.stringify(table.state.columnOrder, null, 2)
+  <pre>{JSON.stringify(table.state, null, 2)
   }</pre>
 </div>

examples/svelte/column-pinning-split/src/App.svelte

@@ -130,12 +130,6 @@
   </div>
   <div class="spacer-md"></div>
   <div class="button-row">
-    <button onclick={() => refreshData()} class="demo-button demo-button-sm">
-      Regenerate Data
-    </button>
-    <button onclick={() => stressTest()} class="demo-button demo-button-sm">
-      Stress Test (500k rows)
-    </button>
     <button onclick={() => randomizeColumns()} class="demo-button demo-button-sm">
       Shuffle Columns
     </button>

examples/svelte/column-pinning-sticky/src/App.svelte

@@ -162,12 +162,6 @@
   </div>
   <div class="spacer-md"></div>
   <div class="button-row">
-    <button onclick={() => refreshData()} class="demo-button demo-button-sm">
-      Regenerate Data
-    </button>
-    <button onclick={() => stressTest()} class="demo-button demo-button-sm">
-      Stress Test (1k rows)
-    </button>
     <button onclick={() => randomizeColumns()} class="demo-button demo-button-sm">
       Shuffle Columns
     </button>

examples/svelte/column-pinning/src/App.svelte

@@ -203,12 +203,6 @@
   </div>
   <div class="spacer-md"></div>
   <div class="button-row">
-    <button onclick={() => refreshData()} class="demo-button demo-button-sm">
-      Regenerate Data
-    </button>
-    <button onclick={() => stressTest()} class="demo-button demo-button-sm">
-      Stress Test (500k rows)
-    </button>
     <button onclick={() => randomizeColumns()} class="demo-button demo-button-sm">
       Shuffle Columns
     </button>
@@ -303,5 +297,5 @@
     }
   </div>
   <br />
-  <pre>{JSON.stringify(table.state.columnPinning, null, 2)}</pre>
+  <pre>{JSON.stringify(table.state, null, 2)}</pre>
 </div>

examples/svelte/column-visibility/src/App.svelte

@@ -170,6 +170,6 @@
     </tfoot>
   </table>
   <div class="spacer-md"></div>
-  <pre>{JSON.stringify(table.state.columnVisibility, null, 2)
+  <pre>{JSON.stringify(table.state, null, 2)
   }</pre>
 </div>

examples/svelte/expanding/src/App.svelte

@@ -251,10 +251,6 @@
     </select>
   </div>
   <div>{table.getRowModel().rows.length.toLocaleString()} Rows</div>
-  <div>
-    <button onclick={() => refreshData()}>Regenerate Data</button>
-    <button onclick={() => stressTest()}>Stress Test (10k rows)</button>
-  </div>
   <pre>{JSON.stringify(table.state, null, 2)}</pre>
 </div>
 

examples/svelte/filters-fuzzy/src/App.svelte

@@ -249,9 +249,5 @@
     </select>
   </div>
   <div>{table.getPrePaginatedRowModel().rows.length.toLocaleString()} Rows</div>
-  <div>
-    <button onclick={() => refreshData()}>Regenerate Data</button>
-    <button onclick={() => stressTest()}>Stress Test (200k rows)</button>
-  </div>
   <pre>{JSON.stringify(table.state, null, 2)}</pre>
 </div>

examples/svelte/grouping/src/App.svelte

@@ -234,9 +234,5 @@
     </select>
   </div>
   <div>{table.getRowModel().rows.length.toLocaleString()} Rows</div>
-  <div>
-    <button onclick={() => refreshData()}>Regenerate Data</button>
-    <button onclick={() => stressTest()}>Stress Test (200k rows)</button>
-  </div>
   <pre>{JSON.stringify(table.state, null, 2)}</pre>
 </div>

examples/svelte/pagination/src/App.svelte

@@ -172,9 +172,5 @@
     {table.getRowCount().toLocaleString()} Rows
   </div>
   <hr />
-  <div>
-    <button onclick={() => refreshData()}>Regenerate Data</button>
-    <button onclick={() => stressTest()}>Stress Test (200k rows)</button>
-  </div>
   <pre>{JSON.stringify(table.state, null, 2)}</pre>
 </div>