Pagination Rows per Page resetting itself after clicking on custom button in column

[max-chen-innosys]

Hi, I'm facing an issue whereby the number of rows per page displayed is resetting itself everytime I click on a custom button I've added via options in the toolbar.

This also happens when I click on a button I added to each row.

The number of rows per page is initially 50. When I select it as 75 and click on my custom buttons, it resets to 50 per page.

[Usama-Tahir]

@max-chen-innosys can you provide a repro example? I will try to look into this issue.

[LouGitta]

Hi, same issue as @max-chen-innosys but not with the toolbar.

So here is my default table with 50 rows per page when it load

I can set it to 10 rows no problem with it

But when i click on my right side wrench button instantly it goes to 50 rows

I have the same issue with checkbox in the toolbarselect

If you need anything more i'm here
Thanks

[janlew]

Have the same issue

[LouGitta]

Have the same issue

@janlew I think my team found a solution that work

So i've add in my MuiDataTable.js

  const [rowsPerPage, setRowsPerPage] = React.useState(50);
  const [page, setPage] = React.useState(0);

and i add this after all my options still in the table.js

    rowsPerPage: rowsPerPage,
    rowsPerPageOptions: [10, 30, 50, 100],
    page: page,
    onChangePage: (newPage) => {
      setPage(newPage);
    },
    onChangeRowsPerPage: (numberOfRows) => {
      setRowsPerPage(numberOfRows);
    },

Hope this may help you

[janlew]

Have the same issue

@janlew I think my team found a solution that work

So in i've add in my MuiDataTable.js

  const [rowsPerPage, setRowsPerPage] = React.useState(50);
  const [page, setPage] = React.useState(0);

and i add this after all my options still in the table.js

    rowsPerPage: rowsPerPage,
    rowsPerPageOptions: [10, 30, 50, 100],
    page: page,
    onChangePage: (newPage) => {
      setPage(newPage);
    },
    onChangeRowsPerPage: (numberOfRows) => {
      setRowsPerPage(numberOfRows);
    },

Hope this may help you

Thanks for quick reply! I did almost the same but with localStorage :)

[LouGitta]

Have the same issue

@janlew My team found a solution that work
So in i've add in my MuiDataTable.js

  const [rowsPerPage, setRowsPerPage] = React.useState(50);
  const [page, setPage] = React.useState(0);

and i add this after all my options still in the table.js

    rowsPerPage: rowsPerPage,
    rowsPerPageOptions: [10, 30, 50, 100],
    page: page,
    onChangePage: (newPage) => {
      setPage(newPage);
    },
    onChangeRowsPerPage: (numberOfRows) => {
      setRowsPerPage(numberOfRows);
    },

Hope this may help you

Thanks for quick reply! I did almost the same but with localStorage :)

Great! It's not sensitive data but i don't know if it's a real safe way to do it.
But if it works don't touch ;) !