[data grid] Grouped data grid does not remain expanded when removing row

[lucasbachega]

Steps to reproduce

Steps:

1. Group rows
2. Expand group
3. Remove/Edit row

group_expand_problem.mov

Current behavior

No response

Expected behavior

When removing or editing a grouped row, the group should remain expanded.

Context

No response

Your environment

npx @mui/envinfo

 System:
    OS: macOS 14.1.1
  Binaries:
    Node: 20.11.0 - /usr/local/bin/node
    npm: 10.2.4 - /usr/local/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 130.0.6723.92
    Edge: Not Found
    Safari: 17.1
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/base:  5.0.0-beta.61 
    @mui/core-downloads-tracker:  6.1.6 
    @mui/icons-material: ^6.1.6 => 6.1.6 
    @mui/lab: ^6.0.0-beta.14 => 6.0.0-beta.14 
    @mui/material: ^6.1.6 => 6.1.6 
    @mui/material-pigment-css: ^6.1.6 => 6.1.6 
    @mui/private-theming:  6.1.6 
    @mui/styled-engine:  6.1.6 
    @mui/system:  6.1.6 
    @mui/types:  7.2.19 
    @mui/utils:  6.1.6 
    @mui/x-charts: ^7.22.1 => 7.22.1 
    @mui/x-charts-pro: ^7.0.0-beta.6 => 7.0.0-beta.6 
    @mui/x-charts-vendor:  7.20.0 
    @mui/x-data-grid: ^7.22.1 => 7.22.1 
    @mui/x-data-grid-generator: ^7.22.1 => 7.22.1 
    @mui/x-data-grid-premium: ^7.22.1 => 7.22.1 
    @mui/x-data-grid-pro:  7.22.1 
    @mui/x-date-pickers: ^7.22.1 => 7.22.1 
    @mui/x-date-pickers-pro: ^7.22.1 => 7.22.1 
    @mui/x-internals:  7.21.0 
    @mui/x-license: ^7.21.0 => 7.21.0 
    @pigment-css/nextjs-plugin: ^0.0.21 => 0.0.21 
    @pigment-css/react:  0.0.21 
    @pigment-css/unplugin:  0.0.21 
    @types/react:  18.3.4 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    styled-components:  5.3.6 
    typescript:  4.9.5 

Search keywords: group, expand
Order ID: 98639

[michelengelen]

Hey @lucasbachega ... how are you updating the rows?
You did not provide a reproduction example, so we cannot help you yet.

possibly related issue #13962

[lucasbachega]

Ei@lucasbachega... como você está atualizando as linhas? Você não viu um exemplo de reprodução, então não podemos ajudá-lo ainda.

possivelmente relacionado ao problema #13962

Sorry. I'm not using apiRef to update a row. I'm just updating an item from the array passed to the DataGrid 'rows' prop. (by state)

[michelengelen]

You should use updateRows from the grid api for this, so the group stays expanded. Updating the rows prop will update all rows and has a rerender of the rows as consequence.

Example:

const removeRow = React.useCallback(() => {
  apiRef.current.updateRows([{ id: 12, _action: 'delete' }]);
}, [apiRef]);

So, the scenario you described is actually expected behavior.

Does this help?

[lucasbachega]

cre

OK I understand. In my case, the table rows are generated from a state in Redux. The component responsible for updating each line is further away in the hierarchy, so I use Redux Toolkit's adapter.updateOne to perform the updates.
Alright then, thanks for your attention.

[michelengelen]

Sounds like you can solve your issue now, so I am closing here ... if you still need some help or encounter a related issue please feel free to reopen. 👍🏼

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@lucasbachega How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.