[data grid] Manage group visibility

[yzhang250]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

Hi there, my company (novartis) is using mui pro version and we are wondering when will the "Manage group visibility" feature available for data grid. That is a feature we are really interested in. And will there be a tool bar like a radio or selection box to select the groups the users want to show? Thanks!

Examples 🌈

• AG Grid https://www.ag-grid.com/javascript-data-grid/column-groups/#showing--hiding-columns

https://github.com/mui/mui-x/assets/3165635/ae956d94-8a0e-400d-b793-559552ab96ac

Motivation 🔦

No response

Order ID 💳 (optional)

No response

[m4theushw]

Do you mean https://github.com/mui/mui-x/issues/5235? If yes, it's not yet in our roadmap for the next quarters. You can upvote https://github.com/mui/mui-x/issues/5235 to signal your interest in having it delivered sooner.

[yzhang250]

@m4theushw Actually, I was referring to this one https://mui.com/x/react-data-grid/column-groups/#manage-group-visibility. Image: https://github.com/mui/mui-x/assets/3165635/9445aab7-ac7d-4360-94c0-9737d9215869. Is there a place to upvote it?

Also, can we make a suggestion that has an explicit check box selection for column group visibility in the toolbar instead of a drop-down-like column button (shown below) in the toolbar? Our experience is that most of the users will not use it or even understand it. [image: image.png]

[joserodolfofreitas]

Is there a place to upvote it?

@yzhang250 Yes, this issue.

can we make a suggestion that has an explicit check box selection for column group visibility in the toolbar instead of a drop-down-like column button (shown below) in the toolbar? Our experience is that most of the users will not use it or even understand it.

We'll improve our "Manage Columns panel" to support this use case in the future.

[joserodolfofreitas]

If you need this feature before we officially implement it, there's an alternative way with a custom implementation.

It's a quick hack and can get complex if you're looking for a general solution, but it might give a hint at how to implement the feature in some specific use cases. In the following live demo, I implemented a custom group header and used a React context to provide access to a column group map. This map holds the information if a column group is open or closed, and whenever this map is updated, it also updates the columns visibility model passed to the DataGrid. https://codesandbox.io/s/custom-column-group-visibility-w8yw3w?file=/demo.tsx

You can find more information on how the customization of group headers works at: https://mui.com/x/react-data-grid/column-groups/#customize-column-group

And you may also find useful the documentation on visibility: https://mui.com/x/react-data-grid/column-visibility/

[oliviertassinari]

@joserodolfofreitas Very nice workaround 👌 . I'm not sure we need to build anything for it, or maybe this should be done as a plugin; I doubt many people would want to be forced to the bundle size for this feature when it can be almost perfectly implemented in userland. The only downside I can spot in this workaround is the lack of animation, but this is probably a different problem, one related to the column visibility changes

[Tarunaditya973]

Can we get filter option for a column group to show/hide columns? or do we already have it?

[hdale94]

Can we get filter option for a column group to show/hide columns? or do we already have it?

This would be very useful, I can't find any info in the docs about it at the moment.