Pagination

client/src/Pages/ConsolidatedTable.jsx

@@ -7,6 +7,8 @@ import { createExcelBook } from "../api";
 const ConsolidatedTable = () => {
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
+  const [currentPage, setCurrentPage] = useState(1);
+  const tablesPerPage = 5;
 
   useEffect(() => {
     const fetchData = async () => {
@@ -32,6 +34,21 @@ const ConsolidatedTable = () => {
   // Extract unique faculty names
   const uniqueTeachers = [...new Set(data.map((row) => row.Name))];
 
+  //pagination 
+  const indexOfLastTable = currentPage * tablesPerPage;
+  const indexOfFirstTable = indexOfLastTable - tablesPerPage;
+  const currentTeachers = uniqueTeachers.slice(indexOfFirstTable,indexOfLastTable);
+
+  const totalPages = Math.ceil(uniqueTeachers.length/tablesPerPage);
+
+  const handleNextPage = ()=>{
+    if(currentPage < totalPages) setCurrentPage((prevPage)=>prevPage+1);
+  };
+
+  const handlePrevPage = ()=>{
+    if(currentPage > 1) setCurrentPage((prevPage)=>prevPage-1);
+  };
+
   const createExcelFile = (teacherData, teacherName) => {
     const workbook = createExcelBook(teacherData, teacherName);
     XLSX.writeFile(workbook, `${teacherName.replace(/\s+/g, "_")}_Table.xlsx`);
@@ -129,7 +146,7 @@ const ConsolidatedTable = () => {
           backgroundColor: "#f9f9f9",
         }}
       >
-        {uniqueTeachers.map((teacher, index) => {
+        {currentTeachers.map((teacher, index) => {
           const teacherData = data.filter((row) => row.Name === teacher);
           return (
             <div key={index} style={{ marginBottom: "20px" }}>
@@ -217,6 +234,42 @@ const ConsolidatedTable = () => {
           );
         })}
       </div>
+
+      {/* pagination controls */}
+      <div style={{textAlign: "center", marginTop:"20px",}}>
+        <button
+        onClick={handlePrevPage}
+        disabled= {currentPage ===1}
+        style={{
+          padding: "10px 15px",
+          marginRight: "10px",
+          backgroundColor: currentPage === 1 ? "#ccc" : "#007bff",
+          color: "white",
+          borderRadius: "5px",
+          border: "none",
+        }}
+        >
+          Previous
+        </button>
+        <span>
+          Page {currentPage} of {totalPages}
+        </span>
+        <button
+        onClick={handleNextPage}
+        disabled={currentPage === totalPages}
+        style={{
+          padding: "10px 15px",
+          marginLeft: "10px",
+          backgroundColor:
+            currentPage === totalPages ? "#ccc" : "#007bff",
+          color: "white",
+          borderRadius: "5px",
+          border: "none",
+        }}
+        >
+          Next
+        </button>
+      </div>
     </div>
   );
 };