[EuiDataGrid] Provide an onFullScreenChange callback

[davismcphee]

Is your feature request related to a problem? Please describe.
We experience z-index issues in Kibana when using the data grid's full screen mode due to its use of fixed positioning. We work around this by applying global styles to reset the z-index values of other elements when the grid is in full screen mode (see elastic/kibana#178788). The issue is that in order to detect when the data grid is in full screen mode, we need to use mutation observers that check for the full screen class since the data grid doesn't offer another way to detect the full screen state.

Describe the solution you'd like
It would be much easier to implement our solution without workarounds if the data grid offered something like an onFullScreenChange(isFullScreen: boolean) callback that we could use to determine when our override styles should be applied.

Describe alternatives you've considered
The data grid could instead be updated to not use fixed positioning for full screen mode, but this seems like a larger and more difficult change on the EUI side.

Desired timeline
This isn't an urgent request since we have a workaround in place, but having it would help us remove some unpleasant tech debt.

[cee-chen]

Hey Davis! I'd be interested in figuring out exactly what is going on with your z-index issues that's causing such a cascade of shenanigans. I also wonder if allowing the datagrid full screen z-index level to be configured/customized by consumers would help here.

As a heads up, as this is a low priority datagrid issue we're unlikely to grab it anytime soon, but we would happily accept a PR on it.

[github-actions]

👋 Thank you for your suggestion or request! While the EUI team agrees that it's valid, it's unlikely that we will prioritize this issue on our roadmap. We'll leave the issue open if you or anyone else in the community wants to implement it by contributing to EUI. If not, this issue will auto close in one year.

Log | Bot Usage

[davismcphee]

@cee-chen I think it's related to CSS stacking contexts and position: fixed, which tbh I don't really understand well enough to fully explain, but it seems to become an issue when any parent of the data grid has non-static positioning and a defined z-index value, making it so the data grid can't override the parent's z-index. The grid also already uses z-index: 999 in full screen, but other elements with lower z-index values can appear on top regardless, so I don't think customizing the data grid z-index would help here.

We've had similar issues elsewhere in Kibana and usually use these kinds of workarounds to fix them since we don't always control the consuming code to ensure no parents have z-index values, and it doesn't seem like there's another universal solution for this besides unsetting other elements' z-index values. Linking a couple of issues for reference:

• [Discover] Fix visibility of saved search grids when one of them is in fullscreen mode kibana#136198
• Data Tables in dashboard views stay visible when another table is full screened kibana#134032
• [Dashboard] panel resize triggers are displayed on top of full-screen search kibana#151499

And no problem on the priority, it's not a big concern on our end either, really just a convenience to help clean up our implementation. One of us may be able to pick it up when we can find time for some EUI contributions 🙂