Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import {
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableFooter,
TableHead,
TablePagination,
TableRow,
} from "@material-ui/core";
import React, { useState } from "react";
const MaterialTable = ({ rows = [], columns = [], count = 0 }) => {
// table states
const [rowsPerPage, setRowsPerPage] = useState(5);
const [page, setPage] = useState(0);
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
return (
<TableContainer component={Paper}>
<Table>
<TableHead>
{columns.map((column) => (
<TableCell>{column.headerName}</TableCell>
))}
</TableHead>
<TableBody>
{rows
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row) => (
<TableRow key={row.id}>
{columns.map((column) => (
<TableCell>{row[column.field]}</TableCell>
))}
</TableRow>
))}
</TableBody>
<TableFooter>
<TablePagination
count={count}
rowsPerPageOptions={[5, 10, 25]}
rowsPerPage={rowsPerPage}
page={page}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</TableFooter>
</Table>
</TableContainer>
);
};
export default MaterialTable;