Collapsible Header Group disappears when all children columns are hidden

[espcoder]

Steps to reproduce

Link to live example: (required): https://codesandbox.io/p/sandbox/mui-datagrid-collapsible-group-header-disappears-fhz639

• the sandbox starts with the collapsible column header example on the docs page and adds a column header group and 2 columns as children.

Steps:

1. Click the 'collapse' icon in the Approvals header group
2. Observe that the Approvals header group is now hidden.

Repro video: https://github.com/user-attachments/assets/70fbd1b3-7266-4a5e-9bad-aa3e48d981a7

Current behavior

When a collapsible header group hides all of it's children columns the header group is hidden as well as the children columns. See repro steps and video for more detail.

Expected behavior

When a collapsible header group hides all of it's children columns the header group should remain visible so the column can be expanded to show the child columns.

Expected behavior video: https://github.com/user-attachments/assets/c02c5de2-eb0a-4013-81ae-d4d0f509b68c

Context

I am building a report which has repeating columns with children columns. This report is getting wide and we want to collapse column groups to save space and focus on particular header groups. Similar to the image below except we have several more sets of columns in header groups.

We'd like to control the collapse/expand from a control in the header group and show just the icon when the group is collapsed so we save the width of the text and would have a narrow column through the report.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: data grid