Preact Table setup and integration

Before starting, run intent load @tanstack/table-core#core for the shared headless model and stable-input rules.

Setup

import { useState } from 'preact/hooks'
import {
  createColumnHelper,
  tableFeatures,
  useTable,
} from '@tanstack/preact-table'

type Person = { name: string }
const features = tableFeatures({})
const helper = createColumnHelper<typeof features, Person>()
const columns = helper.columns([helper.accessor('name', { header: 'Name' })])

export function PeopleTable() {
  const [data] = useState<Person[]>([{ name: 'Ada' }])
  const table = useTable({ features, columns, data })
  return (
    <table>
      <thead>
        {table.getHeaderGroups().map((group) => (
          <tr key={group.id}>
            {group.headers.map((header) => (
              <th key={header.id}>
                <table.FlexRender header={header} />
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map((row) => (
          <tr key={row.id}>
            {row.getAllCells().map((cell) => (
              <td key={cell.id}>
                <table.FlexRender cell={cell} />
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  )
}

Essential constraints

Use native @tanstack/preact-table and preact/hooks. V8 React-through-compat setup and useReactTable are not the native v9 API. Keep features, columns, and fallback arrays stable across renders.

Table owns models and state. The application owns markup, CSS, interactions, and accessibility. Core-only tables use row.getAllCells(); visibility-aware methods need columnVisibilityFeature. Optional state and APIs require their features. Put row-model slots after their prerequisite features in tableFeatures().

Load by task

• For repeated features, defaults, typed contexts, or component registries, read reusable app hooks.
• For Query-backed data, server pages, sorting, filtering, or request keys, read TanStack Query integration.
• For virtual rows, columns, dynamic measurement, or infinite scrolling, read TanStack Virtual integration.
• For controlled state, tracked reads, or render subscriptions, read table state.
• For feature registration, missing feature APIs, or processing ownership, run intent load @tanstack/table-core#table-features and read only references needed by the task.
• For v8 code, read the migration checklist.

API discovery

Inspect node_modules/@tanstack/preact-table/dist/index.d.ts, then the exported adapter declarations for the installed version. Inspect optional core APIs under node_modules/@tanstack/table-core/dist/features/.