[EuiDataGrid] Avoid changing column header height on hover

[flash1293]

Problem Statement

It's possible to have variable-height column headers for the data grid which is handy for long field names. However, the context menu is only shown on hover and changes the space available for the app-controlled content, which causes a weird effect changing the height and text moving around when transitioning in the icon button, like here in Discover:

elastic/kibana#238691

Proposed Solution

In the case of right-aligned single-row column headers, the current behavior is great because the content isn't shadowed on hover:

I think it would be great to either

• make it configurable via prop whether the context menu icon button is shown on top of the app-controlled header cell so it's overlaying it
• make it configurable via prop whether the context menu icon is always visible and not only shown on hover

This way, for cases where lots of content in the header cells is expected we can avoid the transition height change effect without changing the default behavior.

Happy for other solutions that avoid the height-changing effect.

Use Case

This is requested in the context of the Streams processing and routing UI preview table. By default, this table shows all columns which means it's very common for space in the header row to be tight.

Value / Impact

Since long field names are common, it's very common for them to get truncated. The height-changing transition effect on hover is easy to trigger accidentally when moving the mouse, confusing the user and looking a bit unprofessional in general.

Urgency

This is not a blocker, but also not a simple nice-to-have, I think "Medium" fits.

Do alternatives or workarounds exist?

Not aware, but happy to learn I'm wrong.

FYI @patpascal

[JasonStoltz]

Hey @flash1293 👋

Sorry for the late reply.

I see your point. I'm moving this one to the Backlog for now, but I'm not sure when we'll be able to prioritize this.

Anything you can do to get us started here would be a big help -- at minimum, if you're able to reproduce this in CodeSandbox for us that would be super helpful 🙏. Just fork one of the examples on this page https://eui.elastic.co/docs/components/data-grid/.

[JasonStoltz]

And sorry, to be clear:

make it configurable via prop whether the context menu icon button is shown on top of the app-controlled header cell so it's overlaying it
make it configurable via prop whether the context menu icon is always visible and not only shown on hover

Which icon are you referring to as the "context menu icon". The actions menu with 3 dots?

Also, have you tried playing around with custom CSS to see if you can get the icon positioned correctly for now?

[JasonStoltz]

FYI, I put an issue to Spike this out in our backlog. Hopefully someone can spend an hour looking at this soon.

[flash1293]

Awesome, thanks! This is more important than the other one

[JasonStoltz]

Hey @flash12. We did a spike on this one. You can find the results of that in the sub-task linked.

All in all, this doesn't look like a trivial issue. Because the columns can be resized individually as well as adjust based on viewport size and content, it's not that straight forward to determine what solution "just works". The solutions might all have some downside for one or another scenarios. It would require more in depth checks and alignment on this.

For that reason, I'm putting this one back into our backlog. Given our team's capacity, the complexity here, and our current roadmap obligations, this is not likely to get priority and will likely go stale and auto-close in 6 months.

We are happy to consider a PR if someone from your side is interested in pursuing a solution.