1

Using antd 4.22.8 with react 18.2.0 (cra). Typescript code ahead

I'm using this code to fetch the data I need to show

const [pagination, setPagination] = useState<TablePaginationConfig>({
    current: 1,
    pageSize: 10
});

const [sort, setSort] = useState<SorterResult<FOO>>();

const [searchString, setSearchString] = useState<string>();

const [{ data, loading, error }, refetch] = useAxios<FOO[]>({
    url: '/endpoint',
    params: { skip: ((pagination.current ?? 0) - 1) * (pagination.pageSize ?? 0), take: pagination.pageSize, sortField: sort?.field, sortDirection: sort?.order, search: searchString }
});

const onTableChange: TableProps<FOO>['onChange'] = (pagination, _filters, sorter) => {
    setPagination(pagination);
    setSort(sorter as SorterResult<FOO>);
};

and this is how the data is shown

<Input.Search placeholder="Search" allowClear onChange={e => setSearchString(e.target.value)} />

<Table
    rowKey={record => record.id}
    loading={loading}
    columns={[
        {
            title: 'ICCID',
            dataIndex: 'id',
            sorter: true
        },
        {
            title: 'Name',
            dataIndex: 'name',
            sorter: true
        }
    ]}
    dataSource={data?.data}
    pagination={{ position: ['topRight', 'bottomRight'], total: data?.count ?? 0, ...pagination }}
    onChange={onTableChange}
/>

The problem arises with the pagination in this component. Imagine these 2 use case:

You never changed page: I can use the search field to perform some search. Pagination changes correctly reflecting the data that came from the endpoint (different page count, etc...).

I've changed the page: on the first load the endpoint returns quite lot of record and you move to, say, page 4 clicking on the relative button on the paginator component. Then perform a search: data returns correctly but pagination does not reflect changes anymore. Page count is still pre-search, and so is the selected page, but not showing page 4 of the freshly searched dataset, but page 1.

What I'd expect is the pagination component is reset itself after dataset changes, as it does when changing pages or sort

Valerio
  • 3,297
  • 3
  • 27
  • 44
  • did you try to play with `current` property? https://ant.design/components/pagination/ – Mateusz Sep 02 '22 at 10:25
  • The problem isn't about page number itself, is the paginator that does not update itself anymore. If I go to page X, then go back to page 1, and change the search string to narrow the search, while the results itself are correct, the paginator is still in the old state, with the same page count etc. – Valerio Sep 02 '22 at 13:28

0 Answers0