菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | getting-started |
| description | 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. |
| metadata | {"type":"framework","library":"@tanstack/alpine-table","framework":"alpine","library_version":"9.0.0-beta.43"} |
| requires | ["@tanstack/table-core#core","@tanstack/table-core#table-features"] |
| sources | ["TanStack/table:docs/framework/alpine/guide/table-state.md","TanStack/table:examples/alpine/basic-create-table","TanStack/table:packages/alpine-table/src/index.ts"] |
This skill builds on @tanstack/table-core#core and @tanstack/table-core#table-features.
import Alpine from 'alpinejs'
import {
FlexRender,
createTable,
tableFeatures,
type ColumnDef,
} from '@tanstack/alpine-table'
type Person = { id: string; name: string }
const features = tableFeatures({})
const columns: Array<ColumnDef<typeof features, Person>> = [
{ accessorKey: 'name', header: 'Name' },
]
Alpine.data('peopleTable', () => {
const local = Alpine.reactive({
data: [{ id: '1', name: 'Ada' }] as Array<Person>,
})
const table = createTable({
features,
columns,
get data() {
return local.data
},
getRowId: (row) => row.id,
})
return { table, FlexRender }
})
window.Alpine = Alpine
Alpine.start()
Render real table structure with x-for; use x-html="FlexRender({ header })" or x-html="FlexRender({ cell })" only for renderer output.
Wrap changing data in an Alpine.reactive({ data }) object and read local.data through get data(). The property read gives the adapter's effect a dependency to track before it calls table.setOptions.
The adapter returns a reactive proxy. Expressions such as x-text="table.getRowModel().rows.length" update without a Subscribe component.
Buttons, inputs, and directives belong in the template. Renderer strings are useful for cell content, but x-html does not initialize Alpine directives inside the injected HTML.
Wrong: createTable({ features, columns, data: local.data }) when local.data will be replaced.
Correct: expose get data() { return local.data }.
The adapter tracks option getters; a captured array does not follow later replacements.
Source: TanStack/table:packages/alpine-table/src/createTable.ts
Wrong: return '<button @click="remove()">Remove</button>' from a cell renderer.
Correct: render the button as real template markup and bind the row action there, or use an Alpine.bind bundle.
Alpine does not initialize directives inside content inserted by x-html.
Source: TanStack/table:docs/framework/alpine/guide/composable-tables.md
Wrong: enable sizing or pinning and assume widths/sticky positioning appear.
Correct: apply widths, logical offsets, overflow, and sticky CSS in the Alpine template.
Table exposes state and geometry; it does not own the renderer.
Source: TanStack/table:docs/overview.md
Inspect node_modules/@tanstack/alpine-table/src/index.ts and createTable.ts. Exact core APIs live under node_modules/@tanstack/table-core/src/.
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.
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.
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.