From 6dcd4cbea4f5d55df46084c424696c6b16a2db88 Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Sat, 6 Jun 2026 10:00:23 +0200
Subject: [PATCH 01/10] chore: update examples to use table.store.get() instead
 of removed table.state

---
 .../angular/basic-external-atoms/src/app/app.ts  |  2 +-
 .../angular/basic-external-state/src/app/app.ts  |  2 +-
 examples/angular/column-groups/src/app/app.ts    |  2 +-
 examples/angular/column-ordering/src/app/app.ts  |  2 +-
 .../angular/column-pinning-split/src/app/app.ts  |  2 +-
 .../angular/column-pinning-sticky/src/app/app.ts |  2 +-
 examples/angular/column-pinning/src/app/app.ts   |  2 +-
 .../column-resizing-performant/src/app/app.ts    |  2 +-
 examples/angular/column-resizing/src/app/app.ts  |  2 +-
 examples/angular/column-sizing/src/app/app.ts    |  2 +-
 .../angular/column-visibility/src/app/app.ts     |  2 +-
 .../src/app/components/table-components.ts       |  6 +++---
 examples/angular/expanding/src/app/app.ts        |  2 +-
 examples/angular/filters-faceted/src/app/app.ts  |  2 +-
 examples/angular/filters-fuzzy/src/app/app.ts    |  2 +-
 examples/angular/filters/src/app/app.ts          |  2 +-
 examples/angular/grouping/src/app/app.ts         |  2 +-
 examples/angular/kitchen-sink/src/app/app.ts     |  2 +-
 examples/angular/pagination/src/app/app.ts       |  2 +-
 examples/angular/row-pinning/src/app/app.ts      |  2 +-
 .../src/app/app.component.ts                     |  2 +-
 examples/angular/row-selection/src/app/app.ts    |  2 +-
 examples/angular/sorting/src/app/app.ts          |  2 +-
 examples/angular/virtualized-rows/src/app/app.ts |  2 +-
 .../angular/with-tanstack-form/src/app/app.ts    |  2 +-
 .../angular/with-tanstack-query/src/app/app.ts   |  2 +-
 examples/solid/basic-external-atoms/src/App.tsx  |  2 +-
 examples/solid/basic-external-state/src/App.tsx  |  2 +-
 examples/solid/column-ordering/src/App.tsx       |  2 +-
 examples/solid/column-pinning-split/src/App.tsx  |  2 +-
 examples/solid/column-pinning-sticky/src/App.tsx |  2 +-
 examples/solid/column-pinning/src/App.tsx        |  2 +-
 .../solid/column-resizing-performant/src/App.tsx |  2 +-
 examples/solid/column-resizing/src/App.tsx       |  4 ++--
 examples/solid/column-sizing/src/App.tsx         |  4 ++--
 examples/solid/column-visibility/src/App.tsx     |  2 +-
 .../src/components/table-components.tsx          |  2 +-
 examples/solid/expanding/src/App.tsx             |  8 ++++----
 examples/solid/filters-faceted/src/App.tsx       | 10 +++++-----
 examples/solid/filters-fuzzy/src/App.tsx         | 14 +++++++-------
 examples/solid/filters/src/App.tsx               | 10 +++++-----
 examples/solid/grouping/src/App.tsx              |  8 ++++----
 examples/solid/kitchen-sink/src/App.tsx          | 16 ++++++++--------
 examples/solid/pagination/src/App.tsx            |  8 ++++----
 examples/solid/row-pinning/src/App.tsx           |  8 ++++----
 examples/solid/row-selection/src/App.tsx         | 12 ++++++------
 examples/solid/sorting/src/App.tsx               |  2 +-
 examples/solid/virtualized-rows/src/App.tsx      |  2 +-
 examples/solid/with-tanstack-form/src/App.tsx    |  6 +++---
 examples/solid/with-tanstack-query/src/App.tsx   |  2 +-
 .../src/components/table.tsx                     |  6 +++---
 examples/vue/basic-external-atoms/src/App.tsx    |  2 +-
 examples/vue/basic-external-state/src/App.tsx    |  8 ++++----
 examples/vue/column-ordering/src/App.vue         |  4 ++--
 examples/vue/column-pinning-split/src/App.vue    |  6 +++---
 examples/vue/column-pinning-sticky/src/App.vue   |  6 +++---
 examples/vue/column-pinning/src/App.vue          |  4 ++--
 .../vue/column-resizing-performant/src/App.vue   |  6 +++---
 examples/vue/column-resizing/src/App.vue         |  6 +++---
 examples/vue/column-sizing/src/App.vue           |  6 +++---
 examples/vue/column-visibility/src/App.tsx       |  2 +-
 examples/vue/expanding/src/App.tsx               |  8 ++++----
 examples/vue/filters-faceted/src/App.vue         |  6 +++---
 examples/vue/filters-fuzzy/src/App.vue           |  6 +++---
 examples/vue/filters/src/App.vue                 |  8 ++++----
 examples/vue/grouping/src/App.vue                |  6 +++---
 examples/vue/kitchen-sink/src/App.vue            | 16 ++++++++--------
 examples/vue/pagination/src/App.vue              |  6 +++---
 examples/vue/row-pinning/src/App.vue             |  6 +++---
 examples/vue/sorting/src/App.vue                 |  2 +-
 examples/vue/with-tanstack-form/src/App.vue      |  6 +++---
 examples/vue/with-tanstack-query/src/App.tsx     |  2 +-
 72 files changed, 158 insertions(+), 158 deletions(-)

diff --git a/examples/angular/basic-external-atoms/src/app/app.ts b/examples/angular/basic-external-atoms/src/app/app.ts
index 667723c55b..b092aee133 100644
--- a/examples/angular/basic-external-atoms/src/app/app.ts
+++ b/examples/angular/basic-external-atoms/src/app/app.ts
@@ -101,6 +101,6 @@ export class App {
   }
 
   stringifiedState() {
-    return JSON.stringify(this.table.state, null, 2)
+    return JSON.stringify(this.table.store.get(), null, 2)
   }
 }
diff --git a/examples/angular/basic-external-state/src/app/app.ts b/examples/angular/basic-external-state/src/app/app.ts
index 5f6eca2ede..b1b7e58923 100644
--- a/examples/angular/basic-external-state/src/app/app.ts
+++ b/examples/angular/basic-external-state/src/app/app.ts
@@ -93,7 +93,7 @@ export class App {
   }))
 
   stringifiedState() {
-    return JSON.stringify(this.table.state, null, 2)
+    return JSON.stringify(this.table.store.get(), null, 2)
   }
 
   refreshData() {
diff --git a/examples/angular/column-groups/src/app/app.ts b/examples/angular/column-groups/src/app/app.ts
index 5c2ff96aba..7c9addbb02 100644
--- a/examples/angular/column-groups/src/app/app.ts
+++ b/examples/angular/column-groups/src/app/app.ts
@@ -76,7 +76,7 @@ export class App {
   }))
 
   stringifiedState() {
-    return JSON.stringify(this.table.state, null, 2)
+    return JSON.stringify(this.table.store.get(), null, 2)
   }
 
   refreshData = () => this.data.set(makeData(20))
diff --git a/examples/angular/column-ordering/src/app/app.ts b/examples/angular/column-ordering/src/app/app.ts
index 6d8f96b153..ec90e23003 100644
--- a/examples/angular/column-ordering/src/app/app.ts
+++ b/examples/angular/column-ordering/src/app/app.ts
@@ -102,7 +102,7 @@ export class App {
   }))
 
   stringifiedState() {
-    return JSON.stringify(this.table.state, null, 2)
+    return JSON.stringify(this.table.store.get(), null, 2)
   }
 
   randomizeColumns() {
diff --git a/examples/angular/column-pinning-split/src/app/app.ts b/examples/angular/column-pinning-split/src/app/app.ts
index 1dc47ca067..d10003799d 100644
--- a/examples/angular/column-pinning-split/src/app/app.ts
+++ b/examples/angular/column-pinning-split/src/app/app.ts
@@ -70,7 +70,7 @@ export class App {
     this.table.getRowModel().rows.slice(0, 20),
   )
   readonly stringifiedState = computed(() =>
-    JSON.stringify(this.table.state, null, 2),
+    JSON.stringify(this.table.store.get(), null, 2),
   )
 
   refreshData = () => this.data.set(makeData(20))
diff --git a/examples/angular/column-pinning-sticky/src/app/app.ts b/examples/angular/column-pinning-sticky/src/app/app.ts
index 6b7eb378f3..8af14e6301 100644
--- a/examples/angular/column-pinning-sticky/src/app/app.ts
+++ b/examples/angular/column-pinning-sticky/src/app/app.ts
@@ -98,7 +98,7 @@ export class App {
   }))
 
   stringifiedState() {
-    return JSON.stringify(this.table.state, null, 2)
+    return JSON.stringify(this.table.store.get(), null, 2)
   }
 
   readonly getCommonPinningStyles = (
diff --git a/examples/angular/column-pinning/src/app/app.ts b/examples/angular/column-pinning/src/app/app.ts
index 640ad1044d..d5e1f2c59e 100644
--- a/examples/angular/column-pinning/src/app/app.ts
+++ b/examples/angular/column-pinning/src/app/app.ts
@@ -122,7 +122,7 @@ export class App {
   }))
 
   stringifiedState() {
-    return JSON.stringify(this.table.state, null, 2)
+    return JSON.stringify(this.table.store.get(), null, 2)
   }
 
   randomizeColumns() {
diff --git a/examples/angular/column-resizing-performant/src/app/app.ts b/examples/angular/column-resizing-performant/src/app/app.ts
index 2b8e54fda2..3c2e2711c2 100644
--- a/examples/angular/column-resizing-performant/src/app/app.ts
+++ b/examples/angular/column-resizing-performant/src/app/app.ts
@@ -112,7 +112,7 @@ export class App {
   })
 
   readonly stringifiedState = computed(() =>
-    JSON.stringify(this.table.state, null, 2),
+    JSON.stringify(this.table.store.get(), null, 2),
   )
 
   refreshData = () => this.data.set(makeData(200))
diff --git a/examples/angular/column-resizing/src/app/app.ts b/examples/angular/column-resizing/src/app/app.ts
index e2fe1f27f3..8ff73c18cf 100644
--- a/examples/angular/column-resizing/src/app/app.ts
+++ b/examples/angular/column-resizing/src/app/app.ts
@@ -94,7 +94,7 @@ export class App {
   }))
 
   stringifiedState() {
-    return JSON.stringify(this.table.state, null, 2)
+    return JSON.stringify(this.table.store.get(), null, 2)
   }
 
   setResizeMode(event: Event) {
diff --git a/examples/angular/column-sizing/src/app/app.ts b/examples/angular/column-sizing/src/app/app.ts
index 24f6f98572..985aef5162 100644
--- a/examples/angular/column-sizing/src/app/app.ts
+++ b/examples/angular/column-sizing/src/app/app.ts
@@ -71,7 +71,7 @@ export class App {
   }))
 
   stringifiedState() {
-    return JSON.stringify(this.table.state, null, 2)
+    return JSON.stringify(this.table.store.get(), null, 2)
   }
 
   refreshData = () => this.data.set(makeData(20))
diff --git a/examples/angular/column-visibility/src/app/app.ts b/examples/angular/column-visibility/src/app/app.ts
index 9647f8ac90..f100afb888 100644
--- a/examples/angular/column-visibility/src/app/app.ts
+++ b/examples/angular/column-visibility/src/app/app.ts
@@ -95,7 +95,7 @@ export class App {
   }))
 
   stringifiedState() {
-    return JSON.stringify(this.table.state, null, 2)
+    return JSON.stringify(this.table.store.get(), null, 2)
   }
 
   refreshData = () => this.data.set(makeData(20))
diff --git a/examples/angular/composable-tables/src/app/components/table-components.ts b/examples/angular/composable-tables/src/app/components/table-components.ts
index bc6bf88d75..5d7798d45e 100644
--- a/examples/angular/composable-tables/src/app/components/table-components.ts
+++ b/examples/angular/composable-tables/src/app/components/table-components.ts
@@ -78,7 +78,7 @@ export class RowCount {
       <span>
         Page
         <strong>
-          {{ (table().state.pagination.pageIndex + 1).toLocaleString() }} of
+          {{ (table().store.get().pagination.pageIndex + 1).toLocaleString() }} of
           {{ pageCount() }}
         </strong>
       </span>
@@ -88,12 +88,12 @@ export class RowCount {
           type="number"
           min="1"
           [max]="table().getPageCount()"
-          [value]="table().state.pagination.pageIndex + 1"
+          [value]="table().store.get().pagination.pageIndex + 1"
           (change)="onPageChange($event)"
         />
       </span>
       <select
-        [value]="table().state.pagination.pageSize"
+        [value]="table().store.get().pagination.pageSize"
         (change)="onPageSizeChange($event)"
       >
         @for (size of pageSizes; track size) {
diff --git a/examples/angular/expanding/src/app/app.ts b/examples/angular/expanding/src/app/app.ts
index 63beb1ca64..7345b4e88a 100644
--- a/examples/angular/expanding/src/app/app.ts
+++ b/examples/angular/expanding/src/app/app.ts
@@ -97,7 +97,7 @@ export class App {
   }))
 
   stringifiedState() {
-    return JSON.stringify(this.table.state, null, 2)
+    return JSON.stringify(this.table.store.get(), null, 2)
   }
 
   onPageInputChange(event: Event): void {
diff --git a/examples/angular/filters-faceted/src/app/app.ts b/examples/angular/filters-faceted/src/app/app.ts
index bc46eadcb2..fd2e986a01 100644
--- a/examples/angular/filters-faceted/src/app/app.ts
+++ b/examples/angular/filters-faceted/src/app/app.ts
@@ -100,7 +100,7 @@ export class App {
   }))
 
   stringifiedState() {
-    return JSON.stringify(this.table.state, null, 2)
+    return JSON.stringify(this.table.store.get(), null, 2)
   }
 
   onPageInputChange(event: Event): void {
diff --git a/examples/angular/filters-fuzzy/src/app/app.ts b/examples/angular/filters-fuzzy/src/app/app.ts
index 80e2b92809..ba249fed29 100644
--- a/examples/angular/filters-fuzzy/src/app/app.ts
+++ b/examples/angular/filters-fuzzy/src/app/app.ts
@@ -105,7 +105,7 @@ export class App {
   }))
 
   stringifiedState() {
-    return JSON.stringify(this.table.state, null, 2)
+    return JSON.stringify(this.table.store.get(), null, 2)
   }
   refreshData = () => this.data.set(makeData(1_000))
   stressTest = () => this.data.set(makeData(50_000))
diff --git a/examples/angular/filters/src/app/app.ts b/examples/angular/filters/src/app/app.ts
index 138a10b489..21e983cd2a 100644
--- a/examples/angular/filters/src/app/app.ts
+++ b/examples/angular/filters/src/app/app.ts
@@ -92,7 +92,7 @@ export class App {
   }))
 
   stringifiedState() {
-    return JSON.stringify(this.table.state, null, 2)
+    return JSON.stringify(this.table.store.get(), null, 2)
   }
 
   onPageInputChange(event: Event): void {
diff --git a/examples/angular/grouping/src/app/app.ts b/examples/angular/grouping/src/app/app.ts
index b59198dd24..20231a6bc3 100644
--- a/examples/angular/grouping/src/app/app.ts
+++ b/examples/angular/grouping/src/app/app.ts
@@ -34,7 +34,7 @@ export class App {
   }))
 
   stringifiedState() {
-    return JSON.stringify(this.table.state, null, 2)
+    return JSON.stringify(this.table.store.get(), null, 2)
   }
 
   onPageInputChange(event: any): void {
diff --git a/examples/angular/kitchen-sink/src/app/app.ts b/examples/angular/kitchen-sink/src/app/app.ts
index a46ba8b083..2f388084b9 100644
--- a/examples/angular/kitchen-sink/src/app/app.ts
+++ b/examples/angular/kitchen-sink/src/app/app.ts
@@ -223,7 +223,7 @@ export class App {
   })
 
   stringifiedState() {
-    return JSON.stringify(this.table.state, null, 2)
+    return JSON.stringify(this.table.store.get(), null, 2)
   }
 
   pageIndex() {
diff --git a/examples/angular/pagination/src/app/app.ts b/examples/angular/pagination/src/app/app.ts
index 615e6238d2..c8762495f4 100644
--- a/examples/angular/pagination/src/app/app.ts
+++ b/examples/angular/pagination/src/app/app.ts
@@ -84,7 +84,7 @@ export class App {
   }))
 
   stringifiedState() {
-    return JSON.stringify(this.table.state, null, 2)
+    return JSON.stringify(this.table.store.get(), null, 2)
   }
 
   refreshData = () => this.data.set(makeData(100_000))
diff --git a/examples/angular/row-pinning/src/app/app.ts b/examples/angular/row-pinning/src/app/app.ts
index 8d5b3a9e17..affa0940ff 100644
--- a/examples/angular/row-pinning/src/app/app.ts
+++ b/examples/angular/row-pinning/src/app/app.ts
@@ -93,7 +93,7 @@ export class App {
   }))
 
   stringifiedState() {
-    return JSON.stringify(this.table.state, null, 2)
+    return JSON.stringify(this.table.store.get(), null, 2)
   }
   refreshData = () => this.data.set(makeData(1_000, 2, 2))
   stressTest = () => this.data.set(makeData(200_000, 2, 2))
diff --git a/examples/angular/row-selection-signal/src/app/app.component.ts b/examples/angular/row-selection-signal/src/app/app.component.ts
index 833d4ee0e7..cbd9340378 100644
--- a/examples/angular/row-selection-signal/src/app/app.component.ts
+++ b/examples/angular/row-selection-signal/src/app/app.component.ts
@@ -139,7 +139,7 @@ export class AppComponent {
   }))
 
   stringifiedState() {
-    return JSON.stringify(this.table.state, null, 2)
+    return JSON.stringify(this.table.store.get(), null, 2)
   }
 
   readonly rowSelectionLength = computed(
diff --git a/examples/angular/row-selection/src/app/app.ts b/examples/angular/row-selection/src/app/app.ts
index e9516f2fef..9f190be5de 100644
--- a/examples/angular/row-selection/src/app/app.ts
+++ b/examples/angular/row-selection/src/app/app.ts
@@ -123,7 +123,7 @@ export class App {
   }))
 
   stringifiedState() {
-    return JSON.stringify(this.table.state, null, 2)
+    return JSON.stringify(this.table.store.get(), null, 2)
   }
 
   readonly rowSelectionLength = computed(
diff --git a/examples/angular/sorting/src/app/app.ts b/examples/angular/sorting/src/app/app.ts
index cbf1466fb3..b85d3d8961 100644
--- a/examples/angular/sorting/src/app/app.ts
+++ b/examples/angular/sorting/src/app/app.ts
@@ -64,7 +64,7 @@ export class App {
   }))
 
   stringifiedState() {
-    return JSON.stringify(this.table.state, null, 2)
+    return JSON.stringify(this.table.store.get(), null, 2)
   }
 
   refreshData = () => this.data.set(makeData(1_000))
diff --git a/examples/angular/virtualized-rows/src/app/app.ts b/examples/angular/virtualized-rows/src/app/app.ts
index 84b84fc9e4..837977b7f9 100644
--- a/examples/angular/virtualized-rows/src/app/app.ts
+++ b/examples/angular/virtualized-rows/src/app/app.ts
@@ -103,7 +103,7 @@ export class App {
   readonly totalSize = computed(() => this.rowVirtualizer.getTotalSize())
 
   stringifiedState() {
-    return JSON.stringify(this.table.state, null, 2)
+    return JSON.stringify(this.table.store.get(), null, 2)
   }
 
   refreshData = () => this.data.set(makeData(200_000))
diff --git a/examples/angular/with-tanstack-form/src/app/app.ts b/examples/angular/with-tanstack-form/src/app/app.ts
index bea61ef31e..e0beb17dd3 100644
--- a/examples/angular/with-tanstack-form/src/app/app.ts
+++ b/examples/angular/with-tanstack-form/src/app/app.ts
@@ -75,7 +75,7 @@ export class App {
     z.array(personSchema).safeParse(this.data()),
   )
   stringifiedState() {
-    return JSON.stringify(this.table.state, null, 2)
+    return JSON.stringify(this.table.store.get(), null, 2)
   }
 
   update(rowIndex: number, key: keyof Person, event: Event) {
diff --git a/examples/angular/with-tanstack-query/src/app/app.ts b/examples/angular/with-tanstack-query/src/app/app.ts
index cdba1afe60..fc93bf530a 100644
--- a/examples/angular/with-tanstack-query/src/app/app.ts
+++ b/examples/angular/with-tanstack-query/src/app/app.ts
@@ -65,7 +65,7 @@ export class App {
   }))
 
   stringifiedState() {
-    return JSON.stringify(this.table.state, null, 2)
+    return JSON.stringify(this.table.store.get(), null, 2)
   }
 
   rerender = () => this.pagination.update((pagination) => ({ ...pagination }))
diff --git a/examples/solid/basic-external-atoms/src/App.tsx b/examples/solid/basic-external-atoms/src/App.tsx
index 01e472a30f..31f6e60d74 100644
--- a/examples/solid/basic-external-atoms/src/App.tsx
+++ b/examples/solid/basic-external-atoms/src/App.tsx
@@ -205,7 +205,7 @@ function App() {
         </select>
       </div>
       <div class="spacer-md" />
-      <pre>{JSON.stringify(table.state(), null, 2)}</pre>
+      <pre>{JSON.stringify(table.store.get(), null, 2)}</pre>
     </div>
   )
 }
diff --git a/examples/solid/basic-external-state/src/App.tsx b/examples/solid/basic-external-state/src/App.tsx
index 6d122dcdd1..078fa23a28 100644
--- a/examples/solid/basic-external-state/src/App.tsx
+++ b/examples/solid/basic-external-state/src/App.tsx
@@ -204,7 +204,7 @@ function App() {
         </select>
       </div>
       <div class="spacer-md" />
-      <pre>{JSON.stringify(table.state(), null, 2)}</pre>
+      <pre>{JSON.stringify(table.store.get(), null, 2)}</pre>
     </div>
   )
 }
diff --git a/examples/solid/column-ordering/src/App.tsx b/examples/solid/column-ordering/src/App.tsx
index 7ab3fb794a..1060a1627f 100644
--- a/examples/solid/column-ordering/src/App.tsx
+++ b/examples/solid/column-ordering/src/App.tsx
@@ -187,7 +187,7 @@ function App() {
         </tfoot>
       </table>
       <div class="spacer-md" />
-      <pre>{JSON.stringify(table.state(), null, 2)}</pre>
+      <pre>{JSON.stringify(table.store.get(), null, 2)}</pre>
     </div>
   )
 }
diff --git a/examples/solid/column-pinning-split/src/App.tsx b/examples/solid/column-pinning-split/src/App.tsx
index 2dfacb6f8e..a3254737a5 100644
--- a/examples/solid/column-pinning-split/src/App.tsx
+++ b/examples/solid/column-pinning-split/src/App.tsx
@@ -285,7 +285,7 @@ function App() {
           </tbody>
         </table>
       </div>
-      <pre>{JSON.stringify(table.state(), null, 2)}</pre>
+      <pre>{JSON.stringify(table.store.get(), null, 2)}</pre>
     </div>
   )
 }
diff --git a/examples/solid/column-pinning-sticky/src/App.tsx b/examples/solid/column-pinning-sticky/src/App.tsx
index 69db4f503a..fc79f7b162 100644
--- a/examples/solid/column-pinning-sticky/src/App.tsx
+++ b/examples/solid/column-pinning-sticky/src/App.tsx
@@ -254,7 +254,7 @@ function App() {
           </tbody>
         </table>
       </div>
-      <pre>{JSON.stringify(table.state(), null, 2)}</pre>
+      <pre>{JSON.stringify(table.store.get(), null, 2)}</pre>
     </div>
   )
 }
diff --git a/examples/solid/column-pinning/src/App.tsx b/examples/solid/column-pinning/src/App.tsx
index bd481054a7..de5a38ad82 100644
--- a/examples/solid/column-pinning/src/App.tsx
+++ b/examples/solid/column-pinning/src/App.tsx
@@ -205,7 +205,7 @@ function App() {
           </tbody>
         </table>
       </div>
-      <pre>{JSON.stringify(table.state(), null, 2)}</pre>
+      <pre>{JSON.stringify(table.store.get(), null, 2)}</pre>
     </div>
   )
 }
diff --git a/examples/solid/column-resizing-performant/src/App.tsx b/examples/solid/column-resizing-performant/src/App.tsx
index 3824caf31b..0b2c493fb7 100644
--- a/examples/solid/column-resizing-performant/src/App.tsx
+++ b/examples/solid/column-resizing-performant/src/App.tsx
@@ -102,7 +102,7 @@ function App() {
       </i>
       <div class="spacer-md" />
       <pre style={{ 'min-height': '10rem' }}>
-        {JSON.stringify(table.state(), null, 2)}
+        {JSON.stringify(table.store.get(), null, 2)}
       </pre>
       <div class="spacer-md" />({data().length.toLocaleString()} rows)
       <div class="scroll-container">
diff --git a/examples/solid/column-resizing/src/App.tsx b/examples/solid/column-resizing/src/App.tsx
index 7cad8c0ddc..59815b1c55 100644
--- a/examples/solid/column-resizing/src/App.tsx
+++ b/examples/solid/column-resizing/src/App.tsx
@@ -97,7 +97,7 @@ function App() {
     header: ReturnType<typeof table.getHeaderGroups>[number]['headers'][number],
   ) => {
     if (columnResizeMode() === 'onEnd' && header.column.getIsResizing()) {
-      const delta = table.state().columnResizing.deltaOffset ?? 0
+      const delta = table.store.get().columnResizing.deltaOffset ?? 0
       const dir = table.options.columnResizeDirection === 'rtl' ? -1 : 1
       return `translateX(${dir * delta}px)`
     }
@@ -293,7 +293,7 @@ function App() {
         </div>
       </div>
       <div class="spacer-md" />
-      <pre>{JSON.stringify(table.state(), null, 2)}</pre>
+      <pre>{JSON.stringify(table.store.get(), null, 2)}</pre>
     </div>
   )
 }
diff --git a/examples/solid/column-sizing/src/App.tsx b/examples/solid/column-sizing/src/App.tsx
index 6737ad90a5..6f674c0e60 100644
--- a/examples/solid/column-sizing/src/App.tsx
+++ b/examples/solid/column-sizing/src/App.tsx
@@ -87,7 +87,7 @@ function App() {
                   value={column.getSize()}
                   onInput={(e) => {
                     table.setColumnSizing({
-                      ...table.state().columnSizing,
+                      ...table.store.get().columnSizing,
                       [column.id]: Number(e.currentTarget.value),
                     })
                   }}
@@ -244,7 +244,7 @@ function App() {
         </div>
       </div>
       <div class="spacer-md" />
-      <pre>{JSON.stringify(table.state(), null, 2)}</pre>
+      <pre>{JSON.stringify(table.store.get(), null, 2)}</pre>
     </div>
   )
 }
diff --git a/examples/solid/column-visibility/src/App.tsx b/examples/solid/column-visibility/src/App.tsx
index 7bd660f923..fddfc9adf6 100644
--- a/examples/solid/column-visibility/src/App.tsx
+++ b/examples/solid/column-visibility/src/App.tsx
@@ -163,7 +163,7 @@ function App() {
         </tfoot>
       </table>
       <div class="spacer-md" />
-      <pre>{JSON.stringify(table.state(), null, 2)}</pre>
+      <pre>{JSON.stringify(table.store.get(), null, 2)}</pre>
     </div>
   )
 }
diff --git a/examples/solid/composable-tables/src/components/table-components.tsx b/examples/solid/composable-tables/src/components/table-components.tsx
index 4e562dfc0f..0edd4f3ca9 100644
--- a/examples/solid/composable-tables/src/components/table-components.tsx
+++ b/examples/solid/composable-tables/src/components/table-components.tsx
@@ -13,7 +13,7 @@ import { useTableContext } from '../hooks/table'
 export function PaginationControls() {
   const table = useTableContext()
 
-  const pagination = createMemo(() => table.state().pagination)
+  const pagination = createMemo(() => table.store.get().pagination)
 
   return (
     <div class="pagination">
diff --git a/examples/solid/expanding/src/App.tsx b/examples/solid/expanding/src/App.tsx
index 317c6fe97e..1ea283f803 100644
--- a/examples/solid/expanding/src/App.tsx
+++ b/examples/solid/expanding/src/App.tsx
@@ -195,7 +195,7 @@ function App() {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {(table.state().pagination.pageIndex + 1).toLocaleString()} of{' '}
+            {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
             {table.getPageCount().toLocaleString()}
           </strong>
         </span>
@@ -205,7 +205,7 @@ function App() {
             type="number"
             min="1"
             max={table.getPageCount()}
-            value={table.state().pagination.pageIndex + 1}
+            value={table.store.get().pagination.pageIndex + 1}
             onInput={(e) => {
               const page = e.currentTarget.value
                 ? Number(e.currentTarget.value) - 1
@@ -216,7 +216,7 @@ function App() {
           />
         </span>
         <select
-          value={table.state().pagination.pageSize}
+          value={table.store.get().pagination.pageSize}
           onChange={(e) => {
             table.setPageSize(Number(e.currentTarget.value))
           }}
@@ -227,7 +227,7 @@ function App() {
         </select>
       </div>
       <div>{table.getRowModel().rows.length.toLocaleString()} Rows</div>
-      <pre>{JSON.stringify(table.state(), null, 2)}</pre>
+      <pre>{JSON.stringify(table.store.get(), null, 2)}</pre>
     </div>
   )
 }
diff --git a/examples/solid/filters-faceted/src/App.tsx b/examples/solid/filters-faceted/src/App.tsx
index 983a7791d6..2b6a57aa4d 100644
--- a/examples/solid/filters-faceted/src/App.tsx
+++ b/examples/solid/filters-faceted/src/App.tsx
@@ -116,7 +116,7 @@ function App() {
       </div>
       <input
         class="summary-panel"
-        value={table.state().globalFilter ?? ''}
+        value={table.store.get().globalFilter ?? ''}
         onInput={(e) =>
           globalFilterDebouncer.maybeExecute(e.currentTarget.value)
         }
@@ -200,7 +200,7 @@ function App() {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {(table.state().pagination.pageIndex + 1).toLocaleString()} of{' '}
+            {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
             {table.getPageCount().toLocaleString()}
           </strong>
         </span>
@@ -210,7 +210,7 @@ function App() {
             type="number"
             min="1"
             max={table.getPageCount()}
-            value={table.state().pagination.pageIndex + 1}
+            value={table.store.get().pagination.pageIndex + 1}
             onInput={(e) => {
               const page = e.currentTarget.value
                 ? Number(e.currentTarget.value) - 1
@@ -221,7 +221,7 @@ function App() {
           />
         </span>
         <select
-          value={table.state().pagination.pageSize}
+          value={table.store.get().pagination.pageSize}
           onChange={(e) => {
             table.setPageSize(Number(e.currentTarget.value))
           }}
@@ -235,7 +235,7 @@ function App() {
         Showing {table.getRowModel().rows.length.toLocaleString()} of{' '}
         {table.getPrePaginatedRowModel().rows.length.toLocaleString()} Rows
       </div>
-      <pre>{JSON.stringify(table.state(), null, 2)}</pre>
+      <pre>{JSON.stringify(table.store.get(), null, 2)}</pre>
     </div>
   )
 }
diff --git a/examples/solid/filters-fuzzy/src/App.tsx b/examples/solid/filters-fuzzy/src/App.tsx
index d6f4c97e34..b839365a86 100644
--- a/examples/solid/filters-fuzzy/src/App.tsx
+++ b/examples/solid/filters-fuzzy/src/App.tsx
@@ -110,8 +110,8 @@ function App() {
   })
 
   createEffect(() => {
-    if (table.state().columnFilters[0]?.id === 'fullName') {
-      if (table.state().sorting[0]?.id !== 'fullName') {
+    if (table.store.get().columnFilters[0]?.id === 'fullName') {
+      if (table.store.get().sorting[0]?.id !== 'fullName') {
         table.setSorting([{ id: 'fullName', desc: false }])
       }
     }
@@ -125,7 +125,7 @@ function App() {
       </div>
       <div>
         <DebouncedInput
-          value={(table.state().globalFilter ?? '') as string}
+          value={(table.store.get().globalFilter ?? '') as string}
           onChange={(value) => table.setGlobalFilter(String(value))}
           class="summary-panel"
           placeholder="Search all columns..."
@@ -221,7 +221,7 @@ function App() {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {(table.state().pagination.pageIndex + 1).toLocaleString()} of{' '}
+            {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
             {table.getPageCount().toLocaleString()}
           </strong>
         </span>
@@ -229,7 +229,7 @@ function App() {
           | Go to page:
           <input
             type="number"
-            value={table.state().pagination.pageIndex + 1}
+            value={table.store.get().pagination.pageIndex + 1}
             onInput={(e) => {
               const page = e.currentTarget.value
                 ? Number(e.currentTarget.value) - 1
@@ -240,7 +240,7 @@ function App() {
           />
         </span>
         <select
-          value={table.state().pagination.pageSize}
+          value={table.store.get().pagination.pageSize}
           onChange={(e) => table.setPageSize(Number(e.currentTarget.value))}
         >
           <For each={[10, 20, 30, 40, 50]}>
@@ -251,7 +251,7 @@ function App() {
       <div>
         {table.getPrePaginatedRowModel().rows.length.toLocaleString()} Rows
       </div>
-      <pre>{JSON.stringify(table.state(), null, 2)}</pre>
+      <pre>{JSON.stringify(table.store.get(), null, 2)}</pre>
     </div>
   )
 }
diff --git a/examples/solid/filters/src/App.tsx b/examples/solid/filters/src/App.tsx
index 97604e6642..d36dbf309d 100644
--- a/examples/solid/filters/src/App.tsx
+++ b/examples/solid/filters/src/App.tsx
@@ -119,7 +119,7 @@ function App() {
       </div>
       <input
         class="summary-panel"
-        value={table.state().globalFilter ?? ''}
+        value={table.store.get().globalFilter ?? ''}
         onInput={(e) =>
           globalFilterDebouncer.maybeExecute(e.currentTarget.value)
         }
@@ -203,7 +203,7 @@ function App() {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {(table.state().pagination.pageIndex + 1).toLocaleString()} of{' '}
+            {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
             {table.getPageCount().toLocaleString()}
           </strong>
         </span>
@@ -213,7 +213,7 @@ function App() {
             type="number"
             min="1"
             max={table.getPageCount()}
-            value={table.state().pagination.pageIndex + 1}
+            value={table.store.get().pagination.pageIndex + 1}
             onInput={(e) => {
               const page = e.currentTarget.value
                 ? Number(e.currentTarget.value) - 1
@@ -224,7 +224,7 @@ function App() {
           />
         </span>
         <select
-          value={table.state().pagination.pageSize}
+          value={table.store.get().pagination.pageSize}
           onChange={(e) => {
             table.setPageSize(Number(e.currentTarget.value))
           }}
@@ -238,7 +238,7 @@ function App() {
         Showing {table.getRowModel().rows.length.toLocaleString()} of{' '}
         {table.getPrePaginatedRowModel().rows.length.toLocaleString()} Rows
       </div>
-      <pre>{JSON.stringify(table.state(), null, 2)}</pre>
+      <pre>{JSON.stringify(table.store.get(), null, 2)}</pre>
     </div>
   )
 }
diff --git a/examples/solid/grouping/src/App.tsx b/examples/solid/grouping/src/App.tsx
index 900c96ba77..bb99f04e33 100644
--- a/examples/solid/grouping/src/App.tsx
+++ b/examples/solid/grouping/src/App.tsx
@@ -204,7 +204,7 @@ function App() {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {(table.state().pagination.pageIndex + 1).toLocaleString()} of{' '}
+            {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
             {table.getPageCount().toLocaleString()}
           </strong>
         </span>
@@ -214,7 +214,7 @@ function App() {
             type="number"
             min="1"
             max={table.getPageCount()}
-            value={table.state().pagination.pageIndex + 1}
+            value={table.store.get().pagination.pageIndex + 1}
             onInput={(e) => {
               const page = e.currentTarget.value
                 ? Number(e.currentTarget.value) - 1
@@ -225,7 +225,7 @@ function App() {
           />
         </span>
         <select
-          value={table.state().pagination.pageSize}
+          value={table.store.get().pagination.pageSize}
           onChange={(e) => table.setPageSize(Number(e.currentTarget.value))}
         >
           <For each={[10, 20, 30, 40, 50]}>
@@ -234,7 +234,7 @@ function App() {
         </select>
       </div>
       <div>{table.getRowModel().rows.length.toLocaleString()} Rows</div>
-      <pre>{JSON.stringify(table.state(), null, 2)}</pre>
+      <pre>{JSON.stringify(table.store.get(), null, 2)}</pre>
     </div>
   )
 }
diff --git a/examples/solid/kitchen-sink/src/App.tsx b/examples/solid/kitchen-sink/src/App.tsx
index 3f865c7980..ee8be44c37 100644
--- a/examples/solid/kitchen-sink/src/App.tsx
+++ b/examples/solid/kitchen-sink/src/App.tsx
@@ -356,7 +356,7 @@ function TableCell(props: {
   table: AppTable
 }) {
   const className = () => {
-    const groupingActive = props.table.state().grouping.length > 0
+    const groupingActive = props.table.store.get().grouping.length > 0
     const hasAggregation = !!props.cell.column.columnDef.aggregationFn
     return !groupingActive
       ? undefined
@@ -555,8 +555,8 @@ function App() {
   useTanStackTableDevtools(table)
 
   const columnSizeVars = createMemo(() => {
-    void table.state().columnResizing
-    void table.state().columnSizing
+    void table.store.get().columnResizing
+    void table.store.get().columnSizing
     const colSizes: Record<string, number> = {}
     for (const header of table.getFlatHeaders()) {
       colSizes[`--header-${header.id}-size`] = header.getSize()
@@ -581,7 +581,7 @@ function App() {
       <div class="toolbar">
         <div class="toolbar-row">
           <DebouncedInput
-            value={(table.state().globalFilter ?? '') as string}
+            value={(table.store.get().globalFilter ?? '') as string}
             onChange={(value) => table.setGlobalFilter(String(value))}
             class="global-filter-input"
             placeholder="Fuzzy search all columns..."
@@ -718,7 +718,7 @@ function App() {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {(table.state().pagination.pageIndex + 1).toLocaleString()} of{' '}
+            {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
             {table.getPageCount().toLocaleString()}
           </strong>
         </span>
@@ -728,7 +728,7 @@ function App() {
             type="number"
             min="1"
             max={table.getPageCount()}
-            value={table.state().pagination.pageIndex + 1}
+            value={table.store.get().pagination.pageIndex + 1}
             onInput={(e) => {
               const page = e.currentTarget.value
                 ? Number(e.currentTarget.value) - 1
@@ -739,7 +739,7 @@ function App() {
           />
         </span>
         <select
-          value={table.state().pagination.pageSize}
+          value={table.store.get().pagination.pageSize}
           onChange={(e) => table.setPageSize(Number(e.currentTarget.value))}
         >
           <For each={[10, 20, 30, 50, 100]}>
@@ -756,7 +756,7 @@ function App() {
       <div class="spacer-md" />
       <details>
         <summary>Table state (live)</summary>
-        <pre class="state-dump">{JSON.stringify(table.state(), null, 2)}</pre>
+        <pre class="state-dump">{JSON.stringify(table.store.get(), null, 2)}</pre>
       </details>
     </div>
   )
diff --git a/examples/solid/pagination/src/App.tsx b/examples/solid/pagination/src/App.tsx
index a6e37faeac..d8b1fedca4 100644
--- a/examples/solid/pagination/src/App.tsx
+++ b/examples/solid/pagination/src/App.tsx
@@ -146,7 +146,7 @@ function MyTable(props: {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {(table.state().pagination.pageIndex + 1).toLocaleString()} of{' '}
+            {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
             {table.getPageCount().toLocaleString()}
           </strong>
         </span>
@@ -156,7 +156,7 @@ function MyTable(props: {
             type="number"
             min="1"
             max={table.getPageCount()}
-            value={table.state().pagination.pageIndex + 1}
+            value={table.store.get().pagination.pageIndex + 1}
             onInput={(e) => {
               const page = e.currentTarget.value
                 ? Number(e.currentTarget.value) - 1
@@ -167,7 +167,7 @@ function MyTable(props: {
           />
         </span>
         <select
-          value={table.state().pagination.pageSize}
+          value={table.store.get().pagination.pageSize}
           onChange={(e) => {
             table.setPageSize(Number(e.currentTarget.value))
           }}
@@ -181,7 +181,7 @@ function MyTable(props: {
         Showing {table.getRowModel().rows.length.toLocaleString()} of{' '}
         {table.getRowCount().toLocaleString()} Rows
       </div>
-      <pre>{JSON.stringify(table.state(), null, 2)}</pre>
+      <pre>{JSON.stringify(table.store.get(), null, 2)}</pre>
     </div>
   )
 }
diff --git a/examples/solid/row-pinning/src/App.tsx b/examples/solid/row-pinning/src/App.tsx
index 73b0e4c0a2..732239f677 100644
--- a/examples/solid/row-pinning/src/App.tsx
+++ b/examples/solid/row-pinning/src/App.tsx
@@ -250,7 +250,7 @@ function App() {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {(table.state().pagination.pageIndex + 1).toLocaleString()} of{' '}
+            {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
             {table.getPageCount().toLocaleString()}
           </strong>
         </span>
@@ -260,7 +260,7 @@ function App() {
             type="number"
             min="1"
             max={table.getPageCount()}
-            value={table.state().pagination.pageIndex + 1}
+            value={table.store.get().pagination.pageIndex + 1}
             onInput={(e) => {
               const page = e.currentTarget.value
                 ? Number(e.currentTarget.value) - 1
@@ -271,7 +271,7 @@ function App() {
           />
         </span>
         <select
-          value={table.state().pagination.pageSize}
+          value={table.store.get().pagination.pageSize}
           onChange={(e) => table.setPageSize(Number(e.currentTarget.value))}
         >
           <For each={[10, 20, 30, 40, 50]}>
@@ -324,7 +324,7 @@ function App() {
           </label>
         </div>
       </div>
-      <pre>{JSON.stringify(table.state(), null, 2)}</pre>
+      <pre>{JSON.stringify(table.store.get(), null, 2)}</pre>
     </div>
   )
 }
diff --git a/examples/solid/row-selection/src/App.tsx b/examples/solid/row-selection/src/App.tsx
index 27011d0479..62d2bc3b6f 100644
--- a/examples/solid/row-selection/src/App.tsx
+++ b/examples/solid/row-selection/src/App.tsx
@@ -140,7 +140,7 @@ function App() {
       </div>
       <div>
         <input
-          value={table.state().globalFilter ?? ''}
+          value={table.store.get().globalFilter ?? ''}
           onInput={(e) => table.setGlobalFilter(e.target.value)}
           class="summary-panel"
           placeholder="Search all columns..."
@@ -235,7 +235,7 @@ function App() {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {(table.state().pagination.pageIndex + 1).toLocaleString()} of{' '}
+            {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
             {table.getPageCount().toLocaleString()}
           </strong>
         </span>
@@ -245,7 +245,7 @@ function App() {
             type="number"
             min="1"
             max={table.getPageCount()}
-            value={table.state().pagination.pageIndex + 1}
+            value={table.store.get().pagination.pageIndex + 1}
             onInput={(e) => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0
               table.setPageIndex(page)
@@ -254,7 +254,7 @@ function App() {
           />
         </span>
         <select
-          value={table.state().pagination.pageSize}
+          value={table.store.get().pagination.pageSize}
           onChange={(e) => {
             table.setPageSize(Number(e.target.value))
           }}
@@ -266,7 +266,7 @@ function App() {
       </div>
       <br />
       <div>
-        {Object.keys(table.state().rowSelection).length.toLocaleString()} of{' '}
+        {Object.keys(table.store.get().rowSelection).length.toLocaleString()} of{' '}
         {table.getPreFilteredRowModel().rows.length.toLocaleString()} Total Rows
         Selected
       </div>
@@ -293,7 +293,7 @@ function App() {
       </div>
       <div>
         <label>Row Selection State:</label>
-        <pre>{JSON.stringify(table.state(), null, 2)}</pre>
+        <pre>{JSON.stringify(table.store.get(), null, 2)}</pre>
       </div>
     </div>
   )
diff --git a/examples/solid/sorting/src/App.tsx b/examples/solid/sorting/src/App.tsx
index 3847132bb9..d8b2e6dde4 100644
--- a/examples/solid/sorting/src/App.tsx
+++ b/examples/solid/sorting/src/App.tsx
@@ -136,7 +136,7 @@ function App() {
         </tbody>
       </table>
       <div>{table.getRowModel().rows.length.toLocaleString()} Rows</div>
-      <pre>{JSON.stringify(table.state(), null, 2)}</pre>
+      <pre>{JSON.stringify(table.store.get(), null, 2)}</pre>
     </div>
   )
 }
diff --git a/examples/solid/virtualized-rows/src/App.tsx b/examples/solid/virtualized-rows/src/App.tsx
index 2b22337d47..d65177eca8 100644
--- a/examples/solid/virtualized-rows/src/App.tsx
+++ b/examples/solid/virtualized-rows/src/App.tsx
@@ -87,7 +87,7 @@ function App() {
         ({data().length.toLocaleString()} rows)
         <VirtualizedTable table={table} />
       </div>
-      <pre>{JSON.stringify(table.state(), null, 2)}</pre>
+      <pre>{JSON.stringify(table.store.get(), null, 2)}</pre>
     </>
   )
 }
diff --git a/examples/solid/with-tanstack-form/src/App.tsx b/examples/solid/with-tanstack-form/src/App.tsx
index 1d38933678..36dc7fca3d 100644
--- a/examples/solid/with-tanstack-form/src/App.tsx
+++ b/examples/solid/with-tanstack-form/src/App.tsx
@@ -307,7 +307,7 @@ function App() {
             <span class="inline-controls">
               <div>Page</div>
               <strong>
-                {(table.state().pagination.pageIndex + 1).toLocaleString()} of{' '}
+                {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
                 {table.getPageCount().toLocaleString()}
               </strong>
             </span>
@@ -317,7 +317,7 @@ function App() {
                 type="number"
                 min="1"
                 max={table.getPageCount()}
-                value={table.state().pagination.pageIndex + 1}
+                value={table.store.get().pagination.pageIndex + 1}
                 onInput={(e) => {
                   const page = e.currentTarget.value
                     ? Number(e.currentTarget.value) - 1
@@ -328,7 +328,7 @@ function App() {
               />
             </span>
             <select
-              value={table.state().pagination.pageSize}
+              value={table.store.get().pagination.pageSize}
               onChange={(e) => {
                 table.setPageSize(Number(e.currentTarget.value))
               }}
diff --git a/examples/solid/with-tanstack-query/src/App.tsx b/examples/solid/with-tanstack-query/src/App.tsx
index 6c62534ceb..ca02736802 100644
--- a/examples/solid/with-tanstack-query/src/App.tsx
+++ b/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(table.state(), null, 2)}</pre>
+      <pre>{JSON.stringify(table.store.get(), null, 2)}</pre>
     </div>
   )
 }
diff --git a/examples/solid/with-tanstack-router/src/components/table.tsx b/examples/solid/with-tanstack-router/src/components/table.tsx
index c9b6785f8c..c1a7af62ff 100644
--- a/examples/solid/with-tanstack-router/src/components/table.tsx
+++ b/examples/solid/with-tanstack-router/src/components/table.tsx
@@ -195,7 +195,7 @@ export default function Table<T extends Record<string, string | number>>(
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {(table.state().pagination.pageIndex + 1).toLocaleString()} of{' '}
+            {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
             {table.getPageCount().toLocaleString()}
           </strong>
         </span>
@@ -203,7 +203,7 @@ export default function Table<T extends Record<string, string | number>>(
           | Go to page:
           <input
             type="number"
-            value={table.state().pagination.pageIndex + 1}
+            value={table.store.get().pagination.pageIndex + 1}
             onInput={(e) => {
               const page = e.currentTarget.value
                 ? Number(e.currentTarget.value) - 1
@@ -214,7 +214,7 @@ export default function Table<T extends Record<string, string | number>>(
           />
         </span>
         <select
-          value={table.state().pagination.pageSize}
+          value={table.store.get().pagination.pageSize}
           onChange={(e) => {
             table.setPageSize(Number(e.currentTarget.value))
           }}
diff --git a/examples/vue/basic-external-atoms/src/App.tsx b/examples/vue/basic-external-atoms/src/App.tsx
index 88d54ae6ec..8608cbe20a 100644
--- a/examples/vue/basic-external-atoms/src/App.tsx
+++ b/examples/vue/basic-external-atoms/src/App.tsx
@@ -219,7 +219,7 @@ export default defineComponent({
           </select>
         </div>
         <div class="spacer-md" />
-        <pre>{JSON.stringify(table.state, null, 2)}</pre>
+        <pre>{JSON.stringify(table.store.get(), null, 2)}</pre>
       </div>
     )
   },
diff --git a/examples/vue/basic-external-state/src/App.tsx b/examples/vue/basic-external-state/src/App.tsx
index 650e418f79..976e8aa9d1 100644
--- a/examples/vue/basic-external-state/src/App.tsx
+++ b/examples/vue/basic-external-state/src/App.tsx
@@ -205,7 +205,7 @@ export default defineComponent({
           <span class="inline-controls">
             <div>Page</div>
             <strong>
-              {(table.state.pagination.pageIndex + 1).toLocaleString()} of{' '}
+              {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
               {table.getPageCount().toLocaleString()}
             </strong>
           </span>
@@ -215,7 +215,7 @@ export default defineComponent({
               type="number"
               min="1"
               max={table.getPageCount()}
-              value={table.state.pagination.pageIndex + 1}
+              value={table.store.get().pagination.pageIndex + 1}
               onInput={(event: Event) => {
                 const target = event.currentTarget as HTMLInputElement
                 const page = target.value ? Number(target.value) - 1 : 0
@@ -225,7 +225,7 @@ export default defineComponent({
             />
           </span>
           <select
-            value={table.state.pagination.pageSize}
+            value={table.store.get().pagination.pageSize}
             onChange={(event: Event) => {
               const target = event.currentTarget as HTMLSelectElement
               table.setPageSize(Number(target.value))
@@ -239,7 +239,7 @@ export default defineComponent({
           </select>
         </div>
         <div class="spacer-md" />
-        <pre>{JSON.stringify(table.state, null, 2)}</pre>
+        <pre>{JSON.stringify(table.store.get(), null, 2)}</pre>
       </div>
     )
   },
diff --git a/examples/vue/column-ordering/src/App.vue b/examples/vue/column-ordering/src/App.vue
index f55bd611f3..fa4a61823a 100644
--- a/examples/vue/column-ordering/src/App.vue
+++ b/examples/vue/column-ordering/src/App.vue
@@ -107,7 +107,7 @@ const randomizeColumns = () => {
 
 function toggleColumnVisibility(column: Column<typeof features, Person>) {
   table.setColumnVisibility({
-    ...table.state.columnVisibility,
+    ...table.store.get().columnVisibility,
     [column.id]: !column.getIsVisible(),
   })
 }
@@ -201,7 +201,7 @@ function toggleAllColumnsVisibility() {
         </tr>
       </tfoot>
     </table>
-    <pre>{{ JSON.stringify(table.state.columnOrder, null, 2) }}</pre>
+    <pre>{{ JSON.stringify(table.store.get().columnOrder, null, 2) }}</pre>
   </div>
 </template>
 
diff --git a/examples/vue/column-pinning-split/src/App.vue b/examples/vue/column-pinning-split/src/App.vue
index badf4048ae..706ff561af 100644
--- a/examples/vue/column-pinning-split/src/App.vue
+++ b/examples/vue/column-pinning-split/src/App.vue
@@ -184,7 +184,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.state.pagination.pageIndex + 1).toLocaleString() }} of
+            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
         </span>
@@ -198,7 +198,7 @@ function handlePageSizeChange(e: any) {
           />
         </span>
         <select
-          :value="table.state.pagination.pageSize"
+          :value="table.store.get().pagination.pageSize"
           @change="handlePageSizeChange"
         >
           <option
@@ -211,7 +211,7 @@ function handlePageSizeChange(e: any) {
         </select>
       </div>
       <div>{{ table.getRowModel().rows.length.toLocaleString() }} Rows</div>
-      <pre>{{ JSON.stringify(table.state.pagination, null, 2) }}</pre>
+      <pre>{{ JSON.stringify(table.store.get().pagination, null, 2) }}</pre>
     </div>
     <div class="spacer-sm" />
   </div>
diff --git a/examples/vue/column-pinning-sticky/src/App.vue b/examples/vue/column-pinning-sticky/src/App.vue
index badf4048ae..706ff561af 100644
--- a/examples/vue/column-pinning-sticky/src/App.vue
+++ b/examples/vue/column-pinning-sticky/src/App.vue
@@ -184,7 +184,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.state.pagination.pageIndex + 1).toLocaleString() }} of
+            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
         </span>
@@ -198,7 +198,7 @@ function handlePageSizeChange(e: any) {
           />
         </span>
         <select
-          :value="table.state.pagination.pageSize"
+          :value="table.store.get().pagination.pageSize"
           @change="handlePageSizeChange"
         >
           <option
@@ -211,7 +211,7 @@ function handlePageSizeChange(e: any) {
         </select>
       </div>
       <div>{{ table.getRowModel().rows.length.toLocaleString() }} Rows</div>
-      <pre>{{ JSON.stringify(table.state.pagination, null, 2) }}</pre>
+      <pre>{{ JSON.stringify(table.store.get().pagination, null, 2) }}</pre>
     </div>
     <div class="spacer-sm" />
   </div>
diff --git a/examples/vue/column-pinning/src/App.vue b/examples/vue/column-pinning/src/App.vue
index 8a930151d1..7f8e657728 100644
--- a/examples/vue/column-pinning/src/App.vue
+++ b/examples/vue/column-pinning/src/App.vue
@@ -112,7 +112,7 @@ const randomizeColumns = () => {
 
 function toggleColumnVisibility(column: Column<typeof features, Person>) {
   table.setColumnVisibility({
-    ...table.state.columnVisibility,
+    ...table.store.get().columnVisibility,
     [column.id]: !column.getIsVisible(),
   })
 }
@@ -348,7 +348,7 @@ function toggleAllColumnsVisibility() {
         </tbody>
       </table>
     </div>
-    <pre>{{ JSON.stringify(table.state.columnOrder, null, 2) }}</pre>
+    <pre>{{ JSON.stringify(table.store.get().columnOrder, null, 2) }}</pre>
   </div>
 </template>
 
diff --git a/examples/vue/column-resizing-performant/src/App.vue b/examples/vue/column-resizing-performant/src/App.vue
index eb77fa8a94..687474dd11 100644
--- a/examples/vue/column-resizing-performant/src/App.vue
+++ b/examples/vue/column-resizing-performant/src/App.vue
@@ -184,7 +184,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.state.pagination.pageIndex + 1).toLocaleString() }} of
+            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
         </span>
@@ -198,7 +198,7 @@ function handlePageSizeChange(e: any) {
           />
         </span>
         <select
-          :value="table.state.pagination.pageSize"
+          :value="table.store.get().pagination.pageSize"
           @change="handlePageSizeChange"
         >
           <option
@@ -211,7 +211,7 @@ function handlePageSizeChange(e: any) {
         </select>
       </div>
       <div>{{ table.getRowModel().rows.length.toLocaleString() }} Rows</div>
-      <pre>{{ JSON.stringify(table.state.pagination, null, 2) }}</pre>
+      <pre>{{ JSON.stringify(table.store.get().pagination, null, 2) }}</pre>
     </div>
     <div class="spacer-sm" />
   </div>
diff --git a/examples/vue/column-resizing/src/App.vue b/examples/vue/column-resizing/src/App.vue
index badf4048ae..706ff561af 100644
--- a/examples/vue/column-resizing/src/App.vue
+++ b/examples/vue/column-resizing/src/App.vue
@@ -184,7 +184,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.state.pagination.pageIndex + 1).toLocaleString() }} of
+            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
         </span>
@@ -198,7 +198,7 @@ function handlePageSizeChange(e: any) {
           />
         </span>
         <select
-          :value="table.state.pagination.pageSize"
+          :value="table.store.get().pagination.pageSize"
           @change="handlePageSizeChange"
         >
           <option
@@ -211,7 +211,7 @@ function handlePageSizeChange(e: any) {
         </select>
       </div>
       <div>{{ table.getRowModel().rows.length.toLocaleString() }} Rows</div>
-      <pre>{{ JSON.stringify(table.state.pagination, null, 2) }}</pre>
+      <pre>{{ JSON.stringify(table.store.get().pagination, null, 2) }}</pre>
     </div>
     <div class="spacer-sm" />
   </div>
diff --git a/examples/vue/column-sizing/src/App.vue b/examples/vue/column-sizing/src/App.vue
index badf4048ae..706ff561af 100644
--- a/examples/vue/column-sizing/src/App.vue
+++ b/examples/vue/column-sizing/src/App.vue
@@ -184,7 +184,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.state.pagination.pageIndex + 1).toLocaleString() }} of
+            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
         </span>
@@ -198,7 +198,7 @@ function handlePageSizeChange(e: any) {
           />
         </span>
         <select
-          :value="table.state.pagination.pageSize"
+          :value="table.store.get().pagination.pageSize"
           @change="handlePageSizeChange"
         >
           <option
@@ -211,7 +211,7 @@ function handlePageSizeChange(e: any) {
         </select>
       </div>
       <div>{{ table.getRowModel().rows.length.toLocaleString() }} Rows</div>
-      <pre>{{ JSON.stringify(table.state.pagination, null, 2) }}</pre>
+      <pre>{{ JSON.stringify(table.store.get().pagination, null, 2) }}</pre>
     </div>
     <div class="spacer-sm" />
   </div>
diff --git a/examples/vue/column-visibility/src/App.tsx b/examples/vue/column-visibility/src/App.tsx
index 9415ef2223..259cc01e7f 100644
--- a/examples/vue/column-visibility/src/App.tsx
+++ b/examples/vue/column-visibility/src/App.tsx
@@ -182,7 +182,7 @@ export default defineComponent({
           </tfoot>
         </table>
         <div class="spacer-md" />
-        <pre>{JSON.stringify(table.state, null, 2)}</pre>
+        <pre>{JSON.stringify(table.store.get(), null, 2)}</pre>
       </div>
     )
   },
diff --git a/examples/vue/expanding/src/App.tsx b/examples/vue/expanding/src/App.tsx
index 0036eb652c..88ebf47281 100644
--- a/examples/vue/expanding/src/App.tsx
+++ b/examples/vue/expanding/src/App.tsx
@@ -294,7 +294,7 @@ export default defineComponent({
           <span class="inline-controls">
             <div>Page</div>
             <strong>
-              {(table.state.pagination.pageIndex + 1).toLocaleString()} of{' '}
+              {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
               {table.getPageCount().toLocaleString()}
             </strong>
           </span>
@@ -304,7 +304,7 @@ export default defineComponent({
               type="number"
               min="1"
               max={table.getPageCount()}
-              value={table.state.pagination.pageIndex + 1}
+              value={table.store.get().pagination.pageIndex + 1}
               onInput={(event: Event) => {
                 const target = event.currentTarget as HTMLInputElement
                 const page = target.value ? Number(target.value) - 1 : 0
@@ -314,7 +314,7 @@ export default defineComponent({
             />
           </span>
           <select
-            value={table.state.pagination.pageSize}
+            value={table.store.get().pagination.pageSize}
             onChange={(event: Event) => {
               const target = event.currentTarget as HTMLSelectElement
               table.setPageSize(Number(target.value))
@@ -328,7 +328,7 @@ export default defineComponent({
           </select>
         </div>
         <div>{table.getRowModel().rows.length.toLocaleString()} Rows</div>
-        <pre>{JSON.stringify(table.state, null, 2)}</pre>
+        <pre>{JSON.stringify(table.store.get(), null, 2)}</pre>
       </div>
     )
   },
diff --git a/examples/vue/filters-faceted/src/App.vue b/examples/vue/filters-faceted/src/App.vue
index badf4048ae..706ff561af 100644
--- a/examples/vue/filters-faceted/src/App.vue
+++ b/examples/vue/filters-faceted/src/App.vue
@@ -184,7 +184,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.state.pagination.pageIndex + 1).toLocaleString() }} of
+            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
         </span>
@@ -198,7 +198,7 @@ function handlePageSizeChange(e: any) {
           />
         </span>
         <select
-          :value="table.state.pagination.pageSize"
+          :value="table.store.get().pagination.pageSize"
           @change="handlePageSizeChange"
         >
           <option
@@ -211,7 +211,7 @@ function handlePageSizeChange(e: any) {
         </select>
       </div>
       <div>{{ table.getRowModel().rows.length.toLocaleString() }} Rows</div>
-      <pre>{{ JSON.stringify(table.state.pagination, null, 2) }}</pre>
+      <pre>{{ JSON.stringify(table.store.get().pagination, null, 2) }}</pre>
     </div>
     <div class="spacer-sm" />
   </div>
diff --git a/examples/vue/filters-fuzzy/src/App.vue b/examples/vue/filters-fuzzy/src/App.vue
index badf4048ae..706ff561af 100644
--- a/examples/vue/filters-fuzzy/src/App.vue
+++ b/examples/vue/filters-fuzzy/src/App.vue
@@ -184,7 +184,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.state.pagination.pageIndex + 1).toLocaleString() }} of
+            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
         </span>
@@ -198,7 +198,7 @@ function handlePageSizeChange(e: any) {
           />
         </span>
         <select
-          :value="table.state.pagination.pageSize"
+          :value="table.store.get().pagination.pageSize"
           @change="handlePageSizeChange"
         >
           <option
@@ -211,7 +211,7 @@ function handlePageSizeChange(e: any) {
         </select>
       </div>
       <div>{{ table.getRowModel().rows.length.toLocaleString() }} Rows</div>
-      <pre>{{ JSON.stringify(table.state.pagination, null, 2) }}</pre>
+      <pre>{{ JSON.stringify(table.store.get().pagination, null, 2) }}</pre>
     </div>
     <div class="spacer-sm" />
   </div>
diff --git a/examples/vue/filters/src/App.vue b/examples/vue/filters/src/App.vue
index c23b51b498..f625d96a24 100644
--- a/examples/vue/filters/src/App.vue
+++ b/examples/vue/filters/src/App.vue
@@ -107,7 +107,7 @@ function handlePageSizeChange(e: any) {
     <div class="spacer-md" />
     <div>
       <DebouncedInput
-        :modelValue="table.state.globalFilter ?? ''"
+        :modelValue="table.store.get().globalFilter ?? ''"
         @update:modelValue="(value) => table.setGlobalFilter(String(value))"
         className="summary-panel"
         placeholder="Search all columns..."
@@ -197,7 +197,7 @@ function handlePageSizeChange(e: any) {
       <span class="inline-controls">
         <div>Page</div>
         <strong>
-          {{ (table.state.pagination.pageIndex + 1).toLocaleString() }} of
+          {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
           {{ table.getPageCount().toLocaleString() }}
         </strong>
       </span>
@@ -211,7 +211,7 @@ function handlePageSizeChange(e: any) {
         />
       </span>
       <select
-        :value="table.state.pagination.pageSize"
+        :value="table.store.get().pagination.pageSize"
         @change="handlePageSizeChange"
       >
         <option :key="pageSize" :value="pageSize" v-for="pageSize in pageSizes">
@@ -222,7 +222,7 @@ function handlePageSizeChange(e: any) {
     <div>
       {{ table.getPrePaginatedRowModel().rows.length.toLocaleString() }} Rows
     </div>
-    <pre>{{ JSON.stringify(table.state, null, 2) }}</pre>
+    <pre>{{ JSON.stringify(table.store.get(), null, 2) }}</pre>
     <div class="spacer-md" />
   </div>
 </template>
diff --git a/examples/vue/grouping/src/App.vue b/examples/vue/grouping/src/App.vue
index badf4048ae..706ff561af 100644
--- a/examples/vue/grouping/src/App.vue
+++ b/examples/vue/grouping/src/App.vue
@@ -184,7 +184,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.state.pagination.pageIndex + 1).toLocaleString() }} of
+            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
         </span>
@@ -198,7 +198,7 @@ function handlePageSizeChange(e: any) {
           />
         </span>
         <select
-          :value="table.state.pagination.pageSize"
+          :value="table.store.get().pagination.pageSize"
           @change="handlePageSizeChange"
         >
           <option
@@ -211,7 +211,7 @@ function handlePageSizeChange(e: any) {
         </select>
       </div>
       <div>{{ table.getRowModel().rows.length.toLocaleString() }} Rows</div>
-      <pre>{{ JSON.stringify(table.state.pagination, null, 2) }}</pre>
+      <pre>{{ JSON.stringify(table.store.get().pagination, null, 2) }}</pre>
     </div>
     <div class="spacer-sm" />
   </div>
diff --git a/examples/vue/kitchen-sink/src/App.vue b/examples/vue/kitchen-sink/src/App.vue
index af5f1b4442..c1d66d5ebe 100644
--- a/examples/vue/kitchen-sink/src/App.vue
+++ b/examples/vue/kitchen-sink/src/App.vue
@@ -200,8 +200,8 @@ const table = useTable(
 useTanStackTableDevtools(table)
 
 const columnSizeVars = computed(() => {
-  void table.state.columnResizing
-  void table.state.columnSizing
+  void table.store.get().columnResizing
+  void table.store.get().columnSizing
   const colSizes: Record<string, number> = {}
   for (const header of table.getFlatHeaders()) {
     colSizes[`--header-${header.id}-size`] = header.getSize()
@@ -264,7 +264,7 @@ function cellStyle(cell: Cell<typeof stockFeatures, Person, unknown>) {
 }
 
 function cellClass(cell: Cell<typeof stockFeatures, Person, unknown>) {
-  const groupingActive = table.state.grouping.length > 0
+  const groupingActive = table.store.get().grouping.length > 0
   const hasAggregation = !!cell.column.columnDef.aggregationFn
   return !groupingActive
     ? undefined
@@ -341,7 +341,7 @@ function shuffleColumns() {
         <input
           class="global-filter-input"
           placeholder="Fuzzy search all columns..."
-          :value="table.state.globalFilter ?? ''"
+          :value="table.store.get().globalFilter ?? ''"
           @input="
             (event) =>
               debounceSet('global', () =>
@@ -738,7 +738,7 @@ function shuffleColumns() {
       <span class="inline-controls">
         <div>Page</div>
         <strong>
-          {{ (table.state.pagination.pageIndex + 1).toLocaleString() }} of
+          {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
           {{ table.getPageCount().toLocaleString() }}
         </strong>
       </span>
@@ -748,7 +748,7 @@ function shuffleColumns() {
           type="number"
           min="1"
           :max="table.getPageCount()"
-          :value="table.state.pagination.pageIndex + 1"
+          :value="table.store.get().pagination.pageIndex + 1"
           @input="
             table.setPageIndex(
               ($event.target as HTMLInputElement).value
@@ -760,7 +760,7 @@ function shuffleColumns() {
         />
       </span>
       <select
-        :value="table.state.pagination.pageSize"
+        :value="table.store.get().pagination.pageSize"
         @change="
           table.setPageSize(Number(($event.target as HTMLSelectElement).value))
         "
@@ -783,7 +783,7 @@ function shuffleColumns() {
     <div class="spacer-md" />
     <details>
       <summary>Table state (live)</summary>
-      <pre class="state-dump">{{ JSON.stringify(table.state, null, 2) }}</pre>
+      <pre class="state-dump">{{ JSON.stringify(table.store.get(), null, 2) }}</pre>
     </details>
   </div>
 </template>
diff --git a/examples/vue/pagination/src/App.vue b/examples/vue/pagination/src/App.vue
index badf4048ae..706ff561af 100644
--- a/examples/vue/pagination/src/App.vue
+++ b/examples/vue/pagination/src/App.vue
@@ -184,7 +184,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.state.pagination.pageIndex + 1).toLocaleString() }} of
+            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
         </span>
@@ -198,7 +198,7 @@ function handlePageSizeChange(e: any) {
           />
         </span>
         <select
-          :value="table.state.pagination.pageSize"
+          :value="table.store.get().pagination.pageSize"
           @change="handlePageSizeChange"
         >
           <option
@@ -211,7 +211,7 @@ function handlePageSizeChange(e: any) {
         </select>
       </div>
       <div>{{ table.getRowModel().rows.length.toLocaleString() }} Rows</div>
-      <pre>{{ JSON.stringify(table.state.pagination, null, 2) }}</pre>
+      <pre>{{ JSON.stringify(table.store.get().pagination, null, 2) }}</pre>
     </div>
     <div class="spacer-sm" />
   </div>
diff --git a/examples/vue/row-pinning/src/App.vue b/examples/vue/row-pinning/src/App.vue
index badf4048ae..706ff561af 100644
--- a/examples/vue/row-pinning/src/App.vue
+++ b/examples/vue/row-pinning/src/App.vue
@@ -184,7 +184,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.state.pagination.pageIndex + 1).toLocaleString() }} of
+            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
         </span>
@@ -198,7 +198,7 @@ function handlePageSizeChange(e: any) {
           />
         </span>
         <select
-          :value="table.state.pagination.pageSize"
+          :value="table.store.get().pagination.pageSize"
           @change="handlePageSizeChange"
         >
           <option
@@ -211,7 +211,7 @@ function handlePageSizeChange(e: any) {
         </select>
       </div>
       <div>{{ table.getRowModel().rows.length.toLocaleString() }} Rows</div>
-      <pre>{{ JSON.stringify(table.state.pagination, null, 2) }}</pre>
+      <pre>{{ JSON.stringify(table.store.get().pagination, null, 2) }}</pre>
     </div>
     <div class="spacer-sm" />
   </div>
diff --git a/examples/vue/sorting/src/App.vue b/examples/vue/sorting/src/App.vue
index 1e995da354..44c955c421 100644
--- a/examples/vue/sorting/src/App.vue
+++ b/examples/vue/sorting/src/App.vue
@@ -134,7 +134,7 @@ const table = useTable(
 
     <div>{{ table.getRowModel().rows.length.toLocaleString() }} Rows</div>
 
-    <pre>{{ JSON.stringify(table.state.sorting, null, 2) }}</pre>
+    <pre>{{ JSON.stringify(table.store.get().sorting, null, 2) }}</pre>
   </div>
 </template>
 
diff --git a/examples/vue/with-tanstack-form/src/App.vue b/examples/vue/with-tanstack-form/src/App.vue
index badf4048ae..706ff561af 100644
--- a/examples/vue/with-tanstack-form/src/App.vue
+++ b/examples/vue/with-tanstack-form/src/App.vue
@@ -184,7 +184,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.state.pagination.pageIndex + 1).toLocaleString() }} of
+            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
         </span>
@@ -198,7 +198,7 @@ function handlePageSizeChange(e: any) {
           />
         </span>
         <select
-          :value="table.state.pagination.pageSize"
+          :value="table.store.get().pagination.pageSize"
           @change="handlePageSizeChange"
         >
           <option
@@ -211,7 +211,7 @@ function handlePageSizeChange(e: any) {
         </select>
       </div>
       <div>{{ table.getRowModel().rows.length.toLocaleString() }} Rows</div>
-      <pre>{{ JSON.stringify(table.state.pagination, null, 2) }}</pre>
+      <pre>{{ JSON.stringify(table.store.get().pagination, null, 2) }}</pre>
     </div>
     <div class="spacer-sm" />
   </div>
diff --git a/examples/vue/with-tanstack-query/src/App.tsx b/examples/vue/with-tanstack-query/src/App.tsx
index 333152e2d7..5f74bbbeb9 100644
--- a/examples/vue/with-tanstack-query/src/App.tsx
+++ b/examples/vue/with-tanstack-query/src/App.tsx
@@ -192,7 +192,7 @@ export default defineComponent({
           Showing {table.getRowModel().rows.length.toLocaleString()} of{' '}
           {dataQuery.data.value?.rowCount.toLocaleString()} Rows
         </div>
-        <pre>{JSON.stringify(table.state, null, 2)}</pre>
+        <pre>{JSON.stringify(table.store.get(), null, 2)}</pre>
       </div>
     )
   },

From 663abeba0b550616bd3107abbf4d3cc847f359de Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Sat, 6 Jun 2026 10:20:12 +0200
Subject: [PATCH 02/10] feat: refactor solid/vue native reactivity adapter

---
 packages/angular-table/src/injectTable.ts     |  72 +---
 .../tests/angularReactivityFeature.test.ts    |  28 +-
 packages/solid-table/package.json             |   4 +-
 packages/solid-table/src/createTable.ts       |  99 +-----
 packages/solid-table/src/createTableHook.tsx  | 326 +++---------------
 packages/solid-table/src/reactivity.ts        |   6 +-
 .../solid-table/tests/unit/reactivity.test.ts |  49 ++-
 packages/vue-table/package.json               |   4 +-
 packages/vue-table/src/createTableHook.ts     |  90 +----
 packages/vue-table/src/reactivity.ts          |  55 +--
 packages/vue-table/src/useTable.ts            | 112 +-----
 packages/vue-table/tests/unit/signals.test.ts |  47 ++-
 pnpm-lock.yaml                                |  47 +--
 13 files changed, 237 insertions(+), 702 deletions(-)

diff --git a/packages/angular-table/src/injectTable.ts b/packages/angular-table/src/injectTable.ts
index 7803f2be20..1818d0da58 100644
--- a/packages/angular-table/src/injectTable.ts
+++ b/packages/angular-table/src/injectTable.ts
@@ -15,7 +15,6 @@ import type {
   Table,
   TableFeatures,
   TableOptions,
-  TableState,
 } from '@tanstack/table-core'
 import type {
   Atom,
@@ -36,66 +35,11 @@ export type AngularTable<
 > = Table<TFeatures, TData> & {
   /**
    * @deprecated Prefer `table.atoms.<slice>.get()` for template/render reads
-   * of a specific state slice, `table.state` for full-state debug snapshots, or
-   * Angular computed values around explicit selectors. `table.store.state` is a
-   * current-value snapshot and is easy to misuse in render code.
+   * of a specific state slice, or Angular computed values around explicit
+   * selectors. `table.store.state` is a current-value snapshot and is easy to
+   * misuse in render code.
    */
   readonly store: Table<TFeatures, TData>['store']
-  /**
-   * The current table state exposed as a flat proxy. Prefer
-   * `table.atoms.<slice>.get()` when reading a specific slice.
-   */
-  readonly state: Readonly<TableState<TFeatures>>
-}
-
-function createStateProxy<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
->(table: Table<TFeatures, TData>): Readonly<TableState<TFeatures>> {
-  const getSnapshot = () => {
-    const snapshot = {} as TableState<TFeatures>
-    const stateKeys = Object.keys(table.initialState) as Array<
-      keyof TableState<TFeatures>
-    >
-
-    for (const key of stateKeys) {
-      snapshot[key] = table.atoms[key].get()
-    }
-
-    return snapshot
-  }
-
-  const target = {} as TableState<TFeatures>
-
-  return new Proxy(target, {
-    get(target, prop, receiver) {
-      if (prop === 'toJSON') {
-        return getSnapshot
-      }
-
-      if (typeof prop === 'string' && prop in table.initialState) {
-        return table.atoms[prop as keyof TableState<TFeatures>]?.get()
-      }
-
-      return Reflect.get(target, prop, receiver)
-    },
-    has(_, prop) {
-      return typeof prop === 'string' && prop in table.initialState
-    },
-    ownKeys() {
-      return Reflect.ownKeys(table.initialState)
-    },
-    getOwnPropertyDescriptor(_, prop) {
-      if (typeof prop !== 'string' || !(prop in table.initialState)) {
-        return undefined
-      }
-
-      return {
-        enumerable: true,
-        configurable: true,
-      }
-    },
-  })
 }
 
 /**
@@ -178,16 +122,6 @@ export function injectTable<
         table._reactivity.unmount?.()
       })
 
-      const stateProxy = createStateProxy(table)
-
-      Object.defineProperty(table, 'state', {
-        get() {
-          return stateProxy
-        },
-        configurable: true,
-        enumerable: true,
-      })
-
       let isMount = true
       effect(
         () => {
diff --git a/packages/angular-table/tests/angularReactivityFeature.test.ts b/packages/angular-table/tests/angularReactivityFeature.test.ts
index e1a3b1851d..44e8f4d307 100644
--- a/packages/angular-table/tests/angularReactivityFeature.test.ts
+++ b/packages/angular-table/tests/angularReactivityFeature.test.ts
@@ -125,7 +125,7 @@ describe('angularReactivityFeature', () => {
           isSelectedRow1Captor(table.getRow('1').getIsSelected())
         })
         effect(() => {
-          tableStateCaptor(table.state.rowSelection)
+          tableStateCaptor(table.atoms.rowSelection.get())
         })
       })
 
@@ -149,7 +149,7 @@ describe('angularReactivityFeature', () => {
       TestBed.runInInjectionContext(() => {
         effect((onCleanup) => {
           const subscription = table.store.subscribe(() => {
-            tableStateCaptor(table.state)
+            tableStateCaptor(table.store.get())
           })
 
           onCleanup(() => subscription.unsubscribe())
@@ -176,7 +176,7 @@ describe('angularReactivityFeature', () => {
 
       TestBed.runInInjectionContext(() => {
         effect(() => {
-          tableStateCaptor(table.state.rowSelection)
+          tableStateCaptor(table.atoms.rowSelection.get())
         })
       })
 
@@ -212,8 +212,10 @@ describe('angularReactivityFeature', () => {
         })),
       )
 
-      expect(table.state.pagination.pageSize).toBe(20)
-      expect(JSON.stringify(table.state, null, 2)).toContain('"pageSize": 20')
+      expect(table.atoms.pagination.get().pageSize).toBe(20)
+      expect(JSON.stringify(table.store.get(), null, 2)).toContain(
+        '"pageSize": 20',
+      )
     })
 
     test('table state reacts to internal table state updates', () => {
@@ -236,10 +238,10 @@ describe('angularReactivityFeature', () => {
 
       TestBed.runInInjectionContext(() => {
         effect(() => {
-          pageSizeCaptor(table.state.pagination.pageSize)
+          pageSizeCaptor(table.atoms.pagination.get().pageSize)
         })
         effect(() => {
-          stateJsonCaptor(JSON.stringify(table.state, null, 2))
+          stateJsonCaptor(JSON.stringify(table.store.get(), null, 2))
         })
       })
 
@@ -275,10 +277,10 @@ describe('angularReactivityFeature', () => {
 
       TestBed.runInInjectionContext(() => {
         effect(() => {
-          pageSizeCaptor(table.state.pagination.pageSize)
+          pageSizeCaptor(table.atoms.pagination.get().pageSize)
         })
         effect(() => {
-          stateJsonCaptor(JSON.stringify(table.state, null, 2))
+          stateJsonCaptor(JSON.stringify(table.store.get(), null, 2))
         })
       })
 
@@ -313,19 +315,19 @@ describe('angularReactivityFeature', () => {
 
       TestBed.runInInjectionContext(() => {
         effect(() => {
-          stateJsonCaptor(JSON.stringify(table.state, null, 2))
+          stateJsonCaptor(JSON.stringify(table.store.get(), null, 2))
         })
       })
 
       TestBed.tick()
-      expect(table.state.pagination.pageSize).toBe(20)
-      expect(table.state.columnOrder).toEqual(['id', 'title'])
+      expect(table.atoms.pagination.get().pageSize).toBe(20)
+      expect(table.atoms.columnOrder.get()).toEqual(['id', 'title'])
       expect(stateJsonCaptor.mock.calls.at(-1)?.[0]).toContain('"pageSize": 20')
 
       table.setPageSize(50)
       TestBed.tick()
 
-      expect(table.state.pagination.pageSize).toBe(50)
+      expect(table.atoms.pagination.get().pageSize).toBe(50)
       expect(stateJsonCaptor.mock.calls.at(-1)?.[0]).toContain('"pageSize": 50')
     })
   })
diff --git a/packages/solid-table/package.json b/packages/solid-table/package.json
index 1c56efd764..adb76d0108 100644
--- a/packages/solid-table/package.json
+++ b/packages/solid-table/package.json
@@ -59,8 +59,8 @@
     "build": "tsdown"
   },
   "dependencies": {
-    "@tanstack/solid-store": "^0.11.0",
-    "@tanstack/table-core": "9.0.0-beta.1"
+    "@tanstack/store": "^0.11.0",
+    "@tanstack/table-core": "^9.0.0-beta.1"
   },
   "devDependencies": {
     "solid-js": "^1.9.13",
diff --git a/packages/solid-table/src/createTable.ts b/packages/solid-table/src/createTable.ts
index 570aa1370a..46987a3f7d 100644
--- a/packages/solid-table/src/createTable.ts
+++ b/packages/solid-table/src/createTable.ts
@@ -7,76 +7,33 @@ import {
   runWithOwner,
   untrack,
 } from 'solid-js'
-import { shallow, useSelector } from '@tanstack/solid-store'
 import { FlexRender } from './FlexRender'
 import { solidReactivity } from './reactivity'
-import type {
-  Atom,
-  ReadonlyAtom,
-  ReadonlyStore,
-  Store,
-} from '@tanstack/solid-store'
-import type { Accessor, JSX } from 'solid-js'
+import type { JSX } from 'solid-js'
 import type {
   RowData,
   Table,
   TableFeatures,
   TableOptions,
-  TableState,
 } from '@tanstack/table-core'
 
-export type SubscribeSource<TValue> =
-  | Atom<TValue>
-  | ReadonlyAtom<TValue>
-  | Store<TValue>
-  | ReadonlyStore<TValue>
-
 export type SolidTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TSelected = TableState<TFeatures>,
 > = Omit<Table<TFeatures, TData>, 'store'> & {
   /**
-   * @deprecated Prefer `table.state()` for component-level reactive reads,
-   * `table.atoms.<slice>.get()` for slice-level reactive reads, or
-   * `table.Subscribe` / `useSelector(table.store, selector)` for explicit
-   * subscriptions. Reading `table.state` directly does not follow Solid's
-   * accessor convention and may not update render code as expected.
+   * @deprecated Prefer `table.atoms.<slice>.get()` for slice-level reactive
+   * reads, or `table.Subscribe` for explicit subscriptions. `table.store.state`
+   * is a current-value snapshot and is easy to misuse in render code.
    */
   readonly store: Table<TFeatures, TData>['store']
   /**
-   * Subscribe to the store (selector required) or a single source (atom or store).
-   * Source **without** `selector` is a separate overload so children receive
-   * `Accessor<TSourceValue>` (identity projection). Source overloads are listed first
-   * for JSX contextual typing.
-   */
-  Subscribe: {
-    <TSourceValue>(props: {
-      source: SubscribeSource<TSourceValue>
-      selector?: undefined
-      children: ((state: Accessor<TSourceValue>) => JSX.Element) | JSX.Element
-    }): JSX.Element
-    <TSourceValue, TSubSelected>(props: {
-      source: SubscribeSource<TSourceValue>
-      selector: (state: TSourceValue) => TSubSelected
-      children: ((state: Accessor<TSubSelected>) => JSX.Element) | JSX.Element
-    }): JSX.Element
-    <TSubSelected>(props: {
-      selector: (state: TableState<TFeatures>) => TSubSelected
-      children: ((state: Accessor<TSubSelected>) => JSX.Element) | JSX.Element
-    }): JSX.Element
-  }
-  /**
-   * The selected state of the table. This state may not match the structure of
-   * the full table state because it is selected by the selector function that
-   * you pass as the 2nd argument to `createTable`.
-   *
-   * @example
-   * const table = createTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state
-   *
-   * console.log(table.state().globalFilter)
+   * Creates a reactive render boundary. The child function reads the table
+   * atoms it needs, so Solid only tracks those atom reads.
    */
-  readonly state: Accessor<Readonly<TSelected>>
+  Subscribe: (props: {
+    children: (atoms: Table<TFeatures, TData>['atoms']) => JSX.Element
+  }) => JSX.Element
   /**
    * Convenience FlexRender component attached to the table instance for
    * rendering headers, cells, or footers with custom markup. Mirrors the
@@ -93,10 +50,9 @@ export type SolidTable<
 /**
  * Creates a Solid table instance backed by Solid-aware TanStack Store atoms.
  *
- * The optional selector projects from `table.store`; the selected value is
- * exposed as the `table.state` accessor. Table APIs and atom reads participate
- * in Solid dependency tracking, so computations that read a specific slice can
- * update without invalidating unrelated UI.
+ * Table APIs and atom reads participate in Solid dependency tracking, so
+ * computations that read a specific slice can update without invalidating
+ * unrelated UI. Use `table.Subscribe` to create atom-tracked render boundaries.
  *
  * @example
  * ```tsx
@@ -107,20 +63,15 @@ export type SolidTable<
  *     columns,
  *     data,
  *   },
- *   (state) => ({ pagination: state.pagination }),
  * )
- *
- * table.state().pagination
  * ```
  */
 export function createTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TSelected = TableState<TFeatures>,
 >(
   tableOptions: TableOptions<TFeatures, TData>,
-  selector?: (state: TableState<TFeatures>) => TSelected,
-): SolidTable<TFeatures, TData, TSelected> {
+): SolidTable<TFeatures, TData> {
   const owner = getOwner()!
   const reactivity = solidReactivity(owner)
 
@@ -145,8 +96,7 @@ export function createTable<
 
   const table = constructTable(resolvedOptions) as unknown as SolidTable<
     TFeatures,
-    TData,
-    TSelected
+    TData
   >
 
   createComputed(() => {
@@ -167,25 +117,12 @@ export function createTable<
   onCleanup(() => reactivity.unmount?.())
 
   table.Subscribe = ((props: {
-    source?: SubscribeSource<unknown>
-    selector?: ((state: unknown) => unknown) | undefined
-    children: ((state: Accessor<unknown>) => JSX.Element) | JSX.Element
+    children: (atoms: Table<TFeatures, TData>['atoms']) => JSX.Element
   }) => {
-    const source = props.source ?? table.store
-    const selected = useSelector(source as never, props.selector as never, {
-      compare: shallow,
-    })
-    return typeof props.children === 'function'
-      ? props.children(selected)
-      : props.children
-  }) as SolidTable<TFeatures, TData, TSelected>['Subscribe']
-
-  const state = useSelector(table.store, selector)
+    return props.children(table.atoms)
+  }) as SolidTable<TFeatures, TData>['Subscribe']
 
   table.FlexRender = FlexRender
 
-  return {
-    ...table,
-    state,
-  }
+  return table
 }
diff --git a/packages/solid-table/src/createTableHook.tsx b/packages/solid-table/src/createTableHook.tsx
index 53187d8b8e..e3ec1fd22f 100644
--- a/packages/solid-table/src/createTableHook.tsx
+++ b/packages/solid-table/src/createTableHook.tsx
@@ -1,9 +1,9 @@
 import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'
-import { Show, createContext, mergeProps, useContext } from 'solid-js'
+import { createContext, mergeProps, useContext } from 'solid-js'
 import { createTable } from './createTable'
 import { FlexRender } from './FlexRender'
 import type { SolidTable } from './createTable'
-import type { Accessor, Component, JSXElement } from 'solid-js'
+import type { Component, JSXElement } from 'solid-js'
 import type {
   AccessorFn,
   AccessorFnColumnDef,
@@ -271,29 +271,14 @@ export type CreateTableHookOptions<
   headerComponents?: THeaderComponents
 }
 
-/**
- * Props for AppTable component - without selector
- */
-export interface AppTablePropsWithoutSelector {
+export interface AppTableProps {
   children: JSXElement
-  selector?: never
-}
-
-/**
- * Props for AppTable component - with selector
- */
-export interface AppTablePropsWithSelector<
-  TFeatures extends TableFeatures,
-  TSelected,
-> {
-  children: (state: Accessor<TSelected>) => JSXElement
-  selector: (state: TableState<TFeatures>) => TSelected
 }
 
 /**
- * Props for AppCell component - without selector
+ * Props for AppCell component.
  */
-export interface AppCellPropsWithoutSelector<
+export interface AppCellProps<
   TFeatures extends TableFeatures,
   TData extends RowData,
   TValue extends CellData,
@@ -304,32 +289,12 @@ export interface AppCellPropsWithoutSelector<
     cell: Cell<TFeatures, TData, TValue> &
       TCellComponents & { FlexRender: () => JSXElement },
   ) => JSXElement
-  selector?: never
 }
 
 /**
- * Props for AppCell component - with selector
+ * Props for AppHeader/AppFooter component.
  */
-export interface AppCellPropsWithSelector<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TValue extends CellData,
-  TCellComponents extends Record<string, ComponentType<any>>,
-  TSelected,
-> {
-  cell: Cell<TFeatures, TData, TValue>
-  children: (
-    cell: Cell<TFeatures, TData, TValue> &
-      TCellComponents & { FlexRender: () => JSXElement },
-    state: Accessor<TSelected>,
-  ) => JSXElement
-  selector: (state: TableState<TFeatures>) => TSelected
-}
-
-/**
- * Props for AppHeader/AppFooter component - without selector
- */
-export interface AppHeaderPropsWithoutSelector<
+export interface AppHeaderProps<
   TFeatures extends TableFeatures,
   TData extends RowData,
   TValue extends CellData,
@@ -340,30 +305,10 @@ export interface AppHeaderPropsWithoutSelector<
     header: Header<TFeatures, TData, TValue> &
       THeaderComponents & { FlexRender: () => JSXElement },
   ) => JSXElement
-  selector?: never
-}
-
-/**
- * Props for AppHeader/AppFooter component - with selector
- */
-export interface AppHeaderPropsWithSelector<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TValue extends CellData,
-  THeaderComponents extends Record<string, ComponentType<any>>,
-  TSelected,
-> {
-  header: Header<TFeatures, TData, TValue>
-  children: (
-    header: Header<TFeatures, TData, TValue> &
-      THeaderComponents & { FlexRender: () => JSXElement },
-    state: Accessor<TSelected>,
-  ) => JSXElement
-  selector: (state: TableState<TFeatures>) => TSelected
 }
 
 /**
- * Component type for AppCell - wraps a cell and provides cell context with optional Subscribe
+ * Component type for AppCell - wraps a cell and provides cell context.
  */
 export interface AppCellComponent<
   TFeatures extends TableFeatures,
@@ -371,26 +316,17 @@ export interface AppCellComponent<
   TCellComponents extends Record<string, ComponentType<any>>,
 > {
   <TValue extends CellData = CellData>(
-    props: AppCellPropsWithoutSelector<
+    props: AppCellProps<
       TFeatures,
       TData,
       TValue,
       TCellComponents
     >,
   ): JSXElement
-  <TValue extends CellData = CellData, TSelected = unknown>(
-    props: AppCellPropsWithSelector<
-      TFeatures,
-      TData,
-      TValue,
-      TCellComponents,
-      TSelected
-    >,
-  ): JSXElement
 }
 
 /**
- * Component type for AppHeader/AppFooter - wraps a header and provides header context with optional Subscribe
+ * Component type for AppHeader/AppFooter - wraps a header and provides header context.
  */
 export interface AppHeaderComponent<
   TFeatures extends TableFeatures,
@@ -398,32 +334,20 @@ export interface AppHeaderComponent<
   THeaderComponents extends Record<string, ComponentType<any>>,
 > {
   <TValue extends CellData = CellData>(
-    props: AppHeaderPropsWithoutSelector<
+    props: AppHeaderProps<
       TFeatures,
       TData,
       TValue,
       THeaderComponents
     >,
   ): JSXElement
-  <TValue extends CellData = CellData, TSelected = unknown>(
-    props: AppHeaderPropsWithSelector<
-      TFeatures,
-      TData,
-      TValue,
-      THeaderComponents,
-      TSelected
-    >,
-  ): JSXElement
 }
 
 /**
  * Component type for AppTable - root wrapper with optional Subscribe
  */
 export interface AppTableComponent<TFeatures extends TableFeatures> {
-  (props: AppTablePropsWithoutSelector): JSXElement
-  <TSelected>(
-    props: AppTablePropsWithSelector<TFeatures, TSelected>,
-  ): JSXElement
+  (props: AppTableProps): JSXElement
 }
 
 /**
@@ -436,61 +360,40 @@ export type AppSolidTable<
   TTableComponents extends Record<string, ComponentType<any>>,
   TCellComponents extends Record<string, ComponentType<any>>,
   THeaderComponents extends Record<string, ComponentType<any>>,
-> = SolidTable<TFeatures, TData, TSelected> &
+> = SolidTable<TFeatures, TData> &
   NoInfer<TTableComponents> & {
     /**
-     * Root wrapper component that provides table context with optional Subscribe.
+     * Root wrapper component that provides table context.
      * @example
      * ```tsx
-     * // Without selector - children is JSXElement
      * <table.AppTable>
      *   <table>...</table>
      * </table.AppTable>
-     *
-     * // With selector - children receives selected state
-     * <table.AppTable selector={(s) => s.pagination}>
-     *   {(pagination) => <div>Page {pagination.pageIndex}</div>}
-     * </table.AppTable>
      * ```
      */
     AppTable: AppTableComponent<TFeatures>
     /**
      * Wraps a cell and provides cell context with pre-bound cellComponents.
-     * Optionally accepts a selector for Subscribe functionality.
      * @example
      * ```tsx
-     * // Without selector
      * <table.AppCell cell={cell}>
      *   {(c) => <td><c.TextCell /></td>}
      * </table.AppCell>
-     *
-     * // With selector - children receives cell and selected state
-     * <table.AppCell cell={cell} selector={(s) => s.columnFilters}>
-     *   {(c, filters) => <td>{filters.length}</td>}
-     * </table.AppCell>
      * ```
      */
     AppCell: AppCellComponent<TFeatures, TData, NoInfer<TCellComponents>>
     /**
      * Wraps a header and provides header context with pre-bound headerComponents.
-     * Optionally accepts a selector for Subscribe functionality.
      * @example
      * ```tsx
-     * // Without selector
      * <table.AppHeader header={header}>
      *   {(h) => <th><h.SortIndicator /></th>}
      * </table.AppHeader>
-     *
-     * // With selector
-     * <table.AppHeader header={header} selector={(s) => s.sorting}>
-     *   {(h, sorting) => <th>{sorting.length} sorted</th>}
-     * </table.AppHeader>
      * ```
      */
     AppHeader: AppHeaderComponent<TFeatures, TData, NoInfer<THeaderComponents>>
     /**
      * Wraps a footer and provides header context with pre-bound headerComponents.
-     * Optionally accepts a selector for Subscribe functionality.
      * @example
      * ```tsx
      * <table.AppFooter header={footer}>
@@ -553,7 +456,11 @@ export type AppSolidTable<
  * // components/table-components.tsx
  * function PaginationControls() {
  *   const table = useTableContext() // TFeatures already known!
- *   return <table.Subscribe selector={(s) => s.pagination}>...</table.Subscribe>
+ *   return (
+ *     <table.Subscribe>
+ *       {(atoms) => <span>Page {atoms.pagination.get().pageIndex + 1}</span>}
+ *     </table.Subscribe>
+ *   )
  * }
  *
  * // features/users.tsx
@@ -625,7 +532,7 @@ export function createTableHook<
   THeaderComponents
 >) {
   // Create contexts internally with TFeatures baked in
-  const TableContext = createContext<SolidTable<TFeatures, any, any>>(
+  const TableContext = createContext<SolidTable<TFeatures, any>>(
     null as never,
   )
   const CellContext = createContext<Cell<TFeatures, any, any>>(null as never)
@@ -678,14 +585,16 @@ export function createTableHook<
    * function PaginationControls() {
    *   const table = useTableContext()
    *   return (
-   *     <table.Subscribe selector={(s) => s.pagination}>
-   *       {(pagination) => (
+   *     <table.Subscribe>
+   *       {(atoms) => {
+   *         const pagination = atoms.pagination.get()
+   *         return (
    *         <div>
    *           <button onClick={() => table.previousPage()}>Prev</button>
    *           <span>Page {pagination.pageIndex + 1}</span>
    *           <button onClick={() => table.nextPage()}>Next</button>
    *         </div>
-   *       )}
+   *       )}}
    *     </table.Subscribe>
    *   )
    * }
@@ -820,93 +729,45 @@ export function createTableHook<
    *
    * TFeatures is already known from the createTableHook call; TData is inferred from the data prop.
    */
-  function createAppTable<
-    TData extends RowData,
-    TSelected = TableState<TFeatures>,
-  >(
+  function createAppTable<TData extends RowData>(
     tableOptions: Omit<
       TableOptions<TFeatures, TData>,
       'features' | 'rowModels'
     >,
-    selector?: (state: TableState<TFeatures>) => TSelected,
   ): AppSolidTable<
     TFeatures,
     TData,
-    TSelected,
+    TableState<TFeatures>,
     TTableComponents,
     TCellComponents,
     THeaderComponents
   > {
     // Merge default options with provided options (provided takes precedence)
     const mergedProps = mergeProps(defaultTableOptions, tableOptions)
-    const table = createTable<TFeatures, TData, TSelected>(
+    const table = createTable<TFeatures, TData>(
       mergedProps as TableOptions<TFeatures, TData>,
-      selector,
     )
 
-    // AppTable - Root wrapper that provides table context with optional state selector
-    function AppTable(props: AppTablePropsWithoutSelector): JSXElement
-    function AppTable<TAppTableSelected>(
-      props: AppTablePropsWithSelector<TFeatures, TAppTableSelected>,
-    ): JSXElement
-    function AppTable<TAppTableSelected>(
-      props:
-        | AppTablePropsWithoutSelector
-        | AppTablePropsWithSelector<TFeatures, TAppTableSelected>,
-    ): JSXElement {
+    // AppTable - Root wrapper that provides table context
+    function AppTable(props: AppTableProps): JSXElement {
       return (
         <TableContext.Provider value={table}>
-          <Show when={props.selector} fallback={props.children as JSXElement}>
-            {(selector) => (
-              <table.Subscribe selector={selector()}>
-                {(state: Accessor<TAppTableSelected>) =>
-                  (
-                    props.children as (
-                      state: Accessor<TAppTableSelected>,
-                    ) => JSXElement
-                  )(state)
-                }
-              </table.Subscribe>
-            )}
-          </Show>
+          {props.children}
         </TableContext.Provider>
       )
     }
 
-    // AppCell - Wraps cell with context, pre-bound cellComponents, and optional state selector
+    // AppCell - Wraps cell with context and pre-bound cellComponents
     function AppCell<TValue extends CellData = CellData>(
-      props: AppCellPropsWithoutSelector<
+      props: AppCellProps<
         TFeatures,
         TData,
         TValue,
         TCellComponents
       >,
     ): JSXElement
-    function AppCell<
-      TValue extends CellData = CellData,
-      TAppCellSelected = unknown,
-    >(
-      props: AppCellPropsWithSelector<
-        TFeatures,
-        TData,
-        TValue,
-        TCellComponents,
-        TAppCellSelected
-      >,
-    ): JSXElement
-    function AppCell<
-      TValue extends CellData = CellData,
-      TAppCellSelected = unknown,
-    >(
-      props:
-        | AppCellPropsWithoutSelector<TFeatures, TData, TValue, TCellComponents>
-        | AppCellPropsWithSelector<
-            TFeatures,
-            TData,
-            TValue,
-            TCellComponents,
-            TAppCellSelected
-          >,
+    function AppCell<TValue extends CellData = CellData>(
+      props: AppCellProps<TFeatures, TData, TValue, TCellComponents>,
     ): JSXElement {
       const extendedCell = Object.assign(props.cell, {
         FlexRender: CellFlexRender,
@@ -916,63 +777,22 @@ export function createTableHook<
 
       return (
         <CellContext.Provider value={props.cell}>
-          <Show
-            when={props.selector}
-            fallback={(props.children as (cell: any) => JSXElement)(
-              extendedCell as any,
-            )}
-          >
-            {(selector) => (
-              <table.Subscribe selector={selector()}>
-                {(state: Accessor<TAppCellSelected>) =>
-                  props.children(extendedCell, state)
-                }
-              </table.Subscribe>
-            )}
-          </Show>
+          {props.children(extendedCell)}
         </CellContext.Provider>
       )
     }
 
-    // AppHeader - Wraps header with context, pre-bound headerComponents, and optional state selector
+    // AppHeader - Wraps header with context and pre-bound headerComponents
     function AppHeader<TValue extends CellData = CellData>(
-      props: AppHeaderPropsWithoutSelector<
+      props: AppHeaderProps<
         TFeatures,
         TData,
         TValue,
         THeaderComponents
       >,
     ): JSXElement
-    function AppHeader<
-      TValue extends CellData = CellData,
-      TAppHeaderSelected = unknown,
-    >(
-      props: AppHeaderPropsWithSelector<
-        TFeatures,
-        TData,
-        TValue,
-        THeaderComponents,
-        TAppHeaderSelected
-      >,
-    ): JSXElement
-    function AppHeader<
-      TValue extends CellData = CellData,
-      TAppHeaderSelected = unknown,
-    >(
-      props:
-        | AppHeaderPropsWithoutSelector<
-            TFeatures,
-            TData,
-            TValue,
-            THeaderComponents
-          >
-        | AppHeaderPropsWithSelector<
-            TFeatures,
-            TData,
-            TValue,
-            THeaderComponents,
-            TAppHeaderSelected
-          >,
+    function AppHeader<TValue extends CellData = CellData>(
+      props: AppHeaderProps<TFeatures, TData, TValue, THeaderComponents>,
     ): JSXElement {
       const extendedHeader = Object.assign(props.header, {
         FlexRender: HeaderFlexRender,
@@ -982,63 +802,22 @@ export function createTableHook<
 
       return (
         <HeaderContext.Provider value={props.header}>
-          <Show
-            when={props.selector}
-            fallback={(props.children as (header: any) => JSXElement)(
-              extendedHeader as any,
-            )}
-          >
-            {(selector) => (
-              <table.Subscribe selector={selector()}>
-                {(state: Accessor<TAppHeaderSelected>) =>
-                  props.children(extendedHeader, state)
-                }
-              </table.Subscribe>
-            )}
-          </Show>
+          {props.children(extendedHeader)}
         </HeaderContext.Provider>
       )
     }
 
     // AppFooter - Same as AppHeader but uses FooterFlexRender (footers use Header type)
     function AppFooter<TValue extends CellData = CellData>(
-      props: AppHeaderPropsWithoutSelector<
+      props: AppHeaderProps<
         TFeatures,
         TData,
         TValue,
         THeaderComponents
       >,
     ): JSXElement
-    function AppFooter<
-      TValue extends CellData = CellData,
-      TAppFooterSelected = unknown,
-    >(
-      props: AppHeaderPropsWithSelector<
-        TFeatures,
-        TData,
-        TValue,
-        THeaderComponents,
-        TAppFooterSelected
-      >,
-    ): JSXElement
-    function AppFooter<
-      TValue extends CellData = CellData,
-      TAppFooterSelected = unknown,
-    >(
-      props:
-        | AppHeaderPropsWithoutSelector<
-            TFeatures,
-            TData,
-            TValue,
-            THeaderComponents
-          >
-        | AppHeaderPropsWithSelector<
-            TFeatures,
-            TData,
-            TValue,
-            THeaderComponents,
-            TAppFooterSelected
-          >,
+    function AppFooter<TValue extends CellData = CellData>(
+      props: AppHeaderProps<TFeatures, TData, TValue, THeaderComponents>,
     ): JSXElement {
       const extendedHeader = Object.assign(props.header, {
         FlexRender: FooterFlexRender,
@@ -1048,20 +827,7 @@ export function createTableHook<
 
       return (
         <HeaderContext.Provider value={props.header}>
-          <Show
-            when={props.selector}
-            fallback={(props.children as (header: any) => JSXElement)(
-              extendedHeader as any,
-            )}
-          >
-            {(selector) => (
-              <table.Subscribe selector={selector()}>
-                {(state: Accessor<TAppFooterSelected>) =>
-                  props.children(extendedHeader, state)
-                }
-              </table.Subscribe>
-            )}
-          </Show>
+          {props.children(extendedHeader)}
         </HeaderContext.Provider>
       )
     }
@@ -1077,7 +843,7 @@ export function createTableHook<
     }) as AppSolidTable<
       TFeatures,
       TData,
-      TSelected,
+      TableState<TFeatures>,
       TTableComponents,
       TCellComponents,
       THeaderComponents
diff --git a/packages/solid-table/src/reactivity.ts b/packages/solid-table/src/reactivity.ts
index 2034103938..441e9bf66e 100644
--- a/packages/solid-table/src/reactivity.ts
+++ b/packages/solid-table/src/reactivity.ts
@@ -1,25 +1,23 @@
 import {
-  batch,
   createMemo,
   createSignal,
   observable,
   runWithOwner,
   untrack,
 } from 'solid-js'
+import { batch } from '@tanstack/store'
 import type {
   Atom,
   Observer,
   ReadonlyAtom,
   Subscription,
-} from '@tanstack/solid-store'
+} from '@tanstack/store'
 import type { Accessor, Owner, Setter } from 'solid-js'
 import type {
   TableAtomOptions,
   TableReactivityBindings,
 } from '@tanstack/table-core/reactivity'
 
-const optionsStoreDebugName = 'table/optionsStore'
-
 function signalToReadonlyAtom<T>(
   signal: Accessor<T>,
   owner: Owner,
diff --git a/packages/solid-table/tests/unit/reactivity.test.ts b/packages/solid-table/tests/unit/reactivity.test.ts
index 570e6fe689..a8b8f9eb8c 100644
--- a/packages/solid-table/tests/unit/reactivity.test.ts
+++ b/packages/solid-table/tests/unit/reactivity.test.ts
@@ -1,15 +1,26 @@
 import { describe, expect, test } from 'vitest'
 import { createRoot, getOwner } from 'solid-js'
-import { createAtom } from '@tanstack/solid-store'
+import { createAtom } from '@tanstack/store'
+import { stockFeatures } from '@tanstack/table-core'
+import { createTable } from '../../src/createTable'
 import { solidReactivity } from '../../src/reactivity'
+import type { ColumnDef } from '@tanstack/table-core'
 
 describe('solidReactivity', () => {
-  test('readonly atoms update when they read external TanStack Store atoms', () => {
+  test('readonly atoms update when wrapped external TanStack Store atoms update', () => {
     createRoot((dispose) => {
       const owner = getOwner()!
       const reactivity = solidReactivity(owner)
       const external = createAtom(1)
-      const doubled = reactivity.createReadonlyAtom(() => external.get() * 2, {
+      const wrapped = reactivity.createWritableAtom(external.get(), {
+        debugName: 'wrapped',
+      })
+      reactivity.addSubscription(
+        external.subscribe((value) => {
+          wrapped.set(value)
+        }),
+      )
+      const doubled = reactivity.createReadonlyAtom(() => wrapped.get() * 2, {
         debugName: 'doubled',
       })
 
@@ -46,3 +57,35 @@ describe('solidReactivity', () => {
     })
   })
 })
+
+describe('table.Subscribe', () => {
+  type Data = { id: string }
+  const columns: Array<ColumnDef<typeof stockFeatures, Data>> = [
+    {
+      id: 'id',
+      accessorKey: 'id',
+    },
+  ]
+
+  test('passes table atoms to children', () => {
+    createRoot((dispose) => {
+      const table = createTable({
+        data: [{ id: '1' }],
+        columns,
+        _features: stockFeatures,
+        _rowModels: {},
+      })
+      let received: unknown
+
+      table.Subscribe({
+        children: (atoms) => {
+          received = atoms
+          return null
+        },
+      })
+
+      expect(received).toBe(table.atoms)
+      dispose()
+    })
+  })
+})
diff --git a/packages/vue-table/package.json b/packages/vue-table/package.json
index 7d5932357a..8a692dd406 100644
--- a/packages/vue-table/package.json
+++ b/packages/vue-table/package.json
@@ -57,8 +57,8 @@
     "build": "tsdown"
   },
   "dependencies": {
-    "@tanstack/table-core": "9.0.0-beta.1",
-    "@tanstack/vue-store": "^0.11.0"
+    "@tanstack/store": "^0.11.0",
+    "@tanstack/table-core": "^9.0.0-beta.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.7",
diff --git a/packages/vue-table/src/createTableHook.ts b/packages/vue-table/src/createTableHook.ts
index 4aef359544..960e2b452f 100644
--- a/packages/vue-table/src/createTableHook.ts
+++ b/packages/vue-table/src/createTableHook.ts
@@ -1,5 +1,4 @@
 import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'
-import { useSelector } from '@tanstack/vue-store'
 import { defineComponent, h, inject, provide } from 'vue'
 import { FlexRender } from './FlexRender'
 import { mergeProxy } from './merge-proxy'
@@ -192,31 +191,22 @@ export type CreateTableHookOptions<
   headerComponents?: THeaderComponents
 }
 
-export interface AppTableProps<
-  TFeatures extends TableFeatures,
-  TSelected = unknown,
-> {
-  selector?: (state: TableState<TFeatures>) => TSelected
-}
+export interface AppTableProps {}
 
 export interface AppCellProps<
   TFeatures extends TableFeatures,
   TData extends RowData,
   TValue extends CellData = CellData,
-  TSelected = unknown,
 > {
   cell: Cell<TFeatures, TData, TValue>
-  selector?: (state: TableState<TFeatures>) => TSelected
 }
 
 export interface AppHeaderProps<
   TFeatures extends TableFeatures,
   TData extends RowData,
   TValue extends CellData = CellData,
-  TSelected = unknown,
 > {
   header: Header<TFeatures, TData, TValue>
-  selector?: (state: TableState<TFeatures>) => TSelected
 }
 
 export type AppVueTable<
@@ -226,9 +216,9 @@ export type AppVueTable<
   TTableComponents extends Record<string, ComponentType<any>>,
   TCellComponents extends Record<string, ComponentType<any>>,
   THeaderComponents extends Record<string, ComponentType<any>>,
-> = VueTable<TFeatures, TData, TSelected> &
+> = VueTable<TFeatures, TData> &
   NoInfer<TTableComponents> & {
-    AppTable: Component<AppTableProps<TFeatures>>
+    AppTable: Component<AppTableProps>
     AppCell: Component<AppCellProps<TFeatures, TData>>
     AppHeader: Component<AppHeaderProps<TFeatures, TData>>
     AppFooter: Component<AppHeaderProps<TFeatures, TData>>
@@ -314,7 +304,7 @@ export function createTableHook<
   THeaderComponents
 >) {
   const TableContext = Symbol('TableContext') as InjectionKey<
-    VueTable<TFeatures, any, any>
+    VueTable<TFeatures, any>
   >
   const CellContext = Symbol('CellContext') as InjectionKey<
     Cell<TFeatures, any, any>
@@ -410,19 +400,15 @@ export function createTableHook<
     },
   })
 
-  function useAppTable<
-    TData extends RowData,
-    TSelected = TableState<TFeatures>,
-  >(
+  function useAppTable<TData extends RowData>(
     tableOptions: Omit<
       TableOptionsWithReactiveData<TFeatures, TData>,
       'features' | 'rowModels'
     >,
-    selector?: (state: TableState<TFeatures>) => TSelected,
   ): AppVueTable<
     TFeatures,
     TData,
-    TSelected,
+    TableState<TFeatures>,
     TTableComponents,
     TCellComponents,
     THeaderComponents
@@ -432,28 +418,14 @@ export function createTableHook<
       tableOptions,
     ) as TableOptionsWithReactiveData<TFeatures, TData>
 
-    const table = useTable<TFeatures, TData, TSelected>(mergedOptions, selector)
+    const table = useTable<TFeatures, TData>(mergedOptions)
 
     const AppTable = defineComponent({
       name: 'AppTable',
-      props: {
-        selector: {
-          type: Function as PropType<(state: TableState<TFeatures>) => unknown>,
-          default: undefined,
-        },
-      },
-      setup(props, { slots }) {
+      setup(_, { slots }) {
         provide(TableContext, table)
-        const selected = props.selector
-          ? useSelector(table.store, props.selector)
-          : undefined
-
         return () => {
-          if (!props.selector) {
-            return slots.default?.()
-          }
-
-          return slots.default?.({ state: selected?.value })
+          return slots.default?.()
         }
       },
     })
@@ -465,20 +437,12 @@ export function createTableHook<
           type: Object as PropType<object>,
           required: true,
         },
-        selector: {
-          type: Function as PropType<(state: TableState<TFeatures>) => unknown>,
-          default: undefined,
-        },
       },
       setup(props, { slots }) {
         const cell = props.cell as Cell<TFeatures, TData, any>
 
         provide(CellContext, cell)
 
-        const selected = props.selector
-          ? useSelector(table.store, props.selector)
-          : undefined
-
         const extendedCell = Object.assign(cell, {
           FlexRender: CellFlexRender,
           ...(cellComponents ?? {}),
@@ -486,11 +450,7 @@ export function createTableHook<
           TCellComponents & { FlexRender: Component }
 
         return () => {
-          return slots.default?.(
-            props.selector
-              ? { cell: extendedCell, state: selected?.value }
-              : { cell: extendedCell },
-          )
+          return slots.default?.({ cell: extendedCell })
         }
       },
     })
@@ -502,20 +462,12 @@ export function createTableHook<
           type: Object as PropType<object>,
           required: true,
         },
-        selector: {
-          type: Function as PropType<(state: TableState<TFeatures>) => unknown>,
-          default: undefined,
-        },
       },
       setup(props, { slots }) {
         const header = props.header as Header<TFeatures, TData, any>
 
         provide(HeaderContext, header)
 
-        const selected = props.selector
-          ? useSelector(table.store, props.selector)
-          : undefined
-
         const extendedHeader = Object.assign(header, {
           FlexRender: HeaderFlexRender,
           ...(headerComponents ?? {}),
@@ -523,11 +475,7 @@ export function createTableHook<
           THeaderComponents & { FlexRender: Component }
 
         return () => {
-          return slots.default?.(
-            props.selector
-              ? { header: extendedHeader, state: selected?.value }
-              : { header: extendedHeader },
-          )
+          return slots.default?.({ header: extendedHeader })
         }
       },
     })
@@ -539,20 +487,12 @@ export function createTableHook<
           type: Object as PropType<object>,
           required: true,
         },
-        selector: {
-          type: Function as PropType<(state: TableState<TFeatures>) => unknown>,
-          default: undefined,
-        },
       },
       setup(props, { slots }) {
         const header = props.header as Header<TFeatures, TData, any>
 
         provide(HeaderContext, header)
 
-        const selected = props.selector
-          ? useSelector(table.store, props.selector)
-          : undefined
-
         const extendedHeader = Object.assign(header, {
           FlexRender: FooterFlexRender,
           ...(headerComponents ?? {}),
@@ -560,11 +500,7 @@ export function createTableHook<
           THeaderComponents & { FlexRender: Component }
 
         return () => {
-          return slots.default?.(
-            props.selector
-              ? { header: extendedHeader, state: selected?.value }
-              : { header: extendedHeader },
-          )
+          return slots.default?.({ header: extendedHeader })
         }
       },
     })
@@ -579,7 +515,7 @@ export function createTableHook<
     }) as AppVueTable<
       TFeatures,
       TData,
-      TSelected,
+      TableState<TFeatures>,
       TTableComponents,
       TCellComponents,
       THeaderComponents
diff --git a/packages/vue-table/src/reactivity.ts b/packages/vue-table/src/reactivity.ts
index 836569b58f..2b85bb2325 100644
--- a/packages/vue-table/src/reactivity.ts
+++ b/packages/vue-table/src/reactivity.ts
@@ -1,20 +1,12 @@
-import {
-  computed,
-  getCurrentScope,
-  onScopeDispose,
-  shallowRef,
-  watch,
-} from 'vue'
-import { batch, createAtom } from '@tanstack/vue-store'
+import { computed, shallowRef, watch } from 'vue'
+import { batch } from '@tanstack/store'
 import type {
   TableAtomOptions,
   TableReactivityBindings,
 } from '@tanstack/table-core/reactivity'
-import type { Atom, Observer, ReadonlyAtom } from '@tanstack/vue-store'
+import type { Atom, Observer, ReadonlyAtom, Subscription } from '@tanstack/store'
 import type { ComputedRef, ShallowRef } from 'vue'
 
-const optionsStoreDebugName = 'table/optionsStore'
-
 function observerToCallback<T>(
   observerOrNext: Observer<T> | ((value: T) => void),
 ): (value: T) => void {
@@ -64,50 +56,27 @@ function refToWritableAtom<T>(source: ShallowRef<T>): Atom<T> {
  * refs.
  */
 export function vueReactivity(): TableReactivityBindings {
+  const subscriptions = new Set<Subscription>()
+
   return {
     createOptionsStore: true,
-    wrapExternalAtoms: false,
-    addSubscription: () => {
-      throw new Error(
-        'Feature not supported in current reactivity implementation',
-      )
+    wrapExternalAtoms: true,
+    addSubscription: (subscription) => {
+      subscriptions.add(subscription)
     },
     unmount: () => {
-      throw new Error(
-        'Feature not supported in current reactivity implementation',
-      )
+      subscriptions.forEach((s) => s.unsubscribe())
+      subscriptions.clear()
     },
     schedule: (fn) => queueMicrotask(() => fn()),
     createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {
-      const storeAtom = createAtom(() => fn(), {
-        compare: _options?.compare,
-      })
-      const version = shallowRef(0)
-      const subscription = storeAtom.subscribe(() => {
-        version.value += 1
-      })
-      if (getCurrentScope()) {
-        onScopeDispose(() => subscription.unsubscribe())
-      }
-
-      return refToReadonlyAtom(
-        computed(() => {
-          version.value
-          return storeAtom.get()
-        }),
-      )
+      return refToReadonlyAtom(computed(() => fn()))
     },
     createWritableAtom: <T>(
       value: T,
       _options?: TableAtomOptions<T>,
     ): Atom<T> => {
-      if (_options?.debugName === optionsStoreDebugName) {
-        return refToWritableAtom(shallowRef(value) as ShallowRef<T>)
-      }
-
-      return createAtom(value, {
-        compare: _options?.compare,
-      })
+      return refToWritableAtom(shallowRef(value) as ShallowRef<T>)
     },
     untrack: (fn) => fn(),
     batch,
diff --git a/packages/vue-table/src/useTable.ts b/packages/vue-table/src/useTable.ts
index a04557aa95..6e77ed68cd 100644
--- a/packages/vue-table/src/useTable.ts
+++ b/packages/vue-table/src/useTable.ts
@@ -1,16 +1,8 @@
 import { unref, watch } from 'vue'
 import { constructTable } from '@tanstack/table-core'
-import { shallow, useSelector } from '@tanstack/vue-store'
 import { flatMerge, mergeProxy } from './merge-proxy'
 import { vueReactivity } from './reactivity'
 import type {
-  Atom,
-  ReadonlyAtom,
-  ReadonlyStore,
-  Store,
-} from '@tanstack/vue-store'
-import type {
-  NoInfer,
   RowData,
   Table,
   TableFeatures,
@@ -19,12 +11,6 @@ import type {
 } from '@tanstack/table-core'
 import type { MaybeRef, VNode } from 'vue'
 
-export type SubscribeSource<TValue> =
-  | Atom<TValue>
-  | ReadonlyAtom<TValue>
-  | Store<TValue>
-  | ReadonlyStore<TValue>
-
 export type TableOptionsWithReactiveData<
   TFeatures extends TableFeatures,
   TData extends RowData,
@@ -61,57 +47,21 @@ function getReactiveOptionDeps<
 export type VueTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TSelected = TableState<TFeatures>,
 > = Omit<Table<TFeatures, TData>, 'store'> & {
   /**
-   * @deprecated Prefer `table.state` for render reads,
-   * `table.atoms.<slice>.get()` for slice snapshots, or
-   * `table.Subscribe` / `useSelector(table.store, selector)` for explicit
-   * subscriptions. `table.store.state` is a current-value snapshot and is easy
-   * to misuse in render code.
+   * @deprecated Prefer `table.atoms.<slice>.get()` for slice snapshots, or
+   * `table.Subscribe` for explicit subscriptions. `table.store.state` is a
+   * current-value snapshot and is easy to misuse in render code.
    */
   readonly store: Table<TFeatures, TData>['store']
-  /**
-   * Store mode: `selector` required. Source mode: pass `source` (atom or store); omit
-   * `selector` for the whole value (identity), or pass `selector` to project. Split
-   * overloads so source-only infers `TSourceValue` for `children` (see React `Subscribe`).
-   */
-  Subscribe: {
-    <TSourceValue>(props: {
-      source: SubscribeSource<TSourceValue>
-      selector?: undefined
-      children:
-        | ((state: Readonly<TSourceValue>) => VNode | Array<VNode>)
-        | VNode
-        | Array<VNode>
-    }): VNode | Array<VNode>
-    <TSourceValue, TSubSelected>(props: {
-      source: SubscribeSource<TSourceValue>
-      selector: (state: TSourceValue) => TSubSelected
-      children:
-        | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)
-        | VNode
-        | Array<VNode>
-    }): VNode | Array<VNode>
-    <TSubSelected>(props: {
-      selector: (state: NoInfer<TableState<TFeatures>>) => TSubSelected
-      children:
-        | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)
-        | VNode
-        | Array<VNode>
-    }): VNode | Array<VNode>
-  }
-  /**
-   * The selected state of the table. This state may not match the structure of
-   * the full table state because it is selected by the selector function that
-   * you pass as the 2nd argument to `useTable`.
-   *
-   * @example
-   * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state
-   *
-   * console.log(table.state.globalFilter)
+  /** Creates a reactive render boundary. The child function reads the table
+   * atoms it needs, so Vue only tracks those atom reads.
    */
-  readonly state: Readonly<TSelected>
+  Subscribe: (props: {
+    children: (
+      atoms: Table<TFeatures, TData>['atoms'],
+    ) => VNode | Array<VNode>
+  }) => VNode | Array<VNode>
 }
 
 /**
@@ -119,8 +69,8 @@ export type VueTable<
  *
  * Table options may contain Vue refs or computed values. The adapter unwraps
  * those reactive inputs, watches them with synchronous flushing, and keeps the
- * table options in sync. The optional selector projects from `table.store` and
- * exposes the selected value on `table.state`.
+ * table options in sync. Use `table.Subscribe` or native Vue computed values
+ * around `table.atoms.<slice>.get()` for selected reactive reads.
  *
  * @example
  * ```ts
@@ -131,22 +81,17 @@ export type VueTable<
  *     columns,
  *     data,
  *   },
- *   (state) => ({ pagination: state.pagination }),
  * )
- *
- * table.state.pagination
  * ```
  */
 export function useTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TSelected = TableState<TFeatures>,
 >(
   tableOptions:
     | TableOptions<TFeatures, TData>
     | TableOptionsWithReactiveData<TFeatures, TData>,
-  selector?: (state: TableState<TFeatures>) => TSelected,
-): VueTable<TFeatures, TData, TSelected> {
+): VueTable<TFeatures, TData> {
   const syncTableOptions = (
     table: Table<TFeatures, TData>,
     options: TableOptionsWithReactiveData<TFeatures, TData>,
@@ -177,7 +122,7 @@ export function useTable<
   ) as TableOptions<TFeatures, TData>
 
   const coreTable = constructTable(resolvedOptions)
-  const table = coreTable as unknown as VueTable<TFeatures, TData, TSelected>
+  const table = coreTable as unknown as VueTable<TFeatures, TData>
 
   watch(
     () => getReactiveOptionDeps(mergedOptions),
@@ -223,29 +168,10 @@ export function useTable<
   )
 
   table.Subscribe = ((props: {
-    source?: SubscribeSource<unknown>
-    selector?: ((state: unknown) => unknown) | undefined
-    children:
-      | ((state: Readonly<unknown>) => VNode | Array<VNode>)
-      | VNode
-      | Array<VNode>
+    children: (atoms: Table<TFeatures, TData>['atoms']) => VNode | Array<VNode>
   }) => {
-    const source = props.source ?? table.store
-    const selected = useSelector(source as never, props.selector as never, {
-      compare: shallow,
-    })
-    if (typeof props.children === 'function') {
-      return props.children(selected.value as Readonly<unknown>)
-    }
-    return props.children
-  }) as VueTable<TFeatures, TData, TSelected>['Subscribe']
-
-  const stateStore = useSelector(table.store, selector)
-
-  return {
-    ...table,
-    get state() {
-      return stateStore.value
-    },
-  }
+    return props.children(table.atoms)
+  }) as VueTable<TFeatures, TData>['Subscribe']
+
+  return table
 }
diff --git a/packages/vue-table/tests/unit/signals.test.ts b/packages/vue-table/tests/unit/signals.test.ts
index 31f58d8402..6a572d4b66 100644
--- a/packages/vue-table/tests/unit/signals.test.ts
+++ b/packages/vue-table/tests/unit/signals.test.ts
@@ -1,7 +1,10 @@
 import { describe, expect, test } from 'vitest'
 import { nextTick } from 'vue'
-import { createAtom } from '@tanstack/vue-store'
+import { createAtom } from '@tanstack/store'
+import { stockFeatures } from '@tanstack/table-core'
 import { vueReactivity } from '../../src/reactivity'
+import { useTable } from '../../src/useTable'
+import type { ColumnDef } from '@tanstack/table-core'
 
 describe('vueReactivity', () => {
   test('creates writable and readonly atoms from Vue refs', async () => {
@@ -21,10 +24,18 @@ describe('vueReactivity', () => {
     expect(doubled.get()).toBe(4)
   })
 
-  test('readonly atoms update when they read external TanStack Store atoms', async () => {
+  test('readonly atoms update when wrapped external TanStack Store atoms update', async () => {
     const reactivity = vueReactivity()
     const external = createAtom(1)
-    const doubled = reactivity.createReadonlyAtom(() => external.get() * 2, {
+    const wrapped = reactivity.createWritableAtom(external.get(), {
+      debugName: 'wrapped',
+    })
+    reactivity.addSubscription(
+      external.subscribe((value) => {
+        wrapped.set(value)
+      }),
+    )
+    const doubled = reactivity.createReadonlyAtom(() => wrapped.get() * 2, {
       debugName: 'doubled',
     })
 
@@ -36,3 +47,33 @@ describe('vueReactivity', () => {
     expect(doubled.get()).toBe(4)
   })
 })
+
+describe('table.Subscribe', () => {
+  type Data = { id: string }
+  const columns: Array<ColumnDef<typeof stockFeatures, Data>> = [
+    {
+      id: 'id',
+      accessorKey: 'id',
+    },
+  ]
+
+  test('passes table atoms to children', () => {
+    const table = useTable({
+      data: [{ id: '1' }],
+      columns,
+      _features: stockFeatures,
+      _rowModels: {},
+    })
+
+    let received: unknown
+
+    table.Subscribe({
+      children: (atoms) => {
+        received = atoms
+        return []
+      },
+    })
+
+    expect(received).toBe(table.atoms)
+  })
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ca60368c95..a329588ede 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8887,16 +8887,16 @@ importers:
         version: 0.5.0(@angular/core@22.0.0(@angular/compiler@22.0.0)(rxjs@7.8.2))(@types/react@19.2.16)(preact@10.29.2)(react@19.2.7)(solid-js@1.9.13)(vue@3.5.35(typescript@6.0.3))
       '@tanstack/react-devtools':
         specifier: '>=0.10.0'
-        version: 0.10.5(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(solid-js@1.9.13)
+        version: 0.10.5(@types/react-dom@19.2.3(@types/react@19.2.16))(@types/react@19.2.16)(react-dom@19.2.6(react@19.2.7))(react@19.2.7)(solid-js@1.9.13)
       '@tanstack/table-devtools':
         specifier: workspace:*
         version: link:../table-devtools
       '@types/react-dom':
         specifier: '>=18.0.0'
-        version: 19.2.3(@types/react@19.2.15)
+        version: 19.2.3(@types/react@19.2.16)
       react-dom:
         specifier: '>=18'
-        version: 19.2.6(react@19.2.6)
+        version: 19.2.6(react@19.2.7)
     devDependencies:
       '@eslint-react/eslint-plugin':
         specifier: ^5.8.10
@@ -8922,9 +8922,9 @@ importers:
 
   packages/solid-table:
     dependencies:
-      '@tanstack/solid-store':
+      '@tanstack/store':
         specifier: ^0.11.0
-        version: 0.11.0(solid-js@1.9.13)
+        version: 0.11.0
       '@tanstack/table-core':
         specifier: workspace:*
         version: link:../table-core
@@ -9019,12 +9019,12 @@ importers:
 
   packages/vue-table:
     dependencies:
+      '@tanstack/store':
+        specifier: ^0.11.0
+        version: 0.11.0
       '@tanstack/table-core':
         specifier: workspace:*
         version: link:../table-core
-      '@tanstack/vue-store':
-        specifier: ^0.11.0
-        version: 0.11.0(vue@3.5.35(typescript@6.0.3))
     devDependencies:
       '@vitejs/plugin-vue':
         specifier: ^6.0.7
@@ -14107,9 +14107,6 @@ packages:
     peerDependencies:
       '@types/react': '*'
 
-  '@types/react@19.2.15':
-    resolution: {integrity: sha512-eRwcGNHve+E8qtEQSSRl6urh+rFop4v8gm6O8rGv25CodbvFdLjA1vVQ1KkiFE0w0UPOnb8tDiFKL5lp0rtY5Q==}
-
   '@types/react@19.2.16':
     resolution: {integrity: sha512-esJiCAnl0kfpNdE69f3So4WJUXy95dLZydX0KwK46riIHDzHM7O9Vtf9xCHW0PXIqvgqNrswl522kA/5yx+F4w==}
 
@@ -17333,10 +17330,6 @@ packages:
       react: '>=16.6.0'
       react-dom: '>=16.6.0'
 
-  react@19.2.6:
-    resolution: {integrity: sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q==}
-    engines: {node: '>=0.10.0'}
-
   react@19.2.7:
     resolution: {integrity: sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==}
     engines: {node: '>=0.10.0'}
@@ -23809,13 +23802,13 @@ snapshots:
   '@tanstack/query-devtools@5.101.0':
     optional: true
 
-  '@tanstack/react-devtools@0.10.5(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(solid-js@1.9.13)':
+  '@tanstack/react-devtools@0.10.5(@types/react-dom@19.2.3(@types/react@19.2.16))(@types/react@19.2.16)(react-dom@19.2.6(react@19.2.7))(react@19.2.7)(solid-js@1.9.13)':
     dependencies:
       '@tanstack/devtools': 0.12.2(csstype@3.2.3)(solid-js@1.9.13)
-      '@types/react': 19.2.15
-      '@types/react-dom': 19.2.3(@types/react@19.2.15)
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
+      '@types/react': 19.2.16
+      '@types/react-dom': 19.2.3(@types/react@19.2.16)
+      react: 19.2.7
+      react-dom: 19.2.6(react@19.2.7)
     transitivePeerDependencies:
       - bufferutil
       - csstype
@@ -24222,10 +24215,6 @@ snapshots:
 
   '@types/range-parser@1.2.7': {}
 
-  '@types/react-dom@19.2.3(@types/react@19.2.15)':
-    dependencies:
-      '@types/react': 19.2.15
-
   '@types/react-dom@19.2.3(@types/react@19.2.16)':
     dependencies:
       '@types/react': 19.2.16
@@ -24234,10 +24223,6 @@ snapshots:
     dependencies:
       '@types/react': 19.2.16
 
-  '@types/react@19.2.15':
-    dependencies:
-      csstype: 3.2.3
-
   '@types/react@19.2.16':
     dependencies:
       csstype: 3.2.3
@@ -28005,9 +27990,9 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.16
 
-  react-dom@19.2.6(react@19.2.6):
+  react-dom@19.2.6(react@19.2.7):
     dependencies:
-      react: 19.2.6
+      react: 19.2.7
       scheduler: 0.27.0
 
   react-dom@19.2.7(react@19.2.7):
@@ -28080,8 +28065,6 @@ snapshots:
       react: 19.2.7
       react-dom: 19.2.7(react@19.2.7)
 
-  react@19.2.6: {}
-
   react@19.2.7: {}
 
   readable-stream@2.3.8:

From e1e6853dc52c0089cceb090cfb7d80fc077cc66d Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sat, 6 Jun 2026 08:26:36 +0000
Subject: [PATCH 03/10] ci: apply automated fixes

---
 .../src/app/components/table-components.ts    |  5 ++-
 examples/solid/kitchen-sink/src/App.tsx       |  4 +-
 examples/solid/with-tanstack-form/src/App.tsx |  4 +-
 examples/vue/column-pinning-split/src/App.vue |  5 ++-
 .../vue/column-pinning-sticky/src/App.vue     |  5 ++-
 .../column-resizing-performant/src/App.vue    |  5 ++-
 examples/vue/column-resizing/src/App.vue      |  5 ++-
 examples/vue/column-sizing/src/App.vue        |  5 ++-
 examples/vue/filters-faceted/src/App.vue      |  5 ++-
 examples/vue/filters-fuzzy/src/App.vue        |  5 ++-
 examples/vue/grouping/src/App.vue             |  5 ++-
 examples/vue/kitchen-sink/src/App.vue         |  4 +-
 examples/vue/pagination/src/App.vue           |  5 ++-
 examples/vue/row-pinning/src/App.vue          |  5 ++-
 examples/vue/with-tanstack-form/src/App.vue   |  5 ++-
 packages/solid-table/src/createTable.ts       |  4 +-
 packages/solid-table/src/createTableHook.tsx  | 39 +++----------------
 packages/vue-table/src/reactivity.ts          |  7 +++-
 packages/vue-table/src/useTable.ts            |  4 +-
 19 files changed, 70 insertions(+), 56 deletions(-)

diff --git a/examples/angular/composable-tables/src/app/components/table-components.ts b/examples/angular/composable-tables/src/app/components/table-components.ts
index 5d7798d45e..860c615c26 100644
--- a/examples/angular/composable-tables/src/app/components/table-components.ts
+++ b/examples/angular/composable-tables/src/app/components/table-components.ts
@@ -78,7 +78,10 @@ export class RowCount {
       <span>
         Page
         <strong>
-          {{ (table().store.get().pagination.pageIndex + 1).toLocaleString() }} of
+          {{
+            (table().store.get().pagination.pageIndex + 1).toLocaleString()
+          }}
+          of
           {{ pageCount() }}
         </strong>
       </span>
diff --git a/examples/solid/kitchen-sink/src/App.tsx b/examples/solid/kitchen-sink/src/App.tsx
index ee8be44c37..46526e434e 100644
--- a/examples/solid/kitchen-sink/src/App.tsx
+++ b/examples/solid/kitchen-sink/src/App.tsx
@@ -756,7 +756,9 @@ function App() {
       <div class="spacer-md" />
       <details>
         <summary>Table state (live)</summary>
-        <pre class="state-dump">{JSON.stringify(table.store.get(), null, 2)}</pre>
+        <pre class="state-dump">
+          {JSON.stringify(table.store.get(), null, 2)}
+        </pre>
       </details>
     </div>
   )
diff --git a/examples/solid/with-tanstack-form/src/App.tsx b/examples/solid/with-tanstack-form/src/App.tsx
index 36dc7fca3d..ad6b085a7d 100644
--- a/examples/solid/with-tanstack-form/src/App.tsx
+++ b/examples/solid/with-tanstack-form/src/App.tsx
@@ -307,8 +307,8 @@ function App() {
             <span class="inline-controls">
               <div>Page</div>
               <strong>
-                {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
-                {table.getPageCount().toLocaleString()}
+                {(table.store.get().pagination.pageIndex + 1).toLocaleString()}{' '}
+                of {table.getPageCount().toLocaleString()}
               </strong>
             </span>
             <span class="inline-controls">
diff --git a/examples/vue/column-pinning-split/src/App.vue b/examples/vue/column-pinning-split/src/App.vue
index 706ff561af..7bff93aa9e 100644
--- a/examples/vue/column-pinning-split/src/App.vue
+++ b/examples/vue/column-pinning-split/src/App.vue
@@ -184,7 +184,10 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
+            {{
+              (table.store.get().pagination.pageIndex + 1).toLocaleString()
+            }}
+            of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
         </span>
diff --git a/examples/vue/column-pinning-sticky/src/App.vue b/examples/vue/column-pinning-sticky/src/App.vue
index 706ff561af..7bff93aa9e 100644
--- a/examples/vue/column-pinning-sticky/src/App.vue
+++ b/examples/vue/column-pinning-sticky/src/App.vue
@@ -184,7 +184,10 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
+            {{
+              (table.store.get().pagination.pageIndex + 1).toLocaleString()
+            }}
+            of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
         </span>
diff --git a/examples/vue/column-resizing-performant/src/App.vue b/examples/vue/column-resizing-performant/src/App.vue
index 687474dd11..44a6f7ee90 100644
--- a/examples/vue/column-resizing-performant/src/App.vue
+++ b/examples/vue/column-resizing-performant/src/App.vue
@@ -184,7 +184,10 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
+            {{
+              (table.store.get().pagination.pageIndex + 1).toLocaleString()
+            }}
+            of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
         </span>
diff --git a/examples/vue/column-resizing/src/App.vue b/examples/vue/column-resizing/src/App.vue
index 706ff561af..7bff93aa9e 100644
--- a/examples/vue/column-resizing/src/App.vue
+++ b/examples/vue/column-resizing/src/App.vue
@@ -184,7 +184,10 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
+            {{
+              (table.store.get().pagination.pageIndex + 1).toLocaleString()
+            }}
+            of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
         </span>
diff --git a/examples/vue/column-sizing/src/App.vue b/examples/vue/column-sizing/src/App.vue
index 706ff561af..7bff93aa9e 100644
--- a/examples/vue/column-sizing/src/App.vue
+++ b/examples/vue/column-sizing/src/App.vue
@@ -184,7 +184,10 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
+            {{
+              (table.store.get().pagination.pageIndex + 1).toLocaleString()
+            }}
+            of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
         </span>
diff --git a/examples/vue/filters-faceted/src/App.vue b/examples/vue/filters-faceted/src/App.vue
index 706ff561af..7bff93aa9e 100644
--- a/examples/vue/filters-faceted/src/App.vue
+++ b/examples/vue/filters-faceted/src/App.vue
@@ -184,7 +184,10 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
+            {{
+              (table.store.get().pagination.pageIndex + 1).toLocaleString()
+            }}
+            of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
         </span>
diff --git a/examples/vue/filters-fuzzy/src/App.vue b/examples/vue/filters-fuzzy/src/App.vue
index 706ff561af..7bff93aa9e 100644
--- a/examples/vue/filters-fuzzy/src/App.vue
+++ b/examples/vue/filters-fuzzy/src/App.vue
@@ -184,7 +184,10 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
+            {{
+              (table.store.get().pagination.pageIndex + 1).toLocaleString()
+            }}
+            of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
         </span>
diff --git a/examples/vue/grouping/src/App.vue b/examples/vue/grouping/src/App.vue
index 706ff561af..7bff93aa9e 100644
--- a/examples/vue/grouping/src/App.vue
+++ b/examples/vue/grouping/src/App.vue
@@ -184,7 +184,10 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
+            {{
+              (table.store.get().pagination.pageIndex + 1).toLocaleString()
+            }}
+            of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
         </span>
diff --git a/examples/vue/kitchen-sink/src/App.vue b/examples/vue/kitchen-sink/src/App.vue
index c1d66d5ebe..9edf37383b 100644
--- a/examples/vue/kitchen-sink/src/App.vue
+++ b/examples/vue/kitchen-sink/src/App.vue
@@ -783,7 +783,9 @@ function shuffleColumns() {
     <div class="spacer-md" />
     <details>
       <summary>Table state (live)</summary>
-      <pre class="state-dump">{{ JSON.stringify(table.store.get(), null, 2) }}</pre>
+      <pre class="state-dump">{{
+        JSON.stringify(table.store.get(), null, 2)
+      }}</pre>
     </details>
   </div>
 </template>
diff --git a/examples/vue/pagination/src/App.vue b/examples/vue/pagination/src/App.vue
index 706ff561af..7bff93aa9e 100644
--- a/examples/vue/pagination/src/App.vue
+++ b/examples/vue/pagination/src/App.vue
@@ -184,7 +184,10 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
+            {{
+              (table.store.get().pagination.pageIndex + 1).toLocaleString()
+            }}
+            of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
         </span>
diff --git a/examples/vue/row-pinning/src/App.vue b/examples/vue/row-pinning/src/App.vue
index 706ff561af..7bff93aa9e 100644
--- a/examples/vue/row-pinning/src/App.vue
+++ b/examples/vue/row-pinning/src/App.vue
@@ -184,7 +184,10 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
+            {{
+              (table.store.get().pagination.pageIndex + 1).toLocaleString()
+            }}
+            of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
         </span>
diff --git a/examples/vue/with-tanstack-form/src/App.vue b/examples/vue/with-tanstack-form/src/App.vue
index 706ff561af..7bff93aa9e 100644
--- a/examples/vue/with-tanstack-form/src/App.vue
+++ b/examples/vue/with-tanstack-form/src/App.vue
@@ -184,7 +184,10 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
+            {{
+              (table.store.get().pagination.pageIndex + 1).toLocaleString()
+            }}
+            of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
         </span>
diff --git a/packages/solid-table/src/createTable.ts b/packages/solid-table/src/createTable.ts
index 46987a3f7d..ac44433729 100644
--- a/packages/solid-table/src/createTable.ts
+++ b/packages/solid-table/src/createTable.ts
@@ -69,9 +69,7 @@ export type SolidTable<
 export function createTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
->(
-  tableOptions: TableOptions<TFeatures, TData>,
-): SolidTable<TFeatures, TData> {
+>(tableOptions: TableOptions<TFeatures, TData>): SolidTable<TFeatures, TData> {
   const owner = getOwner()!
   const reactivity = solidReactivity(owner)
 
diff --git a/packages/solid-table/src/createTableHook.tsx b/packages/solid-table/src/createTableHook.tsx
index e3ec1fd22f..52683b19a4 100644
--- a/packages/solid-table/src/createTableHook.tsx
+++ b/packages/solid-table/src/createTableHook.tsx
@@ -316,12 +316,7 @@ export interface AppCellComponent<
   TCellComponents extends Record<string, ComponentType<any>>,
 > {
   <TValue extends CellData = CellData>(
-    props: AppCellProps<
-      TFeatures,
-      TData,
-      TValue,
-      TCellComponents
-    >,
+    props: AppCellProps<TFeatures, TData, TValue, TCellComponents>,
   ): JSXElement
 }
 
@@ -334,12 +329,7 @@ export interface AppHeaderComponent<
   THeaderComponents extends Record<string, ComponentType<any>>,
 > {
   <TValue extends CellData = CellData>(
-    props: AppHeaderProps<
-      TFeatures,
-      TData,
-      TValue,
-      THeaderComponents
-    >,
+    props: AppHeaderProps<TFeatures, TData, TValue, THeaderComponents>,
   ): JSXElement
 }
 
@@ -532,9 +522,7 @@ export function createTableHook<
   THeaderComponents
 >) {
   // Create contexts internally with TFeatures baked in
-  const TableContext = createContext<SolidTable<TFeatures, any>>(
-    null as never,
-  )
+  const TableContext = createContext<SolidTable<TFeatures, any>>(null as never)
   const CellContext = createContext<Cell<TFeatures, any, any>>(null as never)
   const HeaderContext = createContext<Header<TFeatures, any, any>>(
     null as never,
@@ -759,12 +747,7 @@ export function createTableHook<
 
     // AppCell - Wraps cell with context and pre-bound cellComponents
     function AppCell<TValue extends CellData = CellData>(
-      props: AppCellProps<
-        TFeatures,
-        TData,
-        TValue,
-        TCellComponents
-      >,
+      props: AppCellProps<TFeatures, TData, TValue, TCellComponents>,
     ): JSXElement
     function AppCell<TValue extends CellData = CellData>(
       props: AppCellProps<TFeatures, TData, TValue, TCellComponents>,
@@ -784,12 +767,7 @@ export function createTableHook<
 
     // AppHeader - Wraps header with context and pre-bound headerComponents
     function AppHeader<TValue extends CellData = CellData>(
-      props: AppHeaderProps<
-        TFeatures,
-        TData,
-        TValue,
-        THeaderComponents
-      >,
+      props: AppHeaderProps<TFeatures, TData, TValue, THeaderComponents>,
     ): JSXElement
     function AppHeader<TValue extends CellData = CellData>(
       props: AppHeaderProps<TFeatures, TData, TValue, THeaderComponents>,
@@ -809,12 +787,7 @@ export function createTableHook<
 
     // AppFooter - Same as AppHeader but uses FooterFlexRender (footers use Header type)
     function AppFooter<TValue extends CellData = CellData>(
-      props: AppHeaderProps<
-        TFeatures,
-        TData,
-        TValue,
-        THeaderComponents
-      >,
+      props: AppHeaderProps<TFeatures, TData, TValue, THeaderComponents>,
     ): JSXElement
     function AppFooter<TValue extends CellData = CellData>(
       props: AppHeaderProps<TFeatures, TData, TValue, THeaderComponents>,
diff --git a/packages/vue-table/src/reactivity.ts b/packages/vue-table/src/reactivity.ts
index 2b85bb2325..93ba3ec9e7 100644
--- a/packages/vue-table/src/reactivity.ts
+++ b/packages/vue-table/src/reactivity.ts
@@ -4,7 +4,12 @@ import type {
   TableAtomOptions,
   TableReactivityBindings,
 } from '@tanstack/table-core/reactivity'
-import type { Atom, Observer, ReadonlyAtom, Subscription } from '@tanstack/store'
+import type {
+  Atom,
+  Observer,
+  ReadonlyAtom,
+  Subscription,
+} from '@tanstack/store'
 import type { ComputedRef, ShallowRef } from 'vue'
 
 function observerToCallback<T>(
diff --git a/packages/vue-table/src/useTable.ts b/packages/vue-table/src/useTable.ts
index 6e77ed68cd..b980bd830b 100644
--- a/packages/vue-table/src/useTable.ts
+++ b/packages/vue-table/src/useTable.ts
@@ -58,9 +58,7 @@ export type VueTable<
    * atoms it needs, so Vue only tracks those atom reads.
    */
   Subscribe: (props: {
-    children: (
-      atoms: Table<TFeatures, TData>['atoms'],
-    ) => VNode | Array<VNode>
+    children: (atoms: Table<TFeatures, TData>['atoms']) => VNode | Array<VNode>
   }) => VNode | Array<VNode>
 }
 

From b53bbf643208f6539f91f96406f92f824ef850be Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sat, 6 Jun 2026 08:28:05 +0000
Subject: [PATCH 04/10] ci: apply automated fixes (attempt 2/3)

---
 .../composable-tables/src/app/components/table-components.ts  | 4 +---
 examples/vue/column-pinning-split/src/App.vue                 | 4 +---
 examples/vue/column-pinning-sticky/src/App.vue                | 4 +---
 examples/vue/column-resizing-performant/src/App.vue           | 4 +---
 examples/vue/column-resizing/src/App.vue                      | 4 +---
 examples/vue/column-sizing/src/App.vue                        | 4 +---
 examples/vue/filters-faceted/src/App.vue                      | 4 +---
 examples/vue/filters-fuzzy/src/App.vue                        | 4 +---
 examples/vue/grouping/src/App.vue                             | 4 +---
 examples/vue/pagination/src/App.vue                           | 4 +---
 examples/vue/row-pinning/src/App.vue                          | 4 +---
 examples/vue/with-tanstack-form/src/App.vue                   | 4 +---
 12 files changed, 12 insertions(+), 36 deletions(-)

diff --git a/examples/angular/composable-tables/src/app/components/table-components.ts b/examples/angular/composable-tables/src/app/components/table-components.ts
index 860c615c26..0367b57091 100644
--- a/examples/angular/composable-tables/src/app/components/table-components.ts
+++ b/examples/angular/composable-tables/src/app/components/table-components.ts
@@ -78,9 +78,7 @@ export class RowCount {
       <span>
         Page
         <strong>
-          {{
-            (table().store.get().pagination.pageIndex + 1).toLocaleString()
-          }}
+          {{ (table().store.get().pagination.pageIndex + 1).toLocaleString() }}
           of
           {{ pageCount() }}
         </strong>
diff --git a/examples/vue/column-pinning-split/src/App.vue b/examples/vue/column-pinning-split/src/App.vue
index 7bff93aa9e..7ccf264a89 100644
--- a/examples/vue/column-pinning-split/src/App.vue
+++ b/examples/vue/column-pinning-split/src/App.vue
@@ -184,9 +184,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{
-              (table.store.get().pagination.pageIndex + 1).toLocaleString()
-            }}
+            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }}
             of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
diff --git a/examples/vue/column-pinning-sticky/src/App.vue b/examples/vue/column-pinning-sticky/src/App.vue
index 7bff93aa9e..7ccf264a89 100644
--- a/examples/vue/column-pinning-sticky/src/App.vue
+++ b/examples/vue/column-pinning-sticky/src/App.vue
@@ -184,9 +184,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{
-              (table.store.get().pagination.pageIndex + 1).toLocaleString()
-            }}
+            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }}
             of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
diff --git a/examples/vue/column-resizing-performant/src/App.vue b/examples/vue/column-resizing-performant/src/App.vue
index 44a6f7ee90..15b6120e72 100644
--- a/examples/vue/column-resizing-performant/src/App.vue
+++ b/examples/vue/column-resizing-performant/src/App.vue
@@ -184,9 +184,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{
-              (table.store.get().pagination.pageIndex + 1).toLocaleString()
-            }}
+            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }}
             of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
diff --git a/examples/vue/column-resizing/src/App.vue b/examples/vue/column-resizing/src/App.vue
index 7bff93aa9e..7ccf264a89 100644
--- a/examples/vue/column-resizing/src/App.vue
+++ b/examples/vue/column-resizing/src/App.vue
@@ -184,9 +184,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{
-              (table.store.get().pagination.pageIndex + 1).toLocaleString()
-            }}
+            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }}
             of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
diff --git a/examples/vue/column-sizing/src/App.vue b/examples/vue/column-sizing/src/App.vue
index 7bff93aa9e..7ccf264a89 100644
--- a/examples/vue/column-sizing/src/App.vue
+++ b/examples/vue/column-sizing/src/App.vue
@@ -184,9 +184,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{
-              (table.store.get().pagination.pageIndex + 1).toLocaleString()
-            }}
+            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }}
             of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
diff --git a/examples/vue/filters-faceted/src/App.vue b/examples/vue/filters-faceted/src/App.vue
index 7bff93aa9e..7ccf264a89 100644
--- a/examples/vue/filters-faceted/src/App.vue
+++ b/examples/vue/filters-faceted/src/App.vue
@@ -184,9 +184,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{
-              (table.store.get().pagination.pageIndex + 1).toLocaleString()
-            }}
+            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }}
             of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
diff --git a/examples/vue/filters-fuzzy/src/App.vue b/examples/vue/filters-fuzzy/src/App.vue
index 7bff93aa9e..7ccf264a89 100644
--- a/examples/vue/filters-fuzzy/src/App.vue
+++ b/examples/vue/filters-fuzzy/src/App.vue
@@ -184,9 +184,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{
-              (table.store.get().pagination.pageIndex + 1).toLocaleString()
-            }}
+            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }}
             of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
diff --git a/examples/vue/grouping/src/App.vue b/examples/vue/grouping/src/App.vue
index 7bff93aa9e..7ccf264a89 100644
--- a/examples/vue/grouping/src/App.vue
+++ b/examples/vue/grouping/src/App.vue
@@ -184,9 +184,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{
-              (table.store.get().pagination.pageIndex + 1).toLocaleString()
-            }}
+            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }}
             of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
diff --git a/examples/vue/pagination/src/App.vue b/examples/vue/pagination/src/App.vue
index 7bff93aa9e..7ccf264a89 100644
--- a/examples/vue/pagination/src/App.vue
+++ b/examples/vue/pagination/src/App.vue
@@ -184,9 +184,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{
-              (table.store.get().pagination.pageIndex + 1).toLocaleString()
-            }}
+            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }}
             of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
diff --git a/examples/vue/row-pinning/src/App.vue b/examples/vue/row-pinning/src/App.vue
index 7bff93aa9e..7ccf264a89 100644
--- a/examples/vue/row-pinning/src/App.vue
+++ b/examples/vue/row-pinning/src/App.vue
@@ -184,9 +184,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{
-              (table.store.get().pagination.pageIndex + 1).toLocaleString()
-            }}
+            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }}
             of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
diff --git a/examples/vue/with-tanstack-form/src/App.vue b/examples/vue/with-tanstack-form/src/App.vue
index 7bff93aa9e..7ccf264a89 100644
--- a/examples/vue/with-tanstack-form/src/App.vue
+++ b/examples/vue/with-tanstack-form/src/App.vue
@@ -184,9 +184,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{
-              (table.store.get().pagination.pageIndex + 1).toLocaleString()
-            }}
+            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }}
             of
             {{ table.getPageCount().toLocaleString() }}
           </strong>

From 189edb8bbb93f6f399ffda251b8889c497a914e1 Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Sun, 7 Jun 2026 09:44:08 +0200
Subject: [PATCH 05/10] fix: update all examples to call table.atoms instead of
 table.store

---
 .../src/app/components/table-components.ts        |  6 +++---
 examples/solid/column-resizing/src/App.tsx        |  2 +-
 examples/solid/column-sizing/src/App.tsx          |  2 +-
 .../src/components/table-components.tsx           |  2 +-
 examples/solid/expanding/src/App.tsx              |  6 +++---
 examples/solid/filters-faceted/src/App.tsx        |  8 ++++----
 examples/solid/filters-fuzzy/src/App.tsx          | 12 ++++++------
 examples/solid/filters/src/App.tsx                |  8 ++++----
 examples/solid/grouping/src/App.tsx               |  6 +++---
 examples/solid/kitchen-sink/src/App.tsx           | 14 +++++++-------
 examples/solid/pagination/src/App.tsx             |  6 +++---
 examples/solid/row-pinning/src/App.tsx            |  6 +++---
 examples/solid/row-selection/src/App.tsx          | 10 +++++-----
 examples/solid/with-tanstack-form/src/App.tsx     |  6 +++---
 .../with-tanstack-router/src/components/table.tsx |  6 +++---
 examples/vue/basic-external-state/src/App.tsx     | 12 ++++--------
 examples/vue/column-ordering/src/App.vue          |  8 ++------
 examples/vue/column-pinning-split/src/App.vue     |  7 +++----
 examples/vue/column-pinning-sticky/src/App.vue    |  7 +++----
 examples/vue/column-pinning/src/App.vue           |  9 ++-------
 .../vue/column-resizing-performant/src/App.vue    |  7 +++----
 examples/vue/column-resizing/src/App.vue          |  7 +++----
 examples/vue/column-sizing/src/App.vue            |  7 +++----
 examples/vue/expanding/src/App.tsx                |  6 +++---
 examples/vue/filters-faceted/src/App.vue          |  7 +++----
 examples/vue/filters-fuzzy/src/App.vue            |  7 +++----
 examples/vue/filters/src/App.vue                  | 11 +++--------
 examples/vue/grouping/src/App.vue                 |  7 +++----
 examples/vue/kitchen-sink/src/App.vue             | 15 +++++++--------
 examples/vue/pagination/src/App.vue               |  7 +++----
 examples/vue/row-pinning/src/App.vue              |  7 +++----
 examples/vue/row-selection/src/App.vue            |  1 -
 examples/vue/sorting/src/App.vue                  |  3 +--
 examples/vue/sub-components/src/App.vue           |  1 -
 examples/vue/with-tanstack-form/src/App.vue       |  7 +++----
 packages/solid-table/package.json                 |  2 +-
 packages/solid-table/src/createTable.ts           |  4 ++--
 packages/vue-table/package.json                   |  2 +-
 38 files changed, 109 insertions(+), 142 deletions(-)

diff --git a/examples/angular/composable-tables/src/app/components/table-components.ts b/examples/angular/composable-tables/src/app/components/table-components.ts
index 0367b57091..f272b2173c 100644
--- a/examples/angular/composable-tables/src/app/components/table-components.ts
+++ b/examples/angular/composable-tables/src/app/components/table-components.ts
@@ -78,7 +78,7 @@ export class RowCount {
       <span>
         Page
         <strong>
-          {{ (table().store.get().pagination.pageIndex + 1).toLocaleString() }}
+          {{ (table().atoms.pagination.get().pageIndex + 1).toLocaleString() }}
           of
           {{ pageCount() }}
         </strong>
@@ -89,12 +89,12 @@ export class RowCount {
           type="number"
           min="1"
           [max]="table().getPageCount()"
-          [value]="table().store.get().pagination.pageIndex + 1"
+          [value]="table().atoms.pagination.get().pageIndex + 1"
           (change)="onPageChange($event)"
         />
       </span>
       <select
-        [value]="table().store.get().pagination.pageSize"
+        [value]="table().atoms.pagination.get().pageSize"
         (change)="onPageSizeChange($event)"
       >
         @for (size of pageSizes; track size) {
diff --git a/examples/solid/column-resizing/src/App.tsx b/examples/solid/column-resizing/src/App.tsx
index 59815b1c55..d5d43ac124 100644
--- a/examples/solid/column-resizing/src/App.tsx
+++ b/examples/solid/column-resizing/src/App.tsx
@@ -97,7 +97,7 @@ function App() {
     header: ReturnType<typeof table.getHeaderGroups>[number]['headers'][number],
   ) => {
     if (columnResizeMode() === 'onEnd' && header.column.getIsResizing()) {
-      const delta = table.store.get().columnResizing.deltaOffset ?? 0
+      const delta = table.atoms.columnResizing.get().deltaOffset ?? 0
       const dir = table.options.columnResizeDirection === 'rtl' ? -1 : 1
       return `translateX(${dir * delta}px)`
     }
diff --git a/examples/solid/column-sizing/src/App.tsx b/examples/solid/column-sizing/src/App.tsx
index 6f674c0e60..9000bd3391 100644
--- a/examples/solid/column-sizing/src/App.tsx
+++ b/examples/solid/column-sizing/src/App.tsx
@@ -87,7 +87,7 @@ function App() {
                   value={column.getSize()}
                   onInput={(e) => {
                     table.setColumnSizing({
-                      ...table.store.get().columnSizing,
+                      ...table.atoms.columnSizing.get(),
                       [column.id]: Number(e.currentTarget.value),
                     })
                   }}
diff --git a/examples/solid/composable-tables/src/components/table-components.tsx b/examples/solid/composable-tables/src/components/table-components.tsx
index 0edd4f3ca9..fab502d1f0 100644
--- a/examples/solid/composable-tables/src/components/table-components.tsx
+++ b/examples/solid/composable-tables/src/components/table-components.tsx
@@ -13,7 +13,7 @@ import { useTableContext } from '../hooks/table'
 export function PaginationControls() {
   const table = useTableContext()
 
-  const pagination = createMemo(() => table.store.get().pagination)
+  const pagination = createMemo(() => table.atoms.pagination.get())
 
   return (
     <div class="pagination">
diff --git a/examples/solid/expanding/src/App.tsx b/examples/solid/expanding/src/App.tsx
index 1ea283f803..a853993c1d 100644
--- a/examples/solid/expanding/src/App.tsx
+++ b/examples/solid/expanding/src/App.tsx
@@ -195,7 +195,7 @@ function App() {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
+            {(table.atoms.pagination.get().pageIndex + 1).toLocaleString()} of{' '}
             {table.getPageCount().toLocaleString()}
           </strong>
         </span>
@@ -205,7 +205,7 @@ function App() {
             type="number"
             min="1"
             max={table.getPageCount()}
-            value={table.store.get().pagination.pageIndex + 1}
+            value={table.atoms.pagination.get().pageIndex + 1}
             onInput={(e) => {
               const page = e.currentTarget.value
                 ? Number(e.currentTarget.value) - 1
@@ -216,7 +216,7 @@ function App() {
           />
         </span>
         <select
-          value={table.store.get().pagination.pageSize}
+          value={table.atoms.pagination.get().pageSize}
           onChange={(e) => {
             table.setPageSize(Number(e.currentTarget.value))
           }}
diff --git a/examples/solid/filters-faceted/src/App.tsx b/examples/solid/filters-faceted/src/App.tsx
index 2b6a57aa4d..87d9346227 100644
--- a/examples/solid/filters-faceted/src/App.tsx
+++ b/examples/solid/filters-faceted/src/App.tsx
@@ -116,7 +116,7 @@ function App() {
       </div>
       <input
         class="summary-panel"
-        value={table.store.get().globalFilter ?? ''}
+        value={table.atoms.globalFilter.get() ?? ''}
         onInput={(e) =>
           globalFilterDebouncer.maybeExecute(e.currentTarget.value)
         }
@@ -200,7 +200,7 @@ function App() {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
+            {(table.atoms.pagination.get().pageIndex + 1).toLocaleString()} of{' '}
             {table.getPageCount().toLocaleString()}
           </strong>
         </span>
@@ -210,7 +210,7 @@ function App() {
             type="number"
             min="1"
             max={table.getPageCount()}
-            value={table.store.get().pagination.pageIndex + 1}
+            value={table.atoms.pagination.get().pageIndex + 1}
             onInput={(e) => {
               const page = e.currentTarget.value
                 ? Number(e.currentTarget.value) - 1
@@ -221,7 +221,7 @@ function App() {
           />
         </span>
         <select
-          value={table.store.get().pagination.pageSize}
+          value={table.atoms.pagination.get().pageSize}
           onChange={(e) => {
             table.setPageSize(Number(e.currentTarget.value))
           }}
diff --git a/examples/solid/filters-fuzzy/src/App.tsx b/examples/solid/filters-fuzzy/src/App.tsx
index b839365a86..edac551f7a 100644
--- a/examples/solid/filters-fuzzy/src/App.tsx
+++ b/examples/solid/filters-fuzzy/src/App.tsx
@@ -110,8 +110,8 @@ function App() {
   })
 
   createEffect(() => {
-    if (table.store.get().columnFilters[0]?.id === 'fullName') {
-      if (table.store.get().sorting[0]?.id !== 'fullName') {
+    if (table.atoms.columnFilters.get()[0]?.id === 'fullName') {
+      if (table.atoms.sorting.get()[0]?.id !== 'fullName') {
         table.setSorting([{ id: 'fullName', desc: false }])
       }
     }
@@ -125,7 +125,7 @@ function App() {
       </div>
       <div>
         <DebouncedInput
-          value={(table.store.get().globalFilter ?? '') as string}
+          value={(table.atoms.globalFilter.get() ?? '') as string}
           onChange={(value) => table.setGlobalFilter(String(value))}
           class="summary-panel"
           placeholder="Search all columns..."
@@ -221,7 +221,7 @@ function App() {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
+            {(table.atoms.pagination.get().pageIndex + 1).toLocaleString()} of{' '}
             {table.getPageCount().toLocaleString()}
           </strong>
         </span>
@@ -229,7 +229,7 @@ function App() {
           | Go to page:
           <input
             type="number"
-            value={table.store.get().pagination.pageIndex + 1}
+            value={table.atoms.pagination.get().pageIndex + 1}
             onInput={(e) => {
               const page = e.currentTarget.value
                 ? Number(e.currentTarget.value) - 1
@@ -240,7 +240,7 @@ function App() {
           />
         </span>
         <select
-          value={table.store.get().pagination.pageSize}
+          value={table.atoms.pagination.get().pageSize}
           onChange={(e) => table.setPageSize(Number(e.currentTarget.value))}
         >
           <For each={[10, 20, 30, 40, 50]}>
diff --git a/examples/solid/filters/src/App.tsx b/examples/solid/filters/src/App.tsx
index d36dbf309d..f2a382b536 100644
--- a/examples/solid/filters/src/App.tsx
+++ b/examples/solid/filters/src/App.tsx
@@ -119,7 +119,7 @@ function App() {
       </div>
       <input
         class="summary-panel"
-        value={table.store.get().globalFilter ?? ''}
+        value={table.atoms.globalFilter.get() ?? ''}
         onInput={(e) =>
           globalFilterDebouncer.maybeExecute(e.currentTarget.value)
         }
@@ -203,7 +203,7 @@ function App() {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
+            {(table.atoms.pagination.get().pageIndex + 1).toLocaleString()} of{' '}
             {table.getPageCount().toLocaleString()}
           </strong>
         </span>
@@ -213,7 +213,7 @@ function App() {
             type="number"
             min="1"
             max={table.getPageCount()}
-            value={table.store.get().pagination.pageIndex + 1}
+            value={table.atoms.pagination.get().pageIndex + 1}
             onInput={(e) => {
               const page = e.currentTarget.value
                 ? Number(e.currentTarget.value) - 1
@@ -224,7 +224,7 @@ function App() {
           />
         </span>
         <select
-          value={table.store.get().pagination.pageSize}
+          value={table.atoms.pagination.get().pageSize}
           onChange={(e) => {
             table.setPageSize(Number(e.currentTarget.value))
           }}
diff --git a/examples/solid/grouping/src/App.tsx b/examples/solid/grouping/src/App.tsx
index bb99f04e33..29b728e001 100644
--- a/examples/solid/grouping/src/App.tsx
+++ b/examples/solid/grouping/src/App.tsx
@@ -204,7 +204,7 @@ function App() {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
+            {(table.atoms.pagination.get().pageIndex + 1).toLocaleString()} of{' '}
             {table.getPageCount().toLocaleString()}
           </strong>
         </span>
@@ -214,7 +214,7 @@ function App() {
             type="number"
             min="1"
             max={table.getPageCount()}
-            value={table.store.get().pagination.pageIndex + 1}
+            value={table.atoms.pagination.get().pageIndex + 1}
             onInput={(e) => {
               const page = e.currentTarget.value
                 ? Number(e.currentTarget.value) - 1
@@ -225,7 +225,7 @@ function App() {
           />
         </span>
         <select
-          value={table.store.get().pagination.pageSize}
+          value={table.atoms.pagination.get().pageSize}
           onChange={(e) => table.setPageSize(Number(e.currentTarget.value))}
         >
           <For each={[10, 20, 30, 40, 50]}>
diff --git a/examples/solid/kitchen-sink/src/App.tsx b/examples/solid/kitchen-sink/src/App.tsx
index 46526e434e..fbddc373a3 100644
--- a/examples/solid/kitchen-sink/src/App.tsx
+++ b/examples/solid/kitchen-sink/src/App.tsx
@@ -356,7 +356,7 @@ function TableCell(props: {
   table: AppTable
 }) {
   const className = () => {
-    const groupingActive = props.table.store.get().grouping.length > 0
+    const groupingActive = props.table.atoms.grouping.get().length > 0
     const hasAggregation = !!props.cell.column.columnDef.aggregationFn
     return !groupingActive
       ? undefined
@@ -555,8 +555,8 @@ function App() {
   useTanStackTableDevtools(table)
 
   const columnSizeVars = createMemo(() => {
-    void table.store.get().columnResizing
-    void table.store.get().columnSizing
+    void table.atoms.columnResizing.get()
+    void table.atoms.columnSizing.get()
     const colSizes: Record<string, number> = {}
     for (const header of table.getFlatHeaders()) {
       colSizes[`--header-${header.id}-size`] = header.getSize()
@@ -581,7 +581,7 @@ function App() {
       <div class="toolbar">
         <div class="toolbar-row">
           <DebouncedInput
-            value={(table.store.get().globalFilter ?? '') as string}
+            value={(table.atoms.globalFilter.get() ?? '') as string}
             onChange={(value) => table.setGlobalFilter(String(value))}
             class="global-filter-input"
             placeholder="Fuzzy search all columns..."
@@ -718,7 +718,7 @@ function App() {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
+            {(table.atoms.pagination.get().pageIndex + 1).toLocaleString()} of{' '}
             {table.getPageCount().toLocaleString()}
           </strong>
         </span>
@@ -728,7 +728,7 @@ function App() {
             type="number"
             min="1"
             max={table.getPageCount()}
-            value={table.store.get().pagination.pageIndex + 1}
+            value={table.atoms.pagination.get().pageIndex + 1}
             onInput={(e) => {
               const page = e.currentTarget.value
                 ? Number(e.currentTarget.value) - 1
@@ -739,7 +739,7 @@ function App() {
           />
         </span>
         <select
-          value={table.store.get().pagination.pageSize}
+          value={table.atoms.pagination.get().pageSize}
           onChange={(e) => table.setPageSize(Number(e.currentTarget.value))}
         >
           <For each={[10, 20, 30, 50, 100]}>
diff --git a/examples/solid/pagination/src/App.tsx b/examples/solid/pagination/src/App.tsx
index d8b1fedca4..899e060297 100644
--- a/examples/solid/pagination/src/App.tsx
+++ b/examples/solid/pagination/src/App.tsx
@@ -146,7 +146,7 @@ function MyTable(props: {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
+            {(table.atoms.pagination.get().pageIndex + 1).toLocaleString()} of{' '}
             {table.getPageCount().toLocaleString()}
           </strong>
         </span>
@@ -156,7 +156,7 @@ function MyTable(props: {
             type="number"
             min="1"
             max={table.getPageCount()}
-            value={table.store.get().pagination.pageIndex + 1}
+            value={table.atoms.pagination.get().pageIndex + 1}
             onInput={(e) => {
               const page = e.currentTarget.value
                 ? Number(e.currentTarget.value) - 1
@@ -167,7 +167,7 @@ function MyTable(props: {
           />
         </span>
         <select
-          value={table.store.get().pagination.pageSize}
+          value={table.atoms.pagination.get().pageSize}
           onChange={(e) => {
             table.setPageSize(Number(e.currentTarget.value))
           }}
diff --git a/examples/solid/row-pinning/src/App.tsx b/examples/solid/row-pinning/src/App.tsx
index 732239f677..b8ea9a3fe4 100644
--- a/examples/solid/row-pinning/src/App.tsx
+++ b/examples/solid/row-pinning/src/App.tsx
@@ -250,7 +250,7 @@ function App() {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
+            {(table.atoms.pagination.get().pageIndex + 1).toLocaleString()} of{' '}
             {table.getPageCount().toLocaleString()}
           </strong>
         </span>
@@ -260,7 +260,7 @@ function App() {
             type="number"
             min="1"
             max={table.getPageCount()}
-            value={table.store.get().pagination.pageIndex + 1}
+            value={table.atoms.pagination.get().pageIndex + 1}
             onInput={(e) => {
               const page = e.currentTarget.value
                 ? Number(e.currentTarget.value) - 1
@@ -271,7 +271,7 @@ function App() {
           />
         </span>
         <select
-          value={table.store.get().pagination.pageSize}
+          value={table.atoms.pagination.get().pageSize}
           onChange={(e) => table.setPageSize(Number(e.currentTarget.value))}
         >
           <For each={[10, 20, 30, 40, 50]}>
diff --git a/examples/solid/row-selection/src/App.tsx b/examples/solid/row-selection/src/App.tsx
index 62d2bc3b6f..b9db687cee 100644
--- a/examples/solid/row-selection/src/App.tsx
+++ b/examples/solid/row-selection/src/App.tsx
@@ -140,7 +140,7 @@ function App() {
       </div>
       <div>
         <input
-          value={table.store.get().globalFilter ?? ''}
+          value={table.atoms.globalFilter.get() ?? ''}
           onInput={(e) => table.setGlobalFilter(e.target.value)}
           class="summary-panel"
           placeholder="Search all columns..."
@@ -235,7 +235,7 @@ function App() {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
+            {(table.atoms.pagination.get().pageIndex + 1).toLocaleString()} of{' '}
             {table.getPageCount().toLocaleString()}
           </strong>
         </span>
@@ -245,7 +245,7 @@ function App() {
             type="number"
             min="1"
             max={table.getPageCount()}
-            value={table.store.get().pagination.pageIndex + 1}
+            value={table.atoms.pagination.get().pageIndex + 1}
             onInput={(e) => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0
               table.setPageIndex(page)
@@ -254,7 +254,7 @@ function App() {
           />
         </span>
         <select
-          value={table.store.get().pagination.pageSize}
+          value={table.atoms.pagination.get().pageSize}
           onChange={(e) => {
             table.setPageSize(Number(e.target.value))
           }}
@@ -266,7 +266,7 @@ function App() {
       </div>
       <br />
       <div>
-        {Object.keys(table.store.get().rowSelection).length.toLocaleString()} of{' '}
+        {Object.keys(table.atoms.rowSelection.get()).length.toLocaleString()} of{' '}
         {table.getPreFilteredRowModel().rows.length.toLocaleString()} Total Rows
         Selected
       </div>
diff --git a/examples/solid/with-tanstack-form/src/App.tsx b/examples/solid/with-tanstack-form/src/App.tsx
index ad6b085a7d..56e4b2fb0c 100644
--- a/examples/solid/with-tanstack-form/src/App.tsx
+++ b/examples/solid/with-tanstack-form/src/App.tsx
@@ -307,7 +307,7 @@ function App() {
             <span class="inline-controls">
               <div>Page</div>
               <strong>
-                {(table.store.get().pagination.pageIndex + 1).toLocaleString()}{' '}
+                {(table.atoms.pagination.get().pageIndex + 1).toLocaleString()}{' '}
                 of {table.getPageCount().toLocaleString()}
               </strong>
             </span>
@@ -317,7 +317,7 @@ function App() {
                 type="number"
                 min="1"
                 max={table.getPageCount()}
-                value={table.store.get().pagination.pageIndex + 1}
+                value={table.atoms.pagination.get().pageIndex + 1}
                 onInput={(e) => {
                   const page = e.currentTarget.value
                     ? Number(e.currentTarget.value) - 1
@@ -328,7 +328,7 @@ function App() {
               />
             </span>
             <select
-              value={table.store.get().pagination.pageSize}
+              value={table.atoms.pagination.get().pageSize}
               onChange={(e) => {
                 table.setPageSize(Number(e.currentTarget.value))
               }}
diff --git a/examples/solid/with-tanstack-router/src/components/table.tsx b/examples/solid/with-tanstack-router/src/components/table.tsx
index c1a7af62ff..e2e847d9d2 100644
--- a/examples/solid/with-tanstack-router/src/components/table.tsx
+++ b/examples/solid/with-tanstack-router/src/components/table.tsx
@@ -195,7 +195,7 @@ export default function Table<T extends Record<string, string | number>>(
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
+            {(table.atoms.pagination.get().pageIndex + 1).toLocaleString()} of{' '}
             {table.getPageCount().toLocaleString()}
           </strong>
         </span>
@@ -203,7 +203,7 @@ export default function Table<T extends Record<string, string | number>>(
           | Go to page:
           <input
             type="number"
-            value={table.store.get().pagination.pageIndex + 1}
+            value={table.atoms.pagination.get().pageIndex + 1}
             onInput={(e) => {
               const page = e.currentTarget.value
                 ? Number(e.currentTarget.value) - 1
@@ -214,7 +214,7 @@ export default function Table<T extends Record<string, string | number>>(
           />
         </span>
         <select
-          value={table.store.get().pagination.pageSize}
+          value={table.atoms.pagination.get().pageSize}
           onChange={(e) => {
             table.setPageSize(Number(e.currentTarget.value))
           }}
diff --git a/examples/vue/basic-external-state/src/App.tsx b/examples/vue/basic-external-state/src/App.tsx
index 976e8aa9d1..9a7d373a0f 100644
--- a/examples/vue/basic-external-state/src/App.tsx
+++ b/examples/vue/basic-external-state/src/App.tsx
@@ -106,11 +106,7 @@ export default defineComponent({
           pagination.value = resolveUpdater(updater, pagination.value)
         },
       },
-      (state) => ({
-        sorting: state.sorting,
-        pagination: state.pagination,
-      }),
-    )
+)
 
     useTanStackTableDevtools(table)
 
@@ -205,7 +201,7 @@ export default defineComponent({
           <span class="inline-controls">
             <div>Page</div>
             <strong>
-              {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
+              {(table.atoms.pagination.get().pageIndex + 1).toLocaleString()} of{' '}
               {table.getPageCount().toLocaleString()}
             </strong>
           </span>
@@ -215,7 +211,7 @@ export default defineComponent({
               type="number"
               min="1"
               max={table.getPageCount()}
-              value={table.store.get().pagination.pageIndex + 1}
+              value={table.atoms.pagination.get().pageIndex + 1}
               onInput={(event: Event) => {
                 const target = event.currentTarget as HTMLInputElement
                 const page = target.value ? Number(target.value) - 1 : 0
@@ -225,7 +221,7 @@ export default defineComponent({
             />
           </span>
           <select
-            value={table.store.get().pagination.pageSize}
+            value={table.atoms.pagination.get().pageSize}
             onChange={(event: Event) => {
               const target = event.currentTarget as HTMLSelectElement
               table.setPageSize(Number(target.value))
diff --git a/examples/vue/column-ordering/src/App.vue b/examples/vue/column-ordering/src/App.vue
index fa4a61823a..adbb1dac0f 100644
--- a/examples/vue/column-ordering/src/App.vue
+++ b/examples/vue/column-ordering/src/App.vue
@@ -89,10 +89,6 @@ const table = useTable(
     debugHeaders: true,
     debugColumns: true,
   },
-  (state) => ({
-    columnOrder: state.columnOrder,
-    columnVisibility: state.columnVisibility,
-  }),
 )
 
 const randomizeColumns = () => {
@@ -107,7 +103,7 @@ const randomizeColumns = () => {
 
 function toggleColumnVisibility(column: Column<typeof features, Person>) {
   table.setColumnVisibility({
-    ...table.store.get().columnVisibility,
+    ...table.atoms.columnVisibility.get(),
     [column.id]: !column.getIsVisible(),
   })
 }
@@ -201,7 +197,7 @@ function toggleAllColumnsVisibility() {
         </tr>
       </tfoot>
     </table>
-    <pre>{{ JSON.stringify(table.store.get().columnOrder, null, 2) }}</pre>
+    <pre>{{ JSON.stringify(table.atoms.columnOrder.get(), null, 2) }}</pre>
   </div>
 </template>
 
diff --git a/examples/vue/column-pinning-split/src/App.vue b/examples/vue/column-pinning-split/src/App.vue
index 7ccf264a89..a067bd03fa 100644
--- a/examples/vue/column-pinning-split/src/App.vue
+++ b/examples/vue/column-pinning-split/src/App.vue
@@ -83,7 +83,6 @@ const table = useTable(
     },
     debugTable: true,
   },
-  (state) => ({ pagination: state.pagination }),
 )
 
 const refreshData = () => {
@@ -184,7 +183,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }}
+            {{ (table.atoms.pagination.get().pageIndex + 1).toLocaleString() }}
             of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
@@ -199,7 +198,7 @@ function handlePageSizeChange(e: any) {
           />
         </span>
         <select
-          :value="table.store.get().pagination.pageSize"
+          :value="table.atoms.pagination.get().pageSize"
           @change="handlePageSizeChange"
         >
           <option
@@ -212,7 +211,7 @@ function handlePageSizeChange(e: any) {
         </select>
       </div>
       <div>{{ table.getRowModel().rows.length.toLocaleString() }} Rows</div>
-      <pre>{{ JSON.stringify(table.store.get().pagination, null, 2) }}</pre>
+      <pre>{{ JSON.stringify(table.atoms.pagination.get(), null, 2) }}</pre>
     </div>
     <div class="spacer-sm" />
   </div>
diff --git a/examples/vue/column-pinning-sticky/src/App.vue b/examples/vue/column-pinning-sticky/src/App.vue
index 7ccf264a89..a067bd03fa 100644
--- a/examples/vue/column-pinning-sticky/src/App.vue
+++ b/examples/vue/column-pinning-sticky/src/App.vue
@@ -83,7 +83,6 @@ const table = useTable(
     },
     debugTable: true,
   },
-  (state) => ({ pagination: state.pagination }),
 )
 
 const refreshData = () => {
@@ -184,7 +183,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }}
+            {{ (table.atoms.pagination.get().pageIndex + 1).toLocaleString() }}
             of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
@@ -199,7 +198,7 @@ function handlePageSizeChange(e: any) {
           />
         </span>
         <select
-          :value="table.store.get().pagination.pageSize"
+          :value="table.atoms.pagination.get().pageSize"
           @change="handlePageSizeChange"
         >
           <option
@@ -212,7 +211,7 @@ function handlePageSizeChange(e: any) {
         </select>
       </div>
       <div>{{ table.getRowModel().rows.length.toLocaleString() }} Rows</div>
-      <pre>{{ JSON.stringify(table.store.get().pagination, null, 2) }}</pre>
+      <pre>{{ JSON.stringify(table.atoms.pagination.get(), null, 2) }}</pre>
     </div>
     <div class="spacer-sm" />
   </div>
diff --git a/examples/vue/column-pinning/src/App.vue b/examples/vue/column-pinning/src/App.vue
index 7f8e657728..6c388e6df8 100644
--- a/examples/vue/column-pinning/src/App.vue
+++ b/examples/vue/column-pinning/src/App.vue
@@ -93,11 +93,6 @@ const table = useTable(
     debugHeaders: true,
     debugColumns: true,
   },
-  (state) => ({
-    columnOrder: state.columnOrder,
-    columnPinning: state.columnPinning,
-    columnVisibility: state.columnVisibility,
-  }),
 )
 
 const randomizeColumns = () => {
@@ -112,7 +107,7 @@ const randomizeColumns = () => {
 
 function toggleColumnVisibility(column: Column<typeof features, Person>) {
   table.setColumnVisibility({
-    ...table.store.get().columnVisibility,
+    ...table.atoms.columnVisibility.get(),
     [column.id]: !column.getIsVisible(),
   })
 }
@@ -348,7 +343,7 @@ function toggleAllColumnsVisibility() {
         </tbody>
       </table>
     </div>
-    <pre>{{ JSON.stringify(table.store.get().columnOrder, null, 2) }}</pre>
+    <pre>{{ JSON.stringify(table.atoms.columnOrder.get(), null, 2) }}</pre>
   </div>
 </template>
 
diff --git a/examples/vue/column-resizing-performant/src/App.vue b/examples/vue/column-resizing-performant/src/App.vue
index 15b6120e72..0bd5d88830 100644
--- a/examples/vue/column-resizing-performant/src/App.vue
+++ b/examples/vue/column-resizing-performant/src/App.vue
@@ -83,7 +83,6 @@ const table = useTable(
     },
     debugTable: true,
   },
-  (state) => ({ pagination: state.pagination }),
 )
 
 const refreshData = () => {
@@ -184,7 +183,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }}
+            {{ (table.atoms.pagination.get().pageIndex + 1).toLocaleString() }}
             of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
@@ -199,7 +198,7 @@ function handlePageSizeChange(e: any) {
           />
         </span>
         <select
-          :value="table.store.get().pagination.pageSize"
+          :value="table.atoms.pagination.get().pageSize"
           @change="handlePageSizeChange"
         >
           <option
@@ -212,7 +211,7 @@ function handlePageSizeChange(e: any) {
         </select>
       </div>
       <div>{{ table.getRowModel().rows.length.toLocaleString() }} Rows</div>
-      <pre>{{ JSON.stringify(table.store.get().pagination, null, 2) }}</pre>
+      <pre>{{ JSON.stringify(table.atoms.pagination.get(), null, 2) }}</pre>
     </div>
     <div class="spacer-sm" />
   </div>
diff --git a/examples/vue/column-resizing/src/App.vue b/examples/vue/column-resizing/src/App.vue
index 7ccf264a89..a067bd03fa 100644
--- a/examples/vue/column-resizing/src/App.vue
+++ b/examples/vue/column-resizing/src/App.vue
@@ -83,7 +83,6 @@ const table = useTable(
     },
     debugTable: true,
   },
-  (state) => ({ pagination: state.pagination }),
 )
 
 const refreshData = () => {
@@ -184,7 +183,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }}
+            {{ (table.atoms.pagination.get().pageIndex + 1).toLocaleString() }}
             of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
@@ -199,7 +198,7 @@ function handlePageSizeChange(e: any) {
           />
         </span>
         <select
-          :value="table.store.get().pagination.pageSize"
+          :value="table.atoms.pagination.get().pageSize"
           @change="handlePageSizeChange"
         >
           <option
@@ -212,7 +211,7 @@ function handlePageSizeChange(e: any) {
         </select>
       </div>
       <div>{{ table.getRowModel().rows.length.toLocaleString() }} Rows</div>
-      <pre>{{ JSON.stringify(table.store.get().pagination, null, 2) }}</pre>
+      <pre>{{ JSON.stringify(table.atoms.pagination.get(), null, 2) }}</pre>
     </div>
     <div class="spacer-sm" />
   </div>
diff --git a/examples/vue/column-sizing/src/App.vue b/examples/vue/column-sizing/src/App.vue
index 7ccf264a89..a067bd03fa 100644
--- a/examples/vue/column-sizing/src/App.vue
+++ b/examples/vue/column-sizing/src/App.vue
@@ -83,7 +83,6 @@ const table = useTable(
     },
     debugTable: true,
   },
-  (state) => ({ pagination: state.pagination }),
 )
 
 const refreshData = () => {
@@ -184,7 +183,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }}
+            {{ (table.atoms.pagination.get().pageIndex + 1).toLocaleString() }}
             of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
@@ -199,7 +198,7 @@ function handlePageSizeChange(e: any) {
           />
         </span>
         <select
-          :value="table.store.get().pagination.pageSize"
+          :value="table.atoms.pagination.get().pageSize"
           @change="handlePageSizeChange"
         >
           <option
@@ -212,7 +211,7 @@ function handlePageSizeChange(e: any) {
         </select>
       </div>
       <div>{{ table.getRowModel().rows.length.toLocaleString() }} Rows</div>
-      <pre>{{ JSON.stringify(table.store.get().pagination, null, 2) }}</pre>
+      <pre>{{ JSON.stringify(table.atoms.pagination.get(), null, 2) }}</pre>
     </div>
     <div class="spacer-sm" />
   </div>
diff --git a/examples/vue/expanding/src/App.tsx b/examples/vue/expanding/src/App.tsx
index 88ebf47281..0b6dfbc653 100644
--- a/examples/vue/expanding/src/App.tsx
+++ b/examples/vue/expanding/src/App.tsx
@@ -294,7 +294,7 @@ export default defineComponent({
           <span class="inline-controls">
             <div>Page</div>
             <strong>
-              {(table.store.get().pagination.pageIndex + 1).toLocaleString()} of{' '}
+              {(table.atoms.pagination.get().pageIndex + 1).toLocaleString()} of{' '}
               {table.getPageCount().toLocaleString()}
             </strong>
           </span>
@@ -304,7 +304,7 @@ export default defineComponent({
               type="number"
               min="1"
               max={table.getPageCount()}
-              value={table.store.get().pagination.pageIndex + 1}
+              value={table.atoms.pagination.get().pageIndex + 1}
               onInput={(event: Event) => {
                 const target = event.currentTarget as HTMLInputElement
                 const page = target.value ? Number(target.value) - 1 : 0
@@ -314,7 +314,7 @@ export default defineComponent({
             />
           </span>
           <select
-            value={table.store.get().pagination.pageSize}
+            value={table.atoms.pagination.get().pageSize}
             onChange={(event: Event) => {
               const target = event.currentTarget as HTMLSelectElement
               table.setPageSize(Number(target.value))
diff --git a/examples/vue/filters-faceted/src/App.vue b/examples/vue/filters-faceted/src/App.vue
index 7ccf264a89..a067bd03fa 100644
--- a/examples/vue/filters-faceted/src/App.vue
+++ b/examples/vue/filters-faceted/src/App.vue
@@ -83,7 +83,6 @@ const table = useTable(
     },
     debugTable: true,
   },
-  (state) => ({ pagination: state.pagination }),
 )
 
 const refreshData = () => {
@@ -184,7 +183,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }}
+            {{ (table.atoms.pagination.get().pageIndex + 1).toLocaleString() }}
             of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
@@ -199,7 +198,7 @@ function handlePageSizeChange(e: any) {
           />
         </span>
         <select
-          :value="table.store.get().pagination.pageSize"
+          :value="table.atoms.pagination.get().pageSize"
           @change="handlePageSizeChange"
         >
           <option
@@ -212,7 +211,7 @@ function handlePageSizeChange(e: any) {
         </select>
       </div>
       <div>{{ table.getRowModel().rows.length.toLocaleString() }} Rows</div>
-      <pre>{{ JSON.stringify(table.store.get().pagination, null, 2) }}</pre>
+      <pre>{{ JSON.stringify(table.atoms.pagination.get(), null, 2) }}</pre>
     </div>
     <div class="spacer-sm" />
   </div>
diff --git a/examples/vue/filters-fuzzy/src/App.vue b/examples/vue/filters-fuzzy/src/App.vue
index 7ccf264a89..a067bd03fa 100644
--- a/examples/vue/filters-fuzzy/src/App.vue
+++ b/examples/vue/filters-fuzzy/src/App.vue
@@ -83,7 +83,6 @@ const table = useTable(
     },
     debugTable: true,
   },
-  (state) => ({ pagination: state.pagination }),
 )
 
 const refreshData = () => {
@@ -184,7 +183,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }}
+            {{ (table.atoms.pagination.get().pageIndex + 1).toLocaleString() }}
             of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
@@ -199,7 +198,7 @@ function handlePageSizeChange(e: any) {
           />
         </span>
         <select
-          :value="table.store.get().pagination.pageSize"
+          :value="table.atoms.pagination.get().pageSize"
           @change="handlePageSizeChange"
         >
           <option
@@ -212,7 +211,7 @@ function handlePageSizeChange(e: any) {
         </select>
       </div>
       <div>{{ table.getRowModel().rows.length.toLocaleString() }} Rows</div>
-      <pre>{{ JSON.stringify(table.store.get().pagination, null, 2) }}</pre>
+      <pre>{{ JSON.stringify(table.atoms.pagination.get(), null, 2) }}</pre>
     </div>
     <div class="spacer-sm" />
   </div>
diff --git a/examples/vue/filters/src/App.vue b/examples/vue/filters/src/App.vue
index f625d96a24..cab0b434ea 100644
--- a/examples/vue/filters/src/App.vue
+++ b/examples/vue/filters/src/App.vue
@@ -78,11 +78,6 @@ const table = useAppTable(
       return columns.value
     },
   },
-  (state) => ({
-    columnFilters: state.columnFilters,
-    globalFilter: state.globalFilter,
-    pagination: state.pagination,
-  }),
 )
 
 function handleGoToPage(e: any) {
@@ -107,7 +102,7 @@ function handlePageSizeChange(e: any) {
     <div class="spacer-md" />
     <div>
       <DebouncedInput
-        :modelValue="table.store.get().globalFilter ?? ''"
+        :modelValue="table.atoms.globalFilter.get() ?? ''"
         @update:modelValue="(value) => table.setGlobalFilter(String(value))"
         className="summary-panel"
         placeholder="Search all columns..."
@@ -197,7 +192,7 @@ function handlePageSizeChange(e: any) {
       <span class="inline-controls">
         <div>Page</div>
         <strong>
-          {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
+          {{ (table.atoms.pagination.get().pageIndex + 1).toLocaleString() }} of
           {{ table.getPageCount().toLocaleString() }}
         </strong>
       </span>
@@ -211,7 +206,7 @@ function handlePageSizeChange(e: any) {
         />
       </span>
       <select
-        :value="table.store.get().pagination.pageSize"
+        :value="table.atoms.pagination.get().pageSize"
         @change="handlePageSizeChange"
       >
         <option :key="pageSize" :value="pageSize" v-for="pageSize in pageSizes">
diff --git a/examples/vue/grouping/src/App.vue b/examples/vue/grouping/src/App.vue
index 7ccf264a89..a067bd03fa 100644
--- a/examples/vue/grouping/src/App.vue
+++ b/examples/vue/grouping/src/App.vue
@@ -83,7 +83,6 @@ const table = useTable(
     },
     debugTable: true,
   },
-  (state) => ({ pagination: state.pagination }),
 )
 
 const refreshData = () => {
@@ -184,7 +183,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }}
+            {{ (table.atoms.pagination.get().pageIndex + 1).toLocaleString() }}
             of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
@@ -199,7 +198,7 @@ function handlePageSizeChange(e: any) {
           />
         </span>
         <select
-          :value="table.store.get().pagination.pageSize"
+          :value="table.atoms.pagination.get().pageSize"
           @change="handlePageSizeChange"
         >
           <option
@@ -212,7 +211,7 @@ function handlePageSizeChange(e: any) {
         </select>
       </div>
       <div>{{ table.getRowModel().rows.length.toLocaleString() }} Rows</div>
-      <pre>{{ JSON.stringify(table.store.get().pagination, null, 2) }}</pre>
+      <pre>{{ JSON.stringify(table.atoms.pagination.get(), null, 2) }}</pre>
     </div>
     <div class="spacer-sm" />
   </div>
diff --git a/examples/vue/kitchen-sink/src/App.vue b/examples/vue/kitchen-sink/src/App.vue
index 9edf37383b..adbb29e8b3 100644
--- a/examples/vue/kitchen-sink/src/App.vue
+++ b/examples/vue/kitchen-sink/src/App.vue
@@ -194,14 +194,13 @@ const table = useTable(
     keepPinnedRows: true,
     debugTable: true,
   },
-  (state) => state,
 )
 
 useTanStackTableDevtools(table)
 
 const columnSizeVars = computed(() => {
-  void table.store.get().columnResizing
-  void table.store.get().columnSizing
+  void table.atoms.columnResizing.get()
+  void table.atoms.columnSizing.get()
   const colSizes: Record<string, number> = {}
   for (const header of table.getFlatHeaders()) {
     colSizes[`--header-${header.id}-size`] = header.getSize()
@@ -264,7 +263,7 @@ function cellStyle(cell: Cell<typeof stockFeatures, Person, unknown>) {
 }
 
 function cellClass(cell: Cell<typeof stockFeatures, Person, unknown>) {
-  const groupingActive = table.store.get().grouping.length > 0
+  const groupingActive = table.atoms.grouping.get().length > 0
   const hasAggregation = !!cell.column.columnDef.aggregationFn
   return !groupingActive
     ? undefined
@@ -341,7 +340,7 @@ function shuffleColumns() {
         <input
           class="global-filter-input"
           placeholder="Fuzzy search all columns..."
-          :value="table.store.get().globalFilter ?? ''"
+          :value="table.atoms.globalFilter.get() ?? ''"
           @input="
             (event) =>
               debounceSet('global', () =>
@@ -738,7 +737,7 @@ function shuffleColumns() {
       <span class="inline-controls">
         <div>Page</div>
         <strong>
-          {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }} of
+          {{ (table.atoms.pagination.get().pageIndex + 1).toLocaleString() }} of
           {{ table.getPageCount().toLocaleString() }}
         </strong>
       </span>
@@ -748,7 +747,7 @@ function shuffleColumns() {
           type="number"
           min="1"
           :max="table.getPageCount()"
-          :value="table.store.get().pagination.pageIndex + 1"
+          :value="table.atoms.pagination.get().pageIndex + 1"
           @input="
             table.setPageIndex(
               ($event.target as HTMLInputElement).value
@@ -760,7 +759,7 @@ function shuffleColumns() {
         />
       </span>
       <select
-        :value="table.store.get().pagination.pageSize"
+        :value="table.atoms.pagination.get().pageSize"
         @change="
           table.setPageSize(Number(($event.target as HTMLSelectElement).value))
         "
diff --git a/examples/vue/pagination/src/App.vue b/examples/vue/pagination/src/App.vue
index 7ccf264a89..a067bd03fa 100644
--- a/examples/vue/pagination/src/App.vue
+++ b/examples/vue/pagination/src/App.vue
@@ -83,7 +83,6 @@ const table = useTable(
     },
     debugTable: true,
   },
-  (state) => ({ pagination: state.pagination }),
 )
 
 const refreshData = () => {
@@ -184,7 +183,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }}
+            {{ (table.atoms.pagination.get().pageIndex + 1).toLocaleString() }}
             of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
@@ -199,7 +198,7 @@ function handlePageSizeChange(e: any) {
           />
         </span>
         <select
-          :value="table.store.get().pagination.pageSize"
+          :value="table.atoms.pagination.get().pageSize"
           @change="handlePageSizeChange"
         >
           <option
@@ -212,7 +211,7 @@ function handlePageSizeChange(e: any) {
         </select>
       </div>
       <div>{{ table.getRowModel().rows.length.toLocaleString() }} Rows</div>
-      <pre>{{ JSON.stringify(table.store.get().pagination, null, 2) }}</pre>
+      <pre>{{ JSON.stringify(table.atoms.pagination.get(), null, 2) }}</pre>
     </div>
     <div class="spacer-sm" />
   </div>
diff --git a/examples/vue/row-pinning/src/App.vue b/examples/vue/row-pinning/src/App.vue
index 7ccf264a89..a067bd03fa 100644
--- a/examples/vue/row-pinning/src/App.vue
+++ b/examples/vue/row-pinning/src/App.vue
@@ -83,7 +83,6 @@ const table = useTable(
     },
     debugTable: true,
   },
-  (state) => ({ pagination: state.pagination }),
 )
 
 const refreshData = () => {
@@ -184,7 +183,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }}
+            {{ (table.atoms.pagination.get().pageIndex + 1).toLocaleString() }}
             of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
@@ -199,7 +198,7 @@ function handlePageSizeChange(e: any) {
           />
         </span>
         <select
-          :value="table.store.get().pagination.pageSize"
+          :value="table.atoms.pagination.get().pageSize"
           @change="handlePageSizeChange"
         >
           <option
@@ -212,7 +211,7 @@ function handlePageSizeChange(e: any) {
         </select>
       </div>
       <div>{{ table.getRowModel().rows.length.toLocaleString() }} Rows</div>
-      <pre>{{ JSON.stringify(table.store.get().pagination, null, 2) }}</pre>
+      <pre>{{ JSON.stringify(table.atoms.pagination.get(), null, 2) }}</pre>
     </div>
     <div class="spacer-sm" />
   </div>
diff --git a/examples/vue/row-selection/src/App.vue b/examples/vue/row-selection/src/App.vue
index f694cfb1c9..553cc4e741 100644
--- a/examples/vue/row-selection/src/App.vue
+++ b/examples/vue/row-selection/src/App.vue
@@ -118,7 +118,6 @@ const table = useTable(
     },
     // enableRowSelection: row => row.original.age > 18, // or enable row selection conditionally per row
   },
-  (state) => ({ rowSelection: state.rowSelection }),
 )
 
 useTanStackTableDevtools(table)
diff --git a/examples/vue/sorting/src/App.vue b/examples/vue/sorting/src/App.vue
index 44c955c421..83413be784 100644
--- a/examples/vue/sorting/src/App.vue
+++ b/examples/vue/sorting/src/App.vue
@@ -67,7 +67,6 @@ const table = useTable(
     columns,
     debugTable: true,
   },
-  (state) => ({ sorting: state.sorting }),
 )
 </script>
 
@@ -134,7 +133,7 @@ const table = useTable(
 
     <div>{{ table.getRowModel().rows.length.toLocaleString() }} Rows</div>
 
-    <pre>{{ JSON.stringify(table.store.get().sorting, null, 2) }}</pre>
+    <pre>{{ JSON.stringify(table.atoms.sorting.get(), null, 2) }}</pre>
   </div>
 </template>
 
diff --git a/examples/vue/sub-components/src/App.vue b/examples/vue/sub-components/src/App.vue
index 299e766f80..9aa6beda27 100644
--- a/examples/vue/sub-components/src/App.vue
+++ b/examples/vue/sub-components/src/App.vue
@@ -83,7 +83,6 @@ const table = useAppTable(
     columns,
     getRowCanExpand: () => true,
   },
-  (state) => ({ expanded: state.expanded }),
 )
 </script>
 
diff --git a/examples/vue/with-tanstack-form/src/App.vue b/examples/vue/with-tanstack-form/src/App.vue
index 7ccf264a89..a067bd03fa 100644
--- a/examples/vue/with-tanstack-form/src/App.vue
+++ b/examples/vue/with-tanstack-form/src/App.vue
@@ -83,7 +83,6 @@ const table = useTable(
     },
     debugTable: true,
   },
-  (state) => ({ pagination: state.pagination }),
 )
 
 const refreshData = () => {
@@ -184,7 +183,7 @@ function handlePageSizeChange(e: any) {
         <span class="inline-controls">
           <div>Page</div>
           <strong>
-            {{ (table.store.get().pagination.pageIndex + 1).toLocaleString() }}
+            {{ (table.atoms.pagination.get().pageIndex + 1).toLocaleString() }}
             of
             {{ table.getPageCount().toLocaleString() }}
           </strong>
@@ -199,7 +198,7 @@ function handlePageSizeChange(e: any) {
           />
         </span>
         <select
-          :value="table.store.get().pagination.pageSize"
+          :value="table.atoms.pagination.get().pageSize"
           @change="handlePageSizeChange"
         >
           <option
@@ -212,7 +211,7 @@ function handlePageSizeChange(e: any) {
         </select>
       </div>
       <div>{{ table.getRowModel().rows.length.toLocaleString() }} Rows</div>
-      <pre>{{ JSON.stringify(table.store.get().pagination, null, 2) }}</pre>
+      <pre>{{ JSON.stringify(table.atoms.pagination.get(), null, 2) }}</pre>
     </div>
     <div class="spacer-sm" />
   </div>
diff --git a/packages/solid-table/package.json b/packages/solid-table/package.json
index adb76d0108..39a81a0ec5 100644
--- a/packages/solid-table/package.json
+++ b/packages/solid-table/package.json
@@ -60,7 +60,7 @@
   },
   "dependencies": {
     "@tanstack/store": "^0.11.0",
-    "@tanstack/table-core": "^9.0.0-beta.1"
+    "@tanstack/table-core": "9.0.0-beta.1"
   },
   "devDependencies": {
     "solid-js": "^1.9.13",
diff --git a/packages/solid-table/src/createTable.ts b/packages/solid-table/src/createTable.ts
index ac44433729..93447fbb87 100644
--- a/packages/solid-table/src/createTable.ts
+++ b/packages/solid-table/src/createTable.ts
@@ -114,11 +114,11 @@ export function createTable<
 
   onCleanup(() => reactivity.unmount?.())
 
-  table.Subscribe = ((props: {
+  table.Subscribe = (props: {
     children: (atoms: Table<TFeatures, TData>['atoms']) => JSX.Element
   }) => {
     return props.children(table.atoms)
-  }) as SolidTable<TFeatures, TData>['Subscribe']
+  }
 
   table.FlexRender = FlexRender
 
diff --git a/packages/vue-table/package.json b/packages/vue-table/package.json
index 8a692dd406..b66cc81649 100644
--- a/packages/vue-table/package.json
+++ b/packages/vue-table/package.json
@@ -58,7 +58,7 @@
   },
   "dependencies": {
     "@tanstack/store": "^0.11.0",
-    "@tanstack/table-core": "^9.0.0-beta.1"
+    "@tanstack/table-core": "9.0.0-beta.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.7",

From 4a38ea9e53d91c1e3e73398ec78ddea7dec3f993 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sun, 7 Jun 2026 07:52:26 +0000
Subject: [PATCH 06/10] ci: apply automated fixes

---
 examples/vue/basic-external-state/src/App.tsx | 50 +++++++--------
 examples/vue/column-ordering/src/App.vue      | 20 +++---
 examples/vue/column-pinning-split/src/App.vue | 22 +++----
 .../vue/column-pinning-sticky/src/App.vue     | 22 +++----
 examples/vue/column-pinning/src/App.vue       | 20 +++---
 .../column-resizing-performant/src/App.vue    | 22 +++----
 examples/vue/column-resizing/src/App.vue      | 22 +++----
 examples/vue/column-sizing/src/App.vue        | 22 +++----
 examples/vue/filters-faceted/src/App.vue      | 22 +++----
 examples/vue/filters-fuzzy/src/App.vue        | 22 +++----
 examples/vue/filters/src/App.vue              | 14 ++--
 examples/vue/grouping/src/App.vue             | 22 +++----
 examples/vue/kitchen-sink/src/App.vue         | 64 +++++++++----------
 examples/vue/pagination/src/App.vue           | 22 +++----
 examples/vue/row-pinning/src/App.vue          | 22 +++----
 examples/vue/row-selection/src/App.vue        | 26 ++++----
 examples/vue/sorting/src/App.vue              | 18 +++---
 examples/vue/sub-components/src/App.vue       | 16 ++---
 examples/vue/with-tanstack-form/src/App.vue   | 22 +++----
 19 files changed, 216 insertions(+), 254 deletions(-)

diff --git a/examples/vue/basic-external-state/src/App.tsx b/examples/vue/basic-external-state/src/App.tsx
index 9a7d373a0f..51587e4178 100644
--- a/examples/vue/basic-external-state/src/App.tsx
+++ b/examples/vue/basic-external-state/src/App.tsx
@@ -78,35 +78,33 @@ export default defineComponent({
       pageSize: 10,
     })
 
-    const table = useTable(
-      {
-        key: 'basic-external-state', // needed for devtools
-        debugTable: true,
-        features,
-        rowModels: {
-          sortedRowModel: createSortedRowModel(sortFns),
-          paginatedRowModel: createPaginatedRowModel(),
-        },
-        columns,
-        get data() {
-          return data.value
-        },
-        state: {
-          get sorting() {
-            return sorting.value
-          },
-          get pagination() {
-            return pagination.value
-          },
-        },
-        onSortingChange: (updater: Updater<SortingState>) => {
-          sorting.value = resolveUpdater(updater, sorting.value)
+    const table = useTable({
+      key: 'basic-external-state', // needed for devtools
+      debugTable: true,
+      features,
+      rowModels: {
+        sortedRowModel: createSortedRowModel(sortFns),
+        paginatedRowModel: createPaginatedRowModel(),
+      },
+      columns,
+      get data() {
+        return data.value
+      },
+      state: {
+        get sorting() {
+          return sorting.value
         },
-        onPaginationChange: (updater: Updater<PaginationState>) => {
-          pagination.value = resolveUpdater(updater, pagination.value)
+        get pagination() {
+          return pagination.value
         },
       },
-)
+      onSortingChange: (updater: Updater<SortingState>) => {
+        sorting.value = resolveUpdater(updater, sorting.value)
+      },
+      onPaginationChange: (updater: Updater<PaginationState>) => {
+        pagination.value = resolveUpdater(updater, pagination.value)
+      },
+    })
 
     useTanStackTableDevtools(table)
 
diff --git a/examples/vue/column-ordering/src/App.vue b/examples/vue/column-ordering/src/App.vue
index adbb1dac0f..9841ae45cd 100644
--- a/examples/vue/column-ordering/src/App.vue
+++ b/examples/vue/column-ordering/src/App.vue
@@ -78,18 +78,16 @@ const stressTest = () => {
   data.value = makeData(1_000)
 }
 
-const table = useTable(
-  {
-    features,
-    data,
-    get columns() {
-      return columns.value
-    },
-    debugTable: true,
-    debugHeaders: true,
-    debugColumns: true,
+const table = useTable({
+  features,
+  data,
+  get columns() {
+    return columns.value
   },
-)
+  debugTable: true,
+  debugHeaders: true,
+  debugColumns: true,
+})
 
 const randomizeColumns = () => {
   table.setColumnOrder(
diff --git a/examples/vue/column-pinning-split/src/App.vue b/examples/vue/column-pinning-split/src/App.vue
index a067bd03fa..c2f8d73372 100644
--- a/examples/vue/column-pinning-split/src/App.vue
+++ b/examples/vue/column-pinning-split/src/App.vue
@@ -71,19 +71,17 @@ const columns = ref(
   ]),
 )
 
-const table = useTable(
-  {
-    features,
-    rowModels: {
-      paginatedRowModel: createPaginatedRowModel(),
-    },
-    data,
-    get columns() {
-      return columns.value
-    },
-    debugTable: true,
+const table = useTable({
+  features,
+  rowModels: {
+    paginatedRowModel: createPaginatedRowModel(),
   },
-)
+  data,
+  get columns() {
+    return columns.value
+  },
+  debugTable: true,
+})
 
 const refreshData = () => {
   data.value = makeData(1_000)
diff --git a/examples/vue/column-pinning-sticky/src/App.vue b/examples/vue/column-pinning-sticky/src/App.vue
index a067bd03fa..c2f8d73372 100644
--- a/examples/vue/column-pinning-sticky/src/App.vue
+++ b/examples/vue/column-pinning-sticky/src/App.vue
@@ -71,19 +71,17 @@ const columns = ref(
   ]),
 )
 
-const table = useTable(
-  {
-    features,
-    rowModels: {
-      paginatedRowModel: createPaginatedRowModel(),
-    },
-    data,
-    get columns() {
-      return columns.value
-    },
-    debugTable: true,
+const table = useTable({
+  features,
+  rowModels: {
+    paginatedRowModel: createPaginatedRowModel(),
   },
-)
+  data,
+  get columns() {
+    return columns.value
+  },
+  debugTable: true,
+})
 
 const refreshData = () => {
   data.value = makeData(1_000)
diff --git a/examples/vue/column-pinning/src/App.vue b/examples/vue/column-pinning/src/App.vue
index 6c388e6df8..402faabbf5 100644
--- a/examples/vue/column-pinning/src/App.vue
+++ b/examples/vue/column-pinning/src/App.vue
@@ -82,18 +82,16 @@ const stressTest = () => {
   data.value = makeData(500_000)
 }
 
-const table = useTable(
-  {
-    features,
-    data,
-    get columns() {
-      return columns.value
-    },
-    debugTable: true,
-    debugHeaders: true,
-    debugColumns: true,
+const table = useTable({
+  features,
+  data,
+  get columns() {
+    return columns.value
   },
-)
+  debugTable: true,
+  debugHeaders: true,
+  debugColumns: true,
+})
 
 const randomizeColumns = () => {
   table.setColumnOrder(
diff --git a/examples/vue/column-resizing-performant/src/App.vue b/examples/vue/column-resizing-performant/src/App.vue
index 0bd5d88830..b060049882 100644
--- a/examples/vue/column-resizing-performant/src/App.vue
+++ b/examples/vue/column-resizing-performant/src/App.vue
@@ -71,19 +71,17 @@ const columns = ref(
   ]),
 )
 
-const table = useTable(
-  {
-    features,
-    rowModels: {
-      paginatedRowModel: createPaginatedRowModel(),
-    },
-    data,
-    get columns() {
-      return columns.value
-    },
-    debugTable: true,
+const table = useTable({
+  features,
+  rowModels: {
+    paginatedRowModel: createPaginatedRowModel(),
   },
-)
+  data,
+  get columns() {
+    return columns.value
+  },
+  debugTable: true,
+})
 
 const refreshData = () => {
   data.value = makeData(1_000)
diff --git a/examples/vue/column-resizing/src/App.vue b/examples/vue/column-resizing/src/App.vue
index a067bd03fa..c2f8d73372 100644
--- a/examples/vue/column-resizing/src/App.vue
+++ b/examples/vue/column-resizing/src/App.vue
@@ -71,19 +71,17 @@ const columns = ref(
   ]),
 )
 
-const table = useTable(
-  {
-    features,
-    rowModels: {
-      paginatedRowModel: createPaginatedRowModel(),
-    },
-    data,
-    get columns() {
-      return columns.value
-    },
-    debugTable: true,
+const table = useTable({
+  features,
+  rowModels: {
+    paginatedRowModel: createPaginatedRowModel(),
   },
-)
+  data,
+  get columns() {
+    return columns.value
+  },
+  debugTable: true,
+})
 
 const refreshData = () => {
   data.value = makeData(1_000)
diff --git a/examples/vue/column-sizing/src/App.vue b/examples/vue/column-sizing/src/App.vue
index a067bd03fa..c2f8d73372 100644
--- a/examples/vue/column-sizing/src/App.vue
+++ b/examples/vue/column-sizing/src/App.vue
@@ -71,19 +71,17 @@ const columns = ref(
   ]),
 )
 
-const table = useTable(
-  {
-    features,
-    rowModels: {
-      paginatedRowModel: createPaginatedRowModel(),
-    },
-    data,
-    get columns() {
-      return columns.value
-    },
-    debugTable: true,
+const table = useTable({
+  features,
+  rowModels: {
+    paginatedRowModel: createPaginatedRowModel(),
   },
-)
+  data,
+  get columns() {
+    return columns.value
+  },
+  debugTable: true,
+})
 
 const refreshData = () => {
   data.value = makeData(1_000)
diff --git a/examples/vue/filters-faceted/src/App.vue b/examples/vue/filters-faceted/src/App.vue
index a067bd03fa..c2f8d73372 100644
--- a/examples/vue/filters-faceted/src/App.vue
+++ b/examples/vue/filters-faceted/src/App.vue
@@ -71,19 +71,17 @@ const columns = ref(
   ]),
 )
 
-const table = useTable(
-  {
-    features,
-    rowModels: {
-      paginatedRowModel: createPaginatedRowModel(),
-    },
-    data,
-    get columns() {
-      return columns.value
-    },
-    debugTable: true,
+const table = useTable({
+  features,
+  rowModels: {
+    paginatedRowModel: createPaginatedRowModel(),
   },
-)
+  data,
+  get columns() {
+    return columns.value
+  },
+  debugTable: true,
+})
 
 const refreshData = () => {
   data.value = makeData(1_000)
diff --git a/examples/vue/filters-fuzzy/src/App.vue b/examples/vue/filters-fuzzy/src/App.vue
index a067bd03fa..c2f8d73372 100644
--- a/examples/vue/filters-fuzzy/src/App.vue
+++ b/examples/vue/filters-fuzzy/src/App.vue
@@ -71,19 +71,17 @@ const columns = ref(
   ]),
 )
 
-const table = useTable(
-  {
-    features,
-    rowModels: {
-      paginatedRowModel: createPaginatedRowModel(),
-    },
-    data,
-    get columns() {
-      return columns.value
-    },
-    debugTable: true,
+const table = useTable({
+  features,
+  rowModels: {
+    paginatedRowModel: createPaginatedRowModel(),
   },
-)
+  data,
+  get columns() {
+    return columns.value
+  },
+  debugTable: true,
+})
 
 const refreshData = () => {
   data.value = makeData(1_000)
diff --git a/examples/vue/filters/src/App.vue b/examples/vue/filters/src/App.vue
index cab0b434ea..02161e4cbf 100644
--- a/examples/vue/filters/src/App.vue
+++ b/examples/vue/filters/src/App.vue
@@ -70,15 +70,13 @@ const stressTest = () => {
   data.value = makeData(200_000)
 }
 
-const table = useAppTable(
-  {
-    debugTable: true,
-    data,
-    get columns() {
-      return columns.value
-    },
+const table = useAppTable({
+  debugTable: true,
+  data,
+  get columns() {
+    return columns.value
   },
-)
+})
 
 function handleGoToPage(e: any) {
   const page = e.target.value ? Number(e.target.value) - 1 : 0
diff --git a/examples/vue/grouping/src/App.vue b/examples/vue/grouping/src/App.vue
index a067bd03fa..c2f8d73372 100644
--- a/examples/vue/grouping/src/App.vue
+++ b/examples/vue/grouping/src/App.vue
@@ -71,19 +71,17 @@ const columns = ref(
   ]),
 )
 
-const table = useTable(
-  {
-    features,
-    rowModels: {
-      paginatedRowModel: createPaginatedRowModel(),
-    },
-    data,
-    get columns() {
-      return columns.value
-    },
-    debugTable: true,
+const table = useTable({
+  features,
+  rowModels: {
+    paginatedRowModel: createPaginatedRowModel(),
   },
-)
+  data,
+  get columns() {
+    return columns.value
+  },
+  debugTable: true,
+})
 
 const refreshData = () => {
   data.value = makeData(1_000)
diff --git a/examples/vue/kitchen-sink/src/App.vue b/examples/vue/kitchen-sink/src/App.vue
index adbb29e8b3..5b6c20caa2 100644
--- a/examples/vue/kitchen-sink/src/App.vue
+++ b/examples/vue/kitchen-sink/src/App.vue
@@ -161,40 +161,38 @@ const columns = ref(
 
 const data = ref(makeData(1_000))
 
-const table = useTable(
-  {
-    key: 'kitchen-sink', // needed for devtools
-    features: stockFeatures,
-    rowModels: {
-      expandedRowModel: createExpandedRowModel(),
-      filteredRowModel: createFilteredRowModel({
-        ...filterFns,
-        fuzzy: fuzzyFilter,
-      }),
-      facetedRowModel: createFacetedRowModel(),
-      facetedMinMaxValues: createFacetedMinMaxValues(),
-      facetedUniqueValues: createFacetedUniqueValues(),
-      groupedRowModel: createGroupedRowModel(aggregationFns),
-      paginatedRowModel: createPaginatedRowModel(),
-      sortedRowModel: createSortedRowModel(sortFns),
-    },
-    data,
-    get columns() {
-      return columns.value
-    },
-    getSubRows: (row: Person) => row.subRows,
-    globalFilterFn: 'fuzzy',
-    columnResizeMode: 'onChange',
-    defaultColumn: { minSize: 200, maxSize: 800 },
-    initialState: {
-      columnOrder: columns.value.map((c) => c.id!),
-      columnPinning: { left: ['select'], right: [] },
-      pagination: { pageIndex: 0, pageSize: 20 },
-    },
-    keepPinnedRows: true,
-    debugTable: true,
+const table = useTable({
+  key: 'kitchen-sink', // needed for devtools
+  features: stockFeatures,
+  rowModels: {
+    expandedRowModel: createExpandedRowModel(),
+    filteredRowModel: createFilteredRowModel({
+      ...filterFns,
+      fuzzy: fuzzyFilter,
+    }),
+    facetedRowModel: createFacetedRowModel(),
+    facetedMinMaxValues: createFacetedMinMaxValues(),
+    facetedUniqueValues: createFacetedUniqueValues(),
+    groupedRowModel: createGroupedRowModel(aggregationFns),
+    paginatedRowModel: createPaginatedRowModel(),
+    sortedRowModel: createSortedRowModel(sortFns),
   },
-)
+  data,
+  get columns() {
+    return columns.value
+  },
+  getSubRows: (row: Person) => row.subRows,
+  globalFilterFn: 'fuzzy',
+  columnResizeMode: 'onChange',
+  defaultColumn: { minSize: 200, maxSize: 800 },
+  initialState: {
+    columnOrder: columns.value.map((c) => c.id!),
+    columnPinning: { left: ['select'], right: [] },
+    pagination: { pageIndex: 0, pageSize: 20 },
+  },
+  keepPinnedRows: true,
+  debugTable: true,
+})
 
 useTanStackTableDevtools(table)
 
diff --git a/examples/vue/pagination/src/App.vue b/examples/vue/pagination/src/App.vue
index a067bd03fa..c2f8d73372 100644
--- a/examples/vue/pagination/src/App.vue
+++ b/examples/vue/pagination/src/App.vue
@@ -71,19 +71,17 @@ const columns = ref(
   ]),
 )
 
-const table = useTable(
-  {
-    features,
-    rowModels: {
-      paginatedRowModel: createPaginatedRowModel(),
-    },
-    data,
-    get columns() {
-      return columns.value
-    },
-    debugTable: true,
+const table = useTable({
+  features,
+  rowModels: {
+    paginatedRowModel: createPaginatedRowModel(),
   },
-)
+  data,
+  get columns() {
+    return columns.value
+  },
+  debugTable: true,
+})
 
 const refreshData = () => {
   data.value = makeData(1_000)
diff --git a/examples/vue/row-pinning/src/App.vue b/examples/vue/row-pinning/src/App.vue
index a067bd03fa..c2f8d73372 100644
--- a/examples/vue/row-pinning/src/App.vue
+++ b/examples/vue/row-pinning/src/App.vue
@@ -71,19 +71,17 @@ const columns = ref(
   ]),
 )
 
-const table = useTable(
-  {
-    features,
-    rowModels: {
-      paginatedRowModel: createPaginatedRowModel(),
-    },
-    data,
-    get columns() {
-      return columns.value
-    },
-    debugTable: true,
+const table = useTable({
+  features,
+  rowModels: {
+    paginatedRowModel: createPaginatedRowModel(),
   },
-)
+  data,
+  get columns() {
+    return columns.value
+  },
+  debugTable: true,
+})
 
 const refreshData = () => {
   data.value = makeData(1_000)
diff --git a/examples/vue/row-selection/src/App.vue b/examples/vue/row-selection/src/App.vue
index 553cc4e741..f41cd60af8 100644
--- a/examples/vue/row-selection/src/App.vue
+++ b/examples/vue/row-selection/src/App.vue
@@ -104,21 +104,19 @@ const toggleRowSelection = () => {
   enableRowSelection.value = !enableRowSelection.value
 }
 
-const table = useTable(
-  {
-    key: 'row-selection', // needed for devtools
-    features,
-    rowModels: {},
-    data,
-    columns,
-    debugTable: true,
-    // enable row selection for all rows
-    get enableRowSelection() {
-      return enableRowSelection.value
-    },
-    // enableRowSelection: row => row.original.age > 18, // or enable row selection conditionally per row
+const table = useTable({
+  key: 'row-selection', // needed for devtools
+  features,
+  rowModels: {},
+  data,
+  columns,
+  debugTable: true,
+  // enable row selection for all rows
+  get enableRowSelection() {
+    return enableRowSelection.value
   },
-)
+  // enableRowSelection: row => row.original.age > 18, // or enable row selection conditionally per row
+})
 
 useTanStackTableDevtools(table)
 </script>
diff --git a/examples/vue/sorting/src/App.vue b/examples/vue/sorting/src/App.vue
index 83413be784..6730f4fc5e 100644
--- a/examples/vue/sorting/src/App.vue
+++ b/examples/vue/sorting/src/App.vue
@@ -57,17 +57,15 @@ const stressTest = () => {
   data.value = makeData(500_000)
 }
 
-const table = useTable(
-  {
-    features,
-    rowModels: {
-      sortedRowModel: createSortedRowModel(sortFns),
-    },
-    data,
-    columns,
-    debugTable: true,
+const table = useTable({
+  features,
+  rowModels: {
+    sortedRowModel: createSortedRowModel(sortFns),
   },
-)
+  data,
+  columns,
+  debugTable: true,
+})
 </script>
 
 <template>
diff --git a/examples/vue/sub-components/src/App.vue b/examples/vue/sub-components/src/App.vue
index 9aa6beda27..a59a29408a 100644
--- a/examples/vue/sub-components/src/App.vue
+++ b/examples/vue/sub-components/src/App.vue
@@ -75,15 +75,13 @@ const stressTest = () => {
   data.value = makeData(1_000)
 }
 
-const table = useAppTable(
-  {
-    debugTable: true,
-    // features and row models are already defined in the createTableHook call
-    data,
-    columns,
-    getRowCanExpand: () => true,
-  },
-)
+const table = useAppTable({
+  debugTable: true,
+  // features and row models are already defined in the createTableHook call
+  data,
+  columns,
+  getRowCanExpand: () => true,
+})
 </script>
 
 <template>
diff --git a/examples/vue/with-tanstack-form/src/App.vue b/examples/vue/with-tanstack-form/src/App.vue
index a067bd03fa..c2f8d73372 100644
--- a/examples/vue/with-tanstack-form/src/App.vue
+++ b/examples/vue/with-tanstack-form/src/App.vue
@@ -71,19 +71,17 @@ const columns = ref(
   ]),
 )
 
-const table = useTable(
-  {
-    features,
-    rowModels: {
-      paginatedRowModel: createPaginatedRowModel(),
-    },
-    data,
-    get columns() {
-      return columns.value
-    },
-    debugTable: true,
+const table = useTable({
+  features,
+  rowModels: {
+    paginatedRowModel: createPaginatedRowModel(),
   },
-)
+  data,
+  get columns() {
+    return columns.value
+  },
+  debugTable: true,
+})
 
 const refreshData = () => {
   data.value = makeData(1_000)

From 20ba632f217d98f75a218f55af565c0150d91652 Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Sun, 7 Jun 2026 09:57:36 +0200
Subject: [PATCH 07/10] fix(vue): call reactivity unmount on scope dispose

---
 packages/vue-table/src/useTable.ts | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/vue-table/src/useTable.ts b/packages/vue-table/src/useTable.ts
index b980bd830b..eb85da75ed 100644
--- a/packages/vue-table/src/useTable.ts
+++ b/packages/vue-table/src/useTable.ts
@@ -1,4 +1,4 @@
-import { unref, watch } from 'vue'
+import { getCurrentScope, onScopeDispose, unref, watch } from 'vue'
 import { constructTable } from '@tanstack/table-core'
 import { flatMerge, mergeProxy } from './merge-proxy'
 import { vueReactivity } from './reactivity'
@@ -99,9 +99,11 @@ export function useTable<
     )
   }
 
+  const reactivity = vueReactivity()
+
   const mergedOptions = mergeProxy(tableOptions, {
     features: {
-      coreReativityFeature: vueReactivity(),
+      coreReativityFeature: reactivity,
       ...(unref(tableOptions.features) ?? {}),
     },
   }) as TableOptionsWithReactiveData<TFeatures, TData>
@@ -122,6 +124,10 @@ export function useTable<
   const coreTable = constructTable(resolvedOptions)
   const table = coreTable as unknown as VueTable<TFeatures, TData>
 
+  if (getCurrentScope()) {
+    onScopeDispose(() => reactivity.unmount?.())
+  }
+
   watch(
     () => getReactiveOptionDeps(mergedOptions),
     () => {
@@ -165,11 +171,11 @@ export function useTable<
     { immediate: true },
   )
 
-  table.Subscribe = ((props: {
+  table.Subscribe = (props: {
     children: (atoms: Table<TFeatures, TData>['atoms']) => VNode | Array<VNode>
   }) => {
     return props.children(table.atoms)
-  }) as VueTable<TFeatures, TData>['Subscribe']
+  }
 
   return table
 }

From 642fd546c452b2606cabb1a7b5fe613ef84d3512 Mon Sep 17 00:00:00 2001
From: Kevin Van Cott <kevinvandy656@gmail.com>
Date: Sun, 7 Jun 2026 10:02:50 -0500
Subject: [PATCH 08/10] correct merge conflict resolution and regen lock file

---
 packages/solid-table/package.json | 2 +-
 packages/vue-table/package.json   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/solid-table/package.json b/packages/solid-table/package.json
index 6ac8d11e72..db7fbd1b6b 100644
--- a/packages/solid-table/package.json
+++ b/packages/solid-table/package.json
@@ -59,7 +59,7 @@
     "build": "tsdown"
   },
   "dependencies": {
-    "@tanstack/solid-store": "^0.11.0",
+    "@tanstack/store": "^0.11.0",
     "@tanstack/table-core": "^9.0.0-beta.2"
   },
   "devDependencies": {
diff --git a/packages/vue-table/package.json b/packages/vue-table/package.json
index 1de7903ccf..a23fe4a0b5 100644
--- a/packages/vue-table/package.json
+++ b/packages/vue-table/package.json
@@ -58,7 +58,7 @@
   },
   "dependencies": {
     "@tanstack/table-core": "^9.0.0-beta.2",
-    "@tanstack/vue-store": "^0.11.0"
+    "@tanstack/store": "^0.11.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.7",

From 34defbd7bf7273aecd9024091316b80da008d59f Mon Sep 17 00:00:00 2001
From: Kevin Van Cott <kevinvandy656@gmail.com>
Date: Sun, 7 Jun 2026 10:08:34 -0500
Subject: [PATCH 09/10] fix sherif issue

---
 packages/vue-table/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vue-table/package.json b/packages/vue-table/package.json
index a23fe4a0b5..4496b5a16e 100644
--- a/packages/vue-table/package.json
+++ b/packages/vue-table/package.json
@@ -57,8 +57,8 @@
     "build": "tsdown"
   },
   "dependencies": {
-    "@tanstack/table-core": "^9.0.0-beta.2",
-    "@tanstack/store": "^0.11.0"
+    "@tanstack/store": "^0.11.0",
+    "@tanstack/table-core": "^9.0.0-beta.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.7",

From 4affa4eb9c0d5c943a837bdd329ea9eb01b94eef Mon Sep 17 00:00:00 2001
From: Kevin Van Cott <kevinvandy656@gmail.com>
Date: Sun, 7 Jun 2026 12:07:49 -0500
Subject: [PATCH 10/10] update table state docs

---
 docs/framework/angular/guide/table-state.md   |  17 ++-
 docs/framework/solid/guide/table-state.md     | 124 ++++++++++--------
 docs/framework/vue/guide/table-state.md       |  91 +++++++------
 .../solid/basic-external-atoms/src/App.tsx    |   1 -
 4 files changed, 131 insertions(+), 102 deletions(-)

diff --git a/docs/framework/angular/guide/table-state.md b/docs/framework/angular/guide/table-state.md
index c732e7e35a..5cfbd0d33f 100644
--- a/docs/framework/angular/guide/table-state.md
+++ b/docs/framework/angular/guide/table-state.md
@@ -28,8 +28,7 @@ A table instance has a few state surfaces:
 
 - `table.baseAtoms` are the internal writable atoms created from the resolved initial state.
 - `table.atoms` are readonly derived atoms exposed per registered state slice.
-- `table.state` is a readonly flat proxy over the registered `table.atoms`, useful for full-state debug output.
-- `table.store` is the underlying readonly flat TanStack Store. Prefer `table.atoms` or `table.state` in app code.
+- `table.store` is the readonly flat TanStack Store derived by putting all of the registered `table.atoms` together.
 
 The Angular adapter provides `angularReactivity(injector)` as the table's reactivity binding. Core readonly atoms are Angular `computed` values, writable atoms are Angular `signal` values, and subscriptions bridge through `toObservable(computed(...), { injector })`. `injectTable` reruns the options initializer when Angular signals read inside it change, then calls `table.setOptions`.
 
@@ -61,7 +60,7 @@ this.table.atoms.sorting.get()
 // this.table.atoms.rowSelection // TypeScript error unless rowSelectionFeature is registered
 ```
 
-If `features` does not include a feature, its state should not be available in `table.atoms`, `table.store.state`, `initialState`, `state`, or `atoms`.
+If `features` does not include a feature, its state should not be available in `table.atoms`, `table.store.get()`, `initialState`, `state`, or `atoms`.
 
 ### Accessing Table State
 
@@ -81,11 +80,11 @@ const pagination = this.table.atoms.pagination.get()
 const sorting = this.table.atoms.sorting.get()
 ```
 
-Use `table.state` when you need the current flat state shape, such as debug JSON:
+Use `table.store.get()` when you need the current flat state shape, such as debug JSON:
 
 ```ts
-const tableState = this.table.state
-const stateJson = JSON.stringify(this.table.state, null, 2)
+const tableState = this.table.store.get()
+const stateJson = JSON.stringify(this.table.store.get(), null, 2)
 ```
 
 Atom reads are signal reads in Angular. If `this.table.atoms.pagination.get()` is used in a template expression, `computed(...)`, or `effect(...)`, Angular tracks it and updates when that atom changes.
@@ -116,11 +115,11 @@ readonly pagination = computed(
 readonly pageIndex = computed(() => this.pagination().pageIndex)
 ```
 
-You can also select from the flat state proxy if that is more convenient, but prefer direct atoms for narrow render reads.
+You can also select from the flat store snapshot if that is more convenient, but prefer direct atoms for narrow render reads.
 
 ```ts
 readonly pagination = computed(
-  () => this.table.state.pagination,
+  () => this.table.store.get().pagination,
   { equal: shallow },
 )
 ```
@@ -243,7 +242,7 @@ readonly table = injectTable(() => ({
 }))
 ```
 
-The v8-style `onStateChange` option is no longer part of the v9 `injectTable` state model. v9 encourages keeping table state slices atomic and separated for performance.
+Use the per-slice `on[State]Change` callbacks to keep controlled table state slices atomic and separated.
 
 ##### On State Change Callbacks
 
diff --git a/docs/framework/solid/guide/table-state.md b/docs/framework/solid/guide/table-state.md
index da33a0b5a3..8699d11530 100644
--- a/docs/framework/solid/guide/table-state.md
+++ b/docs/framework/solid/guide/table-state.md
@@ -32,7 +32,6 @@ A table instance has a few state surfaces:
 - `table.baseAtoms` are the internal writable atoms created from the resolved initial state.
 - `table.atoms` are readonly derived atoms exposed per registered state slice.
 - `table.store` is a readonly flat TanStack Store derived by putting all of the registered `table.atoms` together.
-- `table.state()` is Solid-only selected state. It is the accessor returned from the selector passed as the second argument to `createTable`.
 
 The Solid adapter provides `solidReactivity(owner)` to the table's `coreReativityFeature`. Core readonly atoms are Solid `createMemo` values and core writable atoms are Solid `createSignal` values. Because atom `.get()` reads through Solid signals and memos, table APIs can be consumed inside Solid computations and update only the computations that read the relevant state.
 
@@ -64,7 +63,7 @@ table.atoms.sorting.get()
 // table.atoms.rowSelection // TypeScript error unless rowSelectionFeature is registered
 ```
 
-If `features` does not include a feature, its state should not be available in `table.atoms`, `table.store.state`, `table.state()`, `initialState`, `state`, or `atoms`.
+If `features` does not include a feature, its state should not be available in `table.atoms`, `table.store.get()`, `initialState`, `state`, or `atoms`.
 
 ### Accessing Table State
 
@@ -73,9 +72,9 @@ There are two different questions when reading table state:
 - Do you only need the current value?
 - Or should a Solid computation update when that value changes?
 
-Use a direct atom or store read for the current value. Use a selector, accessor, or `table.Subscribe` when you want Solid's fine-grained updates.
+Use direct atom reads for slice values. Use `table.store.get()` for the current flat state snapshot. Because Solid table atoms are backed by Solid signals and memos, atom reads participate in Solid dependency tracking when they happen inside JSX, `createMemo(...)`, `createEffect(...)`, or `table.Subscribe`.
 
-#### Reading State Without Subscribing
+#### Reading State
 
 The simplest and most performant way to read a current state value is to read the matching atom:
 
@@ -87,77 +86,92 @@ const sorting = table.atoms.sorting.get()
 You can also read the current flat store snapshot:
 
 ```tsx
-const tableState = table.store.state
-const pagination = table.store.state.pagination
+const tableState = table.store.get()
+const pagination = table.store.get().pagination
 ```
 
-These reads are current-value reads. They only participate in Solid dependency tracking when they are called inside a Solid reactive scope that tracks those reads. If the UI needs to stay reactive to table state changes, use `table.state()`, `table.Subscribe`, or even a `useSelector` hook from TanStack Store.
+These reads are current-value reads. They only participate in Solid dependency tracking when they are called inside a Solid reactive scope that tracks those reads. Prefer `table.atoms.<slice>.get()` for narrow reactive reads. Use `table.store.get()` for full-state debug output or when a computation intentionally depends on the whole table state.
 
-#### Reading Reactive State with createTable
+#### Reading Reactive State with Solid
 
-The second argument to `createTable` is a TanStack Store selector. The selected value is exposed as `table.state()`. The default selector selects all registered table state.
+Use Solid's native primitives to derive reactive values from table atoms or the flat store snapshot.
 
 ```tsx
-const table = createTable(
-  {
-    features,
-    rowModels: {
-      paginatedRowModel: createPaginatedRowModel(),
-    },
-    columns,
-    get data() {
-      return data()
-    },
+const table = createTable({
+  features,
+  rowModels: {
+    paginatedRowModel: createPaginatedRowModel(),
   },
-  (state) => ({
-    pagination: state.pagination,
-  }),
-)
+  columns,
+  get data() {
+    return data()
+  },
+})
 
-table.state().pagination
+const pagination = createMemo(() => table.atoms.pagination.get())
+const pageIndex = createMemo(() => pagination().pageIndex)
+
+const tableStateJson = createMemo(() =>
+  JSON.stringify(table.store.get(), null, 2),
+)
 ```
 
-You can use the selected state in `createMemo`, JSX, or other Solid computations. Those computations update when the selected state changes.
+You can use atom reads directly in JSX too:
+
+```tsx
+<span>
+  Page {table.atoms.pagination.get().pageIndex + 1} of {table.getPageCount()}
+</span>
+```
 
 #### Fine-grained Updates with table.Subscribe
 
-Use `table.Subscribe` when you want a specific part of the Solid tree to subscribe to a selected table state value. The child function receives a Solid accessor.
+Use `table.Subscribe` when you want a specific part of the Solid tree to create a reactive render boundary. Its child function receives `table.atoms`, and Solid tracks only the atom reads used inside that child.
 
-Without a `source` prop, `table.Subscribe` subscribes to `table.store` and requires a selector. With a `source` prop, it can subscribe directly to one atom or store.
+```tsx
+<table.Subscribe>
+  {(atoms) => {
+    void atoms.columnFilters.get()
+    void atoms.globalFilter.get()
+    void atoms.pagination.get()
+
+    return (
+      <tbody>
+        <For each={table.getRowModel().rows}>
+          {(row) => <tr>{/* ... */}</tr>}
+        </For>
+      </tbody>
+    )
+  }}
+</table.Subscribe>
+```
 
 ```tsx
-<table.Subscribe
-  selector={(state) => ({
-    columnFilters: state.columnFilters,
-    globalFilter: state.globalFilter,
-    pagination: state.pagination,
-  })}
->
-  {() => (
+<table.Subscribe>
+  {(atoms) => (
     <tbody>
       <For each={table.getRowModel().rows}>
-        {(row) => <tr>{/* ... */}</tr>}
+        {(row) => {
+          const isSelected = () => atoms.rowSelection.get()[row.id]
+
+          return (
+            <tr>
+              <td>
+                <input
+                  type="checkbox"
+                  checked={!!isSelected()}
+                  onChange={row.getToggleSelectedHandler()}
+                />
+              </td>
+            </tr>
+          )
+        }}
       </For>
     </tbody>
   )}
 </table.Subscribe>
 ```
 
-```tsx
-<table.Subscribe
-  source={table.atoms.rowSelection}
-  selector={(rowSelection) => rowSelection[row.id]}
->
-  {(isSelected) => (
-    <input
-      type="checkbox"
-      checked={!!isSelected()}
-      onChange={row.getToggleSelectedHandler()}
-    />
-  )}
-</table.Subscribe>
-```
-
 ### Setting Table State
 
 You should almost never need to set table state directly. TanStack Table features expose dedicated APIs for interacting with their state, and those APIs are the safest way to make changes.
@@ -232,11 +246,11 @@ Slice reset APIs like `resetPagination()` update through that feature's state up
 
 ### Controlled State
 
-If you need easy access to table state in other parts of your application, you can control individual state slices. In v9, external atoms are the recommended way to do this because they preserve the atomic state model and Solid can update computations that read only the relevant slices.
+If you need easy access to table state in other parts of your application, you can control individual state slices. In Solid, use native signals with `state` plus `on[State]Change` when you want Solid to own the slice. Use external TanStack Store atoms when you already want app-level atom sharing or direct atom subscriptions outside the table.
 
 #### External Atoms
 
-Use external atoms when the app should own one or more table state slices. Create stable writable atoms with `createAtom`, pass them to `atoms`, and subscribe to them with `useSelector` anywhere else in your app.
+Use external atoms when the app should own one or more table state slices as TanStack Store atoms. Create stable writable atoms with `createAtom`, pass them to `atoms`, and subscribe to them with `useSelector` anywhere else in your app. `@tanstack/solid-store` is only needed by your app if you choose this pattern; the Solid table adapter itself uses Solid-native reactivity.
 
 ```tsx
 import { createAtom, useSelector } from '@tanstack/solid-store'
@@ -284,7 +298,7 @@ When using the `atoms` option for a slice, you do not need to add the matching `
 
 #### External State
 
-The classic `state` plus `on[State]Change` pattern is still supported. This can be convenient for simple integrations or when migrating v8 code, but it is less atomic than external atoms.
+Use `state` plus `on[State]Change` when Solid signals should own a table state slice.
 
 ```tsx
 const [sorting, setSorting] = createSignal<SortingState>([])
@@ -316,7 +330,7 @@ const table = createTable({
 })
 ```
 
-The v8-style `onStateChange` option is no longer part of the v9 `createTable` state model. v9 encourages keeping table state slices atomic and separated for performance.
+Use the per-slice `on[State]Change` callbacks to keep controlled table state slices atomic and separated.
 
 ##### On State Change Callbacks
 
diff --git a/docs/framework/vue/guide/table-state.md b/docs/framework/vue/guide/table-state.md
index 9f9f708e8e..5f5e48b297 100644
--- a/docs/framework/vue/guide/table-state.md
+++ b/docs/framework/vue/guide/table-state.md
@@ -32,7 +32,6 @@ A table instance has a few state surfaces:
 - `table.baseAtoms` are the internal writable atoms created from the resolved initial state.
 - `table.atoms` are readonly derived atoms exposed per registered state slice.
 - `table.store` is a readonly flat TanStack Store derived by putting all of the registered `table.atoms` together.
-- `table.state` is Vue-only selected state. It is the value returned from the selector passed as the second argument to `useTable`.
 
 The Vue adapter provides `vueReactivity()` to the table's `coreReativityFeature`. Core readonly atoms are Vue `computed` values, writable atoms are `shallowRef` values, and subscriptions are backed by `watch(..., { flush: 'sync' })`. `useTable` also watches reactive option dependencies and controlled state values so it can call `table.setOptions` when Vue state changes.
 
@@ -62,7 +61,7 @@ table.atoms.sorting.get()
 // table.atoms.rowSelection // TypeScript error unless rowSelectionFeature is registered
 ```
 
-If `features` does not include a feature, its state should not be available in `table.atoms`, `table.store.state`, `table.state`, `initialState`, `state`, or `atoms`.
+If `features` does not include a feature, its state should not be available in `table.atoms`, `table.store.get()`, `initialState`, `state`, or `atoms`.
 
 ### Accessing Table State
 
@@ -71,9 +70,9 @@ There are two different questions when reading table state:
 - Do you only need the current value?
 - Or should Vue render or computed work update when that value changes?
 
-Use a direct atom or store read for the current value. Use selected state, `useSelector`, or `table.Subscribe` when you want Vue to track the selected value.
+Use direct atom reads for slice values. Use `table.store.get()` for the current flat state snapshot. Because Vue table atoms are backed by Vue refs and computed values, atom reads participate in Vue dependency tracking when they happen inside templates, `computed(...)`, `watch(...)`, or `table.Subscribe`.
 
-#### Reading State Without Subscribing
+#### Reading State
 
 The simplest and most performant way to read a current state value is to read the matching atom:
 
@@ -85,32 +84,32 @@ const sorting = table.atoms.sorting.get()
 You can also read the current flat store snapshot:
 
 ```ts
-const tableState = table.store.state
-const pagination = table.store.state.pagination
+const tableState = table.store.get()
+const pagination = table.store.get().pagination
 ```
 
-These reads are current-value reads. They only participate in Vue dependency tracking when they are called in a Vue reactive context that tracks those reads. If the UI needs to stay reactive to table state changes, use `table.state`, `table.Subscribe`, or even a `useSelector` hook from TanStack Store.
+These reads are current-value reads. They only participate in Vue dependency tracking when they are called inside a Vue reactive context that tracks those reads. Prefer `table.atoms.<slice>.get()` for narrow reactive reads. Use `table.store.get()` for full-state debug output or when a computation intentionally depends on the whole table state.
 
-#### Reading Reactive State with useTable
+#### Reading Reactive State with Vue
 
-The second argument to `useTable` is a TanStack Store selector. The selected value is exposed as `table.state`. The default selector selects all registered table state.
+Use Vue's native primitives to derive reactive values from table atoms or the flat store snapshot.
 
 ```ts
-const table = useTable(
-  {
-    features,
-    rowModels: {
-      paginatedRowModel: createPaginatedRowModel(),
-    },
-    columns,
-    data,
+const table = useTable({
+  features,
+  rowModels: {
+    paginatedRowModel: createPaginatedRowModel(),
   },
-  (state) => ({
-    pagination: state.pagination,
-  }),
-)
+  columns,
+  data,
+})
 
-table.state.pagination
+const pagination = computed(() => table.atoms.pagination.get())
+const pageIndex = computed(() => pagination.value.pageIndex)
+
+const tableStateJson = computed(() =>
+  JSON.stringify(table.store.get(), null, 2),
+)
 ```
 
 Vue's `data` option can also be a `ref` or `computed`. The adapter unwraps reactive option values and syncs the table when those values change.
@@ -130,22 +129,40 @@ data.value = makeData(200)
 
 #### Fine-grained Updates with table.Subscribe
 
-Use `table.Subscribe` in render functions or JSX when you want a specific part of the Vue tree to subscribe to a selected table state value.
+Use `table.Subscribe` in render functions or JSX when you want a specific part of the Vue tree to create a reactive render boundary. Its child function receives `table.atoms`, and Vue tracks only the atom reads used inside that child.
 
-Without a `source` prop, `table.Subscribe` subscribes to `table.store` and requires a selector. With a `source` prop, it can subscribe directly to one atom or store.
+```tsx
+<table.Subscribe>
+  {(atoms) => {
+    void atoms.columnFilters.get()
+    void atoms.globalFilter.get()
+    void atoms.pagination.get()
+
+    return (
+      <tbody>
+        {table.getRowModel().rows.map((row) => (
+          <tr key={row.id}>...</tr>
+        ))}
+      </tbody>
+    )
+  }}
+</table.Subscribe>
+```
 
 ```tsx
-<table.Subscribe
-  selector={(state) => ({
-    columnFilters: state.columnFilters,
-    globalFilter: state.globalFilter,
-    pagination: state.pagination,
-  })}
->
-  {() => (
+<table.Subscribe>
+  {(atoms) => (
     <tbody>
       {table.getRowModel().rows.map((row) => (
-        <tr key={row.id}>...</tr>
+        <tr key={row.id}>
+          <td>
+            <input
+              type="checkbox"
+              checked={!!atoms.rowSelection.get()[row.id]}
+              onChange={row.getToggleSelectedHandler()}
+            />
+          </td>
+        </tr>
       ))}
     </tbody>
   )}
@@ -224,11 +241,11 @@ Slice reset APIs like `resetPagination()` update through that feature's state up
 
 ### Controlled State
 
-If you need easy access to table state in other parts of your application, you can control individual state slices. In v9, external atoms are the recommended way to do this when you want atomic ownership and fine-grained Vue updates.
+If you need easy access to table state in other parts of your application, you can control individual state slices. In Vue, use refs or computed values with `state` plus `on[State]Change` when you want Vue to own the slice. Use external TanStack Store atoms when you already want app-level atom sharing or direct atom subscriptions outside the table.
 
 #### External Atoms
 
-Use external atoms when the app should own one or more table state slices. Create stable writable atoms with `createAtom`, pass them to `atoms`, and subscribe to them with `useSelector`.
+Use external atoms when the app should own one or more table state slices as TanStack Store atoms. Create stable writable atoms with `createAtom`, pass them to `atoms`, and subscribe to them with `useSelector`. `@tanstack/vue-store` is only needed by your app if you choose this pattern; the Vue table adapter itself uses Vue-native reactivity.
 
 ```ts
 import { createAtom, useSelector } from '@tanstack/vue-store'
@@ -269,7 +286,7 @@ When using the `atoms` option for a slice, you do not need to add the matching `
 
 #### External State
 
-The classic `state` plus `on[State]Change` pattern is still supported. This can be convenient for simple integrations or when migrating v8 code, but it is less atomic than external atoms.
+Use `state` plus `on[State]Change` when Vue refs or computed values should own a table state slice.
 
 ```ts
 const sorting = ref<SortingState>([])
@@ -304,7 +321,7 @@ const table = useTable({
 })
 ```
 
-The v8-style `onStateChange` option is no longer part of the v9 `useTable` state model. v9 encourages keeping table state slices atomic and separated for performance.
+Use the per-slice `on[State]Change` callbacks to keep controlled table state slices atomic and separated.
 
 ##### On State Change Callbacks
 
diff --git a/examples/solid/basic-external-atoms/src/App.tsx b/examples/solid/basic-external-atoms/src/App.tsx
index 31f6e60d74..8e28330b56 100644
--- a/examples/solid/basic-external-atoms/src/App.tsx
+++ b/examples/solid/basic-external-atoms/src/App.tsx
@@ -65,7 +65,6 @@ function App() {
   })
 
   // Subscribe to each atom independently — fine-grained Solid reactivity.
-  const sorting = useSelector(sortingAtom)
   const pagination = useSelector(paginationAtom)
 
   // Create the table and pass your per-slice external atoms.