[Tables] Improve tables at small resolutions
- Dominant language
- TypeScript
- Stars
- 6.4k
- Forks
- 911
- Avg merge
- 2d 11h
- Merged PRs (30d)
- 65
Description
## Elevator pitch
There are tables all over Kibana that look awful at small resolutions. We should fix this globally.
**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.
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](https://eui.elastic.co/#/tabular-content/tables#responsive-tables)).
**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**
Contributor guide
Assessment
This issue has not been assessed yet.