在 MaterialTable ui https://material-table.com/#/docs/features/localization 上设置分页？

Question

这是我的代码。我想将分页设置为每页 50、100、250 行（例如）。我怎样才能做到这一点？

 <MaterialTable

        localization={{
          pagination: {
            labelDisplayedRows: '4-6 of 10',
            labelRowsPerPage:'{5, 10, 25,100}'
          },

        }}
        title="Crawler Results"
        columns={[
          { title: "URL", field: "url" },
          { title: "Status", field: "status" }
        ]}
        data={state.data}
        actions={[
          {
            icon: 'add',
            tooltip: 'Add User',
            isFreeAction: true,
            onClick: () => {

              //show crawler table and hide formular
              document.getElementById('formCrawler').style.display = "block";
              document.getElementById('formSpan').style.display = "block";
              document.getElementById('crawlerTableID').style.display = "none";

            }
          }]}
      />

Answer 1

添加labelRowsPerPage 对我没有任何帮助。我在MaterialTable 中添加了以下属性：

options={{
  pageSizeOptions: [50, 100, 250]
}}

https://material-table.com/#/docs/all-props

Answer 2

如docs 中所述，您可以使用一组页面大小覆盖options 中的pageSizeOptions。

<MaterialTable

    localization={{
      pagination: {
        labelDisplayedRows: '4-6 of 10',
        labelRowsPerPage:'{5, 10, 25,100}'
      },

    }}
    title="Crawler Results"
    columns={[
      { title: "URL", field: "url" },
      { title: "Status", field: "status" }
    ]}
    options={{
        pageSizeOptions : [50, 100, 200]
    }}
    data={state.data}
    actions={[
      {
        icon: 'add',
        tooltip: 'Add User',
        isFreeAction: true,
        onClick: () => {

          //show crawler table and hide formular
          document.getElementById('formCrawler').style.display = "block";
          document.getElementById('formSpan').style.display = "block";
          document.getElementById('crawlerTableID').style.display = "none";

        }
      }]}
  />