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

solid/client-to-server

Migrate client-owned @tanstack/solid-table to server-owned sorting, filtering, and pagination.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

You need to render a TanStack Solid table when the server owns sorting, filtering, and pagination, but you still want to keep the same table APIs and UI behavior in the browser.

Core Features & Use Cases

  • Manual row-model ownership: Use manualPagination, manualSorting, and manualFiltering (and related manual* flags) so the client doesn’t recompute those slices.
  • Lifted server state with Solid signals/atoms: Store and subscribe to pagination/sorting/filter state using Solid signals or @tanstack/solid-store atoms (via createAtom + useSelector).
  • Correct server totals: Provide rowCount so pagination controls like getPageCount() and page navigation reflect server-side totals.
  • Pair with a fetcher: Commonly combine with a query/fetch layer (e.g., TanStack Query) by keying requests on the lifted state.

Quick Start

Tell your AI agent to convert your existing @tanstack/solid-table client setup into a server-driven version by lifting pagination/sorting/filter state into Solid atoms or signals, setting the corresponding manual* options, supplying rowCount from the API response, and removing the matching client row-model factories for those slices.

Frequently Asked Questions about solid/client-to-server

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

FAQPage Schema
How do I implement server-side pagination with TanStack solid-table?▼

To implement server-side pagination in TanStack solid-table, enable manualPagination, lift page index state into Solid signals, supply an accurate rowCount from server responses, and remove the client-side getPaginationRowModel factory.

What does manualPagination do in a solid-table datagrid?▼

ManualPagination in a solid-table datagrid instructs the client to skip slicing rows locally, allowing the server to own the pagination logic while the UI relies on Solid signals for state synchronization.

How do I sync solid-table sorting and filtering state with a remote server?▼

To sync solid-table sorting and filtering with a remote server, enable manualSorting and manualFiltering, lift that state into Solid signals or solid-store atoms, and use those values to key your remote data fetches.

Why does getPageCount return incorrect values for my server-driven solid-table?▼

getPageCount returns incorrect values for your server-driven solid-table when the rowCount property is not accurately supplied from the server response, as pagination controls rely on it to calculate total pages.

Can I use solid-store atoms to manage TanStack table state across components?▼

Yes, you can use solid-store atoms via createAtom and useSelector to lift and subscribe to TanStack solid-table state, ensuring stable UI behavior and external state synchronization across components.

Do I need to remove client row-model factories when switching to server-side table state?▼

Yes, you must skip redundant client row-model factories like getPaginationRowModel when enabling manual* options, as the server now owns those data slices and the client should not recompute them.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

solid/compose-with-tanstack-store

Compose TanStack Table state with TanStack Store atoms in Solid applications.

Official
Intermediate
TanStackTanStack
28.3k

preact/compose-with-tanstack-query

Implement server-side data loading for Preact tables with TanStack Query.

Official
Intermediate
TanStackTanStack
28.3k

solid/migrate-v8-to-v9

Migrate @tanstack/solid-table v8 code to v9 APIs and state patterns.

Official
Advanced
TanStackTanStack
28.3k

preact/client-to-server

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

Official
Intermediate