react-data-grid
react-data-grid copied to clipboard
adazzle
Multi-row headers/grouped headers
Here is an MVP version of multi-level headers. I kept the initial types and structure from https://github.com/adazzle/react-data-grid/pull/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.
https://user-images.githubusercontent.com/10929022/136217028-d55a643c-52a4-429b-817f-fa1688911156.mp4
@amanmahajan7 @nstepien Hi, do you guys plan to review/merge this PR in near future? Everybody would love this feature (including me/my team)
@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 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?
@ekeuus Hi! We've tested column group. And I have a questions.
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)
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
@ekeuus Hi, should I describe something more? Or maybe you need some demo?
@ekeuus Hi again. Also we need to handle column groups collapse by click, so for that I need a custom headerRenderer for ColumnGroup
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.
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
Can someone pls look into this. This is a must have feature , required for our team as well
