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,38 +21,99 @@ 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 = () => {
-	return (
-		<Col>
-			<Row style={{ marginLeft: 1 }}>
-				<CSVLink data={data} filename={'data-table'}>
-					<Button variant="outline-dark" style={{ marginTop: '.5em' }}>
-						<FaFileCsv style={{ margin: '0 2 5 0' }} />
-						Export to CSV
-					</Button>
-				</CSVLink>
-			</Row>
-			<Table striped bordered hover size="sm" style={{ margin: '1em 0 0 0' }}>
-				<thead style={{ backgroundColor: '#49b9ff', color: 'white' }}>
-					<tr>
-						<th>Site</th>
-						<th>People</th>
-						<th>Revenue</th>
-						<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>
+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 }}>
+					<CSVLink data={data} filename={'data-table'}>
+						<Button variant="outline-dark" style={{ marginTop: '.5em' }}>
+							<FaFileCsv style={{ margin: '0 2 5 0' }} />
+							Export to CSV
+						</Button>
+					</CSVLink>
+				</Row>
+				<Table striped bordered hover size="sm" style={{ margin: '1em 0 0 0' }}>
+					<thead style={{ backgroundColor: '#49b9ff', color: 'white' }}>
+						<tr>
+							<th>Site</th>
+							<th>People</th>
+							<th>Revenue</th>
+							<th>Timestamp</th>
 						</tr>
-					))}
-				</tbody>
-			</Table>
-		</Col>
-	);
-};
-export default DataTable;
+					</thead>
+					<tbody>{renderItem}</tbody>
+				</Table>
+				<Pagination size="sm" style={{ marginTop: 5 }}>
+					<Pagination.Prev onClick={this.prevClick} />
+					{renderPageNumbers}
+					<Pagination.Next onClick={this.nextClick} />
+				</Pagination>
+			</Col>
+		);
+	}
+}