Sticky headers for data grid (#2959)

Data grid now has sticky headers through use of position: sticky.

CHANGELOG.md

@@ -11,6 +11,8 @@
 
 - Fixed `EuiDataGrid`'s sort popover to behave properly on mobile screens ([#2979](https://github.com/elastic/eui/pull/2979))
 - Fixed `EuiButton` and other textual components' disabled contrast ([#2874](https://github.com/elastic/eui/pull/2874))
+- Fixed z-index conflict with cell popovers in `EuiDataGrid` while in full screen mode ([#2959](https://github.com/elastic/eui/pull/2959))
+- Adjusted the header on `EuiDataGrid` to fix to the top within constrained containers and full screen mode  ([#2959](https://github.com/elastic/eui/pull/2959))
 
 **Breaking 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}>
         <EuiFlexItem className="eui-textTruncate">
           <div className="eui-textTruncate">email</div>
         </EuiFlexItem>

src/components/datagrid/_data_grid.scss

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

src/components/datagrid/_data_grid_column_resizer.scss

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

src/components/datagrid/_data_grid_data_row.scss

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

src/components/datagrid/_data_grid_header_row.scss

@@ -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
+  background: $euiColorLightestShade;
+  position: sticky; // In IE11 this does not work, but doesn't cause a break.
+  top: 0;
 }
 
 @include euiDataGridHeaderCell {
@@ -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.
@@ -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;

src/components/datagrid/data_grid.tsx

@@ -8,6 +8,7 @@ import React, {
   Fragment,
   ReactChild,
   useMemo,
+  useRef,
   Dispatch,
   SetStateAction,
 } from 'react';
@@ -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!],
@@ -842,6 +855,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
                     />
                   ) : null}
                   <div
+                    ref={contentRef}
                     className="euiDataGrid__content"
                     role="grid"
                     {...gridAriaProps}>

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}
             display="block"
             closePopover={() => this.setState({ popoverIsOpen: false })}
             onTrapDeactivation={this.updateFocus}>