Today we will show you how to implement server side pagination with React DataTable. In the previous article, we have explained about the client side pagination with DataTable in React.

For the demonstration, we’ll use the REQ | RES fake API to get the data for the table records.

Steps to implement server side pagination

1. Implement the datatable in React
2. Add axios for API call
3. Add server side pagination
4. Output

1. Implement the datatable in React

Let’s implement the datatable in react with pagination. We will use react-data-table-component npm package for datatable and implement client side pagination. 

2. Add axios for API call

Let’s install axios package for API call. You can use the window.fetch as an alternative way to manage the API call. Refer to the following article for step by step instruction.

Use following code to call REQ | RES API and manage the user data in state variables using React Hooks.

const [users, setUsers] = useState({});
const [page, setPage] = useState(1);
const countPerPage = 3;
const getUserList = () => {
  axios.get(`https://reqres.in/api/users?page=${page}&per_page=${countPerPage}&delay=1`).then(res => {
    setUsers(res.data);
  }).catch(err => {
    setUsers({});
  });
}
useEffect(() => {
  getUserList();
}, [page]);

3. Add server side pagination

To add the server side pagination, we have to slightly update the client side pagination attributes.

• pagination & paginationServer – Set the both attributes to enable the pagination for server pagination.
• paginationPerPage – The paginationPerPage attribute is used to display the number of the rows per page.
• paginationTotalRows – To set the total count of the user list.
• paginationComponentOptions – It’s used to override the options for the built in pagination component. To hide the rows per page dropdown, we will set the noRowsPerPage to true.
• onChangePage – To handle the onChange event of the pagination.

<DataTable
  title="Employees"
  columns={columns}
  data={users.data}
  highlightOnHover
  pagination
  paginationServer
  paginationTotalRows={users.total}
  paginationPerPage={countPerPage}
  paginationComponentOptions={{
    noRowsPerPage: true
  }}
  onChangePage={page => setPage(page)}
/>

Let’s combine all code together and see how it works in the browser.

import React, { useState, useEffect } from 'react';
import DataTable from 'react-data-table-component';
import axios from 'axios';
const columns = [
  {
    name: 'Avatar',
    cell: row => <img height="30px" width="30px" alt={row.first_name} src={row.avatar} />,
  },
  {
    name: 'First Name',
    selector: 'first_name',
  },
  {
    name: 'Last Name',
    selector: 'last_name',
  },
  {
    name: 'Email',
    selector: 'email',
  }
];
function App() {
  const [users, setUsers] = useState({});
  const [page, setPage] = useState(1);
  const countPerPage = 3;
  const getUserList = () => {
    axios.get(`https://reqres.in/api/users?page=${page}&per_page=${countPerPage}&delay=1`).then(res => {
      setUsers(res.data);
    }).catch(err => {
      setUsers({});
    });
  }
  useEffect(() => {
    getUserList();
  }, [page]);
  return (
    <div className="App">
      <h3>Server side pagination in DataTable - <a href="https://www.nepalesexpress.com" target="_blank" rel="noopener noreferrer">Nepalese Express</a></h3>
      <DataTable
        title="Employees"
        columns={columns}
        data={users.data}
        highlightOnHover
        pagination
        paginationServer
        paginationTotalRows={users.total}
        paginationPerPage={countPerPage}
        paginationComponentOptions={{
          noRowsPerPage: true
        }}
        onChangePage={page => setPage(page)}
      />
    </div>
  );
}
export default App;