用途
本技能是关于 TanStack Table v9 的入门与集成指南,使用 React 适配器创建和渲染表格。资料说明:在开始前,应先运行 intent load @tanstack/table-core#core 以获取共享的无头模型(headless model)和稳定输入(stable-input)相关规则。
主要能力
资料给出的设置示例包含以下内容:
import { useState } from 'react'
import {
createColumnHelper,
tableFeatures,
useTable,
} from '@tanstack/react-table'
type Person = { name: string; age: number }
const features = tableFeatures({})
const helper = createColumnHelper<typeof features, Person>()
const columns = helper.columns([
helper.accessor('name', { header: 'Name' }),
helper.accessor('age', { header: 'Age' }),
])
通过 useTable 获取 table 实例,再用 table.getHeaderGroups() 渲染表头、table.getRowModel().rows 渲染行,并配合 table.FlexRender 渲染 header 与 cell。资料指出:Table 生成模型和状态,React 负责语义标记、样式、事件可供性(event affordances)与可访问性。
使用方式与关键约束
- v9 使用
useTable。 features、columns以及 fallback data 应放在模块作用域或稳定的 state/memo 中。像response.data ?? []这样的新 fallback 会在每次渲染时使行模型失效。- 默认 selector 会让所有者订阅所有已注册状态。
- Table 拥有模型和状态;应用(application)拥有标记、CSS、交互与可访问性。
- 仅核心(core-only)表格使用
row.getAllCells();需要可见性感知的方法需要columnVisibilityFeature。 - 可选的状态和 API 需要其对应的 features。
- 在
tableFeatures()中,应把行模型槽位(row-model slots)放在其前置 features 之后。
按任务加载的参考文档
资料列出以下按任务划分的延伸阅读:
- 对于重复特性(repeated features)、默认值、类型化上下文或组件注册表,阅读 reusable app hooks。
- 对于由 Query 驱动的数据、服务端分页、排序、过滤或请求键,阅读 TanStack Query integration。
- 对于虚拟行、虚拟列、动态测量或无限滚动,阅读 TanStack Virtual integration。
- 对于受控状态、跟踪读取(tracked reads)或渲染订阅,阅读 table state。
- 对于 feature 注册、缺失 feature API 或处理归属(processing ownership),运行
intent load @tanstack/table-core#table-features,并只阅读任务所需的引用。 - 对于 v8 代码,阅读 migration checklist。
API 发现
资料建议:先检查 node_modules/@tanstack/react-table/dist/index.d.ts,再查看已安装版本导出的适配器声明;可选的核心 API 位于 node_modules/@tanstack/table-core/dist/features/。
适用场景
在 React 项目中创建、渲染无头(headless)表格,并需要按需集成 Query 数据、Virtual 虚拟滚动、受控状态或从 v8 迁移时适用。
限制
资料未提供具体的收费、价格、平台限制或效果承诺。具体 API 签名与可用性以已安装版本的声明文件为准;其余未在资料中说明的事项暂未提供。