Skip to content

[EuiDataGrid] Add footer row#3770

Merged
chandlerprall merged 21 commits intoelastic:masterfrom
sulemanof:data_grid/footer_row
Sep 17, 2020
Merged

[EuiDataGrid] Add footer row#3770
chandlerprall merged 21 commits intoelastic:masterfrom
sulemanof:data_grid/footer_row

Conversation

@sulemanof
Copy link
Copy Markdown
Contributor

@sulemanof sulemanof commented Jul 20, 2020 •
edited
Loading

Summary

This resolves #3400

EuiDataGrid footer row

image

Add footer row implementation by adding renderFooterCellValue prop into EuiDataGrid component.
renderFooterCellValue acts the same as renderCellValue prop - it's a function receiving EuiDataGridCellValueElementProps and returning a React node. The EuiDataGridFooterRow just extends the EuiDataGridDataRow by passing additional props.

  • footer under the thick line

    image

  • stripped footer

    image

  • shaded footer

    image

  • sticky footer

    image

Checklist

  • Check against all themes for compatibility in both light and dark modes
  • Checked in mobile
  • Checked in IE11 and Firefox
  • Props have proper autodocs
  • Added documentation
  • Checked Code Sandbox works for the any docs examples
  • Added or updated jest tests
  • Checked for breaking changes and labeled appropriately
  • Checked for accessibility including keyboard-only and screenreader modes
  • A changelog entry exists and is marked appropriately

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Jul 20, 2020

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

@snide
Copy link
Copy Markdown
Contributor

snide commented Jul 20, 2020

Neat!

jenkins, test this (for preview)

@snide
Copy link
Copy Markdown
Contributor

snide commented Jul 20, 2020

This would close out #3400

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Jul 20, 2020

Preview documentation changes for this PR: https://eui.elastic.co/pr_3770/

@wylieconlon wylieconlon mentioned this pull request Jul 20, 2020
Closed
@sulemanof sulemanof changed the title [EuiDataGrid] Add footer row [WIP][EuiDataGrid] Add footer row Jul 21, 2020
@sulemanof sulemanof requested a review from chandlerprall July 21, 2020 13:54
@sulemanof
Copy link
Copy Markdown
Contributor Author

sulemanof commented Jul 21, 2020

Hi @chandlerprall !
Looking forward to receiving your overview around this.
It fits the feature request against the Data table vis in Kibana, but I know you'll provide additional recommendations

chandlerprall
chandlerprall suggested changes Jul 29, 2020
View reviewed changes
Copy link
Copy Markdown
Contributor

@chandlerprall chandlerprall left a comment

Choose a reason for hiding this comment

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

Got my initial pass done, left some requests&thoughts

chandlerprall
chandlerprall suggested changes Aug 20, 2020
View reviewed changes
@chandlerprall
Copy link
Copy Markdown
Contributor

chandlerprall commented Aug 24, 2020

jenkins test this

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Aug 24, 2020

Preview documentation changes for this PR: https://eui.elastic.co/pr_3770/

@chandlerprall
Copy link
Copy Markdown
Contributor

chandlerprall commented Aug 24, 2020

One last request from me: let's enable the Show footer row slider by default in the new example.

A question for @cchaos: in the Data grid styling and toolbar example, should styling the footer with shade keep the alternating pattern?

footer_shade

@cchaos
Copy link
Copy Markdown
Contributor

cchaos commented Aug 24, 2020

Hmm, I think a designer will need to take a look at the different combinations of styling options and make decisions on how they should interact. Is this PR actually reviewable yet? Seems like if we're looking at the design now we can pull this out of draft? It would be great to just have the functionality done and then one of the designers can take a pass.

@chandlerprall
Copy link
Copy Markdown
Contributor

chandlerprall commented Aug 24, 2020

Yep, this is ready for design review - functionality is in place.

@chandlerprall chandlerprall marked this pull request as ready for review August 24, 2020 18:59
@sulemanof sulemanof changed the title [WIP][EuiDataGrid] Add footer row [EuiDataGrid] Add footer row Aug 25, 2020
@andreadelrio
Copy link
Copy Markdown
Contributor

andreadelrio commented Sep 1, 2020 •
edited
Loading

Created a design PR against this branch

sulemanof#1

Summary

The behaviour I'm proposing for the styling of the footer row is as follows:

a) striped: it's shaded following the odd/even styling of the rest of the datagrid.
b) overline: gets a thick black line above.
c) shaded: always gets a gray background.

modes_e

I also made the footer sticky. See below:
aaaa

@chandlerprall
Copy link
Copy Markdown
Contributor

chandlerprall commented Sep 16, 2020

jenkins test this

@chandlerprall
Copy link
Copy Markdown
Contributor

chandlerprall commented Sep 16, 2020

CI got into a weird network state, jenkins test this

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Sep 16, 2020

Preview documentation changes for this PR: https://eui.elastic.co/pr_3770/

@chandlerprall
Copy link
Copy Markdown
Contributor

chandlerprall commented Sep 16, 2020

Another network issue. jenkins test this harder

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Sep 16, 2020

Preview documentation changes for this PR: https://eui.elastic.co/pr_3770/

chandlerprall
chandlerprall approved these changes Sep 16, 2020
View reviewed changes
Copy link
Copy Markdown
Contributor

@chandlerprall chandlerprall left a comment

Choose a reason for hiding this comment

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

I pushed a small cleanup to the changelog, and enabled the Show footer row toggle by default in the footer row example to better demo the functionality. Everything else LGTM, this is mergeable after a CI pass.

@chandlerprall
Copy link
Copy Markdown
Contributor

chandlerprall commented Sep 16, 2020

jenkins test this

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Sep 16, 2020

Preview documentation changes for this PR: https://eui.elastic.co/pr_3770/

@chandlerprall chandlerprall merged commit a09ed1e into elastic:master Sep 17, 2020
@sulemanof sulemanof deleted the data_grid/footer_row branch September 22, 2020 09:28
@sulemanof sulemanof mentioned this pull request Sep 22, 2020
Merged
7 tasks
@chandlerprall chandlerprall mentioned this pull request Sep 29, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@chandlerprall chandlerprall chandlerprall approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

data grid

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

EuiDataGrid: Add footer row

6 participants

@sulemanof @kibanamachine @snide @chandlerprall @cchaos @andreadelrio