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

Sticky headers for data grid #2959

Merged
merged 11 commits into from
Mar 5, 2020
Merged
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,14 @@
- Added `notification` and `notificationColor` props to `EuiHeaderSectionItemButton` ([#2914](https://github.com/elastic/eui/pull/2914))
- Added `folderCheck`, `folderExclamation`, `push`, `quote`, `reporter` and `users` icons ([#2935](https://github.com/elastic/eui/pull/2935))
- Updated `folderClosed` and `folderOpen` to match new additions and sit better on the pixel grid ([#2935](https://github.com/elastic/eui/pull/2935))
- Adjusted the header on `EuiDataGrid` to fix within constrained containers and full screen mode ([#2959](https://github.com/elastic/eui/pull/2959))

**Bug fixes**

- Fixed `EuiDataGrid` breaking if invalid schema passed ([#2955](https://github.com/elastic/eui/pull/2955))
- Fixed `EuiTitle` not rendering child classes ([#2925](https://github.com/elastic/eui/pull/2925))
- Extended `div` element in `EuiFlyout` type ([#2914](https://github.com/elastic/eui/pull/2914))
- Fixed z-index conflict with cell popovers in `EuiDataGrid` while in full screen mode ([#2959](https://github.com/elastic/eui/pull/2959))
- Fixed popover positioning service to be more lenient when positioning 0-width or 0-height content ([#2948](https://github.com/elastic/eui/pull/2948))

**Theme: Amsterdam**
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/datagrid/datagrid.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<EuiFlexItem className="eui-textTruncate">
<div className="eui-textTruncate">email</div>
</EuiFlexItem>
Expand Down
7 changes: 3 additions & 4 deletions src/components/datagrid/_data_grid.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,21 +25,20 @@

.euiDataGrid__content {
@include euiScrollBar;
@include euiScrollBar;

height: 100%;
overflow-y: auto;
overflow: auto;
font-feature-settings: 'tnum' 1; // Tabular numbers
overflow-x: auto;
scroll-padding: 0;
max-width: 100%;
width: 100%;
z-index: 2; // Sits above the pagination below it, but below the controls above it
}

.euiDataGrid__controls {
background: $euiPageBackgroundColor;
position: relative;
z-index: 2;
z-index: 3; // Needs to sit above the content blow that sits below it
border: $euiBorderThin;
padding: $euiSizeXS;
flex-grow: 0;
Expand Down
2 changes: 1 addition & 1 deletion src/components/datagrid/_data_grid_column_resizer.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
width: $euiSize;
cursor: ew-resize;
opacity: 0;
z-index: 2;
z-index: 2; // Needs to be a level above the cells themselves in case of overlaps

// Center a vertical line within the button above
&:after {
Expand Down
3 changes: 1 addition & 2 deletions src/components/datagrid/_data_grid_data_row.scss
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,7 @@
margin-top: -1px;
box-shadow: 0 0 0 2px $euiFocusRingColor;
border-radius: 1px;
// Needed so it sits above potential striping in the next row
z-index: 2;
z-index: 2; // Needed so it sits above potential striping in the next row

.euiDataGridRowCell__expandButton {
margin-left: $euiDataGridCellPaddingM;
Expand Down
13 changes: 11 additions & 2 deletions src/components/datagrid/_data_grid_header_row.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
.euiDataGridHeader {
display: inline-flex;
min-width: 100%; // Needed to prevent wraps. Inline flex is tricky
z-index: 3; // Needs to sit above the content and focused cells
snide marked this conversation as resolved.
Show resolved Hide resolved
background: $euiColorLightestShade;
position: sticky; // In IE11 this does not work, but doesn't cause a break.
top: 0;
}

@include euiDataGridHeaderCell {
Expand Down Expand Up @@ -30,8 +34,7 @@
border: 1px solid transparent;
box-shadow: 0 0 0 2px $euiFocusRingColor;
border-radius: 1px;
// Needed so it sits above the other rows
z-index: 2;
z-index: 2; // Needed so the focus ring sits above the other row below it.
}

// We only truncate if the cell is not a control column.
Expand All @@ -47,6 +50,12 @@
// Header alternates
// Often these need extra specificity because they need to gracefully clash with the border settings

@include euiDataGridStyles(bordersNone, bordersHorizontal) {
.euiDataGridHeader {
background: $euiColorEmptyShade;
}
}

@include euiDataGridStyles(headerUnderline) {
@include euiDataGridHeaderCell {
border-top: none;
Expand Down
14 changes: 14 additions & 0 deletions src/components/datagrid/data_grid.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import React, {
Fragment,
ReactChild,
useMemo,
useRef,
Dispatch,
SetStateAction,
} from 'react';
Expand Down Expand Up @@ -623,6 +624,18 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
orderedVisibleColumns
);

const contentRef = useRef<HTMLDivElement>(null);

// Because of a weird Chrome bug with position:sticky css items and focus, we force scrolling to the top
// if the item is in the first row. This prevents the cell from ever being under the sticky header.
useEffect(() => {
if (focusedCell !== undefined && focusedCell[1] === 0) {
if (contentRef.current != null) {
contentRef.current.scrollTop = 0;
}
}
}, [focusedCell]);

const classes = classNames(
'euiDataGrid',
fontSizesToClassMap[gridStyles.fontSize!],
Expand Down Expand Up @@ -842,6 +855,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
/>
) : null}
<div
ref={contentRef}
className="euiDataGrid__content"
role="grid"
{...gridAriaProps}>
Expand Down
2 changes: 1 addition & 1 deletion src/components/datagrid/data_grid_cell.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

display="block"
closePopover={() => this.setState({ popoverIsOpen: false })}
onTrapDeactivation={this.updateFocus}>
Expand Down