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

solid/compose-with-tanstack-query

Compose Solid Table with TanStack Query using reactive atoms and manual pagination.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the challenge of building a server-driven TanStack Solid Table where pagination, sorting, and filtering must be fetched asynchronously without flickering or losing table state between requests.

Core Features & Use Cases

  • Server-side data flow: lifts pagination, sorting, and filtering into Solid atoms and uses them to drive queries.
  • Reactive query-key wiring: keys useQuery on atom accessors so updates automatically trigger refetches.
  • Stable UX for page transitions: uses keepPreviousData so the table doesn’t briefly render as empty while loading.
  • Manual control correctness: sets manualPagination (and related manual flags) so the table doesn’t re-slice already-paginated rows.
  • Table metadata support: feeds data.rows and data.rowCount via reactive getters so page controls and page counts work properly.

Quick Start

Ask your AI agent to implement the Solid adapter pattern that connects @tanstack/solid-table to @tanstack/solid-query using module-scope atoms, keepPreviousData, manualPagination, and reactive getters for data and rowCount.

Frequently Asked Questions about solid/compose-with-tanstack-query

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

FAQPage Schema
How do I build a Solid table with server-side pagination using TanStack Query?▼

To build a Solid table with server-side pagination, wire TanStack Query to Solid accessors using reactive atom state and set the manualPagination flag so the table doesn't re-slice fetched rows.

Why does my TanStack Solid Table flicker or lose state during data refetches?▼

TanStack Solid Table flickers during data refetches because it renders empty while loading. Use keepPreviousData in your TanStack Query configuration to maintain stable UX and display previous rows until new data arrives.

How do I connect TanStack Query keys to reactive Solid atoms for table filtering?▼

Connect TanStack Query keys to reactive Solid atoms by using atom accessors in your useQuery keys. When atoms update, the reactive query keys automatically trigger new server-side fetches for your table data.

How do I provide total row count for page controls in a TanStack Solid Table?▼

Provide total row count for TanStack Solid Table page controls by supplying data.rows and data.rowCount via reactive getters. This ensures the server-side pagination controls calculate correct page counts.

Do I need manual sorting flags when fetching async data with TanStack Solid Table?▼

You need manual sorting flags when fetching async data with TanStack Solid Table. Alongside manualPagination, setting manual flags prevents the table from client-side sorting already-paginated server data.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

vue/compose-with-tanstack-store

Compose TanStack Table state slices in Vue with TanStack Store atoms.

Official
Intermediate
TanStackTanStack
28.3k

svelte/client-to-server

Convert Svelte TanStack Table to server-owned pagination, sorting, and filtering.

Official
Intermediate
TanStackTanStack
28.3k

solid/compose-with-tanstack-virtual

Virtualize large @tanstack/solid-table datasets by rendering only visible rows.

Official
Intermediate
TanStackTanStack
28.3k

react/compose-with-tanstack-query

Implement server-side pagination for TanStack Table v9 with TanStack Query.

Official
Advanced