Pagination with React

Pagination is used for tear down of large data and displaying it in a specific manner with a specific page size. In our solution we have the code which includes pagination because it comes with inbuilt functionality and is very easy to use.

1{import React from "react";
2import { render } from "react-dom";
3import { makeData, Logo, Tips } from "./Utils";
4
5// Import React Table
6import ReactTable from "react-table";
7import "react-table/react-table.css";
8
9class App extends React.Component {
10  constructor() {
11    super();
12    this.state = {
13      data: makeData()
14    };
15  }
16
17  render() {
18    var { data } = this.state;
19    data = data.map((row) => {
20      row.ImgPath = "https://media4.s-nbcnews.com/j/newscms/2016_36/1685951/ss-160826-twip-05_8cf6d4cb83758449fd400c7c3d71aa1f.nbcnews-ux-2880-1000.jpg";
21      return row;
22    });
23    return (
24      <div>
25        <ReactTable
26          data={data}
27          columns={[
28            {
29              Header: "Name",
30              columns: [
31                {
32                  Header: "First Name",
33                  accessor: "firstName"
34                },
35                {
36                  Header: "Last Name",
37                  id: "lastName",
38                  accessor: d => d.lastName
39                }
40              ]
41            },
42            {
43              Header: "Info",
44              columns: [
45                {
46                  Header: "Age",
47                  accessor: "age"
48                },
49                {
50                  Header: "Status",
51                  Cell: (row) => {
52                    return <div><img height={34} src={row.original.ImgPath}/></div>
53                  },
54                  id: "status"
55                }
56              ]
57            },
58            {
59              Header: 'Stats',
60              columns: [
61                {
62                  Header: "Visits",
63                  accessor: "visits"
64                }
65              ]
66            }
67          ]}
68          defaultPageSize={10}
69          className="-striped -highlight"
70        />
71        <br />
72        <Tips />
73        <Logo />
74      </div>
75    );
76  }
77}
78}

here we includes defaultPageSize=10 in our react table to enable pagination .

We have passed pageSize property while calling the component (as shown above) which specifies how many items are to be shown in table in one page. We have set currentpage to 1 by default and after that we will calculate index of last item which will be currentpage*pagesize (suppose currentpage is 1 and pagesize is 10 so index of last item will be 10), now we will calculate index of first item which will be index of last item-pagesize (index of last item is 10 and pagesize is 10 so it will be 0).