菜单
Create reusable Solid table infrastructure with createTableHook, createAppTable, createAppColumnHelper, shared features/defaults, component registries, App wrappers, and typed context hooks. Load for recurring app conventions, reactive per-table getters, or prop drilling.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/TanStack/table --skill create-table-hook命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
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.
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.
正在显示 SKILL.md
| name | create-table-hook |
| description | Create reusable Solid table infrastructure with createTableHook, createAppTable, createAppColumnHelper, shared features/defaults, component registries, App wrappers, and typed context hooks. Load for recurring app conventions, reactive per-table getters, or prop drilling. |
| metadata | {"type":"framework","library":"@tanstack/solid-table","library_version":"9.2.4","framework":"solid"} |
| requires | ["@tanstack/table-core#core","getting-started","table-state"] |
| sources | ["TanStack/table:docs/framework/solid/guide/composable-tables.md","TanStack/table:examples/solid/composable-tables","TanStack/table:packages/solid-table/src/createTableHook.tsx"] |
This skill builds on @tanstack/table-core#core, getting-started, and table-state. Use a factory when tables share policy; keep one-off tables on createTable.
import {
createTableHook,
rowSelectionFeature,
tableFeatures,
} from '@tanstack/solid-table'
export const { createAppColumnHelper, createAppTable, useTableContext } =
createTableHook({
features: tableFeatures({ rowSelectionFeature }),
getRowId: (row: { id: string }) => row.id,
})
type Person = { id: string; name: string }
const helper = createAppColumnHelper<Person>()
const columns = helper.columns([helper.accessor('name', { header: 'Name' })])
const table = createAppTable({
columns,
get data() {
return data()
},
})
return <table.AppTable>{() => <RowCount />}</table.AppTable>
Wrong:
const app = createTableHook({ features: tableFeatures({}) })
Correct:
const table = createTable({ features, columns, data })
The factory should encode repeated app conventions rather than add ceremony.
Source: docs/framework/solid/guide/composable-tables.md
Wrong:
createAppTable({ columns, data: data() })
Correct:
createAppTable({
columns,
get data() {
return data()
},
})
The getter preserves Solid tracking when the signal changes.
Source: examples/solid/composable-tables
Wrong:
return <RowCount />
Correct:
return <table.AppTable>{() => <RowCount />}</table.AppTable>
Returned context hooks must run under the matching factory wrapper; use them instead of prop drilling registered components.
Source: packages/solid-table/src/createTableHook.tsx
Inspect node_modules/@tanstack/solid-table/dist/createTableHook.d.ts for exact returned names, component binding, context providers, and reactive option merging.