How to add pagination for Collapsible table mui in reactjs - reactjs

Question

I have an Collapsible table example here. But I don't know that how to add pagination for it. Any one have an idea ? Tks for all the help!
Example: https://codesandbox.io/s/p0td1n?file=/demo.tsx

Answer 1

Adding pagination to the table has no effect on being collapsible. So you can add it like this:
export default function CollapsibleTable() {
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(5);
const currentRows = rows.filter((r, ind) => {
return ind >= rowsPerPage * page && ind < rowsPerPage * (page + 1);
});
const handleChangePage = (event: unknown, newPage: number) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (
event: React.ChangeEvent<HTMLInputElement>
) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
return (
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableHead>
<TableRow>
<TableCell />
<TableCell>Dessert (100g serving)</TableCell>
<TableCell align="right">Calories</TableCell>
<TableCell align="right">Fat (g)</TableCell>
<TableCell align="right">Carbs (g)</TableCell>
<TableCell align="right">Protein (g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{currentRows.map((row) => (
<Row key={row.name} row={row} />
))}
</TableBody>
</Table>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</TableContainer>
);
}
You can take a look at this sandbox for a live working example of collapsible table with pagination.