CtrlK
BlogDocsLog inGet started
Tessl Logo

getting-started

Create a native @tanstack/preact-table v9 table with useTable, tableFeatures, stable inputs, row/header models, and Preact FlexRender helpers. Load when starting a Preact table or replacing @tanstack/react-table through preact/compat.

74

Quality

93%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

This skill builds on @tanstack/table-core#core and @tanstack/table-core#table-features. Use the native Preact adapter, not React through compat.

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>
  )
}

Core Patterns

Register only required plugins

import {
  createSortedRowModel,
  rowSortingFeature,
  tableFeatures,
} from '@tanstack/preact-table'
const features = tableFeatures({
  rowSortingFeature,
  sortedRowModel: createSortedRowModel(),
})

Keep features and columns module-stable

const features = tableFeatures({})
const columns = helper.columns([helper.accessor('name', { header: 'Name' })])

Common Mistakes

HIGH Importing the React adapter through compat

Wrong:

import { useTable } from '@tanstack/react-table'

Correct:

import { useTable } from '@tanstack/preact-table'

The native adapter uses Preact hooks, stores, JSX types, and subscriptions directly.

Source: docs/framework/preact/guide/migrating.md

HIGH Copying the v8 constructor

Wrong:

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
})

Correct:

const table = useTable({ data, columns, features })

V9 uses explicit feature slots rather than v8 row-model table options.

Source: docs/framework/preact/guide/migrating.md

MEDIUM Recreating static inputs in render

Wrong:

const table = useTable({
  features: tableFeatures({}),
  columns: [{ accessorKey: 'name' }],
  data,
})

Correct:

const table = useTable({ features, columns, data })

New feature and column identities cause needless option and model work.

Source: examples/preact/basic-use-table

API Discovery

Inspect node_modules/@tanstack/preact-table/dist/index.d.ts, then useTable.d.ts, Subscribe.d.ts, or FlexRender.d.ts; follow core exports into installed @tanstack/table-core/dist/.

Repository
TanStack/table
Path

packages/preact-table/skills/getting-started/SKILL.md

Commit

9e523bc

Last updated
First committed

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.

Claim skill