Skills

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.

<!-- skill-snippet:check -->
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.

Choose one owner per slice

Read the whole SKILL.md on GitHub

More in Engineering