TanStack Table 模式指南：使用 Meta 字段优化 React 表格性能与类型安全

tanstack-table by casper-studios/casper-marketplace

137 周安装量

10 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/casper-studios/casper-marketplace --skill tanstack-table

React 性能优化前端架构

🇨🇳中文介绍

文档

使用 context7 获取最新文档。使用 deepwiki 询问关于库实现的问题。

GitHub 仓库：https://github.com/TanStack/table
DeepWiki 仓库：TanStack/table
Context7 库 ID：/tanstack/table

TanStack Table 模式

此技能涵盖 TanStack Table 库的模式，特别是使用 meta 字段向单元格传递行为的模式。

核心模式：使用 Meta 提升列定义

// 1. 扩展 TableMeta 以获得类型安全
declare module '@tanstack/react-table' {
	interface TableMeta<TData extends RowData> {
		onEdit?: (id: string) => void;
		onDelete?: (id: string) => void;
	}
}

// 2. 将列定义提升到组件外部
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. 通过 meta 传递回调函数
function DataTable({ data, onEdit, onDelete }: Props) {
	const table = useReactTable({
		data,
		columns,
		getCoreRowModel: getCoreRowModel(),
		meta: { onEdit, onDelete },
	});

	return <Table>...</Table>;
}

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

🇺🇸English

Documentation

Use context7 for the latest documentation. Use deepwiki to ask questions about the library's implementation.

GitHub Repository: https://github.com/TanStack/table
DeepWiki Repository: TanStack/table
Context7 Library ID: /tanstack/table

TanStack Table Patterns

This skill covers TanStack Table library patterns with the meta field for passing behavior to cells.

Core Pattern: Hoisted Columns with 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>;
}

Why Meta Over Closures?

Closures in column definitions cause re-renders:

// 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
});

References

For column definition patterns, see column-definitions.md
For meta field type safety, see meta-field.md

Weekly Installs

107

Repository

casper-studios/…ketplace

GitHub Stars

First Seen

Feb 24, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode107

github-copilot107

codex107

kimi-cli107

gemini-cli107

cursor107