如何在表格底部添加表格页码

Question

如何为表进行表分页？

以下是材料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>

Answer 1

在TableBody之后添加TableFooter和TablePagination

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

Answer 2

我尝试将<TablePagination>放入<TableFooter>中，但它仍然不起作用。然而，我发现了一个使用Flex的解决方案：

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