[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

https://github.com/user-attachments/assets/19d7920e-f2da-4102-91f4-7eb236d842c2

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[bot]]

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.