菜单
Share Alpine tableFeatures, defaults, createAppTable, and createAppColumnHelper with createTableHook. Load when multiple Alpine tables repeat infrastructure; unlike JSX adapters, Alpine has no registered table/cell/header component or context registry.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use TanStack Table v9 as a headless data-grid state and row-processing engine. Load for first-table architecture, stable data and columns, row numbering with getDisplayIndex, semantic rendering, framework adapter choice, or deciding what Table owns versus the renderer.
Author a TanStack Table v9 feature plugin across every FeatureMap and API installation surface: state, options, column definitions, table, column, row, cell, header, row-model functions/caches, defaults, prototypes, and table/row/column instance data lifecycles. Load for initTableInstanceData, resetTableInstanceData, constructTableAPIs, or reusable behavior not covered by built-ins, meta, or option composition.
Maintain rowSelection ID state with stable getRowId, single, multi, subrow, and Shift-range rules, selected row models, handler anchors, and manual-pagination semantics. Load when implementing getToggleSelectedHandler, enableRowRangeSelection, selectChildren, or selected IDs that outlive loaded Row objects.
Create an Alpine TanStack Table v9 table with createTable, explicit tableFeatures, Alpine.reactive data getters, x-for rendering, and FlexRender through x-html. Load for first-table setup, reactive options, or when nested Alpine directives rendered by x-html do not initialize.
Read automatically reactive Alpine table APIs in bindings and own slices with Alpine.reactive getters plus on*Change or external TanStack Store atoms. Load for controlled state, updater callbacks, selector gating, atom precedence, or code incorrectly adding table.Subscribe.
Register Angular Table v9 instances with injectTanStackTableDevtools inside injection context. Load for reactive table registration, required options.key, enabled or undefined tables, cleanup, Angular isDevMode gating, or explicit production exports.
| name | create-table-hook |
| description | Share Alpine tableFeatures, defaults, createAppTable, and createAppColumnHelper with createTableHook. Load when multiple Alpine tables repeat infrastructure; unlike JSX adapters, Alpine has no registered table/cell/header component or context registry. |
| metadata | {"type":"framework","library":"@tanstack/alpine-table","framework":"alpine","library_version":"9.0.0-beta.43"} |
| requires | ["@tanstack/table-core#core","getting-started","table-state"] |
| sources | ["TanStack/table:docs/framework/alpine/guide/composable-tables.md","TanStack/table:examples/alpine/basic-app-table","TanStack/table:packages/alpine-table/src/createTableHook.ts"] |
This skill builds on @tanstack/table-core#core plus this package's getting-started and table-state skills.
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<Person>,
})
const table = createAppTable({
columns,
get data() {
return local.data
},
})
return { table }
})
Bind features, row models, row IDs, and defaults in the factory. Each Alpine component passes its own columns, reactive data getter, and controlled state.
Use real templates and Alpine.bind bundles for interactive reuse. createTableHook intentionally returns no component registry or context hooks.
Columns from createAppColumnHelper<TData>() know the factory's registered features without userland feature generics.
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
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
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
Inspect node_modules/@tanstack/alpine-table/src/createTableHook.ts; do not infer component/context APIs from React, Vue, Solid, Svelte, Angular, or Lit adapters.