react/compose-with-tanstack-query

To implement server-side pagination, include pagination state in the React Query queryKey and enable manualPagination in TanStack Table. This setup ensures queries refetch automatically when the page changes, while dropping the client-side paginatedRowModel.

TanStack Table collapses during page loads because the data resets before the new fetch completes. Applying placeholderData: keepPreviousData in TanStack Query maintains the previous dataset visibility until fresh rows arrive, preventing UI flicker.

To keep the pager accurate with manual pagination, pass the total rowCount returned from the server into the TanStack Table options. This allows getPageCount() to calculate correct page counts based on actual server data rather than client rows.

Using an external pagination atom like useCreateAtom for PaginationState is required to key the TanStack Query on pagination state. This composition ensures the query refetches automatically whenever the pagination value changes.

Pagination lockups in TanStack Table occur when the queryKey lacks pagination state or manualPagination misconfigures the client paginatedRowModel. Including pagination state in the queryKey and dropping the client model resolves these refetch bugs.