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

client-vs-server

Configure client or server ownership for sorting, filtering, and pagination in TanStack Table.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/table-core.

What problem does it solve?

Deciding whether filtering, sorting, grouping, expanding, or pagination should run on the client or the server in TanStack Table v9 is error-prone: misused manual* flags cause unsorted pages, double-processing, or render loops. This Skill clarifies which dataset each row-model stage receives and how to wire manual modes correctly.

Core Features & Use Cases

  • Ownership decision guidance: Explains when the client owns the full pipeline versus when the server owns processing with manualFiltering, manualSorting, and manualPagination flags.
  • Server-side patterns: Shows how to pass controlled filter, sorting, and pagination state into request/query keys and supply rowCount for server totals.
  • Common mistake prevention: Documents critical errors like treating manual flags as data-fetching requests, expecting manual pagination to slice data, sorting only the loaded page, and recreating data or columns inline.
  • Use Case: You are building a React datagrid backed by a paginated API with 12,000 rows. Use this Skill to configure manualPagination and manualSorting correctly so the table renders server-fetched pages without re-sorting only the visible slice.

Quick Start

Ask the AI to configure TanStack Table so that sorting and pagination are handled by the server while the table renders the fetched page with the correct rowCount.

Frequently Asked Questions about client-vs-server

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

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

Set manualPagination to true, pass only the current page's rows as data, and provide the total via rowCount. Put the pagination state into your request or query key so each state change fetches the correct page from the server.

What does manualSorting do in TanStack Table?▼

manualSorting only bypasses the client-side sorting row model; it never calls a backend. You must fetch already-sorted data yourself and pass it as the table's data input.

Should I use client-side or server-side sorting for large datasets?▼

Use server-side sorting when the client holds only a page of the full dataset, because client sorting can only order loaded rows and cannot produce database-wide order. Client-side sorting works when the complete dataset is loaded.

Why does my TanStack Table re-render or loop when I pass data inline?▼

Deriving new data or column arrays inline inside table options invalidates the row and column models on every render, and some adapters enter render loops. Keep both references stable using module constants, state, or the framework's memo/computed primitive.

Does manualPagination slice the data automatically?▼

No. Manual pagination assumes the data you pass already represents the intended page. Fetch the page from the server and pass its rows directly along with the total rowCount.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

preact/getting-started

Set up a TanStack table in Preact v9 with sorting and pagination.

Official
Intermediate
skilld-devskilld-dev
174

tanstack-vue-table-skilld

Integrate TanStack Vue Table into Vue 3 apps with sorting, filtering, pagination, and grouping.

Official
Intermediate
nthplusionthplusio

shadcn-data-tables

Build TanStack Table data tables with shadcn/ui components.

Official
Intermediate
JeromyJSmithJeromyJSmith
3

tanstack-table

Implement controlled React datagrids with TanStack Table row models.

Community
Intermediate