Skills
.Work. You
Rest

react/compose-with-tanstack-query

Official

Server-paginated React tables with Query

Software Engineering#react#tanstack query#tanstack table#server pagination#manualPagination#useCreateAtom#placeholderData
AuthorTanStack
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Building a server-side paginated data grid with TanStack Table often causes refetch bugs, pagination lockups, and UI flicker when the next page loads.

Core Features & Use Cases

  • Canonical TanStack Query pagination composition: Uses an external pagination atom and keys the query on pagination state so refetching is automatic.
  • Smooth page transitions: Applies placeholderData: keepPreviousData to prevent the table from collapsing to 0 rows during loading.
  • Correct pager behavior: Requires server-provided rowCount so getPageCount() and the pager stay accurate for manual pagination.

Quick Start

Ask your AI to compose a TanStack Table v9 React setup that uses useCreateAtom for PaginationState, an external pagination value included in the React Query queryKey, manual pagination with manualPagination: true, and renders dataQuery.data?.rows with a stable empty fallback while passing rowCount into the table options.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: react/compose-with-tanstack-query
Download link: https://github.com/TanStack/table/archive/main.zip#react-compose-with-tanstack-query

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.