[DataGrid] Show Column Name in Menu Icon if Header is Too Small

[hlavacz]

If the column header width is too small, causing the column title to be hidden when hovering over the menu, display the column name as the menu icon’s title.

Before:

After:

[github-actions]

Thanks for adding a type label to the PR! 👍

[mui-bot]

Deploy preview: https://deploy-preview-16971--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 7f3d013

[michelengelen]

i dont have a clean solution for the mentioned case, but it should be something we need to take into consideration!

[michelengelen]

this can break with custom header renderers, where the first element isn't necessarily a text block, or there are follow-up elements like in the docs example: Custom header renderer

[KenanYusuf]

I would like to take a look at the issue of overflowing column headers more holistically, but haven't found the time yet. I don't think we should merge this until we have considered other options.

[hlavacz]

The main reason for this quick fix is that I use it in a data grid with lots of one- or two-digit columns that have long names. And since there’s no hover, it’s not ideal — especially because the users aren’t the best in this use case :) I don’t think it will actually break anything. But of course, any more complex solution is more than welcome. Let me know if I can help.