reactjs - 如何在React-data-table中设置paginationRowsPerPageOptions ['ALL' ,'50' ,'' 100']

Question

Hi Everyone, I am using the React-Data-Table component for displaying the data. My react data table is working fine. But, I need to set the pagination option [All, 50,100,150]. In the React-data-table component provides the "paginationRowsPerPageOptions" property for set the value for pagination dropdown. I am set the paginationRowsPerPageOptions[50,100,150] in my project. It's working fine. When I select the 100 value from the pagination dropdown, 100 records will be displayed. But, My goal is initially, I need to add the "All" string in my pagination dropdown, While I select the "ALL" dropdown from pagination, All records need to display in my data table. How Can I do it? I attached the sample code in the code sandbox link.

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

react 数据表:

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

I already added the "paginationComponentOptions={{ selectAllRowsItem: true, selectAllRowsItemText: 'ALL' }}" in my DataTable component. But, It added in my dropdown as last value. I need to add 'ALL' value initial condition.

屏幕截图:

Answer 1

您可以添加此 Prop 来启用所有选项。

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

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

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