TanStack Table core

constructTable

Minimal setup

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

ColumnDef

getting-started

intent load <package>#getting-started

<package>

@tanstack/react-table

table-state

Installed API discovery

node_modules/@tanstack/table-core/dist/index.d.ts