score:13

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.


Related Query

More Query from same tag