[DataGrid] Add `columnGroupingModel` #5133

alexfauquette · 2022-06-07T12:55:07Z

docs preview: https://deploy-preview-5133--material-ui-x.netlify.app/x/react-data-grid/column-groups/

with default style: https://codesandbox.io/s/basicgroupingdemo-demo-mui-x-forked-6vhr5j?file=/demo.tsx
with show right border style (it seems buggy when the total width is smaller than the container width): https://codesandbox.io/s/basicgroupingdemo-demo-mui-x-forked-7si9wc?file=/demo.tsx
performance demo: https://codesandbox.io/s/basicgroupingdemo-demo-mui-x-forked-fj4qcs?file=/demo.tsx

Changelog

You can now group columns by using the columnGroupingModel prop. This allows you to display more structured data.

To enable this feature, add experimentalFeatures={{ columnGrouping: true }}.
The grouping header can be fully customized.
See the documentation to explore everything it has to offer.

mui-bot · 2022-06-07T13:00:59Z

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	320.2	981.7	537.4	549.98	242.193
Sort 100k rows	ms	483.9	1,133.8	485.1	755.86	248.356
Select 100k rows	ms	207.5	295.6	247.5	250.66	33.515
Deselect 100k rows	ms	130.4	252.9	177.7	193.14	45.547

Generated by 🚫 dangerJS against e6e383e

alexfauquette · 2022-06-10T16:23:03Z

About vitualization:

Before/after the first/last rendered column, I loop on other visible as long as they extend the first/last group of a given header row. This allows to render groups that always have the correct width:

Virtualization can be tested here:
https://codesandbox.io/s/mui-material-ui-forked-mtqtx9?file=/src/App.tsx

100 columns grouped according to their binary expression

github-actions · 2022-06-10T23:03:08Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

docs/data/data-grid/column-groups/BasicGroupingDemo.js

gerdadesign · 2022-06-16T15:39:37Z

After speaking with @joserodolfofreitas, how do we feel about something along these lines to show column grouping (grouping by text size + border-bottom)? This would require having the column separator appear on hover to avoid feeling too overcrowded and busy.

Separator on hover — header row

Separator on hover — column group row 1

Figma exploration for reference

alexfauquette · 2022-06-21T11:23:55Z

@gerdadesign About the font-size varying depending on the hierarchical level, I'm a bit concerned because for now, we use only one font-size which is fixed for all the data grid as being theme.typography.body2

I've updated the codesandbox such that you can experiment with the different density factors

alexfauquette · 2022-06-21T12:55:26Z

@m4theushw I was looking at the aria-rowcount property, and it seems that every row should be counted. INcluding the column header (and now the rows of the column grouping)

I was not the case before:

header did not have aria-rowindex
aria-row-count was set to the number of rows and not the number of rows+1 (+1 for the header)

Is their a specific reason for that or can I modify all the tests to let them match the new behavior (include header in the rowcount)?

m4theushw

Great work so far. I think that columns not belonging to a named column group should belong to an empty group, so the column headers styling is consistent. It appears to be how AG Grid works: https://plnkr.co/edit/8TQhvj4m6obGYy2T?open=main.js

packages/grid/x-data-grid/src/hooks/features/columns/useGridColumnGrouping.ts

m4theushw · 2022-06-22T14:17:22Z

packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx

+        >
+          {depthInfo.elements.map(({ groupId, width, fields, colIndex }, groupIndex) => {
+            return (
+              <GridColumnGroupHeader


Could GridColumnHeaderItem be reused to have the same styling? We could add props to make it not clickable.

It's possible but it will be a bit hacky, because GridColumnHeaderIteminfers a lot of properties from column so I will have to provide a column props faking the column state from the parameters of the grouping model.

I'm also concerned by the number of conditions to introduce in GridColumnHeaderItem to support the two types of headers.

For example data-field becomes data-fields to be able to have a smooth resizing

The resizing function of a group will probably be different from the resizing of a column because for a column on each mouseMove we can get the difference before/after and apply the 2px modification to all cells.
But when a column group containing 4 columns is resized by 1px I'm not sure we can modify all rows by 0.25px

When introducing a collapsed/extended cell it will be new action buttons to set

Could it be possible to keep GridColumnHeaderItem and GridColumnGroupHeaderItem with their own interfaces and internal logic, but reuse the same styled-components in both such that we kept a unified style, but have custom props/logic adapted for each case

I tried something by introducing <GridGenericColumnHeader /> the two components GridColumnHeaderItem and GridColumnGroupHeader are now kind of wrapper, that adapt their props to the GridGenericColumnHeader

I think the current approach is good. I'm most concerned about reusing the same class names.

m4theushw · 2022-06-22T14:26:15Z

header did not have aria-rowindex

I see ariw-rowindex in the column headers row. I checked https://mui.com/x/react-data-grid/

aria-row-count was set to the number of rows and not the number of rows+1 (+1 for the header)

Yeah, according to the example in https://w3c.github.io/aria-practices/examples/grid/dataGrids.html#ex3_label the row count should include the headers. I don't know why this was left.

gerdadesign · 2022-06-22T16:42:05Z

In the demo, the information still seems clear without the additional type sizes, so perhaps this is ok to keep constant. I am seeing some differentiation in text weight and border thickness & color, though — can we verify it's the same as the other borders?

alexfauquette · 2022-06-24T09:40:59Z

@m4theushw About putting columns that do not belong to a group in the grouping model I do not understand what is the usecase.

For AG grid, I understand, because grouping is defined in the columnDefs so columns are here because you have to define them. For now, I defined the column grouping as a model distinct from the columns props.

So if a column does not appear in the grouping, by default it has no group

m4theushw · 2022-06-30T14:45:03Z

About putting columns that do not belong to a group in the grouping model I do not understand what is the usecase.

It won't have any functionality, it's more if users want to always show the bottom border, then have like a vertical separator to separate the groups. The way it was done here the border is in the groups. This can also be achieved with CSS.

github-actions · 2022-07-06T07:38:21Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

cherniavskii

Apart from few minor suggestions, looks good to me 👍

docs/data/data-grid/column-groups/column-groups.md

packages/grid/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx

packages/grid/x-data-grid/src/components/columnHeaders/GridColumnGroupHeader.tsx

packages/grid/x-data-grid/src/hooks/features/columnGrouping/useGridColumnGrouping.ts

packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx

packages/grid/x-data-grid/src/hooks/features/density/useGridDensity.tsx

packages/grid/x-data-grid/src/models/colDef/gridColDef.ts

docs/data/data-grid/column-groups/column-groups.md

github-actions · 2022-08-13T16:06:22Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

m4theushw · 2022-08-15T13:04:58Z

packages/grid/x-data-grid/src/components/columnHeaders/GridColumnGroupHeader.tsx

+      isResizing={false}
+      sortDirection={null}
+      hasFocus={false}
+      tabIndex={0}


The column group headers don't have keyboard navigation with the arrow keys, but with tabIndex=0 we can navigate with Tab between them. This is breaks the idea of only-one-focusable-element-per-grid from https://www.w3.org/WAI/ARIA/apg/patterns/grid/. I think they should be non-interactive.

Suggested change

tabIndex={0}

tabIndex={-1}

gerdadesign · 2022-08-19T18:38:42Z

Was there a decision made for the default group header size? If we plan to support filtering, sorting, and other actions available in the column menu, should we consider match the header height?

alexfauquette · 2022-08-21T14:52:50Z

@gerdadesign With the current space, seems that buttons can fit in the smaller height

In "compact" mode the ripple overflows a bit

The choice is between:

Smaller height to get group name closer to the column header
Same height to match what most of the other libraries are doing

About the menu, I do not think it will be as important as the column menu. In a group, filtering and sorting is not intuitive. The only action I found is group expansion which allows hiding/showing multiple columns on a single click, here is the AG-Grid example about sport results

Co-authored-by: Flavien DELANGLE <flaviendelangle@gmail.com> Co-authored-by: Danail Hadjiatanasov <hadjiatanasov@gmail.com> Co-authored-by: Matheus Wichman <matheushw@outlook.com> Co-authored-by: Andrew Cherniavskii <andrew.cherniavskii@gmail.com> Co-authored-by: José Rodolfo Freitas <joserodolfo.freitas@gmail.com> Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

oliviertassinari · 2022-10-28T13:01:09Z

@alexfauquette Should we update these or is the idea to wait for having more of the column header group features?

https://mui.com/pricing/

https://mui.com/x/react-data-grid/getting-started/#feature-comparison

https://next.mui.com/x/react-data-grid/getting-started/#feature-comparison

alexfauquette · 2022-10-28T14:03:02Z

Just checked with @joserodolfofreitas we can mark them as done. I'm opening the PR

oliviertassinari · 2022-11-09T20:50:47Z

@alexfauquette Awesome thanks, I linked the other PRs to this one so it's easier to understand the history.

@mui/xgrid On different notes, I landed on this page https://next.mui.com/x/react-data-grid/column-groups/ and noticed a few things, maybe for future follow-ups:

API design. Since the feature can be enabled with a single prop, it seems that columnGroupingModel would have been better named unstable_columnGroupingModel. This way, we can drop the experimentalFeatures, allowing developers to more easily follow BCs. I'm mostly raising this for future cases. IMHO experimentalFeatures should be limited to cases where we don't have any other API to enable a feature that isn't production ready.
The demo in https://next.mui.com/x/react-data-grid/column-groups/#define-column-groups could benefit from having a single-column group (instead of two). I would imagine that in most cases, in group is enough. it would make the demo easier to follow, and the demo feels better. It would
I struggle with the current look & feel, something doesn't fly for me, but I can't figure out how to really solve this. @gerdadesign I have tried:

vs. https://mui.com/x/react-data-grid/column-groups/#BasicGroupingDemo.tsx, more inlined with https://mui.com/material-ui/react-table/#column-grouping, it feels better, but it's not awesome either.
https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/collapsible-column-groups#angular-grid-collapsible-column-groups-overview-example is an interesting take but doesn't feel soo much MD.

alexfauquette force-pushed the columnGroup branch 2 times, most recently from 51ff034 to ee623e4 Compare June 10, 2022 12:16

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 10, 2022

cherniavskii reviewed Jun 13, 2022

View reviewed changes

docs/data/data-grid/column-groups/BasicGroupingDemo.js Outdated Show resolved Hide resolved

joserodolfofreitas requested a review from gerdadesign June 13, 2022 14:51

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 14, 2022

alexfauquette force-pushed the columnGroup branch from 882a701 to dab238f Compare June 21, 2022 11:22

m4theushw reviewed Jun 22, 2022

View reviewed changes

alexfauquette added 4 commits June 24, 2022 10:46

doc

1333b0a

scripts

395030b

first implementation

4c513de

update style

0a11d17

joserodolfofreitas mentioned this pull request Jul 1, 2022

[data grid] Implement Column groups #195

Closed

move column hydratation in a dedicated hook

22782a0

alexfauquette force-pushed the columnGroup branch from 2c68c04 to 22782a0 Compare July 2, 2022 15:51

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 6, 2022

alexfauquette added 2 commits July 6, 2022 10:55

Merge remote-tracking branch 'upstream/master' into columnGroup

2227d0c

add some tests

8e42932

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 6, 2022

cherniavskii approved these changes Aug 10, 2022

View reviewed changes

joserodolfofreitas reviewed Aug 11, 2022

View reviewed changes

alexfauquette added 2 commits August 12, 2022 09:22

use computed width

2bb9569

Andrew feedbacks

2c5ff80

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 13, 2022

m4theushw reviewed Aug 15, 2022

View reviewed changes

alexfauquette added 3 commits August 16, 2022 10:19

feedbacks

552f226

Merge remote-tracking branch 'upstream/master' into columnGroup

c2d9457

proptypes

7eaccb3

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 16, 2022

proptypes with up to date packages

1f71d42

joserodolfofreitas approved these changes Aug 18, 2022

View reviewed changes

use same heigh for column header and group header

e6e383e

This was referenced Aug 23, 2022

[data grid] Reflect column grouping in excel export #5878

Closed

[data grid] Allows keyboard navigation in column groups #5879

Closed

alexfauquette merged commit 81bc636 into mui:master Aug 23, 2022

oliviertassinari added component: data grid This is the name of the generic UI component, not the React module! new feature New feature or request labels Oct 28, 2022

This was referenced Nov 6, 2022

[docs] Mark data grid column group as available mui/material-ui#34918

Merged

[docs] Mark data grid column group available #6659

Merged

[docs] Mark data grid column group as available #6660

Merged

cherniavskii mentioned this pull request Dec 5, 2022

[DataGrid] Remove column separator to match table styles #7067

Merged

2 tasks

oliviertassinari mentioned this pull request May 30, 2023

[data grid] Alternative column header group design? #9162

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Add `columnGroupingModel` #5133

[DataGrid] Add `columnGroupingModel` #5133

alexfauquette commented Jun 7, 2022 •

edited

Loading

mui-bot commented Jun 7, 2022 •

edited

Loading

alexfauquette commented Jun 10, 2022

github-actions bot commented Jun 10, 2022

gerdadesign commented Jun 16, 2022

alexfauquette commented Jun 21, 2022

alexfauquette commented Jun 21, 2022

m4theushw left a comment

m4theushw Jun 22, 2022

alexfauquette Jun 24, 2022

alexfauquette Jul 8, 2022

m4theushw Jul 26, 2022

m4theushw commented Jun 22, 2022

gerdadesign commented Jun 22, 2022

alexfauquette commented Jun 24, 2022

m4theushw commented Jun 30, 2022

github-actions bot commented Jul 6, 2022

cherniavskii left a comment

github-actions bot commented Aug 13, 2022

m4theushw Aug 15, 2022

gerdadesign commented Aug 19, 2022

alexfauquette commented Aug 21, 2022

oliviertassinari commented Oct 28, 2022 •

edited

Loading

alexfauquette commented Oct 28, 2022

oliviertassinari commented Nov 9, 2022 •

edited

Loading

[DataGrid] Add columnGroupingModel #5133

[DataGrid] Add columnGroupingModel #5133

Conversation

alexfauquette commented Jun 7, 2022 • edited Loading

Changelog

mui-bot commented Jun 7, 2022 • edited Loading

alexfauquette commented Jun 10, 2022

github-actions bot commented Jun 10, 2022

gerdadesign commented Jun 16, 2022

Separator on hover — header row

Separator on hover — column group row 1

Separator on hover — column group row 1

alexfauquette commented Jun 21, 2022

alexfauquette commented Jun 21, 2022

m4theushw left a comment

Choose a reason for hiding this comment

m4theushw Jun 22, 2022

Choose a reason for hiding this comment

alexfauquette Jun 24, 2022

Choose a reason for hiding this comment

alexfauquette Jul 8, 2022

Choose a reason for hiding this comment

m4theushw Jul 26, 2022

Choose a reason for hiding this comment

m4theushw commented Jun 22, 2022

gerdadesign commented Jun 22, 2022

alexfauquette commented Jun 24, 2022

m4theushw commented Jun 30, 2022

github-actions bot commented Jul 6, 2022

cherniavskii left a comment

Choose a reason for hiding this comment

github-actions bot commented Aug 13, 2022

m4theushw Aug 15, 2022

Choose a reason for hiding this comment

gerdadesign commented Aug 19, 2022

alexfauquette commented Aug 21, 2022

oliviertassinari commented Oct 28, 2022 • edited Loading

alexfauquette commented Oct 28, 2022

oliviertassinari commented Nov 9, 2022 • edited Loading

[DataGrid] Add `columnGroupingModel` #5133

[DataGrid] Add `columnGroupingModel` #5133

alexfauquette commented Jun 7, 2022 •

edited

Loading

mui-bot commented Jun 7, 2022 •

edited

Loading

oliviertassinari commented Oct 28, 2022 •

edited

Loading

oliviertassinari commented Nov 9, 2022 •

edited

Loading