Multi-row headers/grouped headers

[ekeuus]

Here is an MVP version of multi-level headers. I kept the initial types and structure from #2393.

I was not 100% sure how and if we want to also implement multi-level support. Maybe would be nice to first discuss how we should implement flattening of all of the levels. I did implement a ref-based method flattenColumnGroups that goes through the whole tree and splits them up by level for easier access later.

Also, I am not sure what to do if some of the columns are not grouped:
Parent 1 | Parent 2 |
Child 1 | Child 2 | Regular column 3

I propose we do not allow this via the types so that the code stays simpler. Implementing rowSpan for the header columns seems overkill, but if we do want it, it kind of defines the technical implementation.

screencast-localhost_6006-2021.10.06-15_49_27.mp4

[JanLechowskiTheFirst]

@amanmahajan7 @nstepien Hi, do you guys plan to review/merge this PR in near future? Everybody would love this feature (including me/my team)

[alexey-koran]

@ekeuus Hi!

We've tested column group. And I have a questions.

Can ColumnGroup include renderer and class property?

And is it possible to combine Columns and Columns groups in one columns DataGrid?

[ekeuus]

@ekeuus Hi!

We've tested column group. And I have a questions.

Can ColumnGroup include renderer and class property?

And is it possible to combine Columns and Columns groups in one columns DataGrid?

What is the use case of having the renderer? Only the child columns will have rendering needs, since the parent columns are just decorative.

Or do you mean it for the first column on your picture? So that the cell contents can also be defined on the parent column?

[alexey-koran]

@ekeuus Hi!
We've tested column group. And I have a questions.
Can ColumnGroup include renderer and class property?
And is it possible to combine Columns and Columns groups in one columns DataGrid?

What is the use case of having the renderer? Only the child columns will have rendering needs, since the parent columns are just decorative.

Or do you mean it for the first column on your picture? So that the cell contents can also be defined on the parent column?

Yes, sorry, maybe I wrote a little incomprehensibly
I am referring to a Headers renderer to customize the ColumnGroup header as it is in the Column (FLCHeader example in the screenshot)

[alexey-koran]

Or do you mean it for the first column on your picture? So that the cell contents can also be defined on the parent column?

The first column at my screenshot now is the Column group with one FLC column, it is needed in this way because FLC Column stores different logic then other matrix column groups. And It's used as a tree

And now we just don't pass the headerRenderer to the FLC column (in the screenshot) so as not to duplicate header names

But FLC column component stores other logic, with redux, so anyway we need to pass it or inside Column Group, or not pass column group name, and stay like it was at my previous post.

Also my question was about, maybe it somehow available to combine columns near column groups inside one columns DataGrid property

Because now if we pass column and column groups it goes by the library inside the first column group (looks like it's not foreseen

[alexey-koran]

@ekeuus Hi, should I describe something more? Or maybe you need some demo?

[alexey-koran]

@ekeuus Hi again. Also we need to handle column groups collapse by click, so for that I need a custom headerRenderer for ColumnGroup

[alexey-koran]

@ekeuus Hi. Any updates?

[ekeuus]

I don't think the maintainers care about this branch unfortunately so I am also not putting too much time into this at this current time.

Doesn't seem like it would be merged anyway.

[alexey-koran]

I don't think the maintainers care about this branch unfortunately so I am also not putting too much time into this at this current time.

Doesn't seem like it would be merged anyway.

Understood, very sad to hear. It's much important feature I guess

[gopinathshiva]

Can someone pls look into this. This is a must have feature , required for our team as well

[amanmahajan7]

This is supported in RDG now
https://adazzle.github.io/react-data-grid/#/column-grouping
https://github.com/adazzle/react-data-grid/blob/main/src/DataGrid.tsx#L111