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

preact/client-to-server

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

You want a TanStack Preact Table to page, sort, and filter data on the server instead of recalculating rows in the browser, while keeping the same table APIs and state updates to drive your refetch logic.

Core Features & Use Cases

  • Manual ownership via flags: Use manualPagination, manualSorting, manualFiltering, manualGrouping, and manualExpanding so the server owns the corresponding stages of the table pipeline.
  • Correct page counts with rowCount: Provide rowCount so table.getPageCount() works for server-paginated datasets.
  • External atom-driven refetch: Key your server request off external pagination/sorting/filter state atoms and pass them through atoms to keep state reactive.
  • Use Case: Implement server-side datagrid behavior for a large dataset where the UI must update rows immediately when the user changes page, sort order, or filters.

Quick Start

Ask your AI assistant to convert your @tanstack/preact-table setup to a server-owned (manual) mode by wiring external atoms for pagination/sorting/filter state, passing them via atoms, setting the appropriate manual* flags, and supplying rowCount with server responses.

Frequently Asked Questions about preact/client-to-server

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

FAQPage Schema
How do I make a Preact table handle sorting, filtering, and pagination on the server?▼

To handle server-side pagination, sorting, and filtering in a Preact table, enable the manualPagination, manualSorting, and manualFiltering flags, then supply a rowCount value from your backend for accurate page counts.

Why does getPageCount return incorrect values for my remote Preact data grid?▼

getPageCount returns incorrect values for remote Preact data grids when rowCount is not provided. Supply the total rowCount from your server response to calculate accurate manualPagination page counts.

What is the best way to trigger data refetches when Preact table state changes?▼

The best way to trigger data refetches is to key server requests off external state atoms for pagination, sorting, and filtering, passing them through the atoms property to keep the Preact table state reactive.

Do I need manual flags for server-side sorting and filtering in TanStack Preact Table?▼

Yes, you need manual flags for server-side processing. Setting manualSorting, manualFiltering, and manualPagination shifts ownership of these table pipeline stages from the browser to your backend.

Can I use external state atoms to drive remote data fetching in a Preact table?▼

Yes, you can use external state atoms to drive remote data fetching. Wire external pagination, sorting, and filtering state atoms into your configuration to keep the Preact UI reactive during refetches.

When should I switch my Preact table from client-side to manual server-owned mode?▼

Switch to manual server-owned mode when working with large datasets that require fetching remote rows. This keeps the UI responsive by shifting pagination, sorting, and filtering responsibilities to the backend.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

preact/migrate-v8-to-v9

Migrate TanStack Table v8 code to the v9 Preact adapter.

Official
Advanced
TanStackTanStack
28.3k

preact/compose-with-tanstack-query

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

Official
Intermediate
bobmatnycbobmatnyc
68

tanstack-query

Manage asynchronous server state in React with TanStack Query hooks.

Community
Intermediate
danghungtb26danghungtb26
3

tanstack-table-guide

Implement TanStack Table data tables with sorting, filtering, pagination, and row selection in React.

Community
Intermediate