0

大家好，我正在使用 React-Data-Table 组件来显示数据。我的反应数据表工作正常。但是，我需要设置分页选项 [All, 50,100,150]。在 React-data-table 组件中提供了“paginationRowsPerPageOptions”属性来设置分页下拉列表的值。我在我的项目中设置了 paginationRowsPerPageOptions[50,100,150]。它工作正常。当我从分页下拉列表中选择 100 值时，将显示 100 条记录。但是，我的目标是最初，我需要在我的分页下拉列表中添加“全部”字符串，当我从分页中选择“全部”下拉列表时，所有记录都需要显示在我的数据表中。我该怎么做？我在代码沙箱链接中附加了示例代码。

我正在使用 React-Data-Table 组件。

反应数据表：

链接：https ://codesandbox.io/embed/react-data-table-sandbox-ccyuu

我已经在我的 DataTable 组件中添加了“paginationComponentOptions={{ selectAllRowsItem: true, selectAllRowsItemText: 'ALL' }}”。但是，它在我的下拉列表中添加为最后一个值。我需要添加“ALL”值初始条件。

截屏：

反应数据表屏幕截图

4

2 回答 2

0

您可以添加此道具以启用所有选项。

const paginationComponentOptions = {
  selectAllRowsItem: true,
  selectAllRowsItemText: 'ALL',
};

   <DataTable
      ...
      paginationComponentOptions={paginationComponentOptions}
      ...
    />

工作示例：https ://codesandbox.io/s/react-data-table-forked-d6m05?file=/src/index.js

于 2021-12-20T18:07:00.760 回答
0

我在我的数据表中添加了“paginationPerPage”属性，并在“paginationPerPage”值中分配了我的数据长度。我的问题已经解决。我在下面附上了截图。

在 ReactDataTable 中添加了 paginationPerPage 属性

现在，我可以在我的下拉列表中看到 ALL 值作为默认值。

于 2021-12-21T17:09:47.113 回答