angular/compose-with-tanstack-query

To prevent UI flicker in Angular tables during server-side pagination, compose TanStack Table with TanStack Query using placeholderData: keepPreviousData. This keeps the previous page visible until new row data arrives, avoiding the 0 rows flash between page changes.

Keep row selection stable across server-driven data refetches by setting getRowId in TanStack Table. This ensures row selection persists even when the server returns rows in a new order after manual sorting or filtering operations.

TanStack Query works with manual sorting and filtering by running TanStack Table in manualPagination, manualSorting, and manualFiltering modes. You hoist controlled state slices into Angular signals and key the Query on those signal values to fetch remote data accordingly.

Pagination math breaks in manualPagination because the table lacks total row context. Fix this by providing rowCount from the server response, which allows getPageCount() and next/previous button states to calculate correctly under remote data scenarios.

You need to include all controlled state slices, including sorting, pagination, and filtering states, in the queryKey for Angular remote data fetching. This ensures TanStack Query properly caches and refetches server-driven table data when any state changes.

You can compose TanStack Table with TanStack Query for server-driven Angular datagrids using @tanstack/angular-query-experimental. This setup fetches, caches, and refetches table data based on controlled pagination, sorting, and filtering state without UI flicker.