tanstack-data-views

Implements server-side paginated data tables using TanStack Table, TanStack Query, and nuqs.

Updated Mar 31, 2026
One-click install
npx skills add https://github.com/gengirish/dropflow --skill tanstack-data-views-gengirish
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-data-views
Source: https://github.com/gengirish/dropflow/tree/main/.cursor/skills/tanstack-data-views
Command: npx skills add https://github.com/gengirish/dropflow --skill tanstack-data-views-gengirish

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building dashboard data tables with pagination, sorting, and filtering often leads to inconsistent state management, duplicated fetch logic, and stale data. This Skill provides a standardized pattern combining TanStack Table, TanStack Query, and nuqs so every table in the DropFlow dashboard behaves consistently. ## Core Features & Use Cases - URL-Driven Filter State: Uses nuqs to store page, pageSize, sort, and filter values in the URL, making every table view shareable via link. - Server-Side Table Pattern: Configures TanStack Table with manualPagination and manualSorting so large datasets are always paginated and sorted on the server. - Real-Time Cache Invalidation: Invalidates TanStack Query caches in response to SSE events so tables reflect live order status changes. - Use Case: Build an orders dashboard where a user filters by status, sorts by date, paginates through results, shares the exact filtered view via URL, and sees rows update automatically when order statuses change. ## Quick Start Use the tanstack-data-views skill to build a paginated, sortable orders table with URL-based filters and SSE-driven refresh.

Frequently Asked Questions about tanstack-data-views

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

FAQPage Schema
When should I avoid client-side pagination in TanStack Table?▼

Avoid client-side pagination for large datasets, since loading all rows into the browser is slow and memory-heavy. Use manualPagination with server-driven queries so only the current page is fetched and rendered.