Pagination for Table in ReactJS or React.js

Hi All,

In this blog I am going to show you how you can create the pagination in ReactJS fixed data table.

The pagination component comes with built-in styles. HTML layout is compatible with bootstrap pagination stylesheets.

To use the pagination feature given by ReactJS, we need to install the library related to this.  To install it we need to run the following command in command prompt window:

npm install react-bootstrap --save

Then you have to import this library in your code as follows:

import {Pagination} from 'react-bootstrap';


Then you have to reference the  bootstrap.min.css in your html file as follows:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

 Once all the above thing is done we are good to go for the rendering our pagination component component. 

The pagination component will look like as below:

In my example I have integrated this pagination component with the fixed data table of the example given in the following link:

http://www.code4fusion.com/2016/09/showing-data-in-tabular-format-using.html

I have used this as a example and done the pagination in the table with little bit of modifications.

So for getting pagination component I have written the following code:

<Pagination
        prev
        next
        first
        last
        ellipsis
        boundaryLinks
        items={count}
        maxButtons={count}
        activePage={this.state.activePage}
        onSelect={this.handleSelect} />

To handle the selection of pages I have written the following lines of code:

handleSelect(eventKey) {
    var depArr=this.state.departments1;
    var activePageNum=this.state.activePage;
      if(activePageNum<eventKey){
         this.setState({departments: depArr.slice(this.state.activePage*10,eventKey*10)});
       }else{
         this.setState({departments: depArr.slice(eventKey*10-10,eventKey*10)});
       }
        this.setState({
            activePage: eventKey
        });
   }

once you written this code you can see that component is rendered as follows:

You complete code for jsx file should look like this after adding the pagination component.

import React from "react";
import ReactDOM from "react-dom";
import {Table, Column, Cell} from 'fixed-data-table';
import {Pagination} from 'react-bootstrap';

var divStyleRight = {
padding:'0px 0px 0px 375px'
};


var DepartmentGridTable = React.createClass({
 getInitialState: function() {
    return {
    departments: [],  departments1:[], rows:[],  activePage: ""
    };
  },
  handleSelect(eventKey) {
    var depArr=this.state.departments1;
    var activePageNum=this.state.activePage;
      if(activePageNum<eventKey){
         this.setState({departments: depArr.slice(this.state.activePage*10,eventKey*10)});
       }else{
         this.setState({departments: depArr.slice(eventKey*10-10,eventKey*10)});
       }
        this.setState({
            activePage: eventKey
        });
   },
componentDidMount: function() {
     $.ajax({
      url: this.props.dataUrl,
      dataType: 'json',
      success: function(data) {
      var deptArray=[];
      var arrayLength = data.length; 
        for (var i = 0; i < arrayLength; i++) {
           deptArray.push(
                         {                     
                        "id" : i+1,
                        departmentId: data[i].departmentId,
                        departmentName:  data[i].departmentName
                         });

        }
       
         this.setState({departments: deptArray.slice(0,10)});
         this.setState({
      activePage: 1
    });
         this.setState({departments1: deptArray});
         }.bind(this),
         error: function(xhr, status, err) {
              console.error(this.props.dataUrl, status, err.toString());
         }.bind(this)
       });
  },
   render: function(){
         var rows1 = this.state.departments1;
         var rows = this.state.departments;
         var count = Math.ceil(rows1.length/10);

        return (<div><Table
                filterable={['id', 'departmentId', 'departmentName']}
                noDataText="No matching records found"
                height={385}
                width={600}
                rowsCount={rows.length}
                rowHeight={30}
                headerHeight={80}
                rowGetter={function(rowIndex) {return rows[rowIndex]; }}>
                <Column dataKey="id" width={200} height={50} label="Serial Number"/>
                <Column dataKey="departmentId" width={200} label="Department ID"/>
                <Column dataKey="departmentName" width={200} label="Department Name"/>
               </Table> <div style={divStyleRight}>
         <Pagination
             prev
             next
             first
             last
             ellipsis
             boundaryLinks
             items={count}
             maxButtons={count}
             activePage={this.state.activePage}
             onSelect={this.handleSelect} />
        </div>
        </div>
               );
     }

 });

ReactDOM.render(
 <DepartmentGridTable dataUrl ="http://localhost:9001/TestRestEasy/rest/departments/"/>,
     document.querySelector("#container")
);

And your HTML code should look like this:

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/fixed-data-table/0.6.3/fixed-data-table.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/fixed-data-table/0.6.3/fixed-data-table.min.css"></script>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/fixed-data-table/0.6.3/fixed-data-table.css" rel="stylesheet">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
  <div id="container"></div>
  <script src="output/myCode.js"></script>
</body>
</html>

 Once you run the page and click on the different page numbers in the pagination component, you can that the record in the table are changing accordingly.

That is all about on pagination in ReactJS or React.js.

Happy Coding :)