tanstack-table

Build headless data tables with sorting, filtering, and pagination across TS/JS frameworks.

Updated Apr 4, 2026
One-click install
npx skills add https://github.com/TaherMustansir1929/zainy-water-v3 --skill tanstack-table-tahermustansir1929
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-table
Source: https://github.com/TaherMustansir1929/zainy-water-v3/tree/main/.agents/skills/tanstack-table
Command: npx skills add https://github.com/TaherMustansir1929/zainy-water-v3 --skill tanstack-table-tahermustansir1929

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build rich, interactive tables without being tied to a UI layer, enabling you to compose your own headers, cells, and styling while leveraging a robust data-model and APIs for features like sorting, filtering, pagination, and row selection.

Core Features & Use Cases

  • Headless architecture with a stable table API for column definitions, row models, and rendering
  • Supports sorting, filtering, grouping, pagination, pinning, selecting, expanding, and resizing
  • Use cases include dashboards, admin panels, and data-intensive apps across React, Vue, Solid, Svelte, Qwik, Angular, and Lit

Quick Start

Install the library, define your data and columns using the provided table APIs, and render a custom table component that consumes the table state and APIs.

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 headless data table with sorting and pagination?▼

Build a headless data table by defining your data and columns using the provided table APIs, then render a custom table component that consumes the table state and APIs for sorting and pagination.

What is a headless table architecture and when do I need it?▼

A headless table architecture provides a stable table API for column definitions and row models without rendering markup, needed when you want to compose your own headers and styling while leveraging robust data-model features.

Does the TanStack table API work with Vue and Angular?▼

Yes, the headless table API works with Vue and Angular. It applies across TS/JS ecosystems including React, Solid, Svelte, Qwik, Angular, and Lit for data-intensive table features.

Can I implement row selection and column pinning in a React datatable?▼

Yes, you can implement row selection and column pinning in a React datatable. The headless architecture supports sorting, filtering, grouping, pagination, pinning, selecting, expanding, and resizing.

What is the best way to add filtering and grouping to an admin panel datagrid?▼

The best way to add filtering and grouping to an admin panel datagrid is using a headless UI that provides robust APIs for these features, enabling you to build interactive tables without being tied to a UI layer.

Why use a headless table instead of a standard UI grid component?▼

Use a headless table instead of a standard grid to build rich, interactive tables without being tied to a UI layer, enabling you to compose your own headers, cells, and styling while leveraging robust data-model APIs.