React table state

Before starting, run intent load @tanstack/table-core#table-state for shared ownership, initialization, updates, and resets. State repair does not require loading setup guidance.

Read reactive state

useTable selects all registered state by default. Its optional second-argument selector controls rerenders and the shape of table.state. table.atoms.<slice>.get() and table.store.state are current snapshots, not React subscriptions.

Use selected table.state in the owner render. For narrower boundaries, use table.Subscribe or useSelector from @tanstack/react-store. Without source, table.Subscribe selects from table.store; with source, it subscribes to that atom or store. Start with the default selector until render cost requires narrowing.

Control a slice

Keep features, columns, and data stable. Register the feature that owns the controlled slice. This example controls pagination without adding client row processing:

import { useState } from 'react'
import {
  rowPaginationFeature,
  tableFeatures,
  useTable,
  type PaginationState,
} from '@tanstack/react-table'

const features = tableFeatures({ rowPaginationFeature })
const columns = [{ accessorKey: 'name' }]
const data = [{ name: 'Ada' }]

export function PageControl() {
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 20,
  })
  const table = useTable({
    features,
    columns,
    data,
    state: { pagination },
    onPaginationChange: setPagination,
  })
  return (
    <button onClick={() => table.setPageSize(50)}>
      {table.state.pagination.pageSize} rows per page
    </button>
  )
}

The React setter accepts both a value and a functional updater. Supply the current state.pagination together with onPaginationChange; a callback alone does not keep the table synchronized.