CODEWITHSUNDEEP
reactjsmaterial-ui
Thanh Nguyen
Thanh Nguyen

Reputation: 319

How to add pagination for Collapsible table mui in reactjs

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

enter image description here

Upvotes: 2

Views: 1568

Answers (1)

Ahmet Emre Kilinc
Ahmet Emre Kilinc

Reputation: 6895

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&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(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.

Upvotes: 3

Related Questions