tanstack-table-v8

Configure useReactTable with column definitions and render rows via flexRender.

7|4|Updated Mar 2, 2026
One-click install
npx skills add https://github.com/nklisch/skills --skill tanstack-table-v8
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tanstack-table-v8
Source: https://github.com/nklisch/skills/tree/main/.agents/skills/tanstack-table-v8
Command: npx skills add https://github.com/nklisch/skills --skill tanstack-table-v8

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Table Reference delivers a complete guide for building powerful, headless data tables in React, enabling fine-grained control over behavior and rendering without pre-made UI.

Core Features & Use Cases

  • Headless table architecture with full API access for table state, sorting, filtering, pagination, and row selection.
  • Clear guidance on configuring useReactTable, column definitions, and rendering via flexRender for custom UIs.
  • Practical use cases across enterprise dashboards, data grids, and admin panels requiring custom styling and performance.

Quick Start

Create a table by configuring useReactTable with data and columns, then render headers and rows with flexRender.

Frequently Asked Questions about tanstack-table-v8

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

FAQPage Schema
How do I build a React table with sorting and pagination using TanStack Table v8?

Build a React table with sorting and pagination by configuring the useReactTable hook with your data and column definitions, then render headers and rows with flexRender. This headless approach provides full API access to table state without pre-made UI components.

What is headless table architecture in TanStack Table and when do I need it?

Headless table architecture in TanStack Table provides full API access for table state, sorting, filtering, and row selection without enforcing pre-made UI. You need this for enterprise dashboards, data grids, and admin panels requiring custom styling and rendering patterns.

How do I configure column definitions for a TanStack Table in React?

Configure column definitions for a TanStack Table by defining columnDef objects that specify accessors and header rendering, passing them to the useReactTable hook alongside your data to establish core row models and enable rendering via flexRender.

Can I implement row selection in a React data grid without pre-built UI components?

Yes, you can implement row selection in a React data grid without pre-built UI components by using the headless TanStack Table v8 API, which delivers full state access and rendering control for custom UIs across data-intensive interfaces.

Does TanStack Table v8 work for building custom enterprise admin panels?

TanStack Table v8 works for building custom enterprise admin panels by providing a headless architecture with full API access for table state, filtering, and pagination, enabling fine-grained control over behavior and rendering for data-intensive UIs.