tanstack-alpine-table-create-table-hook

This skill builds on @tanstack/table-core#core plus this package's getting-started and table-state skills.

Setup

import Alpine from 'alpinejs'
import { createTableHook, tableFeatures } from '@tanstack/alpine-table'

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

Alpine.data('peopleTable', () => { const local = Alpine.reactive({ data: [{ id: '1', name: 'Ada' }] as Array, }) const table = createAppTable({ columns, get data() { return local.data }, }) return { table } })


## Core Patterns

### Share infrastructure, keep data local

Bind features, row models, row IDs, and defaults in the factory. Each Alpine component passes its own columns, reactive data getter, and controlled state.

### Reuse markup with Alpine primitives

Use real templates and `Alpine.bind` bundles for interactive reuse. `createTableHook` intentionally returns no component registry or context hooks.

### Use the helper to retain feature inference

Columns from `createAppColumnHelper<TData>()` know the factory's registered features without userland feature generics.

## Common Mistakes

### HIGH Assuming a JSX component registry

Wrong: pass `cellComponents` or `tableComponents` to Alpine `createTableHook`.

Correct: share features/defaults with the hook and build reusable interactive markup with Alpine templates or bind bundles.

The Alpine hook returns only app features, a column helper, and createAppTable.

Source: TanStack/table:packages/alpine-table/src/createTableHook.ts

### MEDIUM Abstracting a one-off table

Wrong: introduce an app factory for one table with no shared conventions.

Correct: use standalone `createTable` until infrastructure repeats.

The hook is an application reuse boundary, not required setup.

Source: TanStack/table:docs/framework/alpine/guide/composable-tables.md

### HIGH Reactive data captured as a snapshot

Wrong: `createAppTable({ columns, data: local.data })` when the array will be replaced.

Correct: provide a `get data()` option.

The app factory delegates to Alpine createTable, whose option effect tracks getters.

Source: TanStack/table:packages/alpine-table/src/createTable.ts

## API Discovery

Inspect `node_modules/@tanstack/alpine-table/dist/createTableHook.d.ts`; do not infer component/context APIs from React, Vue, Solid, Svelte, Angular, or Lit adapters.

About this skill

Setup