Material-table: Component stateChange resetting table pageSize when using remote data feature

Created on 25 May 2020  路  5Comments  路  Source: mbrn/material-table

Describe the bug
I saw different issues talking about the same bug but not in the same way I'm experiencing it.

I have a component that displays the table and also a drop down list that on selection changes the state of the component.
Each time the state is being updated the table page size is being reset to the default value (in the default options case it's 5).

It seems as the table saves the actual pageSize because when triggering any change to the data, going to the next page for example, the page size is the actual selected size.

I've noticed that there are a few PRs regarding the issue of the page size being reset, is there any updates regarding when this issue will be fixed?

To Reproduce
https://codesandbox.io/s/change-state-page-size-yxhk0?file=/src/App.js

Steps to reproduce the behavior:

  1. Change the page size to any value different then the default
  2. Click on the button on the bottom of the page to change the state

Expected behavior
When the state changes the table should not reset to the default page size

Desktop (please complete the following information):

  • OS: [Windows 10]
  • Browser [chrome]
  • Version [1.58.0]
bug help wanted wontfix

Most helpful comment

You should keep pageSize as a state variable and update it when the page size changes

Example: https://codesandbox.io/s/change-state-page-size-40sju

const [pageSize, setPageSize] = useState(5);

...

<MaterialTable
  onChangeRowsPerPage={setPageSize}
  options={{
    pageSize,
  }}
/>

All 5 comments

You should keep pageSize as a state variable and update it when the page size changes

Example: https://codesandbox.io/s/change-state-page-size-40sju

const [pageSize, setPageSize] = useState(5);

...

<MaterialTable
  onChangeRowsPerPage={setPageSize}
  options={{
    pageSize,
  }}
/>

Thank you for the suggestion I'll give it a go!

Anyway I do think that this behavior is a bug and it should be fixed

It seems like this line is the problem:

(isInit || this.isRemoteData()) && this.dataManager.changePageSize(props.options.pageSize);

But I do not know, why the page size could be changed if the remote data is given.
So maybe we could remove the this.isRemoteData() check and it would not happen again.

But clearly, there was a reason do add this condition, so maybe @mbrn could tell us, if this check is necessary or not?

It was added in #1353 so I do not think it could just be removed.

Are there any updates regarding this issue?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

roseak picture roseak  路  3Comments

behrouz-s picture behrouz-s  路  3Comments

bohrsty picture bohrsty  路  3Comments

VipinJoshi picture VipinJoshi  路  3Comments

lazeebee picture lazeebee  路  3Comments