Ant Design Table Server-Side Pagination Synchronization When Total Records Change

Developers must manually verify and, if needed, reset the current page when the total record count changes during server‑side pagination. Ant Design Table v5 is a controlled component; it does not automatically adjust the current value when the total prop shrinks, so an empty data state will appear if the existing page index exceeds the new maximum page.

The recommended pattern is to keep current and pageSize in the parent component’s state, recompute the maximum allowable page after each data fetch, and clamp the current value before rendering the Table.

1. Store current and pageSize in state and pass them to the Table via the pagination prop.
2. On the onChange handler, trigger the API request with the new page and size values.
3. After receiving the response, calculate maxPage = Math.max(1, Math.ceil(total / pageSize)). If the stored current is greater than maxPage, set current = maxPage (or 1 when total is zero) before the next render.
4. Guard the state update so it runs only when current actually changes to avoid triggering a second fetch.
5. Optionally reset to page 1 whenever the filter or sorter changes, ensuring the user starts from a valid page.

There are no Ant Design props or lifecycle hooks that automatically clamp the page index. The component relies on the parent to manage state, and any automatic adjustment would conflict with the controlled‑component contract, potentially causing unintended navigation or extra requests.

Verification steps: render a controlled Table with a known total, simulate a filter that reduces the total so that maxPage < current, and confirm the Table shows an empty state. Apply the clamp logic, re‑render, and verify that the Table navigates to the last valid page and loads the correct data without a manual click. Also test that changing pageSize updates maxPage and clamps current appropriately.