skills.rest
aashahin
aashahinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tanstack-table

Build headless data tables with sorting, filtering, and pagination in React.

Updated Jun 22, 2026
Search Tags:#react#filtering#pagination#sorting#headless ui#tanstack table#datagrid
One-click install
npx skills add https://github.com/aashahin/ai-skills --skill tanstack-table-aashahin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-table
Source: https://github.com/aashahin/ai-skills/tree/main/tanstack-table
Command: npx skills add https://github.com/aashahin/ai-skills --skill tanstack-table-aashahin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-table, @tanstack/match-sorter-utils, @tanstack/react-virtual.

What problem does it solve? Building feature-rich data tables in React requires implementing sorting, filtering, pagination, grouping, and selection logic from scratch, which is repetitive and error-prone. This Skill provides the patterns and APIs to implement these features using TanStack Table's headless architecture. ## Core Features & Use Cases - Full Table Feature Set: Implement sorting, column and global filtering, pagination, row selection, grouping, expanding, column pinning, resizing, and visibility with controlled state. - Server-Side Operations: Configure manual sorting, filtering, and pagination for large datasets fetched from backend APIs. - Type-Safe Columns: Use createColumnHelper and TypeScript module augmentation for typed column definitions, custom filter functions, and table meta. - Use Case: Build an admin dashboard datagrid that displays thousands of server-paginated records with fuzzy global search, multi-column sorting, and row selection checkboxes. ## Quick Start Create a React table using TanStack Table with sortable columns, a global filter input, and pagination controls for my user data array.

Frequently Asked Questions about tanstack-table

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

FAQPage Schema
How do I create a sortable table in React with TanStack Table?▼

Create a sortable table by passing sorting state with onSortingChange and adding getSortedRowModel to useReactTable. Attach header.column.getToggleSortingHandler() to header click events and render the sort direction with header.column.getIsSorted().

How to add server-side pagination with TanStack Table?▼

Set manualPagination to true, provide pageCount from your server, and omit getPaginationRowModel. Control pagination state with onPaginationChange and refetch data in a useEffect whenever pagination, sorting, or filters change.

Why does TanStack Table cause infinite re-render loops?▼

Infinite loops happen when data or columns get new references on every render. Wrap both in useMemo so the table instance receives stable references, and always include getCoreRowModel as the base row model.

Does TanStack Table support fuzzy search filtering?▼

Yes, fuzzy filtering works through the @tanstack/match-sorter-utils package. Define a custom FilterFn using rankItem, register it in filterFns, and set globalFilterFn to 'fuzzy' for ranked global search results.

Can TanStack Table render UI markup and styles automatically?▼

No, TanStack Table is a headless library that provides only logic and state, not markup or styles. You render headers, rows, and cells yourself using flexRender with your own table elements and CSS.

Related Skills

Explore More Software Engineering Skills→
SoufianouassifSoufianouassif

data-visualization

Connect data sources to create dashboards, reports, and dataset explorers.

Community
Advanced
arqel-devarqel-dev
2

export

Export data selections to CSV, XLSX, or PDF files.

Official
Advanced
TanStackTanStack
28.3k

vue/compose-with-tanstack-virtual

Compose TanStack Vue Table with TanStack Virtual for row and column virtualization.

Official
Advanced
tiantangcao1980-webtiantangcao1980-web
4

mui-x

Install MUI X packages to integrate DataGrid, Charts, and Date Pickers in React.

Community
Intermediate