[DATA GRID] Column header menu #3087

snide · 2020-03-16T03:58:08Z

Summary

Add column header menu with actions providing direct access to the following functionality:

Hide column
Sort schema asc
Sort schema desc
Move left
Move right

Furthermore it allows you add custom actions
Fixes #2461

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 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

cla-checker-service · 2020-07-20T18:02:43Z

💚 CLA has been signed

kibanamachine · 2020-07-20T18:24:22Z

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

snide · 2020-07-20T18:51:39Z

@kertal asked me to reset this PR since we had a git snafu.

kibanamachine · 2020-07-20T19:53:16Z

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

kibanamachine · 2020-07-21T07:11:35Z

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

kibanamachine · 2020-07-21T07:39:52Z

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

kibanamachine · 2020-07-23T16:06:13Z

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

kibanamachine · 2020-08-06T13:43:49Z

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

…menus

kibanamachine · 2020-08-22T10:19:24Z

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

kibanamachine · 2020-08-24T10:22:14Z

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

kertal · 2020-09-15T10:43:41Z

We should not be putting onClick events onto non-interactable elements like divs. I would assume you'd want to wrap the contents of the cell with a plain <button> element and then we can style it with CSS to maintain it's visual.

@cchaos thx, did that, ready for checking if there are more CSS adaptions necessary

kibanamachine · 2020-09-15T11:03:20Z

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

src/components/datagrid/data_grid_header_cell.tsx

kibanamachine · 2020-09-15T17:06:41Z

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

kibanamachine · 2020-09-15T17:59:32Z

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

chandlerprall

The change making the header cell a button appears to have broken the close-popover-on-click functionality

Looks like setIsPopoverOpen is called with false, but then React bubbles the click event back up to the cell's button and re-opens the popover.

While working with it I've encountered a problem in Chrome, use the mouse to expand a header cell menu, click on another one, check lot's of errors in console:

I'm going to take my pending focus trap changes and test them here to see if it is the culprit behind those maximum call stack errors.

src/components/datagrid/column_actions.tsx

kibanamachine · 2020-09-17T21:00:05Z

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

kibanamachine · 2020-09-18T05:23:17Z

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

kibanamachine · 2020-09-18T06:43:39Z

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

src/components/datagrid/data_grid_header_cell.tsx

kibanamachine · 2020-09-18T14:01:09Z

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

chandlerprall · 2020-09-18T15:36:28Z

flaky unit test - jenkins test this

kibanamachine · 2020-09-18T15:58:15Z

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

chandlerprall

Yessssss! Nice cleanup. Changes LGTM, tested in all the places many times 😄 Ship it! 🦑

quick changelog cleanup

kibanamachine · 2020-09-18T19:40:27Z

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

kibanamachine · 2020-09-19T08:22:28Z

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

header menu boilerplate

8e6613f

snide added feature request data grid labels Mar 16, 2020

snide mentioned this pull request May 12, 2020

EuiDataGrid: Add footer row #3400

Closed

cchaos added this to In progress in Tables May 26, 2020

snide force-pushed the grid/menus branch from 09a8ae6 to 8e6613f Compare July 20, 2020 18:46

Merge remote-tracking branch 'upstream/master' into grid/menus

42e07ed

wylieconlon mentioned this pull request Jul 20, 2020

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

Closed

Enable column option "Hide column"

674b4c7

Enable column options for sorting

97b433c

Enable column options for moving columns left/right

d6be83e

Fix moving column left / right

9ef3752

kertal self-assigned this Aug 3, 2020

kertal added 2 commits August 4, 2020 17:06

Merge master / fix conflicts

cbf6d4a

Fix header row detection, migrate to use EuiButtonIcon

1527cca

kertal mentioned this pull request Aug 6, 2020

[DATA Grid] Switch Header columns focus handling to native #3872

Closed

kertal added 2 commits August 20, 2020 13:55

Merge remote-tracking branch 'upstream/master' into kertal-data-grid-…

57a5c6f

…menus

Make column actions configureable

75eff28

kertal added 2 commits August 24, 2020 11:40

Document types

39eef30

Fix tests

23f7414

kertal reviewed Sep 15, 2020

View reviewed changes

src/components/datagrid/data_grid_header_cell.tsx Outdated Show resolved Hide resolved

fix focus in menu

ac62f85

fix focus of menu (again) and add mixin

22290eb

chandlerprall suggested changes Sep 17, 2020

View reviewed changes

Fix closing menu

ff0b060

kertal reviewed Sep 17, 2020

View reviewed changes

src/components/datagrid/column_actions.tsx Outdated Show resolved Hide resolved

Remove any

a89a385

kertal added 2 commits September 18, 2020 07:36

Cleanup

5462b1b

Merge master / fix conflicts

8dc426d

End the focus war

7b00e40

kertal reviewed Sep 18, 2020

View reviewed changes

src/components/datagrid/data_grid_header_cell.tsx Show resolved Hide resolved

kertal requested a review from chandlerprall September 18, 2020 13:42

chandlerprall approved these changes Sep 18, 2020

View reviewed changes

Update CHANGELOG.md

a3075ae

quick changelog cleanup

kertal merged commit c03ab19 into elastic:master Sep 18, 2020

Tables automation moved this from In progress to Closed Sep 18, 2020

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

[DATA GRID] Column header menu #3087

[DATA GRID] Column header menu #3087

snide commented Mar 16, 2020 •

edited by kertal

Loading

cla-checker-service bot commented Jul 20, 2020 •

edited

Loading

kibanamachine commented Jul 20, 2020

snide commented Jul 20, 2020

kibanamachine commented Jul 20, 2020

kibanamachine commented Jul 21, 2020

kibanamachine commented Jul 21, 2020

kibanamachine commented Jul 23, 2020

kibanamachine commented Aug 6, 2020

kibanamachine commented Aug 22, 2020

kibanamachine commented Aug 24, 2020

kertal commented Sep 15, 2020

kibanamachine commented Sep 15, 2020

kibanamachine commented Sep 15, 2020

kibanamachine commented Sep 15, 2020

chandlerprall left a comment

kibanamachine commented Sep 17, 2020

kibanamachine commented Sep 18, 2020

kibanamachine commented Sep 18, 2020

kibanamachine commented Sep 18, 2020

chandlerprall commented Sep 18, 2020

kibanamachine commented Sep 18, 2020

chandlerprall left a comment

kibanamachine commented Sep 18, 2020

kibanamachine commented Sep 19, 2020

[DATA GRID] Column header menu #3087

[DATA GRID] Column header menu #3087

Conversation

snide commented Mar 16, 2020 • edited by kertal Loading

Summary

Checklist

cla-checker-service bot commented Jul 20, 2020 • edited Loading

kibanamachine commented Jul 20, 2020

snide commented Jul 20, 2020

kibanamachine commented Jul 20, 2020

kibanamachine commented Jul 21, 2020

kibanamachine commented Jul 21, 2020

kibanamachine commented Jul 23, 2020

kibanamachine commented Aug 6, 2020

kibanamachine commented Aug 22, 2020

kibanamachine commented Aug 24, 2020

kertal commented Sep 15, 2020

kibanamachine commented Sep 15, 2020

kibanamachine commented Sep 15, 2020

kibanamachine commented Sep 15, 2020

chandlerprall left a comment

Choose a reason for hiding this comment

kibanamachine commented Sep 17, 2020

kibanamachine commented Sep 18, 2020

kibanamachine commented Sep 18, 2020

kibanamachine commented Sep 18, 2020

chandlerprall commented Sep 18, 2020

kibanamachine commented Sep 18, 2020

chandlerprall left a comment

Choose a reason for hiding this comment

kibanamachine commented Sep 18, 2020

kibanamachine commented Sep 19, 2020

snide commented Mar 16, 2020 •

edited by kertal

Loading

cla-checker-service bot commented Jul 20, 2020 •

edited

Loading