angular/compose-with-tanstack-query

What problem does it solve?

Prevents slow or flickering server-side datagrid experiences by composing TanStack Table with TanStack Query to fetch, cache, and refetch table data based on controlled pagination, sorting, and filtering state.

Core Features & Use Cases

• Server-driven data: Use Query to fetch row data from the server while TanStack Table runs in manualPagination/manualSorting/manualFiltering mode.
• Stable UI during refetches: Use placeholderData with keepPreviousData to avoid the “0 rows flash” between page changes.
• Correct pagination math: Provide rowCount from the server response so getPageCount() and next/previous button states work under manualPagination.
• Selection across refetches: Set getRowId to keep row selection stable even when the server returns rows in a new order.
• Production-ready composition: Hoist table-controlled slices into Angular signals and key the Query on those signal values.

Quick Start

Ask the AI agent to compose an Angular TanStack Table v9 that fetches paginated/sorted/filtered rows via @tanstack/angular-query-experimental using queryKey keyed by pagination/sorting/filter signals and manualPagination/manualSorting/manualFiltering with placeholderData: keepPreviousData.