[MUI Data Grid] Row group collapses when row data is updated

[kavitang]

Order ID or Support key 💳 (optional)

55516

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

Our data grid loads in collapsed mode when the page is loaded. We set defaultGroupingExpansionDepth to 0 for some pages, and this is not reset when data is updated.

Now when a specific row is updated, we refetch the updated data from the server. When this data is received, the grid resets to the collapsed mode, and all rows are hidden. We removed the defaultGroupingExpansionDepth prop entirely, but since the default state as per your documentation is collapsed, it falls back to this mode on refetch. Source - https://mui.com/x/react-data-grid/row-grouping/#group-expansion

Is this expected behaviour? I'm not sure if this is a bug or not, but if so how do we bypass this. We want to be able to retain expanded row groups even when the data is updated. Would like to know if this is possible with the current props the grid uses and if not, what workarounds are possible. Thanks!

Your environment 🌎

`npx @mui/envinfo`

Using Chrome: 112.0.5615.49

System:
    OS: macOS 13.3.1
  Binaries:
    Node: 16.16.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.11.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 112.0.5615.49
    Edge: 112.0.1722.39
    Firefox: 109.0.1
    Safari: 16.4
  npmPackages:
    @emotion/react: ^11.10.6 => 11.10.6 
    @emotion/styled: ^11.10.6 => 11.10.6 
    @mui/base:  5.0.0-alpha.121 
    @mui/core-downloads-tracker:  5.11.13 
    @mui/material: ^5.11.13 => 5.11.13 
    @mui/private-theming:  5.11.13 
    @mui/styled-engine:  5.11.11 
    @mui/system:  5.11.13 
    @mui/types:  7.2.3 
    @mui/utils:  5.11.12 
    @mui/x-data-grid:  6.0.1 
    @mui/x-data-grid-premium: 6.0.1 => 6.0.1 
    @mui/x-data-grid-pro:  6.0.1 
    @mui/x-date-pickers: ^6.0.1 => 6.0.1 
    @mui/x-license-pro:  6.0.1 
    @types/react: 18.0.24 => 18.0.24 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    styled-components:  5.3.6 
    typescript: ^4.8.4 => 4.8.4 

[m4theushw]

Could you provide a CodeSandbox showing how you're updating the row? I tested with apiRef.current.updateRows and it kept the state of the group. I didn't test updating directly the rows prop.

[kavitang]

@m4theushw - We don't use apiRef.current.updateRows to update rows. We are simply updating the rows prop passed to the Data Grid component, with a new array, as it's a state variable, when row value changes or new rows are added. I'll give the apiRef method a try to see if that resolves the issue, and update here. Thanks!

[edwinpgm]

Hi @m4theushw we are trying to use apiRef.current.updateRows when some row grouping is enabled, it returns the error RangeError: Maximum call stack size exceeded.

You could reproduce the error in this demo: https://codesandbox.io/s/admiring-sun-kvi6ji?file=/demo.tsx.

[cherniavskii]

@edwinpgm the issue you described was reported in #8626

[edwinpgm]

Hi @cherniavskii, we are testing the new changes (#8693), but we are having other issue when use row grouping and updateRows.

Here is the link of Code Sandbox: https://codesandbox.io/s/kind-lamarr-ofjvim?file=/demo.tsx:1588-1598.

If you expand the last group and click in Update All Rows button it will collapse the last group row.

Thanks for your help!

[cherniavskii]

Thanks, @edwinpgm!
Looking at #6314 (comment), the groups should not collapse when updateRows is called.
v5 works as expected: https://codesandbox.io/s/elated-dubinsky-4ox1gi?file=/package.json
It's a regression, we will investigate this.