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.

Sign up for GitHub

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

Jump to bottom

Sticky headers for data grid #2959

Merged
merged 11 commits into from
Mar 5, 2020
Merged

Sticky headers for data grid #2959

merged 11 commits into from
Mar 5, 2020

Conversation

snide
Copy link
Contributor

@snide snide commented Mar 2, 2020 •
edited
Loading

Summary

Fixes #2464

Adds sticky header support to EuiDataGrid. This uses CSS's position: sticky, which IE11 does not support, but seems to fail gracefully on. Because of a weird browser issue that Chromium has with with focused elements in sticky headers, some JS is needed to force the scrollable element to the top so that the first cells aren't hidden under the header.

Example

IE11 degrades gracefully

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

@snide snide requested a review from chandlerprall March 2, 2020 20:13
@kibanamachine
Copy link

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

@snide snide marked this pull request as ready for review March 2, 2020 21:56
snide
snide commented Mar 2, 2020
View reviewed changes
src/components/datagrid/data_grid_cell.tsx
@@ -368,7 +368,7 @@ export class EuiDataGridCell extends Component<
isOpen={this.state.popoverIsOpen}
ownFocus
panelClassName="euiDataGridRowCell__popover"
zIndex={2000}
zIndex={8001}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Small fix while I was in here. Fixes an issue where the popover showed below full screen.

snide
snide commented Mar 2, 2020
View reviewed changes
src-docs/src/views/datagrid/datagrid.js
@@ -26,7 +26,7 @@ const columns = [
id: 'email',
display: (
// This is an example of an icon next to a title that still respects text truncate
<EuiFlexGroup gutterSize="xs">
<EuiFlexGroup gutterSize="xs" responsive={false}>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Small fix to make the docs look better on mobile.

@kibanamachine
Copy link

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

@snide snide requested a review from cchaos March 3, 2020 19:57
@snide
Copy link
Contributor Author

snide commented Mar 3, 2020

@cchaos Mind giving this a quick check. It's mostly CSS, and would be nice to get it into the next Kibana release for use in Discover

cchaos
cchaos reviewed Mar 3, 2020
View reviewed changes
Copy link
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

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

Seems like such an easy solution 😃 It can't really be that easy can it?

src/components/datagrid/data_grid.tsx Outdated Show resolved Hide resolved
src/components/datagrid/_data_grid_header_row.scss Show resolved Hide resolved
@kibanamachine
Copy link

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

chandlerprall
chandlerprall approved these changes Mar 5, 2020
View reviewed changes
Copy link
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.

Pushed a small useEffect wrapper around the scrollTop code.

Tested with Chrome, FF, Safari, Edge (on Mac), and Chrome for Android. Also tested this logic when the header row contains a focusable element.

@kibanamachine
Copy link

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

@snide snide mentioned this pull request Mar 5, 2020
Closed
@kibanamachine
Copy link

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

cchaos
cchaos approved these changes Mar 5, 2020
View reviewed changes
Copy link
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

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

Thanks for looking into the focus-under-header issue. I understand it's a complex one. 👍

@kibanamachine
Copy link

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

@snide snide merged commit 4121685 into elastic:master Mar 5, 2020
@snide snide deleted the grid/headers2 branch March 5, 2020 23:27
@snide snide added the data grid label Mar 5, 2020
@chandlerprall chandlerprall mentioned this pull request Mar 16, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@chandlerprall chandlerprall chandlerprall approved these changes

@cchaos cchaos cchaos approved these changes

Assignees
No one assigned
Labels
data grid feature request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[DATA GRID] The grid head should respect scrolling similar to the toolbar
4 participants
@snide @kibanamachine @chandlerprall @cchaos