Tanstack Table
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.
Tanstack Table provides headless state management and logic for building sortable, filterable, paginated data tables in React.
AI-generated summary based on this skill's SKILL.md
Install
oakoss/agent-skills/tanstack-table · repository language: Python
git clone https://github.com/oakoss/agent-skills
cp -r agent-skills ~/.claude/skills/tanstack-tablegenerated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
npx skillfed install oakoss/agent-skills/tanstack-tableFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is Tanstack Table and how does it work?
Tanstack Table is a headless library that manages table state, sorting, filtering, pagination, and row operations without dictating your UI. It handles complex features like column pinning, row expanding, grouping, and server-side data fetching while letting you build the interface with any framework or custom components.
How to use Tanstack Table for sorting, filtering, and pagination?
Tanstack Table provides built-in features for sorting, filtering, and pagination through its core API. You configure these capabilities declaratively on your columns and table instance, then bind the resulting state to your UI components. The library manages the logic while you control the presentation layer.
Can Tanstack Table handle large datasets and virtualization?
Yes, Tanstack Table supports virtualization for large datasets, allowing efficient rendering of thousands of rows. It also provides server-side data fetching patterns to load data on demand, column pinning for fixed headers, and row expanding for hierarchical data—all designed to avoid common pitfalls like infinite re-renders.
How do I integrate Tanstack Table into my React application?
Tanstack Table integrates into React apps by installing the npm package and creating a table instance with your data and column definitions. Since it's headless, you pair it with your own components or UI libraries. The library provides hooks and utilities to manage state while you control rendering and styling.
What makes Tanstack Table different from other table libraries?
Tanstack Table is headless—it separates state management from UI, giving you complete control over styling and structure. Unlike prescriptive libraries, it avoids state mismatches and infinite re-renders through built-in patterns, supports advanced features like column management and grouping, and works with any rendering approach.
Does Tanstack Table work with TypeScript?
Yes, Tanstack Table has full TypeScript support with comprehensive type definitions. It enables type-safe column definitions, state management, and API interactions, making it ideal for large projects where type safety prevents errors and improves developer experience.