Tanstack Preact Table Create Table Hook

This skill builds on @tanstack/table-core#core, getting-started, and table-state. Use the app hook for repeated conventions; one-off tables should stay with useTable.

Setup

import {
  createTableHook,
  rowSelectionFeature,
  tableFeatures,
} from '@tanstack/preact-table'

export const { createAppColumnHelper, useAppTable, useTableContext } =
  createTableHook({
    features: tableFeatures({ rowSelectionFeature }),
    getRowId: (row: { id: string }) => row.id,
  })

Core Patterns

Use the factory-bound helper

type Person = { id: string; name: string }
const helper = createAppColumnHelper<Person>()
const columns = helper.columns([helper.accessor('name', { header: 'Name' })])

Consume typed context under its wrapper

function RowCount() {
  const table = useTableContext()
  return <output>{table.getRowModel().rows.length}</output>
}
const table = useAppTable({ data, columns })
return (
  <table.AppTable>
    <RowCount />
  </table.AppTable>
)

AppTable takes ordinary JSX children without a selector. Use function children only when a selector supplies their value:

<table.AppTable selector={(state) => state.rowSelection}>
  {(rowSelection) => <output>{Object.keys(rowSelection).length}</output>}
</table.AppTable>

Isolate genuinely nested table setups

Default contexts are module-scoped and HMR-stable; sibling tables are already isolated by their providers. Separate createTableHook calls still share those defaults, so nested providers can silently resolve a consumer to the inner table. Use fresh contexts only when different table setups are nested:

import {
  createTableHook,
  createTableHookContexts,
  rowSelectionFeature,
  tableFeatures,
} from '@tanstack/preact-table'

const features = tableFeatures({ rowSelectionFeature })
const { tableContext, cellContext, headerContext } =
  createTableHookContexts<typeof features>()

export const app = createTableHook({
  features,
  tableContext,
  cellContext,
  headerContext,
})

Prefer hooks returned by createTableHook because their types include registered component maps. Hooks returned directly by createTableHookContexts know only TFeatures and support modules that cannot import the completed factory.

Common Mistakes

MEDIUM Abstracting a single table

Wrong:

const app = createTableHook({ features: tableFeatures({}) })

Correct:

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

The factory is valuable when it centralizes repeated policy, not merely another constructor name.

Source: docs/framework/preact/guide/composable-tables.md

HIGH Reading outside the matching provider

Wrong:

return <RowCount />

Correct:

return (
  <table.AppTable>
    <RowCount />
  </table.AppTable>
)

Factory context hooks require the corresponding AppTable, AppCell, or AppHeader wrapper.

Source: packages/preact-table/src/createTableHook.tsx

HIGH Recreating contexts per render

Wrong:

function Grid() {
  const app = createTableHook({ features })
  const table = app.useAppTable({ data, columns })
  return (
    <table.AppTable>
      <div />
    </table.AppTable>
  )
}

Correct:

const app = createTableHook({ features })
function Grid() {
  const table = app.useAppTable({ data, columns })
  return (
    <table.AppTable>
      <div />
    </table.AppTable>
  )
}

Creating a new factory closure during render makes hook configuration and component registries unstable. Keep the factory and its bound hook identity at module scope.

Source: packages/preact-table/src/createTableHook.tsx

API Discovery

Inspect node_modules/@tanstack/preact-table/dist/createTableHook.d.ts and createTableHookContexts.d.ts for exact return names, provider props, registries, and scoped context types.