tanstack-table-core

Use TanStack Table v9 as a headless data-grid state and row-processing engine. Load for first-table architecture, stable data and columns, row numbering with getDisplayIndex, semantic rendering, frame

SKILL.md

GitHub

TanStack Table core

TanStack Table coordinates state and row processing. The renderer owns markup, styles, semantics, and interaction accessibility. Use the installed framework adapter in UI code; use constructTable for framework-neutral integrations.

Minimal setup

<!-- skill-snippet:check -->
import {
  constructTable,
  createColumnHelper,
  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(),
})
const helper = createColumnHelper<typeof features, Person>()
const columns = helper.columns([helper.accessor('name', { header: 'Name' })])
const data: Person[] = [{ id: '1', name: 'Ada' }]
const table = constructTable({
  features,
  columns,
  data,
  getRowId: (row) => row.id,
})

for (const row of table.getRowModel().rows) {
  console.log(row.getAllCells().map((cell) => cell.getValue()))
}

Essential constraints

  • The core row model is automatic. Optional APIs and state exist only after their feature is registered.
  • Keep features, data, and columns stable between meaningful changes. Derive changing arrays with the adapter's memo/computed mechanism; an inline .map(), .filter(), column factory, or fresh [] fallback invalidates model work and can cause render loops.
  • Let createColumnHelper and helper.columns() preserve accessor value types. Derive feature types from the concrete registry when an explicit boundary is needed.
  • Call row, cell, column, and header methods on their instance. Use row.getValue('name') or a callback that calls it; extracting const { getValue } = row loses its this receiver.
  • Render the final table.getRowModel().rows. The table object itself is not a DOM component.

Read for the current task

Task Read
Add or repair optional features, processing slots, or prerequisites Feature architecture, then its relevant feature reference
Choose state ownership, initialize or reset state Shared state
Fix ColumnDef inference, reusable options, or scoped meta TypeScript inference
Diagnose a missing export, option, state slice, or instance method API discovery
Implement row numbers, identity, or display-index behavior Rows
Author behavior beyond built-ins or typed meta Custom features
Migrate an existing v8 table Migration audit

For framework construction and rendering, load the installed package's getting-started skill with intent load <package>#getting-started, replacing <package> with the actual adapter package, such as @tanstack/react-table. For reactive reads or controlled wiring, load that package's table-state skill directly.

Installed API discovery

Start at node_modules/@tanstack/table-core/dist/index.d.ts and follow exported declarations. Adapter declaration layouts and missing-API diagnosis are in API discovery; read it when the expected export or declaration path is absent.