skills.rest
SeanChenR
SeanChenRCOMMUNITY
Explore all skills by this author →
GitHub

tanstack-table

Provide headless table primitives for sorting, filtering, and paginating tabular data.

Updated Aug 23, 2026
Search Tags:#tanstack#filtering#pagination#tables#virtualization#react-table#datagrid
One-click install
npx skills add https://github.com/SeanChenR/maestro-agent --skill tanstack-table-seanchenr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-table
Source: https://github.com/SeanChenR/maestro-agent/tree/main/.agents/skills/tanstack-table
Command: npx skills add https://github.com/SeanChenR/maestro-agent --skill tanstack-table-seanchenr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Table provides unopinionated, headless primitives to manage complex tabular state and behavior so developers avoid wiring sorting, filtering, pagination, grouping, selection, resizing, and virtualization from scratch across front-end frameworks.

Core Features & Use Cases

  • Stateful table primitives: Sorting, filtering, pagination, grouping, aggregation, row selection, column visibility, pinning, and resizing without enforced markup or styles.
  • Extensible row-model pipeline: Composable row models (core -> filter -> sort -> group -> paginate) with options for client-side or manual server-side processing.
  • Integrations & patterns: Virtualization support, createColumnHelper for type-safe columns, flexRender for rendering, and TypeScript module augmentation for custom filter/sort functions.
  • Use Case: Build a React data grid that supports fuzzy search, server-side pagination, virtualization for millions of rows, and column-level aggregation while keeping rendering and styling fully controlled by the app.

Quick Start

Create a React table by memoizing data and columns, instantiate useReactTable with required row models and flexRender for headers and cells.

Frequently Asked Questions about tanstack-table

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

FAQPage Schema
How do I build headless data tables with sorting and filtering in React?▼

Headless data tables provide unopinionated primitives to manage sorting, filtering, and pagination state without enforcing markup. You instantiate a table instance with memoized data and columns, then use flexRender to render headers and cells with your own styling.

Can I use TanStack Table for server-side pagination and manual sorting?▼

Yes, TanStack Table supports manual server-side processing modes for pagination, sorting, and filtering. You configure the table options to fetch data externally, allowing the row-model pipeline to handle hybrid server-side workflows.

Does this headless table library support virtualization for large datasets?▼

Headless table primitives support virtualization integration to efficiently render millions of rows. By decoupling state management from rendering, you can connect the table instance to a virtualizer component to handle large dataset scrolling.

What is the best way to create type-safe columns for a TypeScript data grid?▼

The best way to create type-safe columns is using the built-in column helper utility. It infers TypeScript types from your data structure, enabling safe column definitions and module augmentation for custom filter and sort functions.

Do I need a specific UI framework to use headless table primitives?▼

No, you do not need a specific UI framework. Headless table primitives are framework-agnostic and integrate with React, Vue, Solid, Svelte, Qwik, Angular, and Lit, ensuring rendering and styling remain fully controlled by your application.

How does the row-model pipeline handle grouping and aggregation?▼

The row-model pipeline processes data composable stages: core, filter, sort, group, and paginate. This extensible pipeline allows you to apply column-level aggregation and grouping client-side or delegate processing to manual server-side modes.

Related Skills

Explore More Software Engineering Skills→
Montte-erpMontte-erp
6

tanstack-table

Manage sorting, filtering, pagination, grouping, and row state for dynamic data grids.

Official
Advanced
JeromyJSmithJeromyJSmith
3

tanstack-table

Implement controlled React datagrids with TanStack Table row models.

Community
Intermediate
TanStackTanStack
28.3k

filtering

Implement client-side column and global filtering in TanStack Table v9.

Official
Intermediate
vecearvecear

table-builder

Generate configurable React Table components with sorting, filtering, and pagination.

Community
Advanced