skills.rest
firstaxel
firstaxelCOMMUNITY
Explore all skills by this author →
GitHub

tanstack-table

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

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

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 from scratch requires implementing sorting, filtering, pagination, grouping, and selection logic by hand. This Skill provides the patterns and APIs of TanStack Table v8, a headless table library, so you can assemble fully controlled datagrids without writing the underlying state machinery. ## Core Features & Use Cases - Complete table feature set: Sorting, column and global filtering, fuzzy search, pagination, row selection, column visibility, pinning, resizing, grouping, aggregation, and row expanding. - Server-side operations: Manual sorting, filtering, and pagination modes for large datasets fetched from an API. - TypeScript-first patterns: Type-safe column definitions via createColumnHelper, module augmentation for custom meta, filter functions, and editable cells. - Use Case: You need an admin dashboard table showing thousands of users with server-side pagination, multi-column sorting, a global fuzzy search box, and a checkbox column for bulk actions. This Skill gives you the exact hooks, row models, and rendering patterns to build it. ## Quick Start Ask the AI to create a React table component using TanStack Table with sortable columns, a global filter input, and pagination for a given array of data.

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 table with TanStack Table in React?▼

Define columns with createColumnHelper, memoize your data and columns, then call useReactTable with getCoreRowModel and any feature row models like getSortedRowModel. Render headers and cells using flexRender with table.getHeaderGroups() and table.getRowModel().rows.

How to add sorting and filtering to a React table?▼

Add sorting and columnFilters state, pass them via the state option with onSortingChange and onColumnFiltersChange, and include getSortedRowModel and getFilteredRowModel. Use built-in filter functions like includesString or register a fuzzy filter with match-sorter-utils.

Does TanStack Table support server-side pagination?▼

Yes, set manualPagination to true, provide pageCount from your server, and omit getPaginationRowModel. The same manual pattern applies to sorting and filtering, with data refetched whenever the controlled state changes.

Why does my TanStack Table re-render infinitely?▼

Infinite re-renders happen when data or columns get new references on every render. Wrap both in useMemo so the table instance receives stable references, and avoid defining column arrays inline in the component body.

Can TanStack Table handle large datasets with virtualization?▼

Yes, it integrates with @tanstack/react-virtual. Create a virtualizer over the row model rows, position rows absolutely with translateY, and render only the virtual items returned by the virtualizer.

Related Skills

Explore More Software Engineering Skills→
lollipopkitlollipopkit
1

supabase-rest

Inspect Supabase tables, columns, and sample rows via read-only REST calls.

Community
Intermediate
arqel-devarqel-dev
2

export

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

Official
Advanced
adelabdelgawadadelabdelgawad

data-table-page

Build admin CRUD data table pages with server-side fetching and SWR caching.

Community
Advanced
LuisSambranoLuisSambrano
7

radix-ui

Guide accessible design system development with Radix UI primitives.

Community
Intermediate