preact/compose-with-tanstack-query

Implement server-side pagination by using TanStack Query with a reactive queryKey containing pagination atoms, setting manualPagination to true, and returning rowCount from your server fetch to ensure correct page calculations.

Prevent empty table flashes during remote sorting and filtering transitions by setting placeholderData to keepPreviousData in your query configuration, maintaining the previous dataset visibility while new async table data loads.

Your Preact data table shows zero rows because the query cache resets during page changes. Use placeholderData: keepPreviousData to hold the previous rows and include reactive queryKey values to prevent empty flashes.

TanStack Query works with Preact for remote data slicing by wiring useQuery to table atoms. Set manualSorting and manualFiltering to true for server-owned slices and compute rowCount from the server response for accurate state.

The best way to sync TanStack Query requests with Preact table filter state is building a reactive queryKey that includes pagination, sorting, and filtering atoms, triggering automatic refetches when table state changes.

You need manualPagination and manualSorting for Preact datagrids when your server handles data slicing and sorting. Setting these to true tells the table to stop client-side processing and rely on server-owned remote state transitions.