ask-table

Implements data tables with sorting, filtering, pagination, and virtualization using TanStack Table.

1|Updated Aug 17, 2026
One-click install
npx skills add https://github.com/NalinDalal/skillset --skill ask-table-nalindalal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ask-table
Source: https://github.com/NalinDalal/skillset/tree/main/skills/ui/ask-table
Command: npx skills add https://github.com/NalinDalal/skillset --skill ask-table-nalindalal

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building production-quality data tables with sorting, filtering, pagination, and virtualization is complex and error-prone when done manually, often resulting in janky performance and poor accessibility. ## Core Features & Use Cases - TanStack Table v8 Patterns: Type-safe column definitions, headless table setup, and composable cell renderers for React applications. - Virtualization & Server-Side Data: Integrates @tanstack/react-virtual for 10k+ row performance and provides server-side sorting, filtering, and pagination API patterns. - Quality Checklist & Anti-Patterns: Covers keyboard navigation, ARIA grid accessibility, loading skeletons, URL state persistence, and common mistakes to avoid. - Use Case: When building an admin dashboard that displays thousands of project records, use this Skill to generate a virtualized, sortable, filterable table with server-side pagination and persistent column widths. ## Quick Start Ask the agent to build a data table with sorting, filtering, and pagination for your dashboard using TanStack Table.

Frequently Asked Questions about ask-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 in React?▼

Use TanStack Table v8 with useReactTable, defining type-safe columns via createColumnHelper and enabling getSortedRowModel and getFilteredRowModel. Add header click handlers for sorting and global plus per-column filter inputs for searching.

What React library is best for data tables and data grids?▼

TanStack Table v8 is recommended because it is headless, framework-agnostic, and TypeScript-first, letting you control markup and styling fully. Pair it with @tanstack/react-virtual for virtualization when rendering more than 100 rows.

Does TanStack Table support server-side pagination?▼

Yes, set manualPagination to true and pass the total rowCount from your API. The table then delegates sorting, filtering, and pagination to your server endpoint, which returns paged data with query parameters like sort, order, page, and size.

Why does my React table lag with thousands of rows?▼

Rendering thousands of DOM rows without virtualization causes jank and high memory usage. Use @tanstack/react-virtual with row height estimation and overscan, and move sorting and filtering to the server for datasets over 10k rows.

When should I use a virtual list instead of a data table?▼

Use a virtual list when displaying non-tabular content like feeds, chat messages, or infinite scroll lists without columns. For those cases, escalate to a virtual list pattern with a library like Virtuoso instead of TanStack Table.