[EuiDataGrid] Add footer row #3770

sulemanof · 2020-07-20T14:51:23Z

Summary

This resolves #3400

EuiDataGrid footer row

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
stripped footer
shaded footer
sticky footer

Checklist

kibanamachine · 2020-07-20T14:51:25Z

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 · 2020-07-20T15:34:08Z

Neat!

jenkins, test this (for preview)

snide · 2020-07-20T15:36:46Z

This would close out #3400

kibanamachine · 2020-07-20T15:56:20Z

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

# Conflicts: # src-docs/src/views/datagrid/styling.js

sulemanof · 2020-07-21T13:58:34Z

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

Got my initial pass done, left some requests&thoughts

src-docs/src/views/datagrid/control_columns.js

src-docs/src/views/datagrid/datagrid_controlcolumns_example.js

src-docs/src/views/datagrid/datagrid_footer_row_example.js

src-docs/src/views/datagrid/footer_row.js

src/components/datagrid/data_grid_types.ts

src-docs/src/views/datagrid/styling.js

src/components/datagrid/data_grid_footer_row.tsx

src-docs/src/views/datagrid/footer_row.js

chandlerprall · 2020-08-24T14:41:44Z

jenkins test this

kibanamachine · 2020-08-24T15:02:36Z

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

chandlerprall · 2020-08-24T15:18:05Z

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?

cchaos · 2020-08-24T18:52:52Z

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 · 2020-08-24T18:59:43Z

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

andreadelrio · 2020-09-01T00:47:30Z

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.

I also made the footer sticky. See below:

[EuiDataGrid] Adjust footer row styles and make it sticky

# Conflicts: # CHANGELOG.md # src/components/datagrid/_mixins.scss

chandlerprall · 2020-09-16T16:47:30Z

jenkins test this

chandlerprall · 2020-09-16T18:25:28Z

CI got into a weird network state, jenkins test this

kibanamachine · 2020-09-16T18:47:06Z

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

chandlerprall · 2020-09-16T18:52:25Z

Another network issue. jenkins test this harder

kibanamachine · 2020-09-16T19:15:02Z

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

chandlerprall

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 · 2020-09-16T20:56:49Z

jenkins test this

kibanamachine · 2020-09-16T21:19:48Z

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

Add footer_row into data_grid

7750ee1

wylieconlon mentioned this pull request Jul 20, 2020

[Lens] Replace basic table with EuiDataGrid elastic/kibana#72504

Closed

sulemanof added 3 commits July 21, 2020 16:19

Add documentation description

6c4d335

Update snapshots

b04c5a7

Merge remote-tracking branch 'upstream/master' into data_grid/footer_row

649a05f

# Conflicts: # src-docs/src/views/datagrid/styling.js

sulemanof changed the title ~~[EuiDataGrid] Add footer row~~ [WIP][EuiDataGrid] Add footer row Jul 21, 2020

sulemanof requested a review from chandlerprall July 21, 2020 13:54

Merge branch 'master' into data_grid/footer_row

34d8b1c

chandlerprall suggested changes Jul 29, 2020

View reviewed changes

sulemanof added 2 commits July 30, 2020 17:10

Revert changes in control_columns example

521a222

Get rid of footerCellRender prop in a column

4bb6ad3

chandlerprall added the data grid label Aug 5, 2020

sulemanof added 3 commits August 19, 2020 16:44

Merge remote-tracking branch 'upstream/master' into data_grid/footer_row

326516e

Fix review comments

2e5d9f8

Update styling example

8b40a3f

chandlerprall suggested changes Aug 20, 2020

View reviewed changes

src-docs/src/views/datagrid/footer_row.js Show resolved Hide resolved

sulemanof added 3 commits August 24, 2020 14:02

Merge remote-tracking branch 'upstream/master' into data_grid/footer_row

4564183

Make footer cell expandable

652a6fe

Move callback outside of the component

e12a613

chandlerprall marked this pull request as ready for review August 24, 2020 18:59

sulemanof changed the title ~~[WIP][EuiDataGrid] Add footer row~~ [EuiDataGrid] Add footer row Aug 25, 2020

andreadelrio and others added 7 commits August 31, 2020 20:25

make footer row sticky and adjust styles

918b883

added bg to shaded footer and remove unneeded line from example

8fa9965

add cl

36b909f

made sticky footer optional

52e4550

Merge pull request #1 from andreadelrio/footer_row_styles

5b52f23

[EuiDataGrid] Adjust footer row styles and make it sticky

Merge remote-tracking branch 'upstream/master' into data_grid/footer_row

7f662f4

# Conflicts: # CHANGELOG.md # src/components/datagrid/_mixins.scss

Return back webpack devtool

9b65ef6

sulemanof requested a review from chandlerprall September 16, 2020 16:07

small clean up in footer row example & changelog entry

030f286

chandlerprall approved these changes Sep 16, 2020

View reviewed changes

chandlerprall merged commit a09ed1e into elastic:master Sep 17, 2020

sulemanof deleted the data_grid/footer_row branch September 22, 2020 09:28

sulemanof mentioned this pull request Sep 22, 2020

[Data table] Reactify & EUIficate the visualization elastic/kibana#70801

Merged

7 tasks

chandlerprall mentioned this pull request Sep 29, 2020

Upgraded EUI to v29.3.0 elastic/kibana#78870

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiDataGrid] Add footer row #3770

[EuiDataGrid] Add footer row #3770

sulemanof commented Jul 20, 2020 •

edited

Loading

kibanamachine commented Jul 20, 2020

snide commented Jul 20, 2020

snide commented Jul 20, 2020

kibanamachine commented Jul 20, 2020

sulemanof commented Jul 21, 2020

chandlerprall left a comment

chandlerprall commented Aug 24, 2020

kibanamachine commented Aug 24, 2020

chandlerprall commented Aug 24, 2020

cchaos commented Aug 24, 2020

chandlerprall commented Aug 24, 2020

andreadelrio commented Sep 1, 2020 •

edited

Loading

Summary

chandlerprall commented Sep 16, 2020

chandlerprall commented Sep 16, 2020

kibanamachine commented Sep 16, 2020

chandlerprall commented Sep 16, 2020

kibanamachine commented Sep 16, 2020

chandlerprall left a comment

chandlerprall commented Sep 16, 2020

kibanamachine commented Sep 16, 2020

[EuiDataGrid] Add footer row #3770

[EuiDataGrid] Add footer row #3770

Conversation

sulemanof commented Jul 20, 2020 • edited Loading

Summary

EuiDataGrid footer row

Checklist

kibanamachine commented Jul 20, 2020

snide commented Jul 20, 2020

snide commented Jul 20, 2020

kibanamachine commented Jul 20, 2020

sulemanof commented Jul 21, 2020

chandlerprall left a comment

Choose a reason for hiding this comment

chandlerprall commented Aug 24, 2020

kibanamachine commented Aug 24, 2020

chandlerprall commented Aug 24, 2020

cchaos commented Aug 24, 2020

chandlerprall commented Aug 24, 2020

andreadelrio commented Sep 1, 2020 • edited Loading

Summary

chandlerprall commented Sep 16, 2020

chandlerprall commented Sep 16, 2020

kibanamachine commented Sep 16, 2020

chandlerprall commented Sep 16, 2020

kibanamachine commented Sep 16, 2020

chandlerprall left a comment

Choose a reason for hiding this comment

chandlerprall commented Sep 16, 2020

kibanamachine commented Sep 16, 2020

sulemanof commented Jul 20, 2020 •

edited

Loading

andreadelrio commented Sep 1, 2020 •

edited

Loading