skills.rest
TanStack
TanStackOFFICIAL
Explore all skills by this author →
Website𝕏@tan_stackGitHub

pagination

Configure pagination for TanStack Table v9 grids with client-side or server-side paging.

28.3k|3.6k|Updated Oct 20, 2016
Search Tags:#state management#pagination#server-side pagination#tanstack table#react table#row models#grid UI
One-click install
npx skills add https://github.com/TanStack/table --skill pagination-tanstack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pagination
Source: https://github.com/TanStack/table/tree/main/packages/table-core/skills/pagination
Command: npx skills add https://github.com/TanStack/table --skill pagination-tanstack

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the problem of building correct, user-friendly pagination for TanStack Table v9 data grids, whether the table paginates locally or relies on a server for paging.

Core Features & Use Cases

  • Client-side pagination using the paginatedRowModel stage with rowPaginationFeature and createPaginatedRowModel().
  • Server-side pagination with manualPagination, rowCount/pageCount, and onPaginationChange so navigation buttons reflect real totals.
  • Accurate “total filtered” counts using getPrePaginatedRowModel() to show counts after transforms but before the page slice.

Use case: you have a reusable datagrid that must support page controls, correct next/previous enablement, and consistent page size changes across both in-memory datasets and server-fetched results.

Quick Start

Create a TanStack table instance that includes the paginatedRowModel: createPaginatedRowModel() row model, initializes state.pagination with { pageIndex, pageSize }, and then call table.nextPage(), table.setPageIndex(), and table.setPageSize() from your pagination UI.

Frequently Asked Questions about pagination

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

FAQPage Schema
How do I implement server-side pagination in TanStack Table v9?▼

Server-side pagination in TanStack Table v9 uses manualPagination with rowCount or pageCount and onPaginationChange so navigation buttons reflect real totals fetched from a server. Configure these to enable accurate next and previous page controls for remote datasets.

How does client-side pagination work in a React table grid?▼

Client-side pagination works by applying the paginatedRowModel stage with rowPaginationFeature and createPaginatedRowModels to slice in-memory rows. You initialize state.pagination with pageIndex and pageSize to control local data grids.

How do I get accurate total filtered row counts before paging in TanStack Table?▼

Accurate total filtered counts use getPrePaginatedRowModel to show row totals after transforms but before the page slice. This provides correct filtered counts for your pagination UI regardless of using client-side or server-side paging workflows.

Does TanStack Table support consistent page size changes across different data sources?▼

TanStack Table supports consistent page size changes across in-memory datasets and server-fetched results using setPageSize. This ensures uniform pagination behavior for reusable datagrids needing consistent navigation and page size control.

What is the best way to control table paging for both client and server data grids?▼

The best way to control table paging for both client and server grids is configuring createPaginatedRowModel for local slicing or manualPagination with rowCount for remote data. This approach provides consistent navigation and page-size control.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

svelte/getting-started

Create typed TanStack Table v9 setups for Svelte 5 with reactive instances.

Official
Intermediate
CodertainmentCodertainment
16

scrcpy-option-ui-builder

Generate UI controls for scrcpy options in Flutter category screens.

Official
Advanced
fellipeutakafellipeutaka
33

tanstack-table

Create customizable React data tables with sorting, filtering, pagination, and row selection.

Community
Intermediate
Montte-erpMontte-erp
6

tanstack-table

Manage sorting, filtering, pagination, grouping, and row state for dynamic data grids.

Official
Advanced