disable pagination prev and next at first and last page

.firebase/hosting.YnVpbGQ.cache

-asset-manifest.json,1564734803559,87eae226f8cad78180dca70015a66e5ce960f58d9cf49a455cded3f5b65f2b83
-precache-manifest.518ad0f94ed7461ea694a7a52c60f996.js,1564734803559,51effd56d83e3177c94f8f84b36355f216de61a194290849db6fc3b5e240dfdd
-service-worker.js,1564734803559,099ca762e35240c106d5300813e8bef7f4b1ecb283f21d36b96ea8796d54650a
-index.html,1564734803559,c3ce9aceff37773cd8250b735033e3564efad99f35ec5ad6f9aa89591e07baf9
-static/css/2.6edff5b1.chunk.css,1564734803619,d22696c87c057d6462105312ce53dc1dda6a6df0d2a5152df235b068360b1ed4
-static/css/2.6edff5b1.chunk.css.map,1564734803620,756daca795dac6b39811b15d55bd0d5ed0c7b27f065fb9cff5d1b23504658401
-static/js/main.bcf73a9d.chunk.js,1564734803622,e048fb9d589ccfd12640a6bf1a405b8206a2ce5227f0f6be71f3cd84b0d0b93e
-static/js/runtime~main.a8a9905a.js,1564734803619,e1af5f94fdd13901b2e433d0d7607e27c01458151c35b1fe4b7feda2a32b7aa9
-static/js/runtime~main.a8a9905a.js.map,1564734803619,c337bf8b58896da637a6e50ab8cfc779eb1ec42c55f8ec429030a03454a549db
-favicon.ico,1564734751463,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955
-manifest.json,1564734751464,6aaf3d87dd9bb1e96f9c691c50d0ed378ed98a120a76dea78291281834cd36e9
-static/js/main.bcf73a9d.chunk.js.map,1564734803619,ec34eae181a258e2188c72ce064cc3b6ea3bec15100305288e33fb3104d5b831
-static/css/main.892270f9.chunk.css,1564734803560,9b1083842a65b521a1aacf4e2c412c9555e58ac8ebb0f7d668afb5567de2357a
-static/css/main.892270f9.chunk.css.map,1564734803620,985b0f0a0430978ddc9ba1c30a63c13fa83de2bb7881256e38fb6d3eeb5d80f9
-static/js/2.364d8d85.chunk.js,1564734803620,67cbdf0d57ffe7d48d011dfc2725381231c173ef21cb471247c558bd9cdc7be0
-static/js/2.364d8d85.chunk.js.map,1564734803622,4741349fe551a262ded62946bb03eaadeb1afe63d6853bbc3f9f51b414cf93f2
+asset-manifest.json,1564974104591,cd45f738f838f8321d66c508e52d5d0c59ce0896834ef3813e076ddb4520b8c7
+precache-manifest.c7c9d1b5803c6f75bfbaa605e09aa6c9.js,1564974104591,1fc02edaf24ae3e3052851aa8f32db7d2de4c7c687e2f51f75bddc93fe5588bc
+index.html,1564974104591,e0656e15c59068d9c7223f859e392a1cbb4e47e89b78505d27edd86fb0fe42e5
+service-worker.js,1564974104591,45367706a77845d69463e2148e2019f888dfd8ce62b5ccb98837396a840627d8
+static/css/2.6edff5b1.chunk.css,1564974104632,d22696c87c057d6462105312ce53dc1dda6a6df0d2a5152df235b068360b1ed4
+static/js/main.b843d545.chunk.js,1564974104636,b67ce359253a48f82a48fef6d4aec29d916d93c2f86ab2226303f1dc7e7355bd
+favicon.ico,1564974088076,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955
+static/js/runtime~main.a8a9905a.js,1564974104597,e1af5f94fdd13901b2e433d0d7607e27c01458151c35b1fe4b7feda2a32b7aa9
+static/js/runtime~main.a8a9905a.js.map,1564974104634,c337bf8b58896da637a6e50ab8cfc779eb1ec42c55f8ec429030a03454a549db
+static/css/2.6edff5b1.chunk.css.map,1564974104637,756daca795dac6b39811b15d55bd0d5ed0c7b27f065fb9cff5d1b23504658401
+manifest.json,1564974088078,6aaf3d87dd9bb1e96f9c691c50d0ed378ed98a120a76dea78291281834cd36e9
+static/js/main.b843d545.chunk.js.map,1564974104637,9115c97454fbb9957d50f7dd48fc3be905abfb5610c1aca00065dcd88f8a2828
+static/css/main.892270f9.chunk.css,1564974104592,9b1083842a65b521a1aacf4e2c412c9555e58ac8ebb0f7d668afb5567de2357a
+static/css/main.892270f9.chunk.css.map,1564974104637,985b0f0a0430978ddc9ba1c30a63c13fa83de2bb7881256e38fb6d3eeb5d80f9
+static/js/2.81563c8d.chunk.js,1564974104634,b94b181fb5a0decf36c638cdb49b0a55d41bbfb75065eab50799bd212be38cd6
+static/js/2.81563c8d.chunk.js.map,1564974104636,f4a0c9323fbb5bafab9efb9d26875fd4ee5059aafe93c1333352d58280f2389a

src/components/DataCard.js

@@ -76,7 +76,7 @@ const DataCard = props => {
 				}}
 				}}
 			>
 			>
 				<h4 style={{ textAlign: 'center' }}>{data.title}</h4>
 				<h4 style={{ textAlign: 'center' }}>{data.title}</h4>
-				<div style={{ width: '100%', height: 300, padding: '1em' }}>
+				<div style={{ width: '100%', height: 300, padding: '5px' }}>
 					<ResponsiveContainer>
 					<ResponsiveContainer>
 						<AreaChart
 						<AreaChart
 							data={chartdata}
 							data={chartdata}

src/components/DataTable.js

@@ -54,6 +54,7 @@ export default class DataTable extends React.Component {
 		const lastIndex = activePage * itemsPerPage;
 		const lastIndex = activePage * itemsPerPage;
 		const firstIndex = lastIndex - itemsPerPage;
 		const firstIndex = lastIndex - itemsPerPage;
 		const currentItem = data.slice(firstIndex, lastIndex);
 		const currentItem = data.slice(firstIndex, lastIndex);
+		const totalPage = Math.ceil(data.length / itemsPerPage);
 
 
 		const renderItem = currentItem.map((item, index) => {
 		const renderItem = currentItem.map((item, index) => {
 			return (
 			return (
@@ -67,12 +68,12 @@ export default class DataTable extends React.Component {
 		});
 		});
 
 
 		const pageNumbers = [];
 		const pageNumbers = [];
-		for (let i = 1; i <= Math.ceil(data.length / itemsPerPage); i++) {
+		for (let i = 1; i <= totalPage; i++) {
 			pageNumbers.push(i);
 			pageNumbers.push(i);
 		}
 		}
 
 
 		const renderPageNumbers = pageNumbers.map(number => {
 		const renderPageNumbers = pageNumbers.map(number => {
-			if (number == activePage) {
+			if (number === activePage) {
 				return (
 				return (
 					<Pagination.Item active key={number} id={number} onClick={this.handleClick}>
 					<Pagination.Item active key={number} id={number} onClick={this.handleClick}>
 						{number}
 						{number}
@@ -109,9 +110,13 @@ export default class DataTable extends React.Component {
 					<tbody>{renderItem}</tbody>
 					<tbody>{renderItem}</tbody>
 				</Table>
 				</Table>
 				<Pagination size="sm" style={{ marginTop: 5 }}>
 				<Pagination size="sm" style={{ marginTop: 5 }}>
-					<Pagination.Prev onClick={this.prevClick} />
+					{activePage === 1 ? <Pagination.Prev disabled /> : <Pagination.Prev onClick={this.prevClick} />}
 					{renderPageNumbers}
 					{renderPageNumbers}
+					{activePage === totalPage ? (
+						<Pagination.Next disabled />
+					) : (
 						<Pagination.Next onClick={this.nextClick} />
 						<Pagination.Next onClick={this.nextClick} />
+					)}
 				</Pagination>
 				</Pagination>
 			</Col>
 			</Col>
 		);
 		);