Skip to content
cccskills
FreePublished on GitHub

table-state

Manage TanStack Table v9 state in Octane, including controlled pagination and subscriptions that keep the UI updated. It explains component subscription boundaries, stable external atoms for shared state, and how controlled updates reach the store.

OriginalShow the original description

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

See how to install

Good for

  • Control pagination with Octane state
  • Fix table state changes that do not update the UI
  • Set up component subscription boundaries
  • Share table state through external atoms

Files included (2)

  • SKILL.md2.9 KB
  • references/reactivity.md3.3 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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

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

For advanced reactive boundaries, shared atoms, or detailed subscription examples, read reactivity. For construction or rendering setup, read getting-started.

API discovery

Inspect node_modules/@tanstack/octane-table/src/index.d.ts, the matching *.tsrx.d.ts sidecar, and src/types.ts. This package publishes authored source; core APIs are in installed @tanstack/table-core/dist/.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

core

FreeSummary

Build table data processing with TanStack Table v9 while keeping data and column definitions stable. The skill guides type inference, which determines types automatically, row identity, optional features, and checks for missing APIs.

  • Set up the foundation for table data processing
  • Troubleshoot column type inference
  • Investigate missing APIs or optional features
TanStack/table28.5KUpdated Oct 13, 2026

custom-features

FreeSummary

Build a Table v9 plugin when built-in settings and typed metadata are insufficient. Guides custom state, options, and methods, with initialization hooks and runtime checks to ensure declared APIs actually exist and reset correctly.

  • Add reusable custom table behavior
  • Design plugin state and reset behavior
  • Keep declared APIs consistent with runtime behavior
TanStack/table28.5KUpdated Oct 13, 2026

devtools

FreeSummary

Connect TanStack Table instances to developer tools for inspecting options, state, features, columns, rows, and row models. Diagnose missing connections, assign unique table keys, and manage registration replacement and cleanup.

  • Inspect table options, state, columns, and rows
  • Diagnose tables missing from developer tools
  • Assign distinct keys to multiple tables
TanStack/table28.5KUpdated Oct 13, 2026

devtools

FreeSummary

Register Angular TanStack Table v9 instances with Devtools, a tool for developers. The skill covers unique table keys, registration that responds to changes, automatic cleanup, and the different setup rules for development and production.

  • Register an Angular table with Devtools
  • Investigate a table that fails to register
  • Enable or remove registration as conditions change
TanStack/table28.5KUpdated Oct 13, 2026

devtools

FreeSummary

Connect React Table v9 to Devtools, a development inspection interface. Configure table registration, unique keys, and enabled settings, and diagnose missing panels while understanding registration cleanup and the separate entrypoint for explicit production use.

  • Adding Devtools to React tables
  • Diagnosing missing Table panels
  • Controlling registration with enabled
TanStack/table28.5KUpdated Oct 13, 2026

devtools

FreeSummary

Connect Vue Table v9 to Devtools and troubleshoot missing tables. Covers unique table keys, reactive references that track table replacement, cleanup when targets change, and the development settings that determine whether the integration runs.

  • Connect a Vue table to Devtools
  • Investigate a missing table target
  • Keep registration updated when a table reference changes
TanStack/table28.5KUpdated Oct 13, 2026

See all skills by TanStack

Report a problem with this skill