svelte/compose-with-tanstack-query

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).