[EuiDataGrid] Allow multi line headers

[flash1293]

In case of a lot of columns in a grid it's possible the headers get truncated. Expanding the column width is one option, but it leads to horizontal scrolling which is sometimes not necessary if the values in the cells are much shorter than the headers. In these situations multi-line headers would help to keep the table dense.

[cee-chen]

You can use the display key in the columns prop to render a custom header React node with a custom CSS of white-space: normal which disables truncating.

As a quick reminder though, the header is sticky, and some users may have screens with less width and others have may have less height, so there's a tradeoff in every direction really. Consider using the CSS line-clamp property to truncate at 2-3 lines at most.

Check out this CodeSandbox for an example of both CSS properties in action:

https://codesandbox.io/s/charming-breeze-mmprc?file=/demo.js

[flash1293]

Ah, that's exactly what I was looking for, thanks. Closing this as it's possible on the consumer side already

[JasonStoltz]

@kertal We re-discussed this as a team this week. The EUI team is unlikely to prioritize this work. We have no objections to the feature itself, however, and would accept a PR.