added pagination feature

JumboCode · Dec 6, 2024 · 8ff6b87 · 8ff6b87
1 parent 762d6b4
commit 8ff6b87
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 3 deletions.
diff --git a/src/app/private/volunteers/page.tsx b/src/app/private/volunteers/page.tsx
@@ -2,11 +2,12 @@ import VolunteerTable from "@components/VolunteerTable/VolunteerTable";
 import SearchBar from "@components/SearchBar";
 
 const VolunteerHomePage = () => {
+
   return (
     <div>
       <h1> Volunteer Home</h1>
       <SearchBar Title="hi" Subtext="yo"/>
-      <VolunteerTable></VolunteerTable>
+      <VolunteerTable showPagination={true}></VolunteerTable>
     </div>
   );
 };

diff --git a/src/components/VolunteerTable/VolunteerTable.tsx b/src/components/VolunteerTable/VolunteerTable.tsx
@@ -1,16 +1,25 @@
+'use client';
+
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
+import TablePagination from "@mui/material/TablePagination";
 import Avatar from "@mui/material/Avatar";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import ArrowRightAltIcon from "@mui/icons-material/ArrowRightAlt";
 import IconButton from "@mui/material/IconButton";
+import Checkbox from "@mui/material/Checkbox";
+import React, { useState } from "react";
 
 import profilePic from "../../../public/profile.png";
 
+interface VolunteerTableProps {
+    showPagination: boolean;
+}
+
 function createData(
   name: string,
   type: number,
@@ -37,9 +46,31 @@ const rows = [
   createData("Name1", 0, "email1", "location1"),
   createData("Name2", 1, "email2", "location2"),
   createData("Name3", 2, "email3", "location2"),
+  createData("Name4", 0, "email1", "location1"),
+  createData("Name5", 1, "email2", "location2"),
+  createData("Name6", 2, "email3", "location2"),
+  createData("Name7", 0, "email1", "location1"),
+  createData("Name8", 1, "email2", "location2"),
+  createData("Name9", 2, "email3", "location2"),
+  createData("Name10", 0, "email1", "location1"),
+  createData("Name11", 1, "email2", "location2"),
+  createData("Name12", 2, "email3", "location2"),
+  createData("Name13", 0, "email1", "location1"),
+  createData("Name14", 1, "email2", "location2"),
+  createData("Name15", 2, "email3", "location2"),
 ];
 
-export default function VolunteerTable() {
+export default function VolunteerTable({ showPagination }: VolunteerTableProps) {
+    const [page, setPage] = useState(0); // Current page
+    const [rowsPerPage] = useState(8); // Set rows per page to 8
+
+    const handleChangePage = (event: unknown, newPage: number) => {
+        setPage(newPage);
+    };
+
+  // Pagination Logic
+  const paginatedRows = rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+
   return (
     <TableContainer
       sx={{
@@ -107,7 +138,7 @@ export default function VolunteerTable() {
           </TableRow>
         </TableHead>
         <TableBody sx={{ borderColor: "pink" }}>
-          {rows.map((row) => (
+          {paginatedRows.map((row) => (
             <TableRow
               key={row.name}
               sx={{
@@ -182,6 +213,16 @@ export default function VolunteerTable() {
           ))}
         </TableBody>
       </Table>
+      {showPagination && (
+        <TablePagination
+          component="div"
+          count={rows.length}
+          page={page}
+          onPageChange={handleChangePage}
+          rowsPerPage={rowsPerPage}
+          rowsPerPageOptions={[8]}
+        />
+      )}
     </TableContainer>
   );
 }