How to implement pagination in ReactJS

Today we’ll show you how to implement pagination in ReactJS. For beginners, there is always the question of how to put the pagination in the website. So in this article, we’ll step by step learn you how to add pagination for records.

How to implement pagination in reactjs, Pagination in ReactJs, React - Pagination Example with example, react js pagination codepen, react-js-pagination css not working, react pagination with api, simple reactstrap pagination, how to create custom pagination in reactjs.

Checkout more articles on ReactJS

Here we’ll implement pagination with the help of npm package. In an alternative way, we can implement custom pagination based on our requirement.

1. Create a simple react application

Let’s start with creating a simple react application using `create-react-app`. Run the following command to create a react app.

npx create-react-app pagination-reactjs

2. Install npm package for pagination

Now we will install react-js-pagination npm package to implement pagination in react application.

Run the following command to install the package.

npm i react-js-pagination

3. Integrate package in react app

Let’s integrate a pagination package in react application. We’ll pass the different params for pagination. Check the following code to implement.

import React, { useState } from 'react';
import Pagination from "react-js-pagination";

function App() {

  // current page
  const [currentPage, setCurrentPage] = useState(1);

  // total records per page to display
  const recordPerPage = 10;

  // total number of the records
  const totalRecords = 850;

  // range of pages in paginator
  const pageRange = 10;

  // handle change event
  const handlePageChange = pageNumber => {
    setCurrentPage(pageNumber);
    // call API to get data based on pageNumber
  }

  return (
    <div className="App">
      <h3>Pagination in ReactJS - <a href="https://www.cluemediator.com" target="_blank">Clue Mediator</a></h3>
      <Pagination
        activePage={currentPage}
        itemsCountPerPage={recordPerPage}
        totalItemsCount={totalRecords}
        pageRangeDisplayed={pageRange}
        onChange={handlePageChange}
      />
    </div>
  );
}

export default App;

4. Add style for pagination

If you run the above project and check it in the browser then style does not appear for pagination.

Add Bootstrap 3 link to make it work. For that you can directly add the Bootstrap 3 styles in `index.html` page.

If you are working with the Bootstrap 4 then you have to add the following params to add style.

<Pagination
  itemClass="page-item" // add it for bootstrap 4
  linkClass="page-link" // add it for bootstrap 4
  activePage={currentPage}
  itemsCountPerPage={recordPerPage}
  totalItemsCount={totalRecords}
  pageRangeDisplayed={pageRange}
  onChange={handlePageChange}
/>

5. Output

After implementing the pagination, your code should look like this.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Pagination - Clue Mediator</title>
  <!-- Bootstrap 4 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

</html>

App.js

import React, { useState } from 'react';
import Pagination from "react-js-pagination";

function App() {

  // current page
  const [currentPage, setCurrentPage] = useState(1);

  // total records per page to display
  const recordPerPage = 10;

  // total number of the records
  const totalRecords = 850;

  // range of pages in paginator
  const pageRange = 10;

  // handle change event
  const handlePageChange = pageNumber => {
    setCurrentPage(pageNumber);
    // call API to get data based on pageNumber
  }

  return (
    <div className="App">
      <h3>Pagination in ReactJS - <a href="https://www.cluemediator.com" target="_blank">Clue Mediator</a></h3>

      <div className="mt-5 mb-3">
        <b>Current Page:</b><span className="ml-2">{currentPage}</span>
      </div>

      <Pagination
        itemClass="page-item" // add it for bootstrap 4
        linkClass="page-link" // add it for bootstrap 4
        activePage={currentPage}
        itemsCountPerPage={recordPerPage}
        totalItemsCount={totalRecords}
        pageRangeDisplayed={pageRange}
        onChange={handlePageChange}
      />
    </div>
  );
}

export default App;

Run the project and check output.

Output - How to implement pagination in ReactJS - Clue Mediator

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

Demo & Source Code

Github Repository StackBlitz Project