tanstack-table

Provide a headless core for sorting, filtering, pagination, and grouping in data tables.

Updated Feb 24, 2026
One-click install
npx skills add https://github.com/bartolomeomueller/hr --skill tanstack-table-bartolomeomueller
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tanstack-table
Source: https://github.com/bartolomeomueller/hr/tree/main/.agents/skills/tanstack-table
Command: npx skills add https://github.com/bartolomeomueller/hr --skill tanstack-table-bartolomeomueller

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Table tackles the challenge of building flexible, feature-rich data grids by providing a framework-agnostic, headless core that handles sorting, filtering, pagination, grouping, row selection, virtualization, and more without imposing UI or markup.

Core Features & Use Cases

  • Column definitions and a table instance to model complex data pipelines (sort -> filter -> group -> paginate).
  • Comprehensive row models and virtualization support for large datasets.
  • Server-side operation capabilities and a strong pattern for type augmentation and integration with UI libraries.

Quick Start

Install the library and build a basic table component using the library's APIs to render a small dataset with sorting and pagination.

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 data table with sorting, filtering, and pagination without locking in a specific UI framework?

A headless data table core provides the orchestration logic for sorting, filtering, and pagination without imposing markup, allowing you to style your datagrid freely across frameworks like React or Vue.

Can I use a headless table library to handle server-side operations for large datasets?

Yes, this headless table core supports server-side operations and virtualization to efficiently process large datasets, enabling you to manage data fetching externally while retaining the table instance orchestration.

What is the best way to implement complex data pipelines like grouping and row selection in a React datagrid?

Using a framework-agnostic table instance with column definitions allows you to model complex data pipelines (sort, filter, group, paginate) and manage row selection seamlessly within your React datagrid.

Does this headless table approach work with Solid, Svelte, Qwik, Angular, and Lit?

The headless core is fully framework-agnostic and designed to work across React, Vue, Solid, Svelte, Qwik, Angular, and Lit, providing a reusable API surface for building dynamic tables and dashboards.

When should I choose a headless table over a pre-styled datagrid component?

Choose a headless table when you need full control over your UI markup and require a reusable API surface for complex features like virtualization and server-side integration without being constrained by predefined styles.

How do I define columns and manage row models for a dynamic data table?

You define columns and orchestrate the table instance to process comprehensive row models, handling the entire data pipeline from sorting and filtering to grouping and pagination.