# Table State

Read and control Table v9 state in octane.

- Repository: https://github.com/TanStack/table (28539 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-10-21
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add TanStack/table --skill table-state -g -a claude-code -y`
Codex: `npx skills add TanStack/table --skill table-state -g -a codex -y`
Cursor: `npx skills add TanStack/table --skill table-state -g -a cursor -y`
Gemini CLI: `npx skills add TanStack/table --skill table-state -g -a gemini-cli -y`

## Description

Read and control Table v9 state in octane. Use for tracked reads, subscriptions, controlled slices, and framework-specific reactive boundaries.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

Load `intent load @tanstack/table-core#table-state` first for shared ownership, initialization, updater, and reset rules.

`useTable` selects all registered state by default. Its second argument changes the selected shape exposed as `table.state` and shallow-gates owner rerenders. Atom `.get()` and `table.store.state` reads are snapshots; use selected state or a rendered `table.Subscribe` to update the UI.

## Controlled slice setup

```tsrx
import { useState } from 'octane'
import {
  rowPaginationFeature,
  tableFeatures,
  useTable,
} from '@tanstack/octane-table'

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

function PageStatus() @{
  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 20 })
  const table = useTable({
    features,
    columns,
    data,
    state: { pagination },
    onPaginationChange: setPagination,
  })

  <button onClick={() => table.nextPage()}>
    Page {String(table.state.pagination.pageIndex + 1)}
  </button>
}
```

## Reactive boundaries

- Pass both the controlled value and its callback. Octane setters accept Table's value-or-updater callbacks; a callback alone cannot feed the new value back.
- Render `<table.Subscribe>` as a component. Calling it as a normal function shares the owner's compiler slots instead of creating an independent hook scope.
- `useTable` stages fresh options for same-render reads. Controlled state reaches the store only from an accepted layout commit, so abandoned work cannot publish speculative values.
- A stable atom from `@tanstack/octane-store` is a direct synchronous owner. Table writes reach it immediately; it takes precedence over controlled `state` for the same slice.
- Keep features, columns, and data stable. Use the default selector until render cost justifies narrower subscriptions.

## Read for the task

The rest: https://github.com/TanStack/table/blob/HEAD/packages/octane-table/skills/table-state/SKILL.md