Server side pagination with React DataTable

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

Implement the datatable in React
Add axios for API call
Add server side pagination
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. Refer to the below article for more information.

Datatable with pagination in React

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.

API call in React using fetch

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)}
/>
</datatable>

4. Output

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

App.js

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 class="App">
      <h3>Server side pagination in DataTable - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</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)}
      />
    </datatable></div>
  );
}

export default App;

Output - Server side pagination with React DataTable - Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

Github Repository StackBlitz Project