[data grid] Implement Column groups

[oliviertassinari]

Grouping columns allows you to have multiple levels of columns in your header and the ability, if needed, to 'open and close' column groups to show and hide additional columns.

Benchamark

• https://glideapps.github.io/glide-data-grid/?path=/story/glide-data-grid-docs--column-grouping
• https://www.telerik.com/kendo-react-ui/components/grid/columns/headers/
• https://ant.design/components/table/#components-table-demo-grouping-columns
• https://ag-grid.com/javascript-grid-grouping-headers/
• https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/banded-columns/
• http://schrodinger.github.io/fixed-data-table-2/example-column-groups.html
• https://ej2.syncfusion.com/react/demos/#/material/grid/stacked-header
• http://tabulator.info/examples/4.5#column-groups

---

Column group collapse

• https://glideapps.github.io/glide-data-grid/?path=/story/glide-data-grid-dataeditor-demos--column-group-collapse

[Yrlish]

Hi! Is there an update on this feature? Any roadmap goals or something? @oliviertassinari

[oliviertassinari]

@Yrlish No plans for it yet. It's low on the priority list (upvotes).

[flaviendelangle]

This feature was less requested than others like #198, #212, #211 or #206.
So to be fully transparent, we did not plan to do it in Q1 2022.

But if there is a need from the community, we should be able to plan it for Q2 👍

@xiaoyu-tamu, we are only updating the public roadmap one quarter at a time, because we don't want to give false hope on features that will be developed further away in time.
We started doing major features again in Q4 after a long period of stabilization, starting with the one which felt the more urgent for a lot of users (#210, #212, #438, #211, #200 for instance). But clearly this one is being discussed and will be prioritized 👍

[ezimon]

Totally get it, there are other more urgent issues at hand. I don't think this one should be very difficult to patch!! Thanks a lot for your reply, best regards

…

On Tue, Jan 25, 2022 at 9:18 AM Flavien DELANGLE ***@***.***> wrote: This feature was a lot less requested than others like #198 <#198>, #212 <#212>, #211 <#211> or #206 <#206>, so we did not plan to do it in Q1 2022. But if there is a need from the community, we should be able to push it for Q2 👍 — Reply to this email directly, view it on GitHub <#195 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AVQJBXQSUXYKK2RUHOISUULUX2IKTANCNFSM4QHJRGHQ> . You are receiving this because you commented.Message ID: ***@***.***>

[tierneynr]

Also would love to see this feature added. Good to see it's prioritized

[manenigma]

I hope to see this feature as soon

[FlorianGG]

I hope it will be added soon

[ghost]

I hope it will be added soon

[hnrq]

Is there any workaround for that now? Tried to customize Toolbar/Header, but horizontal scrolling doesn't work

[iluvmemes]

@oliviertassinari is there any room for this on your upcoming features? I noticed that it has many more upvotes than some of the items viewable in the future on the public MUI X roadmap.

[flaviendelangle]

I can add it to the Future column, it is clear that we are going to do it at some-point.
Given the traction around this feature, it is likely that we will start working on it on Q2, but we can't guarantee it yet.

[Gh0stscript]

Sad to see this hasn't been moved into the Q2 section on the road map. Looking at replacing the current data grid we're using, and your data grid would certainly seems it would be the best fit overall, and already covers majority of the current needs, with the exception of the ability of having grouped header columns - and as such keeping me on the fence.

Thought I certainly agree with the other features being prioritized, I do see this as being one of the vital core features a data grid should have, to avoid having to use excessively long column names when presenting certain types of data (E.g. shipper and receiver address information) to maintain a clear distinction to the user.

Is there any chance still that we might see this one included during Q2?

[joserodolfofreitas]

Hi @Gh0stscript, as @flaviendelangle said, we cannot guarantee the delivery of this feature in Q2. That's why we decided not to add it to Q2's public roadmap. But given its popularity within the community, we do plan to work on it soon (please keep upvoting your favorite issues; it helps us a lot!).

We might be able to deliver it in Q2, and if not, it's happening at the beginning of Q3.

[yay]

We really need this at JP Morgan for our designs. I've been researching the features you have for the past few days and encouraged by the progress you've made in the recent months (really impressive!) but this is a deal breaker. I mean, how would we implement column grouping ourselves on top of what you have in a way that's not shoddy?

So we are now evaluating AG Grid and Ant Design table that both support this feature and still don't lack in the areas MUI grid is good at or recently became good at. We are currently using Material UI grid v4.0 and plenty of other Material UI components and would really love to keep it that way, even if using MUI DataGridPro requires a license.

[hafley66]

@yay We bought this grid without knowing we would need column groups, so you are right, any implementation is shoddy but can be stable on top of virtualization/scrolling.

It is less stable when resizing, and we don't use drag re-order so its not accounted for. Also not accessible.

Looking forward to ripping out my shoddy code, as it makes updating that much harder since i override/extend so much

(Sorry, this is my first gif upload, it looks weird)

[Bindeep]

@mrpacman101, the PR to implement this feature is still on draft. But we'll likely ship it in a few weeks.

Would you mind sharing a bit more about your use cases? cc @juliusdanek @sahil-ag

@joserodolfofreitas
We need this to group column headers with sorting possible.
Similar with this issue one but we are using data grids.

[flaviendelangle]

with sorting possible.

Do you need sorting on each child column or on the column group ?

[Bindeep]

with sorting possible.

Do you need sorting on each child column or on the column group ?

Each child column.

[flaviendelangle]

In that case there should be no problem with the implementation we are preparing 👍

[sahil-ag]

@mrpacman101, the PR to implement this feature is still on draft. But we'll likely ship it in a few weeks.

Would you mind sharing a bit more about your use cases? cc @juliusdanek @sahil-ag

Sorry for missing this comment.
We have some data in excel currently (we generate a report in Excel which is emailed) which has a ton of header merged cells (mostly information style cells). We are trying to move to UI pages. We were earlier using https://tanstack.com/table/v8/docs/examples/react/column-groups in our project, but facing some issues with CSS Integration within our pages.

[rajat1443]

Hey guys,
We are currently waiting for this issue. It's been hindering our development. Any updates on this? If not, can you suggest a workaround for the same??

[joserodolfofreitas]

The feature is under code review, and we'll likely launch it soon.
Please, feel free to check out our documentation preview to see the feature in action.

[sunilsr1986]

Thanks for this feature. Is there a way we could style the column group with specific classes, right now headerClassName is not getting applied for columnGroupingModel.

[sunilsr1986]

Like the background color is not possible now.

[alexfauquette]

@sunilsr1986 Thanks for your feedback

The current implementation allows .MuiDataGrid-columnHeader--filledGroup and .MuiDataGrid-columnHeader--emptyGroup to target "group" and "empty group"
https://codesandbox.io/s/customizationdemo-demo-mui-x-forked-82dbps?file=/demo.tsx:2823-2860

I did not thought about the headerClassName which is a nice idea. I will add it to the properties of columnGroupingModel 👍

[sunilsr1986]

Thanks for the quick one and considering it. Ya right now I am managing with those two classes. Ya if the class names are added it would be nice to have each column group have it's own style / color. Please let us know if that's in. I can jump in to try that.

[alexfauquette]

@sunilsr1986 Feature has been added. You can see it in action in the customization demo

[keemor]

@alexfauquette Thanks for the effort & info

I checked on the latest version (5.15.1) but it's not there yet
https://codesandbox.io/s/basicgroupingdemo-demo-mui-x-forked-v3e6zs?file=/demo.tsx

[alexfauquette]

@keemor As long as the PR is not merged it's not available on the released version.

Before releasing the feature, codesandbox generate a preview package from the PR, such that you can experiment with it before the release. This allows to share early feedbacks like the one about headerClassName

[sunilsr1986]

Just wondering the width doesn't match the sub header when we give flex 1

[sunilsr1986]

https://codesandbox.io/s/basicgroupingdemo-demo-mui-x-forked-unc6mv

[alexfauquette]

@sunilsr1986 I've been using the column width which by default is 100. To support flex properties I should use computedWidth. Now it's fix

[sunilsr1986]

Tested and it's working good. Thanks for that .. I have couple more involved. Could you please have a look with these as well ?

Tested package https://pkg.csb.dev/mui/mui-x/commit/2c5ff802/@mui/x-data-grid

[sunilsr1986]

• When I do the table export I don't get the master header with the downloaded sheet. If you see in the attached screenshot it's missing the primary header.

It's supposed to be like below .

• When I use the column selector and click on hide all .. I get this screen with the mentioned error .
  
  

[alexfauquette]

@sunilsr1986 Yes, some features are missing from now and will be added one after the other. Here is the list of the one planned

• export column group in excel
• allows keyboard navigation in column groups
• manage column visibility from the column group
• allows reordering groups
• allows resizing groups

Those features will be done in distinct commits such that we can have a detailed review of each of them, and not having them lost in the current PR.

If you see other feature interaction we missed, feel free to ask for them. I will create the issues when PR is merged

[soumyaa1804]

Hey, is this feature a commercial one? How to check that?

[Viicos]

Hey, is this feature a commercial one? How to check that?

@soumyaa1804 According to the documentation preview, it seems to be a free one.