skills.rest
TanStack
TanStackOFFICIAL
Explore all skills by this author →
Website𝕏@tan_stackGitHub

column-definitions

Define typed TanStack Table v9 column definitions with accessor keys and functions.

28.3k|3.6k|Updated Oct 20, 2016
Search Tags:#typescript#tanstack table#row identity#column definitions#accessorKey#accessorFn#grouped columns
One-click install
npx skills add https://github.com/TanStack/table --skill column-definitions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: column-definitions
Source: https://github.com/TanStack/table/tree/main/packages/table-core/skills/column-definitions
Command: npx skills add https://github.com/TanStack/table --skill column-definitions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of defining TanStack Table v9 column definitions correctly and type-safely so your table features (sorting, filtering, grouping, aggregation, selection) behave as expected.

Core Features & Use Cases

  • Typed column definitions with createColumnHelper: Define columns using createColumnHelper<typeof _features, TData>(), covering columnHelper.accessor, columnHelper.display, columnHelper.group, and columnHelper.columns.
  • Correct column types and accessor patterns: Use ColumnDef variants (AccessorKeyColumnDef, AccessorFnColumnDef, DisplayColumnDef, GroupColumnDef) and understand when to prefer accessorKey vs accessorFn.
  • Stable identity and renderers: Apply required id rules (especially for accessorFn) and implement stable row identity via getRowId, while defining header, cell, footer, and aggregatedCell renderers (including flexRender-compatible forms).

Quick Start

Tell your AI: “Generate a TanStack Table v9 column helper setup for my Person row type using accessorKey for simple fields and accessorFn for derived values, ensuring required id values, typed renderers, and a getRowId implementation for stable row identity.”

Frequently Asked Questions about column-definitions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I define type-safe TanStack Table column definitions in TypeScript?▼

Define type-safe TanStack Table column definitions by instantiating createColumnHelper<typeof _features, TData>() and using its accessor, display, and group methods to ensure table features infer values and identifiers reliably.

When should I use accessorKey versus accessorFn for TanStack Table columns?▼

Use accessorKey for simple direct field paths, including DeepKeys, and use accessorFn for derived or computed values where you must provide an explicit id to maintain stable column identity.

Why does my TanStack Table accessorFn column throw an error about missing id?▼

TanStack Table accessorFn columns require an explicit id property because the function does not map to a single object key, preventing the table from automatically inferring the column identifier.

How do I implement stable row identity for TanStack Table selection and expansion?▼

Implement stable row identity by passing a getRowId function to the table instance, returning a unique string per row to ensure selection and expansion states remain consistent across data updates.

Can I define grouped and display columns alongside accessor columns in TanStack Table v9?▼

You can define grouped and display columns alongside accessor columns using columnHelper.group and columnHelper.display to structure header hierarchies and render non-data cells with typed renderers.

What is the correct generic ordering for createColumnHelper in TanStack Table v9?▼

The correct generic ordering for createColumnHelper is createColumnHelper<typeof _features, TData>, ensuring the table features type is passed first so column renderers and values infer correctly.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

react/compose-with-tanstack-form

Compose TanStack Table v9 editable cell grids with TanStack Form fields.

Official
Advanced
janpeterdjanpeterd

tanstack-table

Configure headless TanStack Table logic for sorting, filtering, pagination, and grouping.

Community
Advanced
TanStackTanStack
28.3k

lit/getting-started

Builds a typed TanStack Table in LitElement using TanStack Lit Table v9's TableController and FlexRender.

Official
Intermediate
TanStackTanStack
28.3k

preact/migrate-v8-to-v9

Migrate TanStack Table v8 code to the v9 Preact adapter.

Official
Advanced