Inspector table needs a better display when there are multiple columns

[bhavyarm]

Kibana version: 7.15.0 BC5

Elasticsearch version: 7.15.0 BC5

Server OS version: darwin_x86_64

Browser version: chrome latest

Browser OS version: OS X

Original install method (e.g. download page, yum, from source, etc.): from staging

Describe the bug: If there are multiple columns - inspector table needs to display data better. Right now - user cannot read the first column well in the screenshot below and also the spacing between seems off.

The screenshot if from data table of flights dashboard ( new in 7.15)

[elasticmachine]

Pinging @elastic/kibana-vis-editors (Team:VisEditors)

[elasticmachine]

Pinging @elastic/kibana-app-services (Team:AppServices)

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[ThomThomson]

Reassigning this to the Data Discovery team because it looks like this table lives in the Data plugin.

[elasticmachine]

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

[kertal]

Reassigning it to @elastic/kibana-visualizations because it doesn't look like a saved search, also I think this might be closable since it should be powered by EuiDataGrid in the meanwhile?

[elasticmachine]

Pinging @elastic/kibana-visualizations @elastic/kibana-visualizations-external (Team:Visualizations)

[stratoula]

This problem exists for every inspector table that has many columns. So this is not only a visualizations problem.

This table is created in the data plugin so this is why Devon added the discovery team here. I dont know who should own the table_inspector_view (possibly the team that owns the inspector) but moving this issue among the teams is not the solution. :)

https://github.com/elastic/kibana/blob/main/src/plugins/data/public/utils/table_inspector_view/components/data_table.tsx#L194

@elastic/eui-design it seems that the EuiInMemoryTable is not very responsive here. Is it a know bug? Is there any property we can use to make it render better or should I create a bug in the EUI repo?

[kertal]

@stratoula thx a lot! agreed we shouldn't move this issue between the team, TIL about his and that it's actually part of the data plugin :)

[cee-chen]

https://github.com/orgs/elastic/teams/eui-design it seems that the EuiInMemoryTable is not very responsive here. Is it a know bug? Is there any property we can use to make it render better or should I create a bug in the EUI repo?

There's only so much a table can do within the constraints of the # of items in the table and its container size. This is not a bug, this is simply how native tables behave.

My suggestion is that if you know your table will have a ton of content, give it a .eui-xScroll class (to ensure it scrolls if it has too much content), and set a tableLayout="auto" prop on the table. You'll then also want to set a min-width on each table header cell to ensure each column renders as expected.

Example CodeSandbox: https://codesandbox.io/s/runtime-haze-kxbicx?file=/demo.tsx:2055-2524

[stratoula]

@cee-chen this sounds good, thanx!

[kertal]

@cee-chen thx and also thx @stratoula for following up, should we move this back to the @elastic/kibana-data-discovery domain? Or should we flip a 🪙 ... heads or tails?

[stratoula]

@kertal dont worry, I have it on my list :)