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

svelte/compose-with-tanstack-query

Compose TanStack Svelte Table with TanStack Query for server-side pagination, sorting, and filtering.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the challenge of keeping a TanStack Svelte Table’s pagination, sorting, and filtering state in sync with server-backed data without empty-table flashes or incorrect client-side pagination.

Core Features & Use Cases

  • Server-driven data fetching: Fetch rows from the server using @tanstack/svelte-query while the table owns the view state.
  • Manual mode correctness: Enable manualPagination (and optionally manualSorting/manualFiltering) so the table treats data as already paged/sorted/filtered.
  • No “0 rows flash” UX: Use placeholderData: keepPreviousData so the table keeps showing the previous page during transitions.
  • Reliable paging math: Provide rowCount from the query so the pager can compute the correct number of pages.
  • State-driven query invalidation: Drive queryKey from current table state (pagination/sorting/filters) so requests rerun exactly when needed.

Quick Start

Implement a createQuery whose queryKey is keyed by your pagination (and other driver state), return rows plus rowCount, set placeholderData to keepPreviousData, and feed the result into createTable via reactive getters while enabling manualPagination (plus manualSorting/manualFiltering when used).

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

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

FAQPage Schema
How do I wire TanStack Svelte Table to server-side data using TanStack Query?▼

Prevent empty table flashes during page transitions by setting placeholderData to keepPreviousData in your TanStack Query configuration, which keeps the previous rows visible until the new data arrives.

Why does my Svelte table show incorrect page counts with server-side pagination?▼

Incorrect page counts occur when manualPagination is enabled without supplying the total rowCount from the server query, preventing the pager from computing the accurate number of pages.

When should I enable manualPagination and manualSorting in TanStack Svelte Table?▼

Enable manualPagination and manualSorting when your data is already paged and sorted on the server, signaling the table to treat the fetched rows as fully processed rather than handling those operations client-side.

How do I trigger TanStack Query refetches when Svelte table pagination changes?▼

Trigger refetches by deriving the queryKey directly from the table's current driver state, including pagination and sorting parameters, so the query automatically reruns exactly when the view state changes.

Can I use TanStack Query with Svelte 5 for reactive data tables?▼

TanStack Query integrates with Svelte 5 data grids by using reactive getters to connect query results to table data, ensuring the UI updates automatically as server data is fetched and synchronized.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

svelte/migrate-v8-to-v9

Migrate TanStack Svelte Table v8 apps to the v9 Svelte 5 rune-based API.

Official
Advanced
CatOfJupit3rCatOfJupit3r
1

tanstack-query-integration

Integrate TanStack Query with oRPC for typed data fetching and caching.

Community
Advanced
TanStackTanStack
28.3k

angular/compose-with-tanstack-store

Compose TanStack Table v9 with @tanstack/angular-store using external atoms.

Official
Advanced
TheBushidoCollectiveTheBushidoCollective
187

apollo-client-patterns

Manage GraphQL queries, mutations, and cache state in React with Apollo Client.

Official
Intermediate