Reflex State pagination cursor synchronization during filter updates

Direct Answer

Detect out-of-bounds pagination state in the same event handler that applies the filter or sort change. For offset pagination, clamp the page index using a total count or an extra‑row fetch; for keyset pagination, re‑execute the filtered query with the stored cursor and reset to the first‑page anchor if the result is empty. Keeping the correction in one handler avoids an extra WebSocket delta and prevents a visible empty UI flash.

Offset Pagination

1. Apply the new filter/sort to the query.
2. Option A – Count clamp: run a COUNT(*) with the new filter, compute max_page = max(0, ceil(total / page_size) - 1), and set self.page = min(self.page, max_page).
3. Option B – Extra‑row fetch: query LIMIT page_size + 1 OFFSET page * page_size. If the result length is 0 (or ≤ page_size when already on the last page), clamp self.page to the last valid page.
4. Return the (possibly clamped) page's rows for rendering.

Keyset Pagination

1. Apply the new filter/sort.
2. Execute the query with the stored cursor (WHERE (sort_col, pk) > (cursor_val, cursor_pk) plus the new filter) and the stable sort order.
3. If the result is empty and the previous state had data, the cursor is beyond the new result set. Reset the cursor to the first‑page anchor (usually None or the minimum sort key).
4. Return the first page's rows for rendering.

Recommended Steps

1. Locate the event handler that mutates filter or sort_order.
2. Immediately after applying the new filter/sort, run the boundary check described above for your pagination style.
3. Mutate page or cursor in the same handler.
4. Return the corrected page's data so the client receives filter change + pagination fix in one delta.