ReactJS – Pagination
”; Previous Next
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;