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

with-tanstack-query

Compose Angular Query with signal-owned TanStack Table state for server-side pagination, sorting, and filtering.

28.4k|3.6k|Updated Oct 20, 2016
Search Tags:#Angular#Signals#server-side pagination#tanstack table#Tanstack Query#datagrid#injectquery
One-click install
npx skills add https://github.com/TanStack/table --skill with-tanstack-query
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: with-tanstack-query
Source: https://github.com/TanStack/table/tree/main/packages/angular-table/skills/with-tanstack-query
Command: npx skills add https://github.com/TanStack/table --skill with-tanstack-query

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/angular-table, @tanstack/angular-query-experimental, @angular/core.

What problem does it solve?

Wiring TanStack Table to a server-backed data source in Angular requires keeping query keys, signal state, and manual row-model flags in sync; mistakes cause stale data, missing refetches, or broken pagination.

Core Features & Use Cases

  • Reactive Query Composition: Reads pagination, sorting, and filtering signals inside injectQuery so query keys track every server-owned input and trigger refetches automatically.
  • Manual Row-Model Boundaries: Configures manualPagination with rowCount so the Table delegates processing to the server while still constraining page navigation.
  • Use Case: Build a paginated people directory where page changes in the Table update a signal, Angular Query refetches /api/people?page=N&size=M, and the Table renders query.data().rows with correct total counts.

Quick Start

Ask the AI to wire an Angular Table with server-side pagination using injectQuery and signal-owned pagination state.

Frequently Asked Questions about with-tanstack-query

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

FAQPage Schema
How do I use TanStack Query with Angular Table for server-side pagination?▼

Create a pagination signal, read it inside injectQuery so it joins the query key, and pass query.data().rows to injectTable with manualPagination: true and rowCount from the server response. Query handles fetching while the Table skips client-side paging.

Why is my Angular Query not refetching when table pagination changes?▼

The pagination signal was likely read outside the injectQuery options function, so no reactive dependency was tracked. Read this.pagination() directly inside the injectQuery callback and include its values in the queryKey.

Does manualPagination in TanStack Table fetch data automatically?▼

No. Manual flags only bypass client-side row processing; they never trigger network requests. You must pair the Table with a data-fetching layer like Angular Query and feed it query.data() directly.

Why does my server-paginated table show wrong page counts?▼

The Table needs rowCount or pageCount from the server to constrain navigation. Pass rowCount: this.query.data()?.rowCount ?? 0 alongside manualPagination so page buttons reflect the true total.

Should I copy Angular Query data into a separate signal for the table?▼

Only for a deliberate editable draft with an explicit cache synchronization policy. Otherwise read the Query signal directly in injectTable so the server response stays the single source of truth.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

react/client-to-server

Convert @tanstack/react-table v9 tables to server-sliced manual mode.

Official
Advanced
MovchanetsMovchanets

angular-ui-patterns

Design Angular UI states for loading, empty, error, and submission scenarios.

Community
Advanced
TanStackTanStack
28.3k

solid/compose-with-tanstack-query

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

Official
Intermediate
atilladenizatilladeniz
2

data-fetching

Enforce Orval-generated API wrappers with TanStack Query HydrationBoundary for data fetching.

Community
Intermediate