tanstack · TanStack Table Docs
Table Columns Guide
Teaches how to define TanStack Table columns using accessor keys, array indices, or accessor functions, and how to use column helpers for type-safe implementations.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
Table Columns Guide
Teaches how to define TanStack Table columns using accessor keys, array indices, or accessor functions, and how to use column helpers for type-safe implementations.
When To Use
Use when you need to map raw data to table columns, implement sorting or filtering on specific data fields, or create display-only columns like checkboxes and action buttons.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/table-column-defs-columns-guide-workflow-guide.md | A guide explaining how to define columns, including API details, column definition types, and column helpers for TanStack Table. | Questions about a guide explaining how to define columns, including API details, column definition types, and column helpers for TanS... |
examples/table-column-defs-columns-guide-tanstack-table-column-definition.tsx | A TypeScript React example demonstrating how to use createColumnHelper to define display, grouping, and accessor columns for a table. | Exact payloads, commands, or snippets shown in A TypeScript React example demonstrating how to use createColumnHelper to define display, grouping, and accessor colu... |
examples/table-column-defs-columns-guide-tanstack-table-tsx-column-definitions-gu.tsx | A TypeScript React example demonstrating how to define column structures and data types for a TanStack Table instance. | Exact payloads, commands, or snippets shown in A TypeScript React example demonstrating how to define column structures and data types for a TanStack Table instance. |
examples/table-column-defs-columns-guide-tanstack-table-column-definition-2.tsx | A TypeScript React example demonstrating how to define table columns using columnHelper and accessorKey in TanStack Table. | Exact payloads, commands, or snippets shown in A TypeScript React example demonstrating how to define table columns using columnHelper and accessorKey in TanStack T... |
examples/table-column-defs-columns-guide-tanstack-table-tsx-column-definitions-gu-2.tsx | A TypeScript React example demonstrating how to define column structures using the Sales type for TanStack Table. | Exact payloads, commands, or snippets shown in A TypeScript React example demonstrating how to define column structures using the Sales type for TanStack Table. |
examples/table-column-defs-columns-guide-tanstack-table-column-definition-3.tsx | A TypeScript React example demonstrating how to define table columns using columnHelper and accessorKey in TanStack Table. | Exact payloads, commands, or snippets shown in A TypeScript React example demonstrating how to define table columns using columnHelper and accessorKey in TanStack T... |
examples/table-column-defs-columns-guide-tanstack-table-column-definition-columnh.tsx | A TypeScript React example demonstrating how to use the columnHelper API to define accessor functions and column IDs in TanStack Table. | Exact payloads, commands, or snippets shown in A TypeScript React example demonstrating how to use the columnHelper API to define accessor functions and column IDs... |
examples/table-column-defs-columns-guide-tanstack-table-column-definition-4.tsx | A TypeScript React example demonstrating how to define table columns using the columnHelper accessor method. | Exact payloads, commands, or snippets shown in A TypeScript React example demonstrating how to define table columns using the columnHelper accessor method. |
examples/table-column-defs-columns-guide-tanstack-table-column-definition-5.tsx | A TypeScript React example demonstrating how to define table columns using the columnHelper accessor method. | Exact payloads, commands, or snippets shown in A TypeScript React example demonstrating how to define table columns using the columnHelper accessor method. |
What This Skill Covers
- Column defs are the single most important part of building a table. They are responsible for:
- Main sections:
API,Column Definitions Guide,Column Def Types,Column Helpers,Creating Accessor Columns.
Workflow
- Open the most relevant file under
docs/for the exact documented workflow and wording. - Open
schemas/files for exact structured contracts. - Open
examples/files for concrete requests, commands, snippets, and manifests. - Do not add behavior or configuration that is not present in the attached source files.
Canonical source: https://tanstack.com/table/latest/docs/guide/column-defs