ReactJS - Pagination

React provides pagination component through third party UI component library. React community provides a large collection of UI / UX components and it is tough to choose the right library for our requirement. Bootstrap UI library is one of the popular choice for the developer and it is extensively used. React Bootstrap (https://react-bootstrap.github.io/) has ported almost all the bootstrap UI components and it has best support for Pagination component as well.

Let us learn how to use Pagination component from react-bootstrap library in this chapter.

Pagination component

Pagination component allows the developer to create simple pagination with bootstrap design in a web application. Pagination component accepts below components.

Pagination.Item
Pagination.First
Pagination.Last
Pagination.Previous
Pagination.Next

Pagination component accepts a small set of props to customize the pagination component and they are as follows −

size (sm | lg)
Set the size of the pagination buttons
bsPrefix (string)
Enables to change the underlying component CSS

Pagination.Item component accepts a small set of props to customize the pagination component and they are as follows −

active (boolean)
Set the item as active one and don't render a tag.
activeLabel (string)
Label to indicate the state of the pagination item
disabled (boolean)
Disable the pagination item
href (string)
Link for the pagination item
onClick (function)
Callback function to be called when onClick event is fired

Applying Pagination component

First of all, create a new react application and start it using below command.

create-react-app myapp
cd myapp
npm start

Next, install the bootstrap library using below command,

npm install --save bootstrap react-bootstrap

Next, open App.css (src/App.css) and remove all the CSS classes.

// remove the css

Next, create a simple pagination component, SimplePagination (src/Components/SimplePagination.js) as shown below −

import React from 'react';
import { Table, Pagination } from 'react-bootstrap';
class SimplePagination extends React.Component {
   render() {
      <div>Pagination component</div>
   }
}
export default SimplePagination;

Next, create a file, users.json under public folder and populate with below user information,

[
   {
      "id":1,
      "name":"Fowler",
      "age":18
   },
   {
      "id":2,
      "name":"Donnell",
      "age":24
   },
   {
      "id":3,
      "name":"Pall",
      "age":26
   },
   {
      "id":4,
      "name":"Christos",
      "age":19
   },
   {
      "id":5,
      "name":"Dud",
      "age":29
   },
   {
      "id":6,
      "name":"Rayner",
      "age":22
   },
   {
      "id":7,
      "name":"Somerset",
      "age":31
   },
   {
      "id":8,
      "name":"Stavros",
      "age":32
   },
   {
      "id":9,
      "name":"Cody",
      "age":19
   },
   {
      "id":10,
      "name":"Sharai",
      "age":19
   },
   {
      "id":11,
      "name":"Kristo",
      "age":28
   },
   {
      "id":12,
      "name":"Harvey",
      "age":27
   },
   {
      "id":13,
      "name":"Christen",
      "age":27
   },
   {
      "id":14,
      "name":"Hillard",
      "age":19
   },
   {
      "id":15,
      "name":"Jaine",
      "age":32
   },
   {
      "id":16,
      "name":"Annabel",
      "age":29
   },
   {
      "id":17,
      "name":"Hildagarde",
      "age":29
   },
   {
      "id":18,
      "name":"Cherlyn",
      "age":18
   },
   {
      "id":19,
      "name":"Herold",
      "age":32
   },
   {
      "id":20,
      "name":"Gabriella",
      "age":32
   },
   {
      "id":21,
      "name":"Jessalyn",
      "age":32
   },
   {
      "id":22,
      "name":"Opal",
      "age":31
   },
   {
      "id":23,
      "name":"Westbrooke",
      "age":27
   },
   {
      "id":24,
      "name":"Morey",
      "age":22
   },
   {
      "id":25,
      "name":"Carleton",
      "age":26
   },
   {
      "id":26,
      "name":"Cosimo",
      "age":22
   },
   {
      "id":27,
      "name":"Petronia",
      "age":23
   },
   {
      "id":28,
      "name":"Justino",
      "age":32
   },
   {
      "id":29,
      "name":"Verla",
      "age":20
   },
   {
      "id":30,
      "name":"Lanita",
      "age":18
   },
   {
      "id":31,
      "name":"Karlik",
      "age":23
   },
   {
      "id":32,
      "name":"Emmett",
      "age":22
   },
   {
      "id":33,
      "name":"Abran",
      "age":26
   },
   {
      "id":34,
      "name":"Holly",
      "age":23
   },
   {
      "id":35,
      "name":"Beverie",
      "age":23
   },
   {
      "id":36,
      "name":"Ingelbert",
      "age":27
   },
   {
      "id":37,
      "name":"Kailey",
      "age":30
   },
   {
      "id":38,
      "name":"Ralina",
      "age":26
   },
   {
      "id":39,
      "name":"Stella",
      "age":29
   },
   {
      "id":40,
      "name":"Ronnica",
      "age":20
   },
   {
      "id":41,
      "name":"Brucie",
      "age":20
   },
   {
      "id":42,
      "name":"Ryan",
      "age":22
   },
   {
      "id":43,
      "name":"Fredek",
      "age":20
   },
   {
      "id":44,
      "name":"Corliss",
      "age":28
   },
   {
      "id":45,
      "name":"Kary",
      "age":32
   },
   {
      "id":46,
      "name":"Kaylee",
      "age":21
   },
   {
      "id":47,
      "name":"Haskell",
      "age":25
   },
   {
      "id":48,
      "name":"Jere",
      "age":29
   },
   {
      "id":49,
      "name":"Kathryne",
      "age":31
   },
   {
      "id":50,
      "name":"Linnea",
      "age":21
   },
   {
      "id":51,
      "name":"Theresina",
      "age":24
   },
   {
      "id":52,
      "name":"Arabela",
      "age":32
   },
   {
      "id":53,
      "name":"Howie",
      "age":22
   },
   {
      "id":54,
      "name":"Merci",
      "age":21
   },
   {
      "id":55,
      "name":"Mitchel",
      "age":30
   },
   {
      "id":56,
      "name":"Clari",
      "age":18
   },
   {
      "id":57,
      "name":"Laurena",
      "age":19
   },
   {
      "id":58,
      "name":"Odessa",
      "age":30
   },
   {
      "id":59,
      "name":"Pippy",
      "age":25
   },
   {
      "id":60,
      "name":"Wilmar",
      "age":23
   },
   {
      "id":61,
      "name":"Cherianne",
      "age":24
   },
   {
      "id":62,
      "name":"Huberto",
      "age":25
   },
   {
      "id":63,
      "name":"Ariella",
      "age":26
   },
   {
      "id":64,
      "name":"Lorant",
      "age":30
   },
   {
      "id":65,
      "name":"Francesca",
      "age":25
   },
   {
      "id":66,
      "name":"Ingamar",
      "age":28
   },
   {
      "id":67,
      "name":"Myrta",
      "age":27
   },
   {
      "id":68,
      "name":"Nicolette",
      "age":26
   },
   {
      "id":69,
      "name":"Petra",
      "age":22
   },
   {
      "id":70,
      "name":"Cyrill",
      "age":27
   },
   {
      "id":71,
      "name":"Ad",
      "age":23
   },
   {
      "id":72,
      "name":"Denys",
      "age":22
   },
   {
      "id":73,
      "name":"Karilynn",
      "age":23
   },
   {
      "id":74,
      "name":"Gunner",
      "age":30
   },
   {
      "id":75,
      "name":"Falkner",
      "age":20
   },
   {
      "id":76,
      "name":"Thurston",
      "age":19
   },
   {
      "id":77,
      "name":"Codi",
      "age":30
   },
   {
      "id":78,
      "name":"Jacob",
      "age":31
   },
   {
      "id":79,
      "name":"Gasparo",
      "age":26
   },
   {
      "id":80,
      "name":"Mitzi",
      "age":29
   },
   {
      "id":81,
      "name":"Rubetta",
      "age":21
   },
   {
      "id":82,
      "name":"Clary",
      "age":20
   },
   {
      "id":83,
      "name":"Oliviero",
      "age":24
   },
   {
      "id":84,
      "name":"Ranique",
      "age":21
   },
   {
      "id":85,
      "name":"Shae",
      "age":24
   },
   {
      "id":86,
      "name":"Woodrow",
      "age":20
   },
   {
      "id":87,
      "name":"Junia",
      "age":31
   },
   {
      "id":88,
      "name":"Athene",
      "age":26
   },
   {
      "id":89,
      "name":"Veriee",
      "age":18
   },
   {
      "id":90,
      "name":"Rickie",
      "age":30
   },
   {
      "id":91,
      "name":"Carly",
      "age":23
   },
   {
      "id":92,
      "name":"Vern",
      "age":19
   },
   {
      "id":93,
      "name":"Trix",
      "age":26
   },
   {
      "id":94,
      "name":"Lenore",
      "age":20
   },
   {
      "id":95,
      "name":"Hanna",
      "age":30
   },
   {
      "id":96,
      "name":"Dominique",
      "age":21
   },
   {
      "id":97,
      "name":"Karlotta",
      "age":22
   },
   {
      "id":98,
      "name":"Levey",
      "age":20
   },
   {
      "id":99,
      "name":"Dalila",
      "age":18
   },
   {
      "id":100,
      "name":"Launce",
      "age":21
   }
]

Next, add a constructor in the SimplePagination component and set initial state as shown below −

constructor(props) {
   super(props);
   this.state = {
      users: [],
      usersToBeShown: [],
      currentPage: 1
   }
};

Next, add componentDidMount lifecycle event and add below code to fetch and process the user information.

componentDidMount() {
   fetch('users.json')
      .then((response) => response.json())
      .then((data) => {
         // console.log(data);
         this.setState({
            users: data,
            pageSize: 3,
            usersToBeShown: [],
            pageArray: []
         });
         this.calculatePaginationDetails(1)
   });
}

Next, implement the pagination logic in the calculatePaginationDetails method as shown below −

calculatePaginationDetails = (page) => {
   console.log(page)
   let users = this.state.users;
   let total = users.length;
   let pages = Math.floor((users.length / this.state.pageSize) + 1);
   let firstPage = 1;
   let lastPage = pages;
   let pageArray = []
   let usersToBeShown = []
   let currentPage = 1;
   if(page.toString().toLowerCase().indexOf('previous') > 0) {
      currentPage = this.state.currentPage - 1;
      if(currentPage < 1) {
         currentPage = 1
      }
   } else if(page.toString().toLowerCase().indexOf('next') > 0) {
      currentPage = this.state.currentPage + 1;
      if(currentPage > pages) {
         currentPage = pages;
      }
   } else if(page.toString().toLowerCase().indexOf('first') > 0) {
      currentPage = 1
   } else if(page.toString().toLowerCase().indexOf('last') > 0) {
      currentPage = pages;
   } else {
      currentPage = parseInt(page);
   }
   console.log(parseInt(page))
   console.log(currentPage)
   for(let i = currentPage; i <= currentPage + 4; i++) {
      if(i <= pages)
      pageArray.push(i)
   }
   let currentItemIndex = (currentPage - 1) * this.state.pageSize;
   for(let i = currentItemIndex; i < currentItemIndex + 3 && i <= (total - 1); i++) {
      usersToBeShown.push(users[i])
   }
   let updatedState = {
      usersToBeShown: usersToBeShown,
      pageArray: pageArray,
      firstPage: firstPage,
      lastPage: lastPage,
      currentPage: currentPage
   }
   console.log(updatedState)
   this.setState({
      usersToBeShown: usersToBeShown,
      pageArray: pageArray,
      firstPage: firstPage,
      lastPage: lastPage,
      currentPage: currentPage
   });
}

Next, add an event handler to process the pagination and set the data based on user's selection of page as shown below −

handlePagination = (e) => {
   e.preventDefault();
   console.log(e.target);
   if(e.target.text != undefined) {
      this.calculatePaginationDetails(e.target.text);
   }
}

Next, render the data using Table component and pagination using Pagination component.

render() {
   return (
      <>
         <Table bordered hover striped>
            <thead>
               <tr>
                  <th>#</th>
                  <th>Name</th>
                  <th>Age</th>
                  <th>Email</th>
               </tr>
            </thead>
            <tbody>{
               this.state.usersToBeShown && this.state.usersToBeShown.length &&
               this.state.usersToBeShown.map(
                  (item) => (
                     <tr key={item.id}>
                        <td>{item.id}</td>
                        <td>{item.name}</td>
                        <td>{item.age}</td>
                        <td>{item.name.toLowerCase()}.example@tutorialspoint.com</td>
                     </tr>
                  )
               )
            }
            </tbody>
         </Table>
         <Pagination>
            <Pagination.First onClick={(e) => this.handlePagination(e)} />
            <Pagination.Prev onClick={(e) => this.handlePagination(e)} />{
               this.state.pageArray && this.state.pageArray.length &&
               this.state.pageArray.map(
                  (item) => (
                     <Pagination.Item key={item} onClick={(e) => this.handlePagination(e)}
                     active={this.state.currentPage == item}>{item}</Pagination.Item>
                  )
               )
            }
            <Pagination.Next onClick={(e) => this.handlePagination(e)} />
            <Pagination.Last onClick={(e) => this.handlePagination(e)} />
         </Pagination>
      </>
   );
}

Next, open App component (src/App.js), import the bootstrap css and update the content with SimplePagination component as shown below −

import './App.css'
import "bootstrap/dist/css/bootstrap.min.css";
import SimplePagination from './Components/SimplePagination'
function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <SimplePagination />
            </div>
         </div>
      </div>
   );
}
export default App;

Finally, open the application in the browser and check whether the pagination is working properly as shown below −

Summary

React Bootstrap pagination component provides necessary component to render simple as well as complex pagination design.