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

Improve tables at small resolutions #8017

Open
JasonStoltz opened this issue Sep 11, 2024 · 0 comments
Open

Improve tables at small resolutions #8017

JasonStoltz opened this issue Sep 11, 2024 · 0 comments
Assignees

Comments

@JasonStoltz
Copy link
Member

JasonStoltz commented Sep 11, 2024

Is your feature request related to a problem? Please describe.
When looking at usage of EUI tables throughout Kibana and Cloud UI, you can observe the majority of tables in use breaking in the same way.

For example:
This is the Security > Cases table in Kibana at a browser width of 1350px vs 2000px.

Image

Image

At small resolutions, columns become too small for their data, and if the resolution is small enough, will even begin to overlap one another.

To be clear, I don't believe this is a bug with EUI. We have features available to handle small resolutions, and these tables are likely not using them.

The list of known tables that have this issue:
Kibana > Machine learning Notifications
Kibana> Machine Learning Overview
Kibana > Security Cases
Cloud UI > Cloud Home page
Cloud UI > Cloud Activity

Describe the solution you'd like
The solution could come in two forms here:

  1. Provide clearer table guidance instructing folks how to deal with tables at small resolutions
  2. Provide some sort of guardrails in EUI tables that would prevent this automatically.

Some example guidance suggested by Cee:

  • Play with columns.width - try either switching between % based widths or static pixel widths to see what works best for the content in the cell
  • Set a minimum width on the table and its wrapper and have the table scroll horizontally if it goes below that width
  • Use the responsiveBreakpoint="s|m|l|xl" prop to collapse the table down into cards sooner (see docs for responsive/mobile tables here).

Describe alternatives you've considered
No other alternatives considered.

Desired timeline
No desired timeline, it's been an issue for years, so I don't believe there is a ton of urgency, but it would also be great to clean up.

Additional context

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

No branches or pull requests

1 participant