eui

eui copied to clipboard

When I think about the concept of expanding content, especially in regards to a data grid, I think of similar concepts to spreadsheets which usually just visually increase the size of the cell temporarily (or use a different part of the UI to show the whole thing but that's because their editable).

EuiDataGrid differs from this behavior where it shows the full content popover next to the cell. Historically I think this was the case because we utilized the same popover mechanism that is the pattern of a button triggering different content which then makes sense to keep the originating button in view.

However, for a data grid, or the concept of "revealing" content, this positioning mechanism doesn't fit expectation. Also considering a general use case for data grids is to compare cell values, covering other cell contents makes that harder.

This is especially true for more complex contents:

Existing:

Proposed:

This doesn't completely fix the "overlapping other cells" but it sure minimizes it even with simple content:

@cchaos In terms of technical implementation, were you thinking of expanding the underlying EuiPopover to support some kind of new anchorPosition, e.g. cover, or were you thinking that EuiDataGrid should manually offset the position of the popover to account always be in the top left corner of the cell?

You might need to look into the popover service, but I probably wouldn't do this on the actual EuiPopover itself as I'm thinking through all the possible misuses of it 😼

This looks like a great idea.

Even better if you could add a prop to enable/disable a double click in the body of the cell to auto expand the content.

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.