From ecdbbac684c2d832349a9e64d3f0c4ed85a5ef3b Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 22 Jul 2024 10:19:57 -0700
Subject: [PATCH] Hide pagination if rows <= rows per page

---
 Client/src/Components/BasicTable/index.jsx | 58 ++++++++++++----------
 1 file changed, 32 insertions(+), 26 deletions(-)

diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index c76266a98..fbd8759e5 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -90,6 +90,36 @@ const BasicTable = ({ data, paginated, reversed }) => {
     return <div>No data</div>;
   }
 
+  let paginationComponent = <></>;
+  if (paginated === true && displayData.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}>
@@ -118,32 +148,8 @@ const BasicTable = ({ data, paginated, reversed }) => {
           </TableBody>
         </Table>
       </TableContainer>
-      {paginated === true && (
-        <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",
-                },
-              }}
-            />
-          )}
-        />
-      )}
+
+      {paginationComponent}
     </>
   );
 };