CODEWITHSUNDEEP
reactjspaginationmaterial-uimaterial-table
Marko Mitic
Marko Mitic

Reputation: 21

Set pagination on MaterialTable ui https://material-table.com/#/docs/features/localization?

That is my code. I would like to set pagination to 50, 100, 250 rows per page (for example). How can I achieve that?

 <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";

            }
          }]}
      />

Upvotes: 1

Views: 2821

Answers (2)

Jeremy
Jeremy

Reputation: 1924

Adding labelRowsPerPage didn't do anything for me. I added the following property to the MaterialTable:

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

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

Upvotes: 0

Domino987
Domino987

Reputation: 8774

As mentioned in the docs, you can override the pageSizeOptions in options with an array of page sizes.

<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";

        }
      }]}
  />

Upvotes: 3

Related Questions