用途:该技能讲解如何在 Alpine.js 项目中用 @tanstack/alpine-table 创建 TanStack Table v9 表格,基于 @tanstack/table-core 的 core 与 table-features。
主要能力与用法:从 @tanstack/alpine-table 导入 FlexRender、createTable、tableFeatures 及 ColumnDef 类型;用 tableFeatures({}) 声明特性,定义 columns,并在 Alpine.data 中通过 createTable 创建表格。数据用 Alpine.reactive({ data }) 包裹,并以 get data() { return local.data } 暴露,使适配器能追踪选项 getter。表格返回响应式代理,可直接在绑定中读取,如 x-text="table.getRowModel().rows.length",无需 Subscribe 组件。用 x-for 渲染真实表格结构;FlexRender 的输出仅用于单元格或表头内容,通过 x-html="FlexRender({ header })" 或 x-html="FlexRender({ cell })" 注入。
常见错误:不要传入数据快照(如 data: local.data),否则后续替换不会被追踪;不要把按钮等交互指令放进 x-html 注入的 HTML,Alpine 不会初始化其中的指令,应写成真实模板标记或使用 Alpine.bind;不要期待表格自带样式,宽度、偏移、溢出与 sticky 定位需在 Alpine 模板中自行编写 CSS。
限制:资料未提供安装命令、版本要求、收费信息或完整 API 列表;可查看 node_modules/@tanstack/alpine-table/dist/index.d.ts 与 createTable.d.ts,核心 API 位于 node_modules/@tanstack/table-core/dist/。