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

Question

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>

Answer 1

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>