[DataGrid] Improved column menu design and api #6619

MBilalShafi · 2022-10-24T10:36:08Z

Preview: https://deploy-preview-6619--material-ui-x.netlify.app/x/react-data-grid/column-menu/#column-menu-with-pro-premium-options

Changelog

New column menu design with improved look and feel
Ability to add new menu items and place them on any order
Replaced all the items to be injected via pipe processor for better control through respective hooks
Added ability to override/reorder column menu items which may help add more items in any order e.g. for [data grid] Add an option to clear column contents #5307
Ability to customize the menu by passing a component in column menu slot
New l10n labels added
Added dedicated component and icon slots for Pro and Premium packages for shipping only required components per package
Fix accessibility bug of focus shifting to body when an item gets hidden

Breaking changes

column and currentColumn is now renamed to colDef
DATA_GRID_DEFAULT_SLOTS_COMPONENTS export has been removed

Some of the components have been renamed for consistency.

Community Package:

- <GridFilterMenuItem />
+ <GridColumnMenuFilterItem />

- <HideGridColMenuItem />
+ <GridColumnMenuHideItem />

- <GridColumnsMenuItem />
+ <GridColumnMenuColumnsItem />

- <SortGridMenuItems />
+ <GridColumnMenuSortItem />

- interface GridFilterItemProps
+ interface GridColumnMenuItemProps

Pro package:

- <GridColumnPinningMenuItems />
+ <GridColumnMenuPinningItem />

Premium package:

- <GridAggregationColumnMenuItem />
+ <GridColumnMenuAggregationItem />

- <GridRowGroupingColumnMenuItems />
- <GridRowGroupableColumnMenuItems />
+ <GridColumnMenuGroupingItem />

Design

mui-bot · 2022-10-24T10:41:07Z

	Messages
📖	Netlify deploy preview: https://deploy-preview-6619--material-ui-x.netlify.app/

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	683.5	1,076.8	707.4	860.56	150.949
Sort 100k rows	ms	628.9	1,310.2	913.8	956.5	216.608
Select 100k rows	ms	235.6	363.2	248.9	281.74	49.229
Deselect 100k rows	ms	156.7	294.3	230	233.8	47.351

Generated by 🚫 dangerJS against 07c4472

…r refactorings

github-actions · 2022-11-02T10:05:08Z

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

packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenu.ts

cherniavskii

Looks great, we are almost there! 👍
Would be great to get Gerda's feedback on it! cc @gerdadesign

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

docs/data/data-grid/column-menu/CustomColumnMenuGrid.tsx

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

packages/grid/x-data-grid-premium/src/components/GridColumnMenuRowUngroupItem.tsx

packages/grid/x-data-grid-premium/src/components/GridPremiumColumnMenu.tsx

cherniavskii

Awesome!

packages/grid/x-data-grid-premium/src/hooks/utils/useKeepGroupedColumnsHidden.ts

packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx

packages/grid/x-data-grid/src/locales/itIT.ts

cherniavskii · 2022-12-22T15:14:35Z

scripts/x-data-grid-pro.exports.json

@@ -10,13 +10,15 @@
  { "name": "CursorCoordinates", "kind": "Interface" },
  { "name": "daDK", "kind": "Variable" },
  { "name": "DATA_GRID_DEFAULT_SLOTS_COMPONENTS", "kind": "Variable" },
+  { "name": "DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS", "kind": "Variable" },


Do we need to export these?

Good point, we don't need these extra exports, removed them in 4f488b6

gerdadesign · 2022-12-22T15:42:28Z

This is shaping up really well!

Just noticing two things:

In the docs under Custom menu component. Is there extra padding added? The menu items no longer appear full-width (this is particularly noticeable on hover). Should there also be a divider between the end of the default menu options and the added custom one?

In dark mode, the icons look like they are at 100% white. Material Design has icon color guidelines listed for dark mode as Active + Unfocused @ 70% opacity; Focused @ 100%.

MBilalShafi · 2022-12-22T16:20:25Z

The menu items no longer appear full-width (this is particularly noticeable on hover).

You are right, this demo doesn't follow the default styling guidelines as the purpose is to depict the customizability possible with the column menu. Though the padding did look a bit off, I adjusted it, thanks for pointing out.

In dark mode, the icons look like they are at 100% white. Material Design has icon color guidelines listed for dark mode as Active + Unfocused @ 70% opacity; Focused @ 100%

I checked, the icons use the same colors as in material-ui <Menu /> component, you can verify by comparing current column menu icons colors and the colors in icons demo for material-ui menu component. (Please let me know if you find some discrepancies)
May be we should update in Menu component itself if it doesn't follow material design guidelines you referred to. 🤔

gerdadesign · 2022-12-23T03:17:52Z

I checked, the icons use the same colors as in material-ui <Menu /> component, you can verify by comparing current column menu icons colors and the colors in icons demo for material-ui menu component. (Please let me know if you find some discrepancies)
May be we should update in Menu component itself if it doesn't follow material design guidelines you referred to. 🤔

Thanks for calling this out! It is in the Material UI Menu component. I opened a new issue: mui/material-ui#35589 about it.

oliviertassinari

Nice UX improvement 👍

oliviertassinari · 2022-12-31T17:50:11Z

packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx

-  function GridColumnMenuContainer(props: GridColumnMenuProps, ref) {
-    const { hideMenu, currentColumn, open, id, labelledby, className, children, ...other } = props;
+const StyledMenuList = styled(MenuList)(() => ({
+  minWidth: 248,


I wonder if it's not a bit too much width on mobile. The column menu feels a bit big. Hiding more information on the screen than might be necessary.

oliviertassinari · 2023-03-21T15:40:59Z

I might have found design opportunities in the aggregation introduced in this PR. I have found them while I was reviewing the changes in https://mui.com/blog/mui-x-v6/. Should we create issues for them? cc @gerdadesign @MBilalShafi

The hover style feels confusing. I would expect a hover style to communicate that I can click, but clicking does nothing:

https://deploy-preview-6619--material-ui-x.netlify.app/x/react-data-grid/aggregation/

How about we remove the hover?

The scrollbar jumps when I open the aggregation:

Screen.Recording.2023-03-21.at.17.06.01.mov

https://deploy-preview-6619--material-ui-x.netlify.app/x/react-data-grid/aggregation/#filtering

MBilalShafi · 2023-03-31T04:26:52Z

The column menu feels a bit big. Hiding more information on the screen than might be necessary.

I think the same will be the experience on mobile with aggregation/grouping items shown even if the width constraint is not applied, but we can save some space on Community/Pro versions by adding a media query. 👍

How about we remove the hover?

That makes sense, to improve the user's expectation until we propose a better UX for aggregation item (a dedicated panel or part of some other panel etc)

The scrollbar jumps when I open the aggregation

I think it's because of an issue with <MUISelect /> as it adds some hacky CSS to body when the menu opens up.

What we can possibly do:

Use the SelectUnstyled and style it accordingly
Use native HTML <select />
✅ Use native prop in MUI Select

I feel the third option is a sweet spot.

We use the same configuration in the Filter panel
It will resolve the flicker issue and also keep the TextInput component's design the same without additional styling

So maybe for now it makes sense to go for possibility no.3

Have tried to apply the above-mentioned changes in #8424

cc @gerdadesign

Improves column menu

b109ff5

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

MBilalShafi requested review from flaviendelangle, DanailH, cherniavskii and m4theushw October 24, 2022 10:36

MBilalShafi added 10 commits October 25, 2022 15:52

Does some visual updates as per discussion

b6bdee4

Runs scripts

c466fac

Runs scripts

ad09883

Runs scripts

18e526f

Improves logic and adjusts styling

533c11c

Improves logic

9384d9c

Updates designs on a few components

a5b615b

Updates interfaces and CSS as per discussions

794c56f

Removes localization change

efbaff2

Allows disabling, removing, reordering, adding of menu items and othe…

f7ee267

…r refactorings

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

MBilalShafi added 5 commits November 2, 2022 15:56

Uses svg icons instead of icons-material ones

c5b0a7b

Generates proptypes

0342f8d

Updates method name and a few changes

756d2d4

Updates types, docs and other refactorings

e9e5b54

Merge branch 'next' into 4929-improve-column-menu

1cfdcb1

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

Moves icons and components in appropriate packages

376dfab

Fix cell header focus not working as expected

665abb4

MBilalShafi commented Dec 21, 2022

View reviewed changes

packages/grid/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenu.ts Outdated Show resolved Hide resolved

MBilalShafi added 3 commits December 21, 2022 13:25

Type casting to string

408e0ac

Andrew's suggested solution for focus management

ab198c3

Update solution to more concrete one

180350f

cherniavskii reviewed Dec 22, 2022

View reviewed changes

MBilalShafi added 2 commits December 22, 2022 18:33

Resolves CR comments

ef0f50e

Update migration guide

b0ab240

cherniavskii approved these changes Dec 22, 2022

View reviewed changes

Resolves more comments

4f488b6

MBilalShafi added 3 commits December 22, 2022 21:32

l10n

c7201cc

More comments

29b911a

Migration guide

6ee73b7

Reverts unnecessary condition

07c4472

MBilalShafi merged commit 9d34b65 into mui:next Dec 23, 2022

MBilalShafi deleted the 4929-improve-column-menu branch December 23, 2022 07:33

cherniavskii mentioned this pull request Dec 23, 2022

[DataGridPremium] Export GridRowGroupingColumnMenuItems component #6240

Closed

1 task

gerdadesign mentioned this pull request Dec 27, 2022

[material-ui][Menu] Update icons to behave consistently in light & dark mode mui/material-ui#35589

Open

2 tasks

oliviertassinari reviewed Dec 31, 2022

View reviewed changes

MBilalShafi mentioned this pull request Jan 2, 2023

[codemod] Reorganize codemods and add rename column menu components codemod #7368

Merged

MBilalShafi mentioned this pull request Mar 29, 2023

[DataGrid] Column menu visual updates #8424

Closed

cherniavskii mentioned this pull request May 8, 2023

[Popper] Position shift when the scroll is blocked mui/material-ui#37207

Closed

2 tasks

oliviertassinari added design This is about UI or UX design, please involve a designer and removed design: ux labels Aug 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Improved column menu design and api #6619

[DataGrid] Improved column menu design and api #6619

MBilalShafi commented Oct 24, 2022 •

edited

Loading

mui-bot commented Oct 24, 2022 •

edited

Loading

github-actions bot commented Nov 2, 2022

cherniavskii left a comment

cherniavskii left a comment

cherniavskii Dec 22, 2022

MBilalShafi Dec 22, 2022

gerdadesign commented Dec 22, 2022 •

edited by oliviertassinari

Loading

MBilalShafi commented Dec 22, 2022 •

edited

Loading

gerdadesign commented Dec 23, 2022 •

edited by oliviertassinari

Loading

oliviertassinari left a comment

oliviertassinari Dec 31, 2022 •

edited

Loading

oliviertassinari commented Mar 21, 2023 •

edited

Loading

MBilalShafi commented Mar 31, 2023 •

edited

Loading

[DataGrid] Improved column menu design and api #6619

[DataGrid] Improved column menu design and api #6619

Conversation

MBilalShafi commented Oct 24, 2022 • edited Loading

Changelog

Breaking changes

Design

mui-bot commented Oct 24, 2022 • edited Loading

github-actions bot commented Nov 2, 2022

cherniavskii left a comment

Choose a reason for hiding this comment

cherniavskii left a comment

Choose a reason for hiding this comment

cherniavskii Dec 22, 2022

Choose a reason for hiding this comment

MBilalShafi Dec 22, 2022

Choose a reason for hiding this comment

gerdadesign commented Dec 22, 2022 • edited by oliviertassinari Loading

MBilalShafi commented Dec 22, 2022 • edited Loading

gerdadesign commented Dec 23, 2022 • edited by oliviertassinari Loading

oliviertassinari left a comment

Choose a reason for hiding this comment

oliviertassinari Dec 31, 2022 • edited Loading

Choose a reason for hiding this comment

oliviertassinari commented Mar 21, 2023 • edited Loading

MBilalShafi commented Mar 31, 2023 • edited Loading

MBilalShafi commented Oct 24, 2022 •

edited

Loading

mui-bot commented Oct 24, 2022 •

edited

Loading

gerdadesign commented Dec 22, 2022 •

edited by oliviertassinari

Loading

MBilalShafi commented Dec 22, 2022 •

edited

Loading

gerdadesign commented Dec 23, 2022 •

edited by oliviertassinari

Loading

oliviertassinari Dec 31, 2022 •

edited

Loading

oliviertassinari commented Mar 21, 2023 •

edited

Loading

MBilalShafi commented Mar 31, 2023 •

edited

Loading