Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 www 1 
import {
2 
  Paper,
3 
  Table,
4 
  TableBody,
5 
  TableCell,
6 
  TableContainer,
7 
  TableFooter,
8 
  TableHead,
9 
  TablePagination,
10 
  TableRow,
11 
} from "@material-ui/core";
12 
import React, { useState } from "react";
13 
 
14 
const MaterialTable = ({ rows = [], columns = [], count = 0 }) => {
15 
  // table states
16 
  const [rowsPerPage, setRowsPerPage] = useState(5);
17 
  const [page, setPage] = useState(0);
18 
  const handleChangePage = (event, newPage) => {
19 
    setPage(newPage);
20 
  };
21 
  const handleChangeRowsPerPage = (event) => {
22 
    setRowsPerPage(parseInt(event.target.value, 10));
23 
    setPage(0);
24 
  };
25 
 
26 
  return (
27 
    <TableContainer component={Paper}>
28 
      <Table>
29 
        <TableHead>
30 
          {columns.map((column) => (
31 
            <TableCell>{column.headerName}</TableCell>
32 
          ))}
33 
        </TableHead>
34 
        <TableBody>
35 
          {rows
36 
            .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
37 
            .map((row) => (
38 
              <TableRow key={row.id}>
39 
                {columns.map((column) => (
40 
                  <TableCell>{row[column.field]}</TableCell>
41 
                ))}
42 
              </TableRow>
43 
            ))}
44 
        </TableBody>
45 
        <TableFooter>
46 
          <TablePagination
47 
            count={count}
48 
            rowsPerPageOptions={[5, 10, 25]}
49 
            rowsPerPage={rowsPerPage}
50 
            page={page}
51 
            onChangePage={handleChangePage}
52 
            onChangeRowsPerPage={handleChangeRowsPerPage}
53 
          />
54 
        </TableFooter>
55 
      </Table>
56 
    </TableContainer>
57 
  );
58 
};
59 
 
60 
export default MaterialTable;