[DataGrid] Improve support for custom ColumnMenu

[hellpirat]

Hello, Is there anyway to use the custom ColumnMenu component?

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Examples 🌈

components={{ ColumnMenu: CustomColumnMenu }}

Motivation 🔦

I want to use CustomMenuComponent for deleting/editing column

[oliviertassinari]

Ok, actually, no, it's not a duplicate of #926. There is still work (and breaking changes) that need to be done in order to allow developers to create custom column menus before it can be documented. Exposing a slot is far from enough when it comes to composability.

What I could find, so far:

• The name of GridColumnHeaderMenuItems is confusing. Why isn't it called GridColumnMenu to match the name of the slot? It took me some time to figure it out. Fixed in [docs] Api page update with component slots #969
• GridColumnHeaderMenuItems is exported in @material-ui/x-grid but not @material-ui/data-grid.
• The column menu is not accessible, it's a major blocker we need to solve before condition any public API [DataGrid] The column menu isn't accessible #882.

Things that I would challenge:

• It's currently hard to add new items in the column menu, without having to pull-in code that will likely break between different releases. The custom id, the fact that solving the keyboard problem will require to break down, SortMenuItems, etc.

[oliviertassinari]

@hellpirat To clarify your use case, are you looking to completely replacing the content of the column menu or are you looking for adding new items inside it?

[hellpirat]

I wanted completely replace the content with my buttons inside this Menu.
I solved this with ColumnMenu: CustomMenu

[oliviertassinari]

@hellpirat Ok thanks. In this case, I think that we can close the issue with:

• [DataGrid] The column menu isn't accessible #882 fixing the accessibility of the column menu
• Removing the MenuList component from the ColumnMenu slot, developers likely don't need to know about it, providing a MenuItem should be enough.
• Removing the need for handling onClick. We can listen to the event on MenuList, adding onClick to each menu item doesn't seem to yield value.
• Add a new documentation page for, which is the most important, as it forces to be in empathy with developers, to see if the solution delivers end-to-end.

For extending the existing actions, it then becomes a matter of importing or not the existing components.

[kodeschooler]

I am upgrading to this new grid and I love it so far. However, our site needs to be multi-language according to the language the browser is in. The column menu is still showing in English. I need to be able to modify the text of the different menus in the list, so not necessarily doing a custom menu. I just need to be able to change the text displayed. For example,

• Ordenar por ASC instead of Sort By ASC
• Ordenar por Descripción instead of Sort By DESC
• Filtrar instead of Filter
• Esconder instead of Hide
• Mostrar columnas instead of Show Columns
• Esclasificar instead of Hide

Can this be done? I didn't notice anything in the documentation

[flaviendelangle]

https://mui.com/components/data-grid/localization/#main-content

You should be able to switch the language as described on this doc page 👍
If some translations are missing, feel free to open a Pull Request to add them (see #3211)

[MoonSulong]

@flaviendelangle @oliviertassinari What if I would like to add new items inside the menu?

For example, I add an option called percentage that can covert a column from number to percent

1. How can I match the style of new option to others?
2. How can I modify the column after clicking? Which API should I use to rerender the column ? Should I use valueFormatter ?

Here is the sandbox link

[flaviendelangle]

1. Take a look at the code of the other menu items (SortGridMenuItems for instance), they are using MenuItem for @mui/material/MenuItem

2. You need to update the state of the grid. Passing a modified column to GridColumnMenuContainer won't change the values displayed on screen. We clearly lack documentation for the imperative columns update. And yes I would personally use valueFormatter.

Here is a working example

[Sakura-pgh]

@flaviendelangle Hi ~
Is custom ColumnMenu only supported in the Pro version?

[flaviendelangle]

Not that I'm aware of, what makes you think that ?

[Sakura-pgh]

@flaviendelangle Because I have seen in many Demos that the relevant components are brought in from "@mui/x-data-grid-pro"

import { GridColumnMenu, GridColumnMenuContainer, GridFilterMenuItem, SortGridMenuItems, useGridApiContext } from "@mui/x-data-grid-pro";

[flaviendelangle]

For the codesandbox above, you should be able to just replace the DataGridPro with the DataGrid

[rgilsimoes]

Any option to close the Menu after clicking on a custom action?!