reactjs - 在表中显示页码

Question

我正在使用Material UI table与 Table Pagination 一起，并且我尝试将当前页面与前 3 个页面和前 3 个页面一起显示，而不是显示计数金额。

我将以下内容添加到TablePagination

<TablePagination labelRowsPerPage='' ...OtherSettings />

但我仍然得到相同的结果。如何更改上图中的文本，使其显示页面而不是行数？

Answer 1

就 Material Design 而言，它旨在显示行(如分页部分的 Material Design Table Behaviour 中所述)。

但是，您可以尝试使用 TablePagination 组件的 labelDisplayedRows 属性来修改默认显示的行文本，并根据情况显示页数在你的行数据上。它会是这样的:

<TablePagination
    ...OtherSettings,
    labelDisplayedRows={() => {
      return `${page}-${Math.floor(rows.length / rowsPerPage)}`;
    }}
/>

此外，一个 working sandbox demo以及 TablePagination 组件的相关 prop 文档:documentation .