
Table State
Choose Table v9 state ownership, atoms, initialization, updates, and resets.
Install
npx skills add TanStack/table --skill table-state -g -a claude-code -y- Repository
- TanStack/table28.5k
- Category
- Engineering
- Updated
- 14d ago
- License
- MIT
- Context cost
- Lightabout 1,312 tokens
- Runs scripts
- No, instructions only
What it does
Choose Table v9 state ownership, atoms, initialization, updates, and resets. Load for controlled slices or state coordination; use the adapter state skill for reactive reads.
Shared table state
Read core first for stable model inputs and feature-gated types. State repair in an existing table can start here without adapter setup guidance.
Start with internal ownership
Omit state, atoms, and on<Slice>Change for slices that Table should own. Use initialState only to customize their initial values.
import {
constructTable,
createColumnHelper,
rowPaginationFeature,
tableFeatures,
} from '@tanstack/table-core'
import { storeReactivityBindings } from '@tanstack/table-core/store-reactivity-bindings'
type Person = { id: string; name: string }
const features = tableFeatures({
coreReactivityFeature: storeReactivityBindings(),
rowPaginationFeature,
})
const helper = createColumnHelper<typeof features, Person>()
const columns = helper.columns([helper.accessor('name', {})])
const data: Person[] = [{ id: '1', name: 'Ada' }]
const table = constructTable({
features,
columns,
data,
initialState: { pagination: { pageIndex: 0, pageSize: 25 } },
})
table.setPageSize(50)
console.log(table.atoms.pagination.get().pageSize)
table.resetPagination()
console.log(table.atoms.pagination.get().pageSize)
This example demonstrates state only. A pagination row-model slot is needed when Table should also slice the data.
