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
Decision gist · record as of 2026-07-27
TanStack Table helps you build data tables using the meta field pattern to pass callbacks without closure re-renders. 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.
Use it when
- TanStack Table avoids closure re-renders by storing callbacks in the meta field rather than embedding them directly in column definitions.
- TanStack Table's meta pattern uses a type-safe object attached to column definitions to reference callbacks and configuration.
Verify before relying
Read SKILL.md below before installing (3 files). Open directory: indexed for reading, not audited.
Install
Casper-Studios/casper-marketplace/tanstack-table · repository language: Python
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Build data tables with TanStack Table using meta field pattern”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
TanStack Table v8 skill provides production templates for building headless data tables optimized for server-side operations and Cloudflare Workers. Covers pagination, filtering, sorting, column controls, virtualization for 10k+ rows, and TanStack Query integration with error prevention for common state management pitfalls.
Tanstack Table is a headless library that handles table state management, sorting, filtering, pagination, and row operations without prescribing UI. It supports server-side data fetching, large dataset virtualization, column pinning, row expanding, and grouping, with built-in patterns to avoid common pitfalls like infinite re-renders and state mismatches.
This skill guides you through selective adoption of TanStack libraries—Query for server state, Table for complex grids, Form for intricate validation, Router for type-safe navigation, and Virtual for large lists. Rather than forcing every feature through TanStack patterns, you build your app with vanilla React first, then run analysis prompts to identify genuine opportunities for improvement. The workflow emphasizes measuring actual benefits before integrating each library.
This skill equips Claude with detailed guidance on setting up and optimizing build configurations across the TanStack ecosystem. It covers toolchain setup, TypeScript patterns, and development best practices to streamline JavaScript package builds.
TanStack DB is a reactive client store that extends TanStack Query with typed collections, live queries, and optimistic mutations. It normalizes data for sub-millisecond cross-collection queries and delivers instant optimistic updates with automatic rollback. Use it for apps needing local-first data, real-time sync via ElectricSQL, or complex joins that outgrow per-query caching.
Tanstack Cli streamlines your local development workflow by providing essential command-line utilities for Tanstack projects. This skill walks you through installation, initial configuration, and core setup steps to get your environment ready for building. Master the CLI's foundational commands and integrate it seamlessly into your development process.