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