Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Collapsible Header Group disappears when all children columns are hidden #15012

Open
espcoder opened this issue Oct 17, 2024 · 1 comment
Open
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! feature: Column groups Related to the data grid Column groups feature status: waiting for author Issue with insufficient information

Comments

@espcoder
Copy link

espcoder commented Oct 17, 2024

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.
image

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.
image

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

@espcoder espcoder added bug 🐛 Something doesn't work status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 17, 2024
@github-actions github-actions bot added the component: data grid This is the name of the generic UI component, not the React module! label Oct 17, 2024
@MBilalShafi
Copy link
Member

MBilalShafi commented Oct 20, 2024

@espcoder For this specific recipe, currently it's the limitation that a collapsible group must have at least one non collapsible column because it's implemented in the userland and the Data Grid doesn't internally support this functionality.

The internal functionality will be handled with #14033 along with the use-case you mentioned. Feel free to upvote and (/or) subscribe to the issue for updates.

I think we should mention this limitation on the documentation page.
CC @cherniavskii

@MBilalShafi MBilalShafi added status: waiting for author Issue with insufficient information feature: Column groups Related to the data grid Column groups feature and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! feature: Column groups Related to the data grid Column groups feature status: waiting for author Issue with insufficient information
Projects
None yet
Development

No branches or pull requests

2 participants