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

react/client-to-server

Convert @tanstack/react-table v9 tables to server-sliced manual mode.

28.3k|3.6k|Updated Oct 20, 2016
Search Tags:#state management#server-side rendering#manual pagination#rowCount#tanstack react table#sorting filtering#external atoms
One-click install
npx skills add https://github.com/TanStack/table --skill react-client-to-server
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react/client-to-server
Source: https://github.com/TanStack/table/tree/main/packages/react-table/skills/react/client-to-server
Command: npx skills add https://github.com/TanStack/table --skill react-client-to-server

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the challenge of migrating a TanStack React Table from client-side data processing (sorting, filtering, pagination) to server-side processing so you render only the server-returned slice while keeping pagination and controls correct.

Core Features & Use Cases

  • Manual mode conversion for server-owned operations: Set manualPagination, manualSorting, manualFiltering, manualGrouping, and manualExpanding for the operations the server owns.
  • Correct pager behavior with rowCount: Provide rowCount from the server so getPageCount() and next/previous paging work accurately.
  • Drop redundant row model factories: Remove the matching _rowModels entry (e.g., omit paginatedRowModel) so the client does not re-slice or re-compute server-paginated results.
  • External slice state wiring: Own the relevant state slices via external atoms (useCreateAtom + options.atoms) or via controlled state + on*Change so data fetching can key off the slice and refetch automatically.

Quick Start

Tell an AI to convert your existing @tanstack/react-table v9 client table to server-side manual mode by setting the appropriate manual* flags, removing the corresponding factories from _rowModels, wiring slice state to your fetcher, and passing the server rowCount so pagination renders correctly.

Frequently Asked Questions about react/client-to-server

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

FAQPage Schema
How do I switch a TanStack React Table from client-side to server-side pagination?▼

To switch TanStack React Table to server-side pagination, enable `manualPagination`, remove the `paginatedRowModel` factory, pass the total `rowCount` from your server response, and wire pagination state to your data fetcher to trigger automatic refetching.

Why does my server-side React Table show incorrect page count after enabling manual pagination?▼

Manual pagination requires the server `rowCount` property to accurately compute `getPageCount()` for next and previous navigation. Without passing the total row count from your backend, the UI pager cannot calculate the correct number of pages.

How do I manage sorting and filtering state when TanStack Table operations are manual?▼

When `manualSorting` and `manualFiltering` are enabled, you must own the relevant state slices externally via atoms or controlled `state` with `on*Change` writeback, allowing your data fetching logic to key off the state and refetch the trimmed dataset.

Do I need to remove row model factories when converting to manual server-side mode?▼

Yes, you must drop the matching `_rowModels` entries, such as `paginatedRowModel`, so the client does not re-slice or re-compute the server-paginated results, ensuring only the server-returned data slice is rendered.

Can I use TanStack React Table for server-side grouping and expansion?▼

TanStack React Table supports server-side grouping and expansion by enabling `manualGrouping` and `manualExpanding` flags, removing the corresponding row model factories, and managing the state externally to fetch the trimmed dataset from your backend.

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
TanStackTanStack
28.3k

preact/client-to-server

Convert a TanStack Preact Table to server-owned manual mode.

Official
Intermediate
TanStackTanStack
28.3k

state-management

Coordinate TanStack Table v9 state slices across initialState, controlled state, and atoms.

Official
Advanced
JeromyJSmithJeromyJSmith
3

tanstack-table

Implement controlled React datagrids with TanStack Table row models.

Community
Intermediate