关于 tanstack-table
介绍 TanStack Table 实现模式的技能，重点讲解如何通过 `meta` 字段向单元格传递行为，适用于构建表格的开发者，并涵盖类型安全和列定义指导。
主要功能
- 01通过表格 meta 传递行为
- 02扩展 TableMeta 实现类型安全
- 03提升列定义以便复用
- 04查阅实现相关文档
适用场景
- 01为单元格添加编辑和删除操作
- 02避免闭包导致列重新渲染
- 03定义类型安全的表格元数据
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/tanstack-table确认已加载。
附带文件references/column-definitions.mdreferences/meta-field.md
详细介绍
文档
使用 context7 获取最新文档。使用 deepwiki 了解该库的实现。
- GitHub 仓库：https://github.com/TanStack/table
- DeepWiki 仓库：
TanStack/table - Context7 库 ID：
/tanstack/table
TanStack Table 模式
本技能介绍如何使用 meta 字段将行为传递给单元格的 TanStack Table 库模式。
核心模式：通过 Meta 提升列定义
// 1. Extend TableMeta for type safety
declare module '@tanstack/react-table' {
interface TableMeta<TData extends RowData> {
onEdit?: (id: string) => void;
onDelete?: (id: string) => void;
}
}
// 2. Hoist column definitions outside component
const columnHelper = createColumnHelper<Job>();
const columns = [
columnHelper.accessor('name', {
header: 'Name',
cell: info => info.getValue(),
}),
columnHelper.display({
id: 'actions',
cell: ({ row, table }) => (
<Button onClick={() => table.options.meta?.onEdit?.(row.original.id)}>Edit</Button>
),
}),
];
// 3. Pass callbacks via meta
function DataTable({ data, onEdit, onDelete }: Props) {
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
meta: { onEdit, onDelete },
});
return <Table>...</Table>;
}
为什么选择 Meta 而不是闭包？
列定义中的闭包会导致重新渲染：
// Bad - new column array every render
const columns = useMemo(() => [
{
cell: ({ row }) => (
<Button onClick={() => onEdit(row.original.id)}>Edit</Button>
),
},
], [onEdit]); // Invalidates when onEdit changes
// Good - stable columns, dynamic meta
const columns = [...]; // Hoisted, never changes
const table = useReactTable({
meta: { onEdit }, // Only meta changes
});
参考资料
- 有关列定义模式，请参阅 column-definitions.md
- 有关 meta 字段的类型安全，请参阅 meta-field.md
评论
支持 Markdown