Handle Pagination Sorting and Filtering Separately in Antd Table React

user_10437046 0
Viewed 18491

I want to handle server-side sorting, filtering, and pagination separately in my antd table. So whenever pagination is changed it should not call the sorting and filtering function. similarly for both for sorting and filtering. In the antd documentation for Table, they have used onChange prop which will be called whenever sorting, filtering or pagination is changed. https://ant.design/components/table/#components-table-demo-ajax

To handle pagination alone I've used Pagination's onChange prop. But here when pagination is changed it's calling sorting and filtering function and also when sorting and filtering is changed it calls the pagination function.

I'm not sure how to achieve this functionality. Can anyone please help me with this.

Example antd code for the table 

const handlePagination = page => {
    //This should be called only when pagination changes
    dispatch(PaginateData(page));
};

const handleSortFilter= params=> {
    //This should be called only when pagination or sorting is called.
    dispatch(SortFilterData(params));
};

<Table
    rowSelection={rowSelection}
    onChange={handleSortFilter}
    rowKey={record => record.id}
    columns={columns}
    dataSource={data}
    loading={tableActionInProgress}
    pagination={{
        onChange: handlePagination,
        pageSize: dataPerPage,
        total: CountData
    }}
/>

Update In the the antd table documentation for ajax requests (https://ant.design/components/table/#components-table-demo-ajax) I could see that whenever we change sort or filter it changes the page back to 1. Is there anything I need to change in the code so that whenever filter or sorting is changed it should not set the page parameter to 1.

Why I need to perform this is because when the user changes the filter or sorting in a specific page it should not take him back to the first page instead if I get in which page (page number) the user tried to filter or sort, so that I can send the page number in the request and filter/sort accordingly to the page in the backend and send the response back. Is there any option not to set the page back to 1 if sorting or filtering is applied on the antd table.

antd react-hooks reactjs
1 Answers

For manage filters, sort and pagination in backend you need to use api parameter of table onChange:

<Table
    columns={[
      //...
    ]}
    rowKey="key"
    dataSource={youSource}
    onChange={handleChange}
    pagination={{
       total: totalCount // total count returned from backend
    }}
/>

Our handleChange:

const handleChange = (pagination, filters, sorter) => {
  const offset = pagination.current * pagination.pageSize - pagination.pageSize;
  const limit = pagination.pageSize;
  const params = {};

  if (sorter.hasOwnProperty("column")) {
    params.order = { field: sorter.field, dir: sorter.order };
  }

  getData(offset, limit, params);
};

Getting data from API:

const getData = (offset, limit, params = false) => {

  const queryParams = new URLSearchParams();

  queryParams.append("offset", offset);
  queryParams.append("limit", limit);
  queryParams.append("offset", offset);

  if(params && params.order) {
    queryParams.append("order", JSON.stringify(params.order));
  }

  // In this example I use axios to fetch
  axios
    .get(`https://example.com/you/endpoint/?${queryParams.toString()}`)
    .then((response) => {
      // get response
      console.log("Response: ", response);
    })
    .catch((err) => {
      // Handle error
      console.log(err);
    });
};

You already decide how fetch data, or if you have possibility to implement backend logic, implement query with params from GET.

user_86605270
Related