CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
JS3
JS3

Reputation: 1829

How do I put a table pagination at the bottom of the table?

How could I put table pagination for the table?

Below are the codes for the material-ui table. The documentation was quite confusing:

  <Table ria-label="a dense table">
                <TableHead>
                  <TableRow>
                    <TableCell>First Name</TableCell>
                    <TableCell>Last Name</TableCell>
                    <TableCell>Phone Number</TableCell>
                    <TableCell>Delete</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {names &&
                    names.map((user) => (
                      <TableRow>
                        <TableCell component="th" scope="row">
                          {user.firstName}
                        </TableCell>
                        <TableCell>{user.lastName}</TableCell>
                        <TableCell numeric>{user.phoneNumber}</TableCell>
                        <TableCell>
                          <IconButton
                            aria-label="delete"
                            color="secondary"
                            onClick={() => console.log(`${user.id}`)}
                          >
                            <DeleteIcon />
                          </IconButton>
                        </TableCell>
                      </TableRow>
                    ))}
                </TableBody>
              </Table>

Upvotes: 0

Views: 1644

Answers (2)

Paul Trimor
Paul Trimor

Reputation: 340

I tried putting the <TablePagination> inside <TableFooter> and it still did not work. However, I found a work around using Flex:

<TableContainer component={Paper} sx={{
    height: '350px',
    display: 'flex',
    justifyContent: 'space-between',
    flexDirection: 'column'
}}>
     <Table>    put table logic structure here.. </Table>
     <TablePagination />
</TableContainer>

Upvotes: 0

Viet
Viet

Reputation: 12787

Add TableFooter with TablePagination after TableBody

<TableFooter>
  <TableRow>
    <TablePagination
      rowsPerPageOptions={[5, 10, 25, { label: "All", value: -1 }]}
      count={100}
      rowsPerPage={10}
      page={0}
      ...
    />
  </TableRow>
</TableFooter>;

Upvotes: 1

Related Questions