tanstack-table
This skill teaches the meta field pattern for TanStack Table, enabling you to hoist column definitions outside components and pass callbacks through table options instead of closures. By separating stable column structure from dynamic behavior, you avoid unnecessary re-renders when callbacks change—ideal for data tables with sorting, filtering, or inline editing.
TanStack Table helps you build data tables using the meta field pattern to pass callbacks without closure re-renders.
AI-generated summary based on this skill's SKILL.md
Install
Casper-Studios/casper-marketplace/tanstack-table · repository language: Python
git clone https://github.com/Casper-Studios/casper-marketplace
cp -r casper-marketplace/plugins/engineering/stack-patterns/skills/tanstack-table ~/.claude/skills/tanstack-tablenpx skillfed install Casper-Studios/casper-marketplace/tanstack-tableFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do you build a TanStack Table with the meta field pattern?
TanStack Table's meta field pattern lets you hoist column definitions outside your component and attach callbacks through table options. Define your columns with a columnHelper, add callback references to the meta object, then pass those callbacks via createTable options. This separates stable column structure from dynamic behavior, preventing re-renders when callbacks change—essential for data tables with sorting, filtering, or inline editing.
How can TanStack Table cell callbacks work without closures?
TanStack Table avoids closure re-renders by storing callbacks in the meta field rather than embedding them directly in column definitions. Instead of passing callbacks as JSX props that change on every render, you define columns once with meta references, then provide the actual callback functions through table options. This keeps column definitions stable while allowing dynamic behavior updates without triggering unnecessary cell re-renders.
What is the TanStack Table meta pattern for data tables?
TanStack Table's meta pattern uses a type-safe object attached to column definitions to reference callbacks and configuration. You define columns with columnHelper outside your component, add meta properties pointing to callback names, then pass the actual implementations via table options. This hoisted columns approach enables type-safe, reusable column definitions that stay stable across renders while supporting inline editing, delete buttons, and other cell actions.
How do you implement sorting and filtering in TanStack Table?
TanStack Table provides built-in sorting and filtering through state management in table options. Enable sorting by setting enableSorting and configure sorting state, then use getSortedRowModel(). For filtering, manage columnFilters state and apply getFilteredRowModel(). Both integrate seamlessly with hoisted column definitions and the meta pattern, allowing you to add sort indicators and filter controls without affecting cell callback stability.
What are hoisted column definitions and why use them?
Hoisted column definitions are column structures defined outside your React component, typically using columnHelper. This approach separates column configuration from render logic, making definitions reusable and stable across renders. Combined with the meta pattern for callbacks, hoisting prevents unnecessary re-renders of cells when parent component state changes, improving performance in large data tables with complex interactions.
How do you ensure type safety with TanStack Table meta fields?
TanStack Table's meta pattern supports TypeScript by defining a strict meta interface for your columns. Use columnHelper with generic types to specify your row data shape, then define meta as a typed object with callback references. This ensures callbacks passed through table options match the expected signatures, catching type errors at compile time and making inline editing, sorting, and filtering implementations safer and more maintainable.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
```typescript // 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:
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 3 files
plugins/engineering/stack-patterns/skills/tanstack-table/SKILL.md
plugins/engineering/stack-patterns/skills/tanstack-table/references/column-definitions.md
plugins/engineering/stack-patterns/skills/tanstack-table/references/meta-field.md