Sticky headers for data grid

CHANGELOG.md

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

src/components/datagrid/_data_grid.scss

@@ -25,12 +25,10 @@
 
 .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%;

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 {
@@ -47,6 +51,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,16 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
     orderedVisibleColumns
   );
 
+  const contentRef = useRef<HTMLDivElement | null>(null);
+
+  // Because of a weird 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.
+  if (focusedCell !== undefined && focusedCell[1] === 0) {
+    if (contentRef.current != null) {
+      contentRef.current.scrollTop = 0;
+    }
+  }
+
   const classes = classNames(
     'euiDataGrid',
     fontSizesToClassMap[gridStyles.fontSize!],
@@ -842,6 +853,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}>