[DataGrid] Fix Column title UX. The header title is cut and looks empty

[dtassone]

@dtassone we have this regression - https://www.argos-ci.com/mui-org/material-ui/builds/3599 after upgrading to @material-ui/data-grid@4.0.0-alpha.29, is it expected? I assume is because of the new sorting icon. Maybe we should increase the width of the table in this example.

Yes but looking at it now, I don't think it's great. We have largely enough space to render the title, it looks empty, and you wonder why the col title is not there or is cut as in the image below.

Originally posted by @dtassone in mui/material-ui#26382 (comment)

[oliviertassinari]

It would be interesting to explore if we can use display: none over only using opacity: 0.

[m4theushw]

It would be interesting to explore if we can use display: none over only using opacity: 0.

The transition is lost with display: none. I see some options:

1. Use the Fade component to be able to use display: none and not lose the transition.
2. Change the default icon for one that is always visible - This will make the component to look different from https://next.material-ui.com/components/tables/#sorting-amp-selecting.
3. Explore position: absolute - I used that when trying to fix the center alignment but it create other problems.
4. Do nothing - The user only has the impression that is empty because the icon only appears on hover, but once the column is sorted the icon becomes always visible.

[oliviertassinari]

👍 for option 4 with a fix of the default dataset but an important concern with option 4 is how much space is wasted in the column header.

Maybe even better, we could do Option 5: we drop the opacity animation and use display: none.

cc @dtassone @m4theushw

[flaviendelangle]

@DanailH can we consider that #2606 is fixing this issue ?

[m4theushw]

@flaviendelangle There's still one small detail left. When the column is filtered, the icon doesn't stay always visible like in the sorting.

[oliviertassinari]

I believe we have one other UX regression (the first one being #1712 (comment)) from #2606. The icons placement is off:

https://next--material-ui-x.netlify.app/components/data-grid#mit-version

I have also noticed a change that we seem to have already fixed. See how the icon button was no longer visible when the column menu is open

#2606

v4, HEAD

[m4theushw]

Fixed by #2606

#1712 (comment) will be fixed by #4025