SuperAPI AI 工具集

tanstack-vue-table-getting-started

前端与建站

查看项目

更新于 10-16 16:29

技能介绍

本技能基于 @tanstack/table-core 的核心模块与 table-features 概念,建议先阅读这两部分以理解无头(headless)模型与显式特性注册机制。

用途 用于在 Vue 项目中创建 TanStack Table v9 表格,核心 API 为 useTable,需显式传入 tableFeatures,并配合 FlexRender 渲染单元格。

主要能力

  1. 基础设置:在 <script setup lang="ts"> 中从 @tanstack/vue-table 导入 FlexRender、tableFeatures、useTable,定义类型、features、columns 与响应式 data,再调用 useTable({ features, columns, data })。
  2. 保留 Vue 选项形态:useTable 接受 refs/computed 值并在监听依赖时解包;data、受控状态等响应式选项应保持为 ref 或 computed,columns/features 应保持稳定。
  3. 显式添加客户端行模型:通过 tableFeatures 注册 rowSortingFeature、sortedRowModel: createSortedRowModel() 以及 sortFns(如仅注册用到的 sortFn_alphanumeric)。该槽位需在其前置 feature 之后于同一次调用中出现;完整 sortFns 注册表也可用但会打包所有内置函数。

常见错误

  1. 将 ref 拍平为快照:错误写法 data: data.value,正确写法 data;传 .value 会捕获一次数组而无法让适配器监听 ref。来源:packages/vue-table/src/useTable.ts。
  2. 使用 v8 入口:错误写法 useVueTable({ data, columns, getCoreRowModel: getCoreRowModel() });V9 使用 useTable,核心处理自动完成,可选行模型放在 tableFeatures 中。来源:docs/framework/vue/guide/migrating.md。
  3. 误以为 headless 意味着预构建 UI:错误写法 <TanStackTable :table="table" />;正确写法用 <td v-for="cell in row.getAllCells()" :key="cell.id"><FlexRender :cell="cell" /></td>。适配器渲染定义但不提供表格组件、CSS 或设计系统集成。来源:examples/vue/basic-use-table/src/App.tsx。

API 发现 可检查 node_modules/@tanstack/vue-table/dist/index.d.ts,再看 useTable.d.ts 与 FlexRender.d.ts;核心 feature API 位于 node_modules/@tanstack/table-core/dist/features/<feature>/。

适用场景 适合需要在 Vue 中以无头方式构建表格、并希望精细控制特性注册与渲染的开发者。

限制 本技能强调 headless 模式,不提供预构建 UI、CSS 或设计系统集成;具体平台、收费、价格等信息暂未提供。