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

vue/compose-with-tanstack-query

Compose Vue tables with server-side data fetching via TanStack Query.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of implementing server-side pagination, sorting, and filtering in a Vue data grid without breaking reactivity or causing incorrect page counts and UI flicker during refetches.

Core Features & Use Cases

  • Server-controlled pagination/sorting/filtering: Use manualPagination, manualSorting, and manualFiltering so the table renders exactly the server-supplied slice.
  • Query-driven data fetching keyed by table state: Build a reactive useQuery(() => ({ queryKey, queryFn })) that refetches whenever pagination/sorting/filter state changes.
  • Correct paging metadata: Provide rowCount so table.getPageCount() works without loading all rows client-side.
  • Smooth UX during transitions: Use placeholderData: keepPreviousData to prevent a “0 rows flash” while new pages load.
  • Recommended atom pattern: Leverage external createAtom + options.atoms so table updates automatically propagate to the query without on[State]Change wiring.
  • Use Case: When you have a large “people” dataset and want the pager, sort headers, and filters to drive API requests that return paginated results plus a total row count.

Quick Start

Use the skill to implement an example server-paginated @tanstack/vue-table + @tanstack/vue-query integration following the documented approach in the canonical Vue example.

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

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

FAQPage Schema
How do I implement server-side pagination in a Vue table without UI flicker?▼

Use `manualPagination` to render the server-supplied slice and `placeholderData: keepPreviousData` to prevent UI flicker during refetches when wiring Vue table state to TanStack Query.

How does reactive query key work with Vue table state for async data fetching?▼

A reactive `useQuery(() => ({ queryKey, queryFn }))` function form automatically refetches data whenever the Vue table's pagination, sorting, or filtering state changes.

Why does getPageCount return the wrong number with server-side pagination in TanStack Table?▼

Provide a `rowCount` value to the table so `getPageCount` calculates correctly without loading all rows client-side during server-controlled pagination.

Can I use external atoms to manage Vue table state instead of onStateChange callbacks?▼

Leverage external `createAtom` and `options.atoms` so Vue table state updates automatically propagate to the query, eliminating the need for manual `on[State]Change` callback wiring.

Do I need manualSorting and manualFiltering for server-controlled TanStack Table data?▼

Enable `manualSorting` and `manualFiltering` so the table renders exactly the server-supplied data slice rather than attempting client-side sorting and filtering on the fetched page.

What is the best way to sync Vue table sorting and filtering with server API requests?▼

Build a query-driven data fetching layer where reactive query keys bind directly to the table state, ensuring sorting and filtering changes automatically trigger the correct server API requests.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

angular/compose-with-tanstack-query

Compose TanStack Table with TanStack Query for server-driven Angular datagrids.

Official
Advanced
TanStackTanStack
28.3k

preact/compose-with-tanstack-query

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

Official
Intermediate
TanStackTanStack
28.3k

vue/compose-with-tanstack-store

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

Official
Intermediate
danghungtb26danghungtb26
3

tanstack-table-guide

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

Community
Intermediate