Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiDataGrid] Expansion popover placement #5686

Closed
cchaos opened this issue Mar 3, 2022 · 4 comments · Fixed by #7343
Closed

[EuiDataGrid] Expansion popover placement #5686

cchaos opened this issue Mar 3, 2022 · 4 comments · Fixed by #7343

Comments

@cchaos
Copy link
Contributor

cchaos commented Mar 3, 2022

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:

image

Proposed:

image

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

image

@cee-chen
Copy link
Member

cee-chen commented Mar 3, 2022

@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?

@cchaos
Copy link
Contributor Author

cchaos commented Mar 3, 2022

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 😼

@aaron-manning
Copy link

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.

@github-actions
Copy link

👋 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants