reactjs - 想要在 React 应用程序中从 Material UI 的表格上创建分页

Question

我正在创建一个包含数据的表。想要在页脚中像这个附加图像一样分页。左侧我想要每页的数字和右侧结果。

标签： reactjsmaterial-uimaterial-design

Answer 1

可能您必须使用分页和表格分页的组合。并使用 CSS 隐藏未使用的面板。

<div className={classes.root}>
  <Pagination count={10} variant="outlined" shape="rounded" />
  <TablePagination
    component="div"
    count={100}
    page={page}
    onChangePage={handleChangePage}
    rowsPerPage={rowsPerPage}
    onChangeRowsPerPage={handleChangeRowsPerPage}
  />
</div>;

我创建了一个示例代码框（这只是一种解决方法） - https://codesandbox.io/s/material-demo-forked-wmm4z?file=/demo.tsx:891-1225

如果您需要更多帮助，请告诉我。