data-table

Build TanStack data tables with server-side pagination and URL state sync.

65|16|Updated Jan 21, 2026
One-click install
npx skills add https://github.com/jiahao-jayden/vibe-any-tanstack --skill data-table-jiahao-jayden
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: data-table
Source: https://github.com/jiahao-jayden/vibe-any-tanstack/tree/main/.cursor/skills/data-table
Command: npx skills add https://github.com/jiahao-jayden/vibe-any-tanstack --skill data-table-jiahao-jayden

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Data-table boilerplate is verbose and error-prone; this Skill provides a reusable, configurable data table with server-side pagination and URL-driven state.

Core Features & Use Cases

  • Server-side pagination, sorting, and filtering with URL sync for shareable views.
  • Ideal for admin dashboards, list pages, and data-heavy UIs that require consistent paging and dynamic filtering.
  • TypeScript-friendly, TanStack-based data-table integration with skeletal loading and accessible headers.

Quick Start

Render a page that uses the DataTable with an API that returns paged results and observe the table updating URL parameters.

Frequently Asked Questions about data-table

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

FAQPage Schema
How do I build a TanStack data table with server-side pagination in TypeScript?

Build a TanStack data table with server-side pagination by using a configurable API surface that manages paged API results, skeletal loading, and accessible headers. It handles TypeScript typings and table composition for data-heavy admin interfaces.

How do I synchronize data table filtering state with the URL?

Synchronize data table filtering state with the URL by integrating nuqs for URL state synchronization. This stores pagination, sorting, and filtering parameters in the URL to create shareable views and maintain consistent state across admin dashboards.

What is the best way to manage URL-driven state for server-paged data tables?

The best way to manage URL-driven state for server-paged data tables is combining TanStack table composition with nuqs URL state synchronization. This ensures reliable paging and dynamic filtering while making list views shareable via URL parameters.

Can I use this data table Skill for admin dashboards requiring dynamic filtering?

Yes, you can use this data table Skill for admin dashboards requiring dynamic filtering. It is specifically designed for data-heavy interfaces and list pages, providing reliable server-side paging, sorting, and consistent URL-driven state synchronization.

Do I need nuqs to maintain shareable views in a TypeScript data table?

Yes, you need nuqs to maintain shareable views in this TypeScript data table setup. The Skill relies on nuqs specifically for URL state synchronization, ensuring that pagination and filtering configurations are accurately reflected in the browser URL.