skills.rest
tanstack-skills
tanstack-skillsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

tanstack-table

Provide headless table primitives for building sortable, filterable data grids in JavaScript/TypeScript frameworks including React, Vue, Svelte, Angular, and others.

29|2|Updated Jan 25, 2026
Search Tags:#typescript#filtering#pagination#sorting#tables#virtualization#tanstack-table
One-click install
npx skills add https://github.com/tanstack-skills/tanstack-skills --skill tanstack-table-tanstack-skills
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-table
Source: https://github.com/tanstack-skills/tanstack-skills/tree/main/plugins/tanstack-table/skills/tanstack-table
Command: npx skills add https://github.com/tanstack-skills/tanstack-skills --skill tanstack-table-tanstack-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a headless, framework-agnostic set of table primitives that remove the boilerplate of building performant, feature-rich data tables and datagrids while keeping rendering and styling entirely under the application developer's control.

Core Features & Use Cases

  • Sorting, filtering, and pagination: Compose client-side or server-side row models to support complex sorting and filtering workflows.
  • Grouping, aggregation, and row expansion: Build hierarchical views, aggregated summaries, and expandable detail rows for nested datasets.
  • Column features: Pinning, ordering, visibility toggles, resizing, and custom rendering for flexible column behaviors.
  • Virtualization integration: Efficiently render large lists with virtual scrolling and dynamic row sizing.
  • TypeScript-first patterns: Safe column definitions, module augmentation for custom filter/sort functions, and table meta for shared behaviors.
  • Use Case: Implement a sortable, filterable, virtualized React table with server-side pagination and custom aggregation for a reporting dashboard.

Quick Start

Create a React table using @tanstack/react-table with memoized columns and data, enable the required row models for sorting, filtering, and pagination, and integrate a virtualizer for large datasets.

Frequently Asked Questions about tanstack-table

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

FAQPage Schema
How do I build a type-safe sortable and filterable data grid in React?▼

Build sortable, filterable data grids using headless table primitives that provide TypeScript-first column definitions and modular row models, keeping rendering and styling entirely under your application's control.

Can I implement server-side pagination and virtual scrolling for large datasets?▼

Yes, implement server-side pagination and virtual scrolling by integrating a virtualizer for dynamic row sizing and applying manual server-side controls to handle large datasets efficiently.

Does this headless table approach work with Vue, Solid, Svelte, and Angular?▼

The headless table primitives are framework-agnostic and work with React, Vue, Solid, Svelte, Qwik, Angular, and Lit for client-side rendering and server-side pagination scenarios.

What is the best way to create hierarchical views with grouped and aggregated data?▼

Create hierarchical views and aggregated summaries by composing modular row models for grouping and row expansion, supporting nested datasets with expandable detail rows.

How do I manage column pinning, ordering, visibility toggles, and resizing?▼

Manage column behaviors using built-in primitives for pinning, ordering, visibility toggles, and resizing, alongside custom rendering for flexible column definitions.

Do I need TypeScript to use these headless data table primitives?▼

TypeScript is recommended to leverage safe column definitions, module augmentation for custom filter and sort functions, and table meta for shared behaviors, but JavaScript front-end applications are also supported.

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
ninsauninsau
2

flowers-table

Provide a headless, type-safe table component for React and Next.js.

Community
Intermediate
yehezkieldioyehezkieldio

tanstack-table

Organize complex tabular data with a framework-agnostic headless API.

Community
Advanced
Eng0AIEng0AI
15

gatsby-ecommerce-netlify

Configure a Gatsby e-commerce starter with styled-components for Netlify deployment.

Official
Basic