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