mcpField
G
getting-started

getting-started

github.com/tanstack开发28.6k78 次安装2 周前更新
代码仓库

关于 getting-started

getting-started 是一项使用 @tanstack/alpine-table 和 Alpine.js 构建表格的指南技能，涵盖配置、响应式数据与渲染，并指向核心和功能参考资料以查阅 API 细节。

主要功能

  1. 01配置 Alpine 表格适配器
  2. 02连接响应式数据和选项
  3. 03渲染表头与单元格
  4. 04使用 Alpine 标记构建控件
  5. 05查找核心及功能 API 参考

适用场景

  1. 01使用 Alpine.js 开始构建表格
  2. 02保持表格数据响应式
  3. 03渲染自定义表头和单元格
  4. 04查阅可选表格功能

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/tanstack/table --skill getting-started

安装后在 Claude Code 中输入/getting-started确认已加载。

附带文件references/create-table-hook.md

详细介绍

先运行 intent load @tanstack/table-core#core，了解无头模型、稳定输入和列推断。

设置

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()

使用 x-for 渲染真实的表格结构；仅对渲染器输出使用 x-html="FlexRender({ header })" 或 x-html="FlexRender({ cell })"。

构建与渲染

将会变化的数据包裹在 Alpine.reactive 中，并通过 get data() 暴露。适配器会追踪选项的 getter；data: local.data 会捕获一份快照，不会跟随之后的数组替换。静态列和功能应放在 getter 之外。

返回的表格是一个响应式代理。直接在 x-text、x-for、x-if 或绑定属性中读取 Table API 即可，无需 Subscribe 组件。

表格结构和交互控件应使用真正的 Alpine 标记来构建。渲染器输出使用 x-html="FlexRender({ header })" 或 x-html="FlexRender({ cell })"。Alpine 不会初始化 x-html 字符串中的指令；按钮和输入框请使用模板或 Alpine.bind 绑定包。

按任务阅读

  • 添加或配置可选功能时，运行 intent load @tanstack/table-core#table-features，且只阅读所需行为对应的参考文档。
  • 关于状态归属或响应式读取，请阅读 table-state。
  • 当多个表格共享功能、默认配置或可复用 UI 时，请阅读 create-table-hook。

API 查找

查阅 node_modules/@tanstack/alpine-table/dist/index.d.ts、createTable.d.ts 和 reactivity.d.ts。核心功能 API 位于 node_modules/@tanstack/table-core/dist/features/ 中。

评论

支持 Markdown