Merge pull request #133 from Arquisoft/carlos

Mostrar usuarios registrados y paginación de tablas
Arquisoft · Apr 15, 2024 · 648bca9 · 648bca9
2 parents 6fafdf8 + f9f0d18
commit 648bca9
Showing 1 changed file with 44 additions and 19 deletions.
diff --git a/webapp/src/components/HistoricalData.js b/webapp/src/components/HistoricalData.js
@@ -1,14 +1,29 @@
 import axios from 'axios';
 import React, { useState, useEffect} from 'react';
 import { useNavigate} from 'react-router-dom';
-import { Container, Button} from '@mui/material';
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Container, Button, TablePagination  } from '@mui/material';
 import './HistoricalData.css';
 
 const HistoricalData = () => {
   const navigate = useNavigate();
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
   const [questionsHistory, setQuestionsHistory] = useState([]);
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+
+  const paginatedData = questionsHistory.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+
+  const handleChangePage = (event, newPage) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+
 
   useEffect(() => {
     handleShowHistory();
@@ -42,27 +57,37 @@ const HistoricalData = () => {
 
     </div>
     <div>
-        <table>
-          <thead>
-            <tr>
-              <th title='pregunta'>Pregunta</th>
-              <th title='correcta'>Opción correcta</th>
-              <th title='incorrecta'>Opción incorrecta 1</th>
-              <th title='incorrecta'>Opción incorrecta 2</th>
-              <th title='incorrecta'>Opción incorrecta 3</th>
-            </tr>
-          </thead>
-          <tbody>
-            {questionsHistory.map((row, rowIndex) => (
-              <tr key={rowIndex}>
+      <TableContainer>
+        <Table sx={{ minWidth: 650 }} aria-label="customized table">
+          <TableHead>
+            <TableRow>
+              <TableCell>Pregunta</TableCell>
+              <TableCell>Opción correcta</TableCell>
+              <TableCell>Opción incorrecta 1</TableCell>
+              <TableCell>Opción incorrecta 2</TableCell>
+              <TableCell>Opción incorrecta 3</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {paginatedData.map((row, rowIndex) => (
+              <TableRow key={rowIndex}>
                 {row.map((cell, cellIndex) => (
-                  <td key={cellIndex}>{cell}</td>
+                  <TableCell key={cellIndex}>{cell}</TableCell>
                 ))}
-              </tr>
+              </TableRow>
             ))}
-          </tbody>
-        </table>
-      </div>
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <TablePagination
+        component="div"
+        count={questionsHistory.length}
+        rowsPerPage={rowsPerPage}
+        page={page}
+        onPageChange={handleChangePage}
+        onRowsPerPageChange={handleChangeRowsPerPage}
+      />
+    </div>
   </Container>
 
   );