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..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 + + Page {table.atoms.pagination.get().pageIndex + 1} of {table.getPageCount()} + +``` #### 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 + + {(atoms) => { + void atoms.columnFilters.get() + void atoms.globalFilter.get() + void atoms.pagination.get() + + return ( + + + {(row) => {/* ... */}} + + + ) + }} + +``` ```tsx - ({ - columnFilters: state.columnFilters, - globalFilter: state.globalFilter, - pagination: state.pagination, - })} -> - {() => ( + + {(atoms) => ( - {(row) => {/* ... */}} + {(row) => { + const isSelected = () => atoms.rowSelection.get()[row.id] + + return ( + + + + + + ) + }} )} ``` -```tsx - rowSelection[row.id]} -> - {(isSelected) => ( - - )} - -``` - ### 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([]) @@ -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..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 + + {(atoms) => { + void atoms.columnFilters.get() + void atoms.globalFilter.get() + void atoms.pagination.get() + + return ( + + {table.getRowModel().rows.map((row) => ( + ... + ))} + + ) + }} + +``` ```tsx - ({ - columnFilters: state.columnFilters, - globalFilter: state.globalFilter, - pagination: state.pagination, - })} -> - {() => ( + + {(atoms) => ( {table.getRowModel().rows.map((row) => ( - ... + + + + + ))} )} @@ -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([]) @@ -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/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..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,8 @@ export class RowCount { Page - {{ (table().state.pagination.pageIndex + 1).toLocaleString() }} of + {{ (table().atoms.pagination.get().pageIndex + 1).toLocaleString() }} + of {{ pageCount() }} @@ -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)" />
- 
{JSON.stringify(table.state(), null, 2)}
+ 
{JSON.stringify(table.store.get(), null, 2)}
) } 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() {
- 
{JSON.stringify(table.state(), null, 2)}
+ 
{JSON.stringify(table.store.get(), null, 2)}
) } 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() {
- 
{JSON.stringify(table.state(), null, 2)}
+ 
{JSON.stringify(table.store.get(), null, 2)}
) } 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() { - 
{JSON.stringify(table.state(), null, 2)}
+ 
{JSON.stringify(table.store.get(), null, 2)}
) } 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() { - 
{JSON.stringify(table.state(), null, 2)}
+ 
{JSON.stringify(table.store.get(), null, 2)}
) } 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() { - 
{JSON.stringify(table.state(), null, 2)}
+ 
{JSON.stringify(table.store.get(), null, 2)}
) } 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() { 
-        {JSON.stringify(table.state(), null, 2)}
+        {JSON.stringify(table.store.get(), null, 2)}
({data().length.toLocaleString()} rows)
diff --git a/examples/solid/column-resizing/src/App.tsx b/examples/solid/column-resizing/src/App.tsx index 7cad8c0ddc..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[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() {
- 
{JSON.stringify(table.state(), null, 2)}
+ 
{JSON.stringify(table.store.get(), null, 2)}
) } diff --git a/examples/solid/column-sizing/src/App.tsx b/examples/solid/column-sizing/src/App.tsx index 6737ad90a5..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.state().columnSizing, + ...table.atoms.columnSizing.get(), [column.id]: Number(e.currentTarget.value), }) }} @@ -244,7 +244,7 @@ function App() {
- 
{JSON.stringify(table.state(), null, 2)}
+ 
{JSON.stringify(table.store.get(), null, 2)}
) } 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() {
- 
{JSON.stringify(table.state(), null, 2)}
+ 
{JSON.stringify(table.store.get(), null, 2)}
) } diff --git a/examples/solid/composable-tables/src/components/table-components.tsx b/examples/solid/composable-tables/src/components/table-components.tsx index 4e562dfc0f..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.state().pagination) + const pagination = createMemo(() => table.atoms.pagination.get()) return (
{table.getRowModel().rows.length.toLocaleString()} Rows
- 
{JSON.stringify(table.state(), null, 2)}
+ 
{JSON.stringify(table.store.get(), null, 2)}
) } diff --git a/examples/solid/filters-faceted/src/App.tsx b/examples/solid/filters-faceted/src/App.tsx index 983a7791d6..87d9346227 100644 --- a/examples/solid/filters-faceted/src/App.tsx +++ b/examples/solid/filters-faceted/src/App.tsx @@ -116,7 +116,7 @@ function App() { globalFilterDebouncer.maybeExecute(e.currentTarget.value) } @@ -200,7 +200,7 @@ function App() {
Page
- {(table.state().pagination.pageIndex + 1).toLocaleString()} of{' '} + {(table.atoms.pagination.get().pageIndex + 1).toLocaleString()} of{' '} {table.getPageCount().toLocaleString()} @@ -210,7 +210,7 @@ function App() { type="number" min="1" max={table.getPageCount()} - value={table.state().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() { /> { const page = e.currentTarget.value ? Number(e.currentTarget.value) - 1 @@ -240,7 +240,7 @@ function App() { /> globalFilterDebouncer.maybeExecute(e.currentTarget.value) } @@ -203,7 +203,7 @@ function App() {
Page
- {(table.state().pagination.pageIndex + 1).toLocaleString()} of{' '} + {(table.atoms.pagination.get().pageIndex + 1).toLocaleString()} of{' '} {table.getPageCount().toLocaleString()} @@ -213,7 +213,7 @@ function App() { type="number" min="1" max={table.getPageCount()} - value={table.state().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() { /> table.setPageSize(Number(e.currentTarget.value))} > @@ -234,7 +234,7 @@ function App() {
{table.getRowModel().rows.length.toLocaleString()} Rows
- 
{JSON.stringify(table.state(), null, 2)}
+ 
{JSON.stringify(table.store.get(), null, 2)}
) } diff --git a/examples/solid/kitchen-sink/src/App.tsx b/examples/solid/kitchen-sink/src/App.tsx index 3f865c7980..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.state().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.state().columnResizing - void table.state().columnSizing + void table.atoms.columnResizing.get() + void table.atoms.columnSizing.get() const colSizes: Record = {} for (const header of table.getFlatHeaders()) { colSizes[`--header-${header.id}-size`] = header.getSize() @@ -581,7 +581,7 @@ function App() {
table.setGlobalFilter(String(value))} class="global-filter-input" placeholder="Fuzzy search all columns..." @@ -718,7 +718,7 @@ function App() {
Page
- {(table.state().pagination.pageIndex + 1).toLocaleString()} of{' '} + {(table.atoms.pagination.get().pageIndex + 1).toLocaleString()} of{' '} {table.getPageCount().toLocaleString()} @@ -728,7 +728,7 @@ function App() { type="number" min="1" max={table.getPageCount()} - value={table.state().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() { /> { table.setPageSize(Number(e.currentTarget.value)) }} @@ -181,7 +181,7 @@ function MyTable(props: { Showing {table.getRowModel().rows.length.toLocaleString()} of{' '} {table.getRowCount().toLocaleString()} Rows
- 
{JSON.stringify(table.state(), null, 2)}
+ 
{JSON.stringify(table.store.get(), null, 2)}
) } diff --git a/examples/solid/row-pinning/src/App.tsx b/examples/solid/row-pinning/src/App.tsx index 73b0e4c0a2..b8ea9a3fe4 100644 --- a/examples/solid/row-pinning/src/App.tsx +++ b/examples/solid/row-pinning/src/App.tsx @@ -250,7 +250,7 @@ function App() {
Page
- {(table.state().pagination.pageIndex + 1).toLocaleString()} of{' '} + {(table.atoms.pagination.get().pageIndex + 1).toLocaleString()} of{' '} {table.getPageCount().toLocaleString()} @@ -260,7 +260,7 @@ function App() { type="number" min="1" max={table.getPageCount()} - value={table.state().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() { /> table.setGlobalFilter(e.target.value)} class="summary-panel" placeholder="Search all columns..." @@ -235,7 +235,7 @@ function App() {
Page
- {(table.state().pagination.pageIndex + 1).toLocaleString()} of{' '} + {(table.atoms.pagination.get().pageIndex + 1).toLocaleString()} of{' '} {table.getPageCount().toLocaleString()} @@ -245,7 +245,7 @@ function App() { type="number" min="1" max={table.getPageCount()} - value={table.state().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() { /> { 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 - 
{JSON.stringify(table.state(), null, 2)}
+ 
{JSON.stringify(table.store.get(), null, 2)}
) } diff --git a/examples/solid/with-tanstack-router/src/components/table.tsx b/examples/solid/with-tanstack-router/src/components/table.tsx index c9b6785f8c..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>(
Page
- {(table.state().pagination.pageIndex + 1).toLocaleString()} of{' '} + {(table.atoms.pagination.get().pageIndex + 1).toLocaleString()} of{' '} {table.getPageCount().toLocaleString()} @@ -203,7 +203,7 @@ export default function Table>( | Go to page: { const page = e.currentTarget.value ? Number(e.currentTarget.value) - 1 @@ -214,7 +214,7 @@ export default function Table>( />
- 
{JSON.stringify(table.state, null, 2)}
+ 
{JSON.stringify(table.store.get(), null, 2)}
) }, diff --git a/examples/vue/basic-external-state/src/App.tsx b/examples/vue/basic-external-state/src/App.tsx index 650e418f79..51587e4178 100644 --- a/examples/vue/basic-external-state/src/App.tsx +++ b/examples/vue/basic-external-state/src/App.tsx @@ -78,39 +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) => { - 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) => { - pagination.value = resolveUpdater(updater, pagination.value) + get pagination() { + return pagination.value }, }, - (state) => ({ - sorting: state.sorting, - pagination: state.pagination, - }), - ) + onSortingChange: (updater: Updater) => { + sorting.value = resolveUpdater(updater, sorting.value) + }, + onPaginationChange: (updater: Updater) => { + pagination.value = resolveUpdater(updater, pagination.value) + }, + }) useTanStackTableDevtools(table) @@ -205,7 +199,7 @@ export default defineComponent({
Page
- {(table.state.pagination.pageIndex + 1).toLocaleString()} of{' '} + {(table.atoms.pagination.get().pageIndex + 1).toLocaleString()} of{' '} {table.getPageCount().toLocaleString()} @@ -215,7 +209,7 @@ export default defineComponent({ type="number" min="1" max={table.getPageCount()} - value={table.state.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 +219,7 @@ export default defineComponent({ />
- 
{JSON.stringify(table.state, null, 2)}
+ 
{JSON.stringify(table.store.get(), null, 2)}
) }, diff --git a/examples/vue/column-ordering/src/App.vue b/examples/vue/column-ordering/src/App.vue index f55bd611f3..9841ae45cd 100644 --- a/examples/vue/column-ordering/src/App.vue +++ b/examples/vue/column-ordering/src/App.vue @@ -78,22 +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 }, - (state) => ({ - columnOrder: state.columnOrder, - columnVisibility: state.columnVisibility, - }), -) + debugTable: true, + debugHeaders: true, + debugColumns: true, +}) const randomizeColumns = () => { table.setColumnOrder( @@ -107,7 +101,7 @@ const randomizeColumns = () => { function toggleColumnVisibility(column: Column) { table.setColumnVisibility({ - ...table.state.columnVisibility, + ...table.atoms.columnVisibility.get(), [column.id]: !column.getIsVisible(), }) } @@ -201,7 +195,7 @@ function toggleAllColumnsVisibility() { - 
{{ JSON.stringify(table.state.columnOrder, null, 2) }}
+ 
{{ JSON.stringify(table.atoms.columnOrder.get(), null, 2) }}
diff --git a/examples/vue/column-pinning-split/src/App.vue b/examples/vue/column-pinning-split/src/App.vue index badf4048ae..c2f8d73372 100644 --- a/examples/vue/column-pinning-split/src/App.vue +++ b/examples/vue/column-pinning-split/src/App.vue @@ -71,20 +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(), }, - (state) => ({ pagination: state.pagination }), -) + data, + get columns() { + return columns.value + }, + debugTable: true, +}) const refreshData = () => { data.value = makeData(1_000) @@ -184,7 +181,8 @@ function handlePageSizeChange(e: any) {
Page
- {{ (table.state.pagination.pageIndex + 1).toLocaleString() }} of + {{ (table.atoms.pagination.get().pageIndex + 1).toLocaleString() }} + of {{ table.getPageCount().toLocaleString() }} @@ -198,7 +196,7 @@ function handlePageSizeChange(e: any) { />