Provide some default design for expanding table rows

[snide]

We should be able to clean up @cjcenizal's new expanding row tables with some nice defaults. Quick read is we should...

• Use a caret system
• Have a slight animation
• Allow (optionally) for the entire row to be clickable.

We'll also need to factor this into @cchaos' responsive table work. Gut there is we just expose the values since we're now working in more vertical space.

[cchaos]

I agree with all points except for the last. I do think we should continue the expansion concept into mobile. I can't imagine how much extra content could be spilt in that area and if we expose it all, it will become a HUGE table. I've seen it work well enough in mobile.

[snide]

@cchaos sounds good to me.

[snide]

@cchaos is working on this in #584

[AdnanBoota]

Hi,

Is it possible to have the content inside the expandableRow horizontally? I have checked the documentation but didn't found anything about this?

Any idea, how to do it, please share!

[snide]

@AdnanBoota It's using a simple EuiDescriptionList. You can find the props for this component on this page https://elastic.github.io/eui/#/display/description-list, but yes, it does allow for column based layouts using the type prop.

[AdnanBoota]

@snide Thanks a lot, it worked 👍

[cchaos]

@snide Do you think this still needs to be addressed. Consumers can add any content they want in the expanded portion so I'm not entirely sure what we can do from the EUI side.

[snide]

I think it's closable. Originally we wanted to have some pattern work here, but at this point we've seen these views used so differently it's best to keep them as a generic "throw stuff in here" option.