Implement Server Side Pagination in React Table

In this tutorial, I will show you how to make React Table Pagination (Server-side) using a React Hooks Application using react-table v7 for data table with data using Axios for API call.

We show you the working example of Server Side Pagination in React Table here:
Here we are using functional components so we are using useState, useEffect hooks here for state Updates and manipulation.
For API calls, we are using Axios and “react-data-table-component” for Table rendering. Please see basic example here, if you have any issue or any confusion comment below.

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 = 5;

  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://crackaccount.com"
          target="_blank"
          rel="noopener noreferrer"
        >
          Crackaccount
        </a>
      </h3>
      <DataTable
        title="Crackaccount"
        columns={columns}
        data={users.data}
        highlightOnHover
        pagination
        paginationServer
        paginationTotalRows={users.total}
        paginationPerPage={countPerPage}
        paginationComponentOptions={{
          noRowsPerPage: true
        }}
        onChangePage={(page) => setPage(page)}
      />
    </div>
  );
}

export default App;