add pagination to datatable

src/components/DataTable.js

 import React from 'react';
-import { Col, Table, Row, Button } from 'react-bootstrap';
+import { Col, Table, Row, Button, Pagination } from 'react-bootstrap';
 import { CSVLink } from 'react-csv';
 import { FaFileCsv } from 'react-icons/fa';
-const data = [
+
+const mockdata = [
 	{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
 	{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
 	{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
@@ -20,7 +21,72 @@ const data = [
 	{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
 	{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
 ];
-const DataTable = () => {
+export default class DataTable extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			data: mockdata,
+			activePage: 1,
+			itemsPerPage: 10,
+		};
+		this.handleClick = this.handleClick.bind(this);
+		this.prevClick = this.prevClick.bind(this);
+		this.nextClick = this.nextClick.bind(this);
+	}
+
+	handleClick(e) {
+		this.setState({
+			activePage: Number(e.target.id),
+		});
+	}
+	prevClick() {
+		this.setState({
+			activePage: this.state.activePage - 1,
+		});
+	}
+	nextClick() {
+		this.setState({
+			activePage: this.state.activePage + 1,
+		});
+	}
+	render() {
+		const { data, activePage, itemsPerPage } = this.state;
+		const lastIndex = activePage * itemsPerPage;
+		const firstIndex = lastIndex - itemsPerPage;
+		const currentItem = data.slice(firstIndex, lastIndex);
+
+		const renderItem = currentItem.map((item, index) => {
+			return (
+				<tr key={index}>
+					<td>{item.site}</td>
+					<td>{item.people}</td>
+					<td>{item.revenue}</td>
+					<td>{item.timestamp}</td>
+				</tr>
+			);
+		});
+
+		const pageNumbers = [];
+		for (let i = 1; i <= Math.ceil(data.length / itemsPerPage); i++) {
+			pageNumbers.push(i);
+		}
+
+		const renderPageNumbers = pageNumbers.map(number => {
+			if (number == activePage) {
+				return (
+					<Pagination.Item active key={number} id={number} onClick={this.handleClick}>
+						{number}
+					</Pagination.Item>
+				);
+			} else {
+				return (
+					<Pagination.Item key={number} id={number} onClick={this.handleClick}>
+						{number}
+					</Pagination.Item>
+				);
+			}
+		});
+
 		return (
 			<Col>
 				<Row style={{ marginLeft: 1 }}>
@@ -40,18 +106,14 @@ const DataTable = () => {
 							<th>Timestamp</th>
 						</tr>
 					</thead>
-				<tbody>
-					{data.map((item, index) => (
-						<tr key={index}>
-							<td>{item.site}</td>
-							<td>{item.people}</td>
-							<td>{item.revenue}</td>
-							<td>{item.timestamp}</td>
-						</tr>
-					))}
-				</tbody>
+					<tbody>{renderItem}</tbody>
 				</Table>
+				<Pagination size="sm" style={{ marginTop: 5 }}>
+					<Pagination.Prev onClick={this.prevClick} />
+					{renderPageNumbers}
+					<Pagination.Next onClick={this.nextClick} />
+				</Pagination>
 			</Col>
 		);
-};
-export default DataTable;
+	}
+}