用途
本技能面向使用 TanStack Table 构建数据表格的场景，重点介绍一种通过 meta 字段向单元格传递行为的模式，用于替代在列定义中直接使用闭包。资料说明其适用场景包括：创建数据表格、实现排序等。
主要能力与核心模式
技能围绕“提升列定义 + meta 字段”这一核心模式展开，包含三个步骤：
-
扩展 TableMeta 以获得类型安全。示例中通过模块声明扩展
@tanstack/react-table的TableMeta<TData>接口，声明可选的onEdit?: (id: string) => void;与onDelete?: (id: string) => void;。 -
将列定义提升到组件外部。示例使用
createColumnHelper<Job>()创建 columnHelper，并定义 columns 数组：一个通过columnHelper.accessor('name', ...)定义 Name 列，其 cell 返回info.getValue()；另一个通过columnHelper.display({ id: 'actions', ... })定义操作列，其 cell 接收{ row, table }，渲染一个 Button，点击时调用table.options.meta?.onEdit?.(row.original.id)。 -
通过 meta 传入回调。示例中的
DataTable组件接收data, onEdit, onDelete，调用useReactTable时传入data、columns、getCoreRowModel: getCoreRowModel()以及meta: { onEdit, onDelete }，随后返回<Table>...</Table>。
为什么用 meta 而不是闭包
资料指出，在列定义中使用闭包会导致重渲染。示例对比了两种写法：
- 不佳写法：在
useMemo中定义 columns，cell 内使用onEdit(row.original.id)，依赖数组为[onEdit]，当 onEdit 变化时会使列数组失效。 - 推荐写法：columns 被提升且永不变化，
useReactTable中只让 meta 变化，即meta: { onEdit }。
使用方式与参考入口
资料建议使用 context7 获取最新文档，使用 deepwiki 询问库的实现问题。提供的参考入口包括：
- GitHub 仓库：https://github.com/TanStack/table
- DeepWiki 仓库：TanStack/table
- Context7 库 ID：/tanstack/table
此外，资料还提到两个参考文件：列定义模式见 column-definitions.md，meta 字段类型安全见 meta-field.md。
适用场景与限制
适用场景为使用 TanStack Table 创建数据表格、实现排序，以及需要向单元格传递编辑、删除等行为的 React 表格组件。限制方面，资料未提供关于平台、收费、价格、效果或具体安装步骤的信息，这些内容暂未提供。