[question] How to retain the MUI Grid filters, sorting, column rearrangements or hidden when the grid is re-rendered to add more rows?

[saikiranraparthi]

Order ID or Support key 💳 (optional)

50436

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

We are loading the rows into data grid by using backend APIs in batches.
We allow user to access the grid since the first page/batch is loaded and allow the user to use it while we are loading more data in the background.

While the grid is rendering because of extra data/rows, the filters / column rearrangements / sorting is cleared out.
How can add more data in the background (this grid rerenders automatically while this is done) and still retain the settings that user performed to the grid?

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 12.3
  Binaries:
    Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - ~/Projects/storyline/node_modules/.bin/npm
  Browsers:
    Chrome: 115.0.5790.114
    Edge: Not Found
    Safari: 15.4
  npmPackages:
    @emotion/react: 11.11.1 => 11.11.1 
    @emotion/styled: 11.11.0 => 11.11.0 
    @mui/base:  5.0.0-alpha.128 
    @mui/core-downloads-tracker:  5.12.3 
    @mui/icons-material: 5.11.16 => 5.11.16 
    @mui/lab: 5.0.0-alpha.129 => 5.0.0-alpha.129 
    @mui/material: 5.12.3 => 5.12.3 
    @mui/private-theming:  5.12.3 
    @mui/styled-engine:  5.12.3 
    @mui/system: 5.12.3 => 5.12.3 
    @mui/types:  7.2.4 
    @mui/utils: 5.12.3 => 5.12.3 
    @mui/x-data-grid:  5.17.26 
    @mui/x-data-grid-pro: 5.17.26 => 5.17.26 
    @mui/x-license-pro:  5.17.12 
    @types/react: 18.2.14 => 18.2.14 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    styled-components: 5.3.9 => 5.3.9 
    typescript: 5.1.3 => 5.1.3 

[m4theushw]

Are you sure that you're memoizing the columns? The state shouldn't be reset when the rows are updated. We have one demo that shows this capability. Do you have a CodeSandbox to share?

[saikiranraparthi]

@m4theushw
We are using renderCell / valueGetter in order to render few cells and have some business logic render the cells based on the availability of the additional data by loading them in an async manner.

I tried to replicate the issue in a CodeSandbox example here.
Whenever I rearrange columns and click on the 'Load more data' button, the table is arranged back to the original form.

[saikiranraparthi]

I'm able to retain the grid filtering, sorting and visibility by saving it in a state as mentioned in documents here.
Only thing which is still an issue is column ordering and dimensions.

This issue was replicated in the codesandbox provided in the above message.

[MBilalShafi]

Your columns object should be stable in order for the Grid to retain the state, did you consider lazy loading to load more rows instead of always updating the columns object when an update is needed? Another option would be to load the new rows in the async manner and use the partial update grid API (apiRef.current.updateRows) instead of regenerating columns/rows objects.

Let me know if that makes sense?

[github-actions]

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.