Added table pagination

Client/src/Components/BasicTable/index.jsx

@@ -1,3 +1,5 @@
+import PropTypes from "prop-types";
+import { useState, useEffect } from "react";
 import {
   TableContainer,
   Paper,
@@ -6,14 +8,66 @@ import {
   TableRow,
   TableCell,
   TableBody,
-  Pagination,
-  PaginationItem,
+  TablePagination,
+  Box,
+  IconButton,
 } from "@mui/material";
-import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
+import LeftArrowDouble from "../../assets/icons/left-arrow-double.svg?react";
+import RightArrowDouble from "../../assets/icons/right-arrow-double.svg?react";
+import LeftArrow from "../../assets/icons/left-arrow.svg?react";
+import RightArrow from "../../assets/icons/right-arrow.svg?react";
 import "./index.css";
-import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
-import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
+
+const TablePaginationActions = (props) => {
+  const { count, page, rowsPerPage, onPageChange } = props;
+  console.log(count);
+
+  const handleFirstPageButtonClick = (event) => {
+    onPageChange(event, 0);
+  };
+  const handleBackButtonClick = (event) => {
+    onPageChange(event, page - 1);
+  };
+  const handleNextButtonClick = (event) => {
+    onPageChange(event, page + 1);
+  };
+  const handleLastPageButtonClick = (event) => {
+    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+  };
+
+  return (
+    <Box sx={{ flexShrink: 0, ml: 2.5 }}>
+      <IconButton
+        onClick={handleFirstPageButtonClick}
+        disabled={page === 0}
+        aria-label="first page"
+      >
+        <LeftArrowDouble />
+      </IconButton>
+      <IconButton
+        onClick={handleBackButtonClick}
+        disabled={page === 0}
+        aria-label="previous page"
+      >
+        <LeftArrow />
+      </IconButton>
+      <IconButton
+        onClick={handleNextButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+        aria-label="next page"
+      >
+        <RightArrow />
+      </IconButton>
+      <IconButton
+        onClick={handleLastPageButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+        aria-label="last page"
+      >
+        <RightArrowDouble />
+      </IconButton>
+    </Box>
+  );
+};
 
 /**
  * BasicTable Component
@@ -68,10 +122,11 @@ import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
  * <BasicTable data={data} rows={rows} paginated={true} />
  */
 
-const BasicTable = ({ data, paginated, reversed, rowsPerPage = 5 }) => {
+const BasicTable = ({ data, paginated, type, reversed, rows = 5 }) => {
   // Add headers to props validation
 
   const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(rows);
 
   useEffect(() => {
     setPage(0);
@@ -81,6 +136,11 @@ const BasicTable = ({ data, paginated, reversed, rowsPerPage = 5 }) => {
     setPage(newPage);
   };
 
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
   let displayData = [];
 
   if (data && data.rows) {
@@ -94,36 +154,6 @@ const BasicTable = ({ data, paginated, reversed, rowsPerPage = 5 }) => {
     return <div>No data</div>;
   }
 
-  let paginationComponent = <></>;
-  if (paginated === true && data.rows.length > rowsPerPage) {
-    paginationComponent = (
-      <Pagination
-        count={Math.ceil(data.rows.length / rowsPerPage)}
-        page={page + 1}
-        onChange={(event, value) => handleChangePage(event, value - 1)}
-        shape="rounded"
-        renderItem={(item) => (
-          <PaginationItem
-            slots={{
-              previous: ArrowBackRoundedIcon,
-              next: ArrowForwardRoundedIcon,
-            }}
-            {...item}
-            sx={{
-              "&:focus": {
-                outline: "none",
-              },
-              "& .MuiTouchRipple-root": {
-                pointerEvents: "none",
-                display: "none",
-              },
-            }}
-          />
-        )}
-      />
-    );
-  }
-
   return (
     <>
       <TableContainer component={Paper}>
@@ -154,8 +184,16 @@ const BasicTable = ({ data, paginated, reversed, rowsPerPage = 5 }) => {
           </TableBody>
         </Table>
       </TableContainer>
-
-      {paginationComponent}
+      <TablePagination
+        component="div"
+        count={data.rows.length}
+        page={page}
+        onPageChange={handleChangePage}
+        rowsPerPage={rowsPerPage}
+        rowsPerPageOptions={[5, 10, 15, 25]}
+        onRowsPerPageChange={handleChangeRowsPerPage}
+        ActionsComponent={TablePaginationActions}
+      />
     </>
   );
 };