tanstack-table

Provides headless table UI logic for JavaScript frameworks including React, Vue and others.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/dwhoban/chanfana-vite-kumo --skill tanstack-table-dwhoban
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tanstack-table
Source: https://github.com/dwhoban/chanfana-vite-kumo/tree/main/.agents/skills/tanstack-table
Command: npx skills add https://github.com/dwhoban/chanfana-vite-kumo --skill tanstack-table-dwhoban

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides the core logic for building complex data tables and datagrids, abstracting away the UI rendering so you can focus on presentation.

Core Features & Use Cases

  • Headless UI: Offers sorting, filtering, pagination, grouping, and more without dictating your markup or styles.
  • Framework Agnostic: Works with React, Vue, Solid, Svelte, Qwik, Angular, and Lit.
  • Use Case: Quickly implement a sortable, filterable, and paginated table of user data in your React application, customizing the look and feel entirely.

Quick Start

Use the tanstack-table skill to create a basic sortable and filterable table instance with provided data and column definitions.

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 and filtering without UI constraints?

To build a data table without UI constraints, use headless table logic that provides sorting, filtering, and pagination functionality while leaving all markup and styling entirely up to you.

Can I implement a headless datagrid in frameworks other than React?

Yes, you can implement a headless datagrid across multiple JavaScript frameworks including React, Vue, Solid, Svelte, Qwik, Angular, and Lit, ensuring flexible table logic integration.

What is headless UI logic for data tables and when do I need it?

Headless UI logic for data tables provides core features like grouping and row selection without rendering any UI elements. You need it to fully control your table's presentation while abstracting complex state management.

How do I set up a sortable table instance with column definitions?

To set up a sortable table instance, initialize the table logic by providing your raw data array and column definitions, which then processes the configuration to generate the sorting and filtering state.

Does this table logic work for paginating large datasets in Svelte?

Yes, this table logic works for paginating large datasets in Svelte by processing the provided data and column definitions to calculate the correct rows for the current page without rendering any UI elements.

What is the best way to customize table markup while keeping complex state management?

The best way to customize table markup while keeping complex state management is using a headless UI approach that handles column manipulation and row selection logic without dictating your HTML structure.