feat: enable support for native reactivity in solid vue adapters

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)
   }
 }

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() {

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))

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() {

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))

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 = (

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() {

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))

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) {

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))

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))

examples/angular/composable-tables/src/app/components/table-components.ts

@@ -78,7 +78,8 @@ export class RowCount {
       <span>
         Page
         <strong>
-          {{ (table().state.pagination.pageIndex + 1).toLocaleString() }} of
+          {{ (table().atoms.pagination.get().pageIndex + 1).toLocaleString() }}
+          of
           {{ pageCount() }}
         </strong>
       </span>
@@ -88,12 +89,12 @@ export class RowCount {
           type="number"
           min="1"
           [max]="table().getPageCount()"
-          [value]="table().state.pagination.pageIndex + 1"
+          [value]="table().atoms.pagination.get().pageIndex + 1"
           (change)="onPageChange($event)"
         />
       </span>
       <select
-        [value]="table().state.pagination.pageSize"
+        [value]="table().atoms.pagination.get().pageSize"
         (change)="onPageSizeChange($event)"
       >
         @for (size of pageSizes; track size) {

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 {

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 {

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))

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 {

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 {

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() {

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))

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))

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(

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(

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))

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))

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) {

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 }))

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>
   )
 }

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>
   )
 }

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>
   )
 }

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>
   )
 }

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>
   )
 }

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>
   )
 }

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">

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.atoms.columnResizing.get().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>
   )
 }

examples/solid/column-sizing/src/App.tsx

@@ -87,7 +87,7 @@ function App() {
                   value={column.getSize()}
                   onInput={(e) => {
                     table.setColumnSizing({
-                      ...table.state().columnSizing,
+                      ...table.atoms.columnSizing.get(),
                       [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>
   )
 }

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>
   )
 }

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.atoms.pagination.get())
 
   return (
     <div class="pagination">