Ant Design Table pagination state synchronization during dynamic total updates

Answer

Ant Design’s Table does not automatically reset current when total changes. The component only recalculates the page count; it keeps the existing current value. Therefore, to force a jump to the first page after an external filter updates total, you must explicitly set current to 1 in your pagination state.

Confirmed behavior (Ant Design 5.x)

• The pagination object is fully controlled by the props you pass.
• Changing total alone will recalc the number of pages but leave current untouched.
• If current exceeds the new maximum page number, the pager will still display the out‑of‑range value until you adjust it.

Typical implementation

const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [total, setTotal] = useState(0);
const [data, setData] = useState([]);

const fetchData = async (pageNum, size) => {
  const res = await api.fetch({ page: pageNum, size });
  setData(res.items);
  setTotal(res.total); // <‑ total updated by filter
};

// React effect: reset page when total changes
useEffect(() => {
  if (page > Math.ceil(total / pageSize)) {
    setPage(1); // force first page
  }
}, [total, pageSize]);

const handleTableChange = (pagination) => {
  setPage(pagination.current);
  setPageSize(pagination.pageSize);
  fetchData(pagination.current, pagination.pageSize);
};

return (
  <Table
    dataSource={data}
    pagination={{
      current: page,
      pageSize,
      total,
      onChange: handleTableChange,
    }}
  />
);

Why you need to manage it manually

Ant Design’s Table has no built‑in “reset‑on‑total‑change” flag. The component assumes that the parent controls the pagination state. Hence the only reliable trigger is to update the current prop yourself.

Diagnostic check

If the table still jumps to page 1 unexpectedly after you set current to 1, verify that you are not inadvertently resetting current elsewhere in your component (for example, by re‑initializing the state on every render or by passing an uncontrolled pagination object). Ensuring that the pagination prop is a stable object will keep the UI in sync.