TanStack Table

Create headless data tables with TanStack Table v8 and server-side pagination.

3|Updated Nov 14, 2025
One-click install
npx skills add https://github.com/evolv3ai/claude-skills-archive --skill tanstack-table-evolv3ai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: TanStack Table
Source: https://github.com/evolv3ai/claude-skills-archive/tree/main/skills/tanstack-table
Command: npx skills add https://github.com/evolv3ai/claude-skills-archive --skill tanstack-table-evolv3ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-table, @tanstack/react-virtual, @tanstack/react-query, and includes scripts (resource) and references (resource) and templates (resource) components.

What problem does it solve?

This Skill simplifies the creation of complex, interactive data tables in web applications, handling everything from basic display to advanced server-side operations and performance optimizations.

Core Features & Use Cases

  • Headless Table Logic: Provides the core logic for tables, allowing you to bring your own UI.
  • Server-Side Operations: Supports pagination, filtering, and sorting powered by your backend API.
  • Performance Optimization: Integrates TanStack Virtual for efficient rendering of large datasets.
  • Use Case: Build a dashboard displaying thousands of user records, with features like server-side searching, sorting by name, and pagination, all while ensuring smooth performance.

Quick Start

Use the tanstack-table skill to create a server-side paginated table with Cloudflare D1.

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 server-side data table with pagination and sorting in React?

You can build a server-side data table with pagination and sorting in React using TanStack Table v8 to handle headless table logic and state management against your backend API. This approach supports server-side operations seamlessly.

What's the best way to render large datasets in a React data grid without performance issues?

Rendering large datasets in a React data grid without performance issues is best achieved by integrating TanStack Virtual for efficient row virtualization, ensuring smooth rendering of thousands of records while maintaining optimal performance.

Does TanStack Table work with Cloudflare Workers and D1 database integration?

Yes, TanStack Table works with Cloudflare Workers and D1 database integration, providing specific optimizations for server-side pagination, filtering, and sorting operations powered by your Cloudflare backend.

Why does my React table state management break when fetching server-side data?

React table state management can break during server-side data fetches due to uncontrolled state updates, but using TanStack Table's managed state prevents these documented errors and ensures compatibility with modern React patterns.

Can I bring my own UI components to a headless table implementation?

Yes, you can bring your own UI components to a headless table implementation because the Skill provides core table logic without enforcing a specific UI, allowing you to apply custom styling and components over the data grid structure.

Do I need TanStack Query to manage server-side filtering in a data grid?

You need TanStack Query to manage server-side filtering efficiently, as it handles data fetching and caching for the table, working in synergy with TanStack Table state to process server-side operations correctly.