Redesign DocViewer table layout

[kertal]

Summary

With merging the reactified DocViewer (#42116) and the soon to be finished reactification of the DocViewer table layout (#43240). It would a a good time to work on the redesign of the table layout. It's shared by Discover, Discover's Context and Discover's Doc view. So far only parts of it use EUI, icons are still provided by Font Awesome, objects in arrays are just displayed as JSON and don't provide filter functionality, ...

Discover

With the introduction of data grid (elastic/eui#1689), it's likely that it will be displayed as flyout

Discover's context

Same as Discover

Discover's doc

Icons

Should be replaced. Would be nice, if e.g. it was displayed which column is currently active.
Question is, if they should be displayed only when hovered

Object in arrays

There was an fold/unfold button introduced recently, for long content:

It should be improved for unfold/fold objects in arrays. So initially you see the number of objects in arrays, when unfolded, the array items become part of the table, so you can add columns, filter, etc.

More?

ideas?

Related

• Highlight row in Discover instead of just the value Highlight row in Discover instead of just the value #36592
• Edit documents from within Discover Edit documents from within Discover #36556
• Name of field pops up when hovering on field type Name of field pops up when hovering on field type #35391

[elasticmachine]

Pinging @elastic/kibana-app

[0asp0]

I was asked here (https://discuss.elastic.co/t/saved-search-is-minimum-column-width-before-breaking-the-line-configurable/196356) to place my ideas for changing in this issue.

If you like, I can also create separate issues which can be linked here.

This feature is referencing to Discover's context.

Possibility to add min / max column width and height:
If you add a lot of columns for display, the columns get shrinked in width, so that as much columns as possible are displayed at a screen.

As result these columns get more and more unreadable.
It would be nice to be able to set the following parameters:

• minWidth (in pixels or chars):
  ** a column must not get shrinked below this given size in width dimension. Only if all values and column name are smaller than the minWidth the column can get less wide. So we do not waste space if column's name and value are very short.
• maxHeight
  ** when shrinking the value will be displayed in multiple lines before being truncated in discovery view. It would be nice if one can define the max number of lines which will be used in this case.

I think this feature would increase readability a lot when working with many selected fields / columns.

[kertal]

thx @0asp0 for your input. This will be addressed in a related redesign step, the introduction of data grid: elastic/eui#1689, which will allow you to resize columns

[elasticmachine]

Pinging @elastic/kibana-design

[timroes]

I'll close this in favor of the ongoing datagrid effort and more specific issues we have for separate tasks and #97649 as a successor.