javascript - 如何在表格底部放置表格分页？

Question

我怎么能为表格放置表格分页？

下面是 material-ui 表的代码。文档非常混乱：

  <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>

标签： javascriptreactjsmaterial-ui

Answer 1

添加后TableFooter_TablePaginationTableBody

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