Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for expandable rows to EuiBasicTable. #585

Merged
merged 3 commits into from
Mar 28, 2018

Conversation

cjcenizal
Copy link
Contributor

@cjcenizal cjcenizal commented Mar 28, 2018

Fixes #466

table_expandable_rows

@cjcenizal
Copy link
Contributor Author

@elastic/kibana-design Could you spruce up the aesthetics of this feature after it's merged?

@snide
Copy link
Contributor

snide commented Mar 28, 2018

Yep. Can do.

Copy link
Contributor

@walterra walterra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Copy link
Member

@jgowdyelastic jgowdyelastic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Copy link

@peteharverson peteharverson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM.

@peteharverson
Copy link

I like the flexibility of using the itemIdToExpandedRowMap prop which provides flexibility in how the row expansion / contraction is triggered, with the example using Show / Hide links in a Details column. For the ML tables (Anomalies, Jobs List) we'd probably look to use arrow icons in the first column of the table - the tables can have a lot of columns so a 'Details' column as in the example here could get lost.

@elastic/kibana-design what are your thoughts on using the arrowDown / arrowRight EuiIcons to mirror the current behavior in the ML tables:

image

This would also require additional styling to shrink the width of the first table column holding the expand / contract icons. Is this something that could be built into the out-the-box eui styles, or should it be left it to the implementation?

@snide
Copy link
Contributor

snide commented Mar 28, 2018

@peteharverson Looking at @cjcenizal's example it looks like we can make it whatever we want. Likely we'll set the default example up with a caret system with a minimized column. Generally when these are done I think it's smart to (optionally) make the whole row clickable. I'd certainly recommend that for your example considering there's no links in that example beyond the expanding mechanic. We shouldn't limit people to such a small hitbox in that case.

I can look into that as well when we get to styling it (soon after merge), but I think he's got the pieces we'd need.

Nice work.

Copy link
Contributor

@chrisronline chrisronline left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@cjcenizal cjcenizal merged commit f6836c4 into elastic:master Mar 28, 2018
@cjcenizal cjcenizal deleted the table-expandable-rows branch March 28, 2018 17:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants