Consolidated-csv

client/src/Pages/ConsolidatedTable.jsx

@@ -1,5 +1,87 @@
+// import React, { useState, useEffect } from "react";
+// import axios from "axios";
+
+// const ConsolidatedTable = () => {
+//   const [data, setData] = useState([]);
+//   const [loading, setLoading] = useState(true);
+
+//   useEffect(() => {
+//     const fetchData = async () => {
+//       try {
+//         const response = await axios.get("http://localhost:8080/api/table/consolidated-table");
+//         setData(response.data);
+//         setLoading(false);
+//       } catch (error) {
+//         console.error("Error fetching table data:", error);
+//         setLoading(false);
+//       }
+//     };
+
+//     fetchData();
+//   }, []);
+
+//   if (loading) {
+//     return <div>Loading...</div>;
+//   }
+
+//   return (
+//     <div>
+//       <h1>Consolidated Table</h1>
+//       <table border="1" style={{ width: "100%", textAlign: "left" }}>
+//         <thead>
+//           <tr>
+//             <th>Semester</th>
+//             <th>Course Code</th>
+//             <th>Course Name</th>
+//             <th>Exam Type</th>
+//             <th>Year</th>
+//             <th>Marks</th>
+//             <th>Name</th>
+//             <th>Affiliation/College</th>
+//             <th>Highest Qualification</th>
+//             <th>Career Experience</th>
+//             <th>Oral/Practical</th>
+//             <th>Assessment</th>
+//             <th>Reassessment</th>
+//             <th>Paper Setting</th>
+//             <th>Moderation</th>
+//             <th>PwD Paper Setting</th>
+//           </tr>
+//         </thead>
+//         <tbody>
+//           {data.map((row, index) => (
+//             <tr key={index}>
+//               <td>{row.semester}</td>
+//               <td>{row.courseCode}</td>
+//               <td>{row.courseName}</td>
+//               <td>{row.examType}</td>
+//               <td>{row.year}</td>
+//               <td>{row.marks}</td>
+//               <td>{row.Name}</td>
+//               <td>{row.affiliation}</td>
+//               <td>{row.qualification}</td>
+//               <td>{row.experience}</td>
+//               <td>{row.oralPractical}</td>
+//               <td>{row.assessment}</td>
+//               <td>{row.reassessment}</td>
+//               <td>{row.paperSetting}</td>
+//               <td>{row.moderation}</td>
+//               <td>{row.pwdPaperSetting}</td>
+//             </tr>
+//           ))}
+//         </tbody>
+//       </table>
+//     </div>
+//   );
+// };
+
+// export default ConsolidatedTable;
+
+
+
 import React, { useState, useEffect } from "react";
 import axios from "axios";
+import { CSVLink } from "react-csv";
 
 const ConsolidatedTable = () => {
   const [data, setData] = useState([]);
@@ -24,53 +106,81 @@ const ConsolidatedTable = () => {
     return <div>Loading...</div>;
   }
 
+  // Extract unique faculty names
+  const uniqueTeachers = [...new Set(data.map((row) => row.Name))];
+
   return (
     <div>
-      <h1>Consolidated Table</h1>
-      <table border="1" style={{ width: "100%", textAlign: "left" }}>
-        <thead>
-          <tr>
-            <th>Semester</th>
-            <th>Course Code</th>
-            <th>Course Name</th>
-            <th>Exam Type</th>
-            <th>Year</th>
-            <th>Marks</th>
-            <th>Name</th>
-            <th>Affiliation/College</th>
-            <th>Highest Qualification</th>
-            <th>Career Experience</th>
-            <th>Oral/Practical</th>
-            <th>Assessment</th>
-            <th>Reassessment</th>
-            <th>Paper Setting</th>
-            <th>Moderation</th>
-            <th>PwD Paper Setting</th>
-          </tr>
-        </thead>
-        <tbody>
-          {data.map((row, index) => (
-            <tr key={index}>
-              <td>{row.semester}</td>
-              <td>{row.courseCode}</td>
-              <td>{row.courseName}</td>
-              <td>{row.examType}</td>
-              <td>{row.year}</td>
-              <td>{row.marks}</td>
-              <td>{row.Name}</td>
-              <td>{row.affiliation}</td>
-              <td>{row.qualification}</td>
-              <td>{row.experience}</td>
-              <td>{row.oralPractical}</td>
-              <td>{row.assessment}</td>
-              <td>{row.reassessment}</td>
-              <td>{row.paperSetting}</td>
-              <td>{row.moderation}</td>
-              <td>{row.pwdPaperSetting}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+      <h1>Faculty Tables with Download Option</h1>
+      {uniqueTeachers.map((teacher, index) => {
+        // Filter rows for the current teacher
+        const teacherData = data.filter((row) => row.Name === teacher);
+
+        return (
+          <div key={index} style={{ marginBottom: "20px" }}>
+            <h2>{teacher}'s Table</h2>
+            <table border="1" style={{ width: "100%", textAlign: "left", marginBottom: "10px" }}>
+              <thead>
+                <tr>
+                  <th>Semester</th>
+                  <th>Course Code</th>
+                  <th>Course Name</th>
+                  <th>Exam Type</th>
+                  <th>Year</th>
+                  <th>Marks</th>
+                  <th>Name</th>
+                  <th>Affiliation/College</th>
+                  <th>Highest Qualification</th>
+                  <th>Career Experience</th>
+                  <th>Oral/Practical</th>
+                  <th>Assessment</th>
+                  <th>Reassessment</th>
+                  <th>Paper Setting</th>
+                  <th>Moderation</th>
+                  <th>PwD Paper Setting</th>
+                </tr>
+              </thead>
+              <tbody>
+                {teacherData.map((row, idx) => (
+                  <tr key={idx}>
+                    <td>{row.semester}</td>
+                    <td>{row.courseCode}</td>
+                    <td>{row.courseName}</td>
+                    <td>{row.examType}</td>
+                    <td>{row.year}</td>
+                    <td>{row.marks}</td>
+                    <td>{row.Name}</td>
+                    <td>{row.affiliation}</td>
+                    <td>{row.qualification}</td>
+                    <td>{row.experience}</td>
+                    <td>{row.oralPractical}</td>
+                    <td>{row.assessment}</td>
+                    <td>{row.reassessment}</td>
+                    <td>{row.paperSetting}</td>
+                    <td>{row.moderation}</td>
+                    <td>{row.pwdPaperSetting}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+            {/* CSV Download Button */}
+            <CSVLink
+              data={teacherData}
+              filename={`${teacher.replace(/\s+/g, "_")}_table.csv`}
+              className="btn btn-primary"
+              style={{
+                padding: "10px 15px",
+                backgroundColor: "#007bff",
+                color: "white",
+                textDecoration: "none",
+                borderRadius: "5px",
+              }}
+            >
+              Download CSV
+            </CSVLink>
+          </div>
+        );
+      })}
     </div>
   );
 };