From b0d616ff0a2a5567bbc8ca9844be96bdc24cfec5 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Thu, 22 Oct 2020 10:12:16 -0600
Subject: [PATCH 01/54] in-progress virtualization

---
 src-docs/src/views/datagrid/datagrid.js       |  76 ++-
 src/components/datagrid/column_selector.tsx   |  47 +-
 src/components/datagrid/data_grid.tsx         | 388 +++++++-------
 src/components/datagrid/data_grid_body.tsx    | 474 +++++++++++++++---
 src/components/datagrid/data_grid_cell.tsx    |  49 +-
 .../datagrid/data_grid_cell_popover.tsx       |   4 +-
 src/components/datagrid/data_grid_context.tsx |  18 +-
 .../data_grid_control_header_cell.tsx         |  32 +-
 .../datagrid/data_grid_footer_row.tsx         |  10 -
 .../datagrid/data_grid_header_cell.tsx        |  51 +-
 .../datagrid/data_grid_header_row.tsx         |  15 -
 src/components/datagrid/data_grid_schema.tsx  |   8 +-
 12 files changed, 783 insertions(+), 389 deletions(-)

diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js
index 7024a855e75..4fcb28da6b7 100644
--- a/src-docs/src/views/datagrid/datagrid.js
+++ b/src-docs/src/views/datagrid/datagrid.js
@@ -6,6 +6,7 @@ import React, {
   useState,
   createContext,
   useContext,
+  useRef,
 } from 'react';
 import { fake } from 'faker';
 
@@ -158,6 +159,70 @@ const columns = [
   },
 ];
 
+const leadingControlColumns = [
+  {
+    id: 'actions',
+    width: 40,
+    headerCellRender: () => null,
+    rowCellRender: function RowCellRender() {
+      const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+      return (
+        <div>
+          <EuiPopover
+            isOpen={isPopoverOpen}
+            panelPaddingSize="s"
+            anchorPosition="upCenter"
+            button={
+              <EuiButtonIcon
+                aria-label="show actions"
+                iconType="boxesHorizontal"
+                color="text"
+                onClick={() => setIsPopoverOpen(!isPopoverOpen)}
+              />
+            }
+            closePopover={() => setIsPopoverOpen(false)}
+            ownFocus={true}>
+            <EuiPopoverTitle>Actions</EuiPopoverTitle>
+            <div style={{ width: 150 }}>
+              <button onClick={() => {}}>
+                <EuiFlexGroup
+                  alignItems="center"
+                  component="span"
+                  gutterSize="s">
+                  <EuiFlexItem grow={false}>
+                    <EuiButtonIcon
+                      aria-label="Pin selected items"
+                      iconType="pin"
+                      color="text"
+                    />
+                  </EuiFlexItem>
+                  <EuiFlexItem>Pin</EuiFlexItem>
+                </EuiFlexGroup>
+              </button>
+              <EuiSpacer size="s" />
+              <button onClick={() => {}}>
+                <EuiFlexGroup
+                  alignItems="center"
+                  component="span"
+                  gutterSize="s">
+                  <EuiFlexItem grow={false}>
+                    <EuiButtonIcon
+                      aria-label="Delete selected items"
+                      iconType="trash"
+                      color="text"
+                    />
+                  </EuiFlexItem>
+                  <EuiFlexItem>Delete</EuiFlexItem>
+                </EuiFlexGroup>
+              </button>
+            </div>
+          </EuiPopover>
+        </div>
+      );
+    },
+  },
+];
+
 const trailingControlColumns = [
   {
     id: 'actions',
@@ -183,7 +248,7 @@ const trailingControlColumns = [
             ownFocus={true}>
             <EuiPopoverTitle>Actions</EuiPopoverTitle>
             <div style={{ width: 150 }}>
-              <button onClick={() => {}} component="span">
+              <button onClick={() => {}}>
                 <EuiFlexGroup
                   alignItems="center"
                   component="span"
@@ -285,12 +350,17 @@ export default () => {
     };
   }, []);
 
+  const onColumnResize = useRef((eventData) => {
+    console.log(eventData);
+  });
+
   return (
     <DataContext.Provider value={raw_data}>
       <EuiDataGrid
         aria-label="Data grid demo"
         columns={columns}
         columnVisibility={{ visibleColumns, setVisibleColumns }}
+        leadingControlColumns={leadingControlColumns}
         trailingControlColumns={trailingControlColumns}
         rowCount={raw_data.length}
         renderCellValue={renderCellValue}
@@ -302,9 +372,7 @@ export default () => {
           onChangeItemsPerPage: onChangeItemsPerPage,
           onChangePage: onChangePage,
         }}
-        onColumnResize={(eventData) => {
-          console.log(eventData);
-        }}
+        onColumnResize={onColumnResize.current}
       />
     </DataContext.Provider>
   );
diff --git a/src/components/datagrid/column_selector.tsx b/src/components/datagrid/column_selector.tsx
index 1c8b61223ac..194f4ee1c61 100644
--- a/src/components/datagrid/column_selector.tsx
+++ b/src/components/datagrid/column_selector.tsx
@@ -21,6 +21,7 @@ import React, {
   Fragment,
   useState,
   useMemo,
+  useCallback,
   ReactElement,
   ChangeEvent,
 } from 'react';
@@ -82,18 +83,23 @@ export const useColumnSelector = (
   );
 
   const { visibleColumns, setVisibleColumns } = columnVisibility;
-  const visibleColumnIds = new Set(visibleColumns);
+  const visibleColumnIds = useMemo(() => new Set(visibleColumns), [
+    visibleColumns,
+  ]);
 
   const [isOpen, setIsOpen] = useState(false);
 
-  function setColumns(nextColumns: string[]) {
-    setSortedColumns(nextColumns);
+  const setColumns = useCallback(
+    (nextColumns: string[]) => {
+      setSortedColumns(nextColumns);
 
-    const nextVisibleColumns = nextColumns.filter((id) =>
-      visibleColumnIds.has(id)
-    );
-    setVisibleColumns(nextVisibleColumns);
-  }
+      const nextVisibleColumns = nextColumns.filter((id) =>
+        visibleColumnIds.has(id)
+      );
+      setVisibleColumns(nextVisibleColumns);
+    },
+    [setSortedColumns, setVisibleColumns, visibleColumnIds]
+  );
 
   function onDragEnd({
     source: { index: sourceIndex },
@@ -293,17 +299,20 @@ export const useColumnSelector = (
   /**
    * Used for moving columns left/right, available in the headers actions menu
    */
-  const switchColumnPos = (fromColId: string, toColId: string) => {
-    const moveFromIdx = sortedColumns.indexOf(fromColId);
-    const moveToIdx = sortedColumns.indexOf(toColId);
-    if (moveFromIdx === -1 || moveToIdx === -1) {
-      return;
-    }
-    const nextSortedColumns = [...sortedColumns];
-    nextSortedColumns.splice(moveFromIdx, 1);
-    nextSortedColumns.splice(moveToIdx, 0, fromColId);
-    setColumns(nextSortedColumns);
-  };
+  const switchColumnPos = useCallback(
+    (fromColId: string, toColId: string) => {
+      const moveFromIdx = sortedColumns.indexOf(fromColId);
+      const moveToIdx = sortedColumns.indexOf(toColId);
+      if (moveFromIdx === -1 || moveToIdx === -1) {
+        return;
+      }
+      const nextSortedColumns = [...sortedColumns];
+      nextSortedColumns.splice(moveFromIdx, 1);
+      nextSortedColumns.splice(moveToIdx, 0, fromColId);
+      setColumns(nextSortedColumns);
+    },
+    [setColumns, sortedColumns]
+  );
 
   return [
     columnSelector,
diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index 505bd4070df..26c88a715d8 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -34,7 +34,6 @@ import React, {
 import classNames from 'classnames';
 import tabbable from 'tabbable';
 import { EuiI18n } from '../i18n';
-import { EuiDataGridHeaderRow } from './data_grid_header_row';
 import { CommonProps, OneOf } from '../common';
 import {
   EuiDataGridColumn,
@@ -78,7 +77,7 @@ import {
 } from './data_grid_schema';
 import { useColumnSorting } from './column_sorting';
 import { EuiMutationObserver } from '../observer/mutation_observer';
-import { DataGridContext } from './data_grid_context';
+import { DataGridFocusContext, DataGridFocusContextShape, DataGridSortingContext } from './data_grid_context';
 
 // Used to short-circuit some async browser behaviour that is difficult to account for in tests
 const IS_JEST_ENVIRONMENT = global.hasOwnProperty('_isJest');
@@ -379,27 +378,26 @@ function useColumnWidths(
     setColumnWidths(computeColumnWidths());
   }, [computeColumnWidths]);
 
-  const setColumnWidth = (columnId: string, width: number) => {
-    setColumnWidths({ ...columnWidths, [columnId]: width });
+  const setColumnWidth = useCallback(
+    (columnId: string, width: number) => {
+      setColumnWidths({ ...columnWidths, [columnId]: width });
 
-    if (onColumnResize) {
-      onColumnResize({ columnId, width });
-    }
-  };
+      if (onColumnResize) {
+        onColumnResize({ columnId, width });
+      }
+    },
+    [columnWidths, onColumnResize]
+  );
 
   return [columnWidths, setColumnWidth];
 }
 
-function useOnResize(
-  setHasRoomForGridControls: (hasRoomForGridControls: boolean) => void,
-  isFullScreen: boolean,
-  minSizeForControls: number
-) {
+function useOnResize(setGridWidth: (newWidth: number) => void) {
   return useCallback(
     ({ width }: { width: number }) => {
-      setHasRoomForGridControls(width > minSizeForControls || isFullScreen);
+      setGridWidth(width);
     },
-    [setHasRoomForGridControls, isFullScreen, minSizeForControls]
+    [setGridWidth]
   );
 }
 
@@ -625,10 +623,22 @@ function checkOrDefaultToolBarDiplayOptions<
   }
 }
 
+function notifyCellOfFocusState(
+  cellsUpdateFocus: Map<string, Function>,
+  cell: EuiDataGridFocusedCell,
+  isFocused: boolean
+) {
+  const key = `${cell[0]}-${cell[1]}`;
+  const onFocus = cellsUpdateFocus.get(key);
+  if (onFocus) {
+    onFocus(isFocused);
+  }
+}
+
 const emptyArrayDefault: EuiDataGridControlColumn[] = [];
 export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
   const [isFullScreen, setIsFullScreen] = useState(false);
-  const [hasRoomForGridControls, setHasRoomForGridControls] = useState(true);
+  const [gridWidth, setGridWidth] = useState(IS_JEST_ENVIRONMENT ? 500 : 0);
   const [containerRef, _setContainerRef] = useState<HTMLDivElement | null>(
     null
   );
@@ -637,27 +647,53 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
 
   const setContainerRef = useCallback((ref) => _setContainerRef(ref), []);
 
-  const [wrappingDivFocusProps, focusedCell, setFocusedCell] = useFocus(
+  const [wrappingDivFocusProps, focusedCell, _setFocusedCell] = useFocus(
     headerIsInteractive
   );
 
-  const handleHeaderChange = useCallback<(headerRow: HTMLElement) => void>(
-    (headerRow) => {
-      const tabbables = tabbable(headerRow);
-      const managed = headerRow.querySelectorAll('[data-euigrid-tab-managed]');
-      const hasInteractives = tabbables.length > 0 || managed.length > 0;
-      if (hasInteractives !== headerIsInteractive) {
-        setHeaderIsInteractive(hasInteractives);
-
-        // if the focus is on the header, and the header is no longer interactive
-        // move the focus down to the first row
-        if (hasInteractives === false && focusedCell && focusedCell[1] === -1) {
-          setFocusedCell([focusedCell[0], 0]);
+  const cellsUpdateFocus = useRef<Map<string, Function>>(new Map());
+
+  const setFocusedCell = useCallback(
+    (focusedCell: EuiDataGridFocusedCell) => {
+      _setFocusedCell((previousCell) => {
+        // verify that the cell has changed
+        if (
+          previousCell != null &&
+          previousCell[0] === focusedCell[0] &&
+          previousCell[1] === focusedCell[1]
+        ) {
+          return previousCell;
         }
-      }
+
+        if (previousCell) {
+          notifyCellOfFocusState(cellsUpdateFocus.current, previousCell, false);
+        }
+        notifyCellOfFocusState(cellsUpdateFocus.current, focusedCell, true);
+        return focusedCell;
+      });
     },
-    [headerIsInteractive, setHeaderIsInteractive, focusedCell, setFocusedCell]
+    [_setFocusedCell]
   );
+
+  // @todo
+  // const handleHeaderChange = useCallback<(headerRow: HTMLElement) => void>(
+  //   (headerRow) => {
+  //     const tabbables = tabbable(headerRow);
+  //     const managed = headerRow.querySelectorAll('[data-euigrid-tab-managed]');
+  //     const hasInteractives = tabbables.length > 0 || managed.length > 0;
+  //     if (hasInteractives !== headerIsInteractive) {
+  //       setHeaderIsInteractive(hasInteractives);
+  //
+  //       // if the focus is on the header, and the header is no longer interactive
+  //       // move the focus down to the first row
+  //       if (hasInteractives === false && focusedCell && focusedCell[1] === -1) {
+  //         setFocusedCell([focusedCell[0], 0]);
+  //       }
+  //     }
+  //   },
+  //   [headerIsInteractive, setHeaderIsInteractive, focusedCell, setFocusedCell]
+  // );
+  const handleHeaderChange = useCallback(() => {}, []);
   const handleHeaderMutation = useCallback<MutationCallback>(
     (records) => {
       const [{ target }] = records;
@@ -711,15 +747,8 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
   } = props;
 
   // enables/disables grid controls based on available width
-  const onResize = useOnResize(
-    (nextHasRoomForGridControls) => {
-      if (nextHasRoomForGridControls !== hasRoomForGridControls) {
-        setHasRoomForGridControls(nextHasRoomForGridControls);
-      }
-    },
-    isFullScreen,
-    minSizeForControls
-  );
+  const onResize = useOnResize(setGridWidth);
+  const hasRoomForGridControls = gridWidth > minSizeForControls || isFullScreen;
 
   const [columnWidths, setColumnWidth] = useColumnWidths(
     columns,
@@ -905,48 +934,37 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
     </EuiI18n>
   );
 
-  const cellsUpdateFocus = useRef<Map<string, Function>>(new Map());
-
   const focusAfterRender = useAfterRender(() => {
     if (focusedCell) {
-      const key = `${focusedCell[0]}-${focusedCell[1]}`;
-
-      if (cellsUpdateFocus.current.has(key)) {
-        cellsUpdateFocus.current.get(key)!();
-      }
+      // const key = `${focusedCell[0]}-${focusedCell[1]}`;
+      // if (cellsUpdateFocus.current.has(key)) {
+      //   cellsUpdateFocus.current.get(key)!();
+      // }
     }
   });
 
-  const datagridContext = useMemo(
-    () => ({
-      onFocusUpdate: (cell: EuiDataGridFocusedCell, updateFocus: Function) => {
-        const key = `${cell[0]}-${cell[1]}`;
-        cellsUpdateFocus.current.set(key, updateFocus);
-
-        return () => {
-          cellsUpdateFocus.current.delete(key);
-        };
-      },
-    }),
+  const onFocusUpdate = useCallback(
+    (cell: EuiDataGridFocusedCell, updateFocus: Function) => {
+      const key = `${cell[0]}-${cell[1]}`;
+      cellsUpdateFocus.current.set(key, updateFocus);
+      return () => {
+        cellsUpdateFocus.current.delete(key);
+      };
+    },
     []
   );
+  const datagridFocusContext = useMemo<DataGridFocusContextShape>(() => {
+    console.log('creating a datagridFocusContext');
+    return {
+      setFocusedCell,
+      onFocusUpdate,
+    };
+  }, [setFocusedCell, onFocusUpdate]);
 
   const gridIds = htmlIdGenerator();
   const gridId = gridIds();
   const ariaLabelledById = gridIds();
 
-  const commonGridProps = {
-    columns: orderedVisibleColumns,
-    columnWidths,
-    defaultColumnWidth,
-    focusedCell,
-    leadingControlColumns,
-    onCellFocus: setFocusedCell,
-    schema: mergedSchema,
-    sorting,
-    trailingControlColumns,
-  };
-
   return (
     <EuiI18n
       token="euiDataGrid.ariaLabel"
@@ -989,127 +1007,125 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
               }
 
               return (
-                <DataGridContext.Provider value={datagridContext}>
-                  <EuiFocusTrap
-                    disabled={!isFullScreen}
-                    className="euiDataGrid__focusWrap">
-                    <div
-                      className={classes}
-                      onKeyDown={handleGridKeyDown}
-                      ref={setContainerRef}>
-                      {(IS_JEST_ENVIRONMENT || defaultColumnWidth) && (
-                        <>
-                          {showToolbar ? (
-                            <div
-                              className="euiDataGrid__controls"
-                              data-test-sub="dataGridControls">
-                              {hasRoomForGridControls ? gridControls : null}
-                              {checkOrDefaultToolBarDiplayOptions(
-                                toolbarVisibility,
-                                'showFullScreenSelector'
-                              )
-                                ? fullScreenSelector
-                                : null}
-                            </div>
-                          ) : null}
-                          <EuiResizeObserver onResize={onResize}>
-                            {(resizeRef) => (
+                <DataGridFocusContext.Provider value={datagridFocusContext}>
+                  <DataGridSortingContext.Provider value={sorting}>
+                    <EuiFocusTrap
+                      disabled={!isFullScreen}
+                      className="euiDataGrid__focusWrap">
+                      <div
+                        className={classes}
+                        onKeyDown={handleGridKeyDown}
+                        ref={setContainerRef}>
+                        {(IS_JEST_ENVIRONMENT || defaultColumnWidth) && (
+                          <>
+                            {showToolbar ? (
                               <div
-                                onKeyDown={createKeyDownHandler(
-                                  props,
-                                  orderedVisibleColumns,
-                                  leadingControlColumns,
-                                  trailingControlColumns,
-                                  focusedCell,
-                                  headerIsInteractive,
-                                  setFocusedCell,
-                                  focusAfterRender
-                                )}
-                                className="euiDataGrid__verticalScroll"
-                                ref={resizeRef}
-                                {...rest}>
-                                <div className="euiDataGrid__overflow">
-                                  {inMemory ? (
-                                    <EuiDataGridInMemoryRenderer
-                                      inMemory={inMemory}
-                                      renderCellValue={renderCellValue}
-                                      columns={columns}
-                                      rowCount={
-                                        inMemory.level === 'enhancements'
-                                          ? // if `inMemory.level === enhancements` then we can only be sure the pagination's pageSize is available in memory
-                                            pagination?.pageSize || rowCount
-                                          : // otherwise, all of the data is present and usable
-                                            rowCount
-                                      }
-                                      onCellRender={onCellRender}
-                                    />
-                                  ) : null}
-                                  <div
-                                    ref={setContentRef}
-                                    data-test-subj="dataGridWrapper"
-                                    className="euiDataGrid__content"
-                                    role="grid"
-                                    id={gridId}
-                                    {...wrappingDivFocusProps}
-                                    {...gridAriaProps}>
-                                    <EuiMutationObserver
-                                      observerOptions={{
-                                        subtree: true,
-                                        childList: true,
-                                      }}
-                                      onMutation={handleHeaderMutation}>
-                                      {(ref) => (
-                                        <EuiDataGridHeaderRow
-                                          ref={ref}
-                                          {...commonGridProps}
-                                          setColumnWidth={setColumnWidth}
-                                          setVisibleColumns={setVisibleColumns}
-                                          switchColumnPos={switchColumnPos}
-                                          schema={mergedSchema}
-                                          sorting={sorting}
-                                          headerIsInteractive={
-                                            headerIsInteractive
-                                          }
-                                        />
-                                      )}
-                                    </EuiMutationObserver>
-                                    <EuiDataGridBody
-                                      {...commonGridProps}
-                                      inMemoryValues={inMemoryValues}
-                                      inMemory={inMemory}
-                                      schemaDetectors={allSchemaDetectors}
-                                      popoverContents={popoverContents}
-                                      pagination={pagination}
-                                      renderCellValue={renderCellValue}
-                                      renderFooterCellValue={
-                                        renderFooterCellValue
-                                      }
-                                      rowCount={rowCount}
-                                      interactiveCellId={interactiveCellId}
-                                    />
+                                className="euiDataGrid__controls"
+                                data-test-sub="dataGridControls">
+                                {hasRoomForGridControls ? gridControls : null}
+                                {checkOrDefaultToolBarDiplayOptions(
+                                  toolbarVisibility,
+                                  'showFullScreenSelector'
+                                )
+                                  ? fullScreenSelector
+                                  : null}
+                              </div>
+                            ) : null}
+                            <EuiResizeObserver onResize={onResize}>
+                              {(resizeRef) => (
+                                <div
+                                  onKeyDown={createKeyDownHandler(
+                                    props,
+                                    orderedVisibleColumns,
+                                    leadingControlColumns,
+                                    trailingControlColumns,
+                                    focusedCell,
+                                    headerIsInteractive,
+                                    setFocusedCell,
+                                    focusAfterRender
+                                  )}
+                                  className="euiDataGrid__verticalScroll"
+                                  ref={resizeRef}
+                                  {...rest}>
+                                  <div className="euiDataGrid__overflow">
+                                    {inMemory ? (
+                                      <EuiDataGridInMemoryRenderer
+                                        inMemory={inMemory}
+                                        renderCellValue={renderCellValue}
+                                        columns={columns}
+                                        rowCount={
+                                          inMemory.level === 'enhancements'
+                                            ? // if `inMemory.level === enhancements` then we can only be sure the pagination's pageSize is available in memory
+                                              pagination?.pageSize || rowCount
+                                            : // otherwise, all of the data is present and usable
+                                              rowCount
+                                        }
+                                        onCellRender={onCellRender}
+                                      />
+                                    ) : null}
+                                    <div
+                                      ref={setContentRef}
+                                      data-test-subj="dataGridWrapper"
+                                      className="euiDataGrid__content"
+                                      role="grid"
+                                      id={gridId}
+                                      {...wrappingDivFocusProps}
+                                      {...gridAriaProps}>
+                                      <EuiDataGridBody
+                                        columns={orderedVisibleColumns}
+                                        columnWidths={columnWidths}
+                                        defaultColumnWidth={defaultColumnWidth}
+                                        leadingControlColumns={
+                                          leadingControlColumns
+                                        }
+                                        schema={mergedSchema}
+                                        trailingControlColumns={
+                                          trailingControlColumns
+                                        }
+                                        setVisibleColumns={setVisibleColumns}
+                                        switchColumnPos={switchColumnPos}
+                                        setColumnWidth={setColumnWidth}
+                                        headerIsInteractive={headerIsInteractive}
+                                        handleHeaderMutation={
+                                          handleHeaderMutation
+                                        }
+                                        gridWidth={gridWidth}
+                                        inMemoryValues={inMemoryValues}
+                                        inMemory={inMemory}
+                                        schemaDetectors={allSchemaDetectors}
+                                        popoverContents={popoverContents}
+                                        pagination={pagination}
+                                        renderCellValue={renderCellValue}
+                                        renderFooterCellValue={
+                                          renderFooterCellValue
+                                        }
+                                        rowCount={rowCount}
+                                        interactiveCellId={interactiveCellId}
+                                      />
+                                    </div>
                                   </div>
                                 </div>
-                              </div>
+                              )}
+                            </EuiResizeObserver>
+                            {props.pagination && props['aria-labelledby'] && (
+                              <p id={ariaLabelledBy} hidden>
+                                {ariaLabelledBy}
+                              </p>
                             )}
-                          </EuiResizeObserver>
-                          {props.pagination && props['aria-labelledby'] && (
-                            <p id={ariaLabelledBy} hidden>
-                              {ariaLabelledBy}
+                            {renderPagination(props, gridId)}
+                            <p id={interactiveCellId} hidden>
+                              <EuiI18n
+                                token="euiDataGrid.screenReaderNotice"
+                                default="Cell contains interactive content."
+                              />
+                              {/* TODO: if no keyboard shortcuts panel gets built, add keyboard shortcut info here */}
                             </p>
-                          )}
-                          {renderPagination(props, gridId)}
-                          <p id={interactiveCellId} hidden>
-                            <EuiI18n
-                              token="euiDataGrid.screenReaderNotice"
-                              default="Cell contains interactive content."
-                            />
-                            {/* TODO: if no keyboard shortcuts panel gets built, add keyboard shortcut info here */}
-                          </p>
-                        </>
-                      )}
-                    </div>
-                  </EuiFocusTrap>
-                </DataGridContext.Provider>
+                          </>
+                        )}
+                      </div>
+                    </EuiFocusTrap>
+                  </DataGridSortingContext.Provider>
+                </DataGridFocusContext.Provider>
               );
             }}
           </EuiI18n>
diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index 36321d11e36..76c46fa24ad 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -17,7 +17,18 @@
  * under the License.
  */
 
-import React, { Fragment, FunctionComponent, useMemo } from 'react';
+import React, {
+  forwardRef,
+  FunctionComponent,
+  useEffect,
+  useMemo,
+  useRef,
+  useCallback, useContext,
+} from 'react';
+import {
+  GridChildComponentProps,
+  VariableSizeGrid as Grid,
+} from 'react-window';
 import { EuiCodeBlock } from '../code';
 import {
   EuiDataGridControlColumn,
@@ -28,20 +39,24 @@ import {
   EuiDataGridInMemoryValues,
   EuiDataGridPaginationProps,
   EuiDataGridSorting,
-  EuiDataGridFocusedCell,
+  EuiDataGridPopoverContent,
 } from './data_grid_types';
-import { EuiDataGridCellProps } from './data_grid_cell';
-import {
-  EuiDataGridDataRow,
-  EuiDataGridDataRowProps,
-} from './data_grid_data_row';
+import { EuiDataGridCell, EuiDataGridCellProps } from './data_grid_cell';
 import {
   EuiDataGridSchema,
   EuiDataGridSchemaDetector,
 } from './data_grid_schema';
 import { EuiDataGridFooterRow } from './data_grid_footer_row';
+import {
+  EuiDataGridHeaderRow,
+  EuiDataGridHeaderRowProps,
+} from './data_grid_header_row';
+import { EuiMutationObserver } from '../observer/mutation_observer';
+import { EuiText } from '../text';
+import { DataGridSortingContext } from './data_grid_context';
 
 export interface EuiDataGridBodyProps {
+  gridWidth: number;
   columnWidths: EuiDataGridColumnWidths;
   defaultColumnWidth?: number | null;
   leadingControlColumns?: EuiDataGridControlColumn[];
@@ -50,8 +65,6 @@ export interface EuiDataGridBodyProps {
   schema: EuiDataGridSchema;
   schemaDetectors: EuiDataGridSchemaDetector[];
   popoverContents?: EuiDataGridPopoverContents;
-  focusedCell?: EuiDataGridFocusedCell;
-  onCellFocus: EuiDataGridDataRowProps['onCellFocus'];
   rowCount: number;
   renderCellValue: EuiDataGridCellProps['renderCellValue'];
   renderFooterCellValue?: EuiDataGridCellProps['renderCellValue'];
@@ -59,7 +72,11 @@ export interface EuiDataGridBodyProps {
   inMemoryValues: EuiDataGridInMemoryValues;
   interactiveCellId: EuiDataGridCellProps['interactiveCellId'];
   pagination?: EuiDataGridPaginationProps;
-  sorting?: EuiDataGridSorting;
+  setColumnWidth: (columnId: string, width: number) => void;
+  headerIsInteractive: boolean;
+  handleHeaderMutation: MutationCallback;
+  setVisibleColumns: EuiDataGridHeaderRowProps['setVisibleColumns'];
+  switchColumnPos: EuiDataGridHeaderRowProps['switchColumnPos'];
 }
 
 const defaultComparator: NonNullable<
@@ -91,10 +108,130 @@ const providedPopoverContents: EuiDataGridPopoverContents = {
   },
 };
 
+const HEADER_ROW_HEIGHT = 34;
+const FOOTER_ROW_HEIGHT = 34;
+
+const DefaultColumnFormatter: EuiDataGridPopoverContent = ({ children }) => {
+  return <EuiText>{children}</EuiText>;
+};
+
+const Cell: FunctionComponent<GridChildComponentProps> = ({
+  columnIndex,
+  rowIndex: _rowIndex,
+  style,
+  data,
+}) => {
+  const {
+    rowMap,
+    rowOffset,
+    leadingControlColumns,
+    trailingControlColumns,
+    columns,
+    schema,
+    popoverContents,
+    columnWidths,
+    defaultColumnWidth,
+    renderCellValue,
+    interactiveCellId,
+  } = data;
+
+  _rowIndex += rowOffset;
+  const rowIndex = rowMap.hasOwnProperty(_rowIndex)
+    ? rowMap[_rowIndex]
+    : _rowIndex;
+
+  let cellContent;
+
+  if (columnIndex < leadingControlColumns.length) {
+    // this is a leading control column
+    const leadingColumn = leadingControlColumns[columnIndex];
+    const { id, rowCellRender } = leadingColumn;
+
+    cellContent = (
+      <EuiDataGridCell
+        rowIndex={rowIndex}
+        visibleRowIndex={_rowIndex}
+        colIndex={columnIndex}
+        columnId={id}
+        popoverContent={DefaultColumnFormatter}
+        width={leadingColumn.width}
+        renderCellValue={rowCellRender}
+        interactiveCellId={interactiveCellId}
+        isExpandable={false}
+        className="euiDataGridRowCell--controlColumn"
+      />
+    );
+  } else if (columnIndex >= leadingControlColumns.length + columns.length) {
+    // this is a trailing control column
+    const columnOffset = columns.length + leadingControlColumns.length;
+    const adjustedColumnIndex = columnIndex - columnOffset;
+    const trailingColumn = trailingControlColumns[adjustedColumnIndex];
+    const { id, rowCellRender } = trailingColumn;
+
+    cellContent = (
+      <EuiDataGridCell
+        rowIndex={rowIndex}
+        visibleRowIndex={_rowIndex}
+        colIndex={adjustedColumnIndex}
+        columnId={id}
+        popoverContent={DefaultColumnFormatter}
+        width={trailingColumn.width}
+        renderCellValue={rowCellRender}
+        interactiveCellId={interactiveCellId}
+        isExpandable={false}
+        className="euiDataGridRowCell--controlColumn"
+      />
+    );
+  } else {
+    // this is a normal data cell
+
+    // offset the column index by the leading control columns
+    columnIndex -= leadingControlColumns.length;
+    const column = columns[columnIndex];
+    const columnId = column.id;
+    const columnType = schema[columnId] ? schema[columnId].columnType : null;
+
+    const isExpandable =
+      column.isExpandable !== undefined ? column.isExpandable : true;
+
+    const popoverContent =
+      popoverContents[columnType as string] || DefaultColumnFormatter;
+
+    const width = columnWidths[columnId] || defaultColumnWidth;
+
+    cellContent = (
+      <EuiDataGridCell
+        rowIndex={rowIndex}
+        visibleRowIndex={_rowIndex}
+        colIndex={columnIndex}
+        columnId={columnId}
+        column={column}
+        columnType={columnType}
+        popoverContent={popoverContent}
+        width={width || undefined}
+        renderCellValue={renderCellValue}
+        interactiveCellId={interactiveCellId}
+        isExpandable={isExpandable}
+      />
+    );
+  }
+
+  return (
+    <div
+      style={{
+        ...style,
+        top: `${parseFloat(style.top as string) + HEADER_ROW_HEIGHT}px`,
+      }}>
+      {cellContent}
+    </div>
+  );
+};
+
 export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
   props
 ) => {
   const {
+    gridWidth,
     columnWidths,
     defaultColumnWidth,
     leadingControlColumns = [],
@@ -103,8 +240,6 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     schema,
     schemaDetectors,
     popoverContents,
-    focusedCell,
-    onCellFocus,
     rowCount,
     renderCellValue,
     renderFooterCellValue,
@@ -112,7 +247,11 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     inMemoryValues,
     interactiveCellId,
     pagination,
-    sorting,
+    setColumnWidth,
+    headerIsInteractive,
+    handleHeaderMutation,
+    setVisibleColumns,
+    switchColumnPos,
   } = props;
 
   const startRow = pagination ? pagination.pageIndex * pagination.pageSize : 0;
@@ -129,6 +268,8 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     return visibleRowIndices;
   }, [startRow, endRow]);
 
+  const sorting = useContext(DataGridSortingContext);
+
   const rowMap = useMemo(() => {
     const rowMap: { [key: number]: number } = {};
 
@@ -192,73 +333,262 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     [popoverContents]
   );
 
-  const rows = useMemo(() => {
-    const rowsToRender = visibleRowIndices.map((rowIndex, i) => {
-      rowIndex = rowMap.hasOwnProperty(rowIndex) ? rowMap[rowIndex] : rowIndex;
-      return (
-        <EuiDataGridDataRow
-          key={rowIndex}
-          leadingControlColumns={leadingControlColumns}
-          trailingControlColumns={trailingControlColumns}
-          columns={columns}
-          schema={schema}
-          popoverContents={mergedPopoverContents}
-          columnWidths={columnWidths}
-          defaultColumnWidth={defaultColumnWidth}
-          focusedCellPositionInTheRow={
-            focusedCell != null && i === focusedCell[1] ? focusedCell[0] : null
-          }
-          onCellFocus={onCellFocus}
-          renderCellValue={renderCellValue}
-          rowIndex={rowIndex}
-          visibleRowIndex={i}
-          interactiveCellId={interactiveCellId}
-        />
-      );
-    });
-
-    if (renderFooterCellValue) {
-      rowsToRender.push(
-        <EuiDataGridFooterRow
-          key="footerRow"
-          leadingControlColumns={leadingControlColumns}
-          trailingControlColumns={trailingControlColumns}
-          columns={columns}
-          schema={schema}
-          popoverContents={mergedPopoverContents}
-          columnWidths={columnWidths}
-          defaultColumnWidth={defaultColumnWidth}
-          focusedCellPositionInTheRow={
-            focusedCell != null && visibleRowIndices.length === focusedCell[1]
-              ? focusedCell[0]
-              : null
-          }
-          onCellFocus={onCellFocus}
-          renderCellValue={renderFooterCellValue}
-          rowIndex={visibleRowIndices.length}
-          visibleRowIndex={visibleRowIndices.length}
-          interactiveCellId={interactiveCellId}
-        />
-      );
-    }
-
-    return rowsToRender;
+  const headerRow = useMemo(() => {
+    return (
+      <>
+        <EuiMutationObserver
+          observerOptions={{
+            subtree: true,
+            childList: true,
+          }}
+          onMutation={handleHeaderMutation}>
+          {(ref) => (
+            <EuiDataGridHeaderRow
+              ref={ref}
+              switchColumnPos={switchColumnPos}
+              setVisibleColumns={setVisibleColumns}
+              leadingControlColumns={leadingControlColumns}
+              trailingControlColumns={trailingControlColumns}
+              columns={columns}
+              columnWidths={columnWidths}
+              defaultColumnWidth={defaultColumnWidth}
+              setColumnWidth={setColumnWidth}
+              schema={schema}
+              headerIsInteractive={headerIsInteractive}
+            />
+          )}
+        </EuiMutationObserver>
+      </>
+    );
   }, [
-    visibleRowIndices,
-    rowMap,
+    handleHeaderMutation,
+    switchColumnPos,
+    setVisibleColumns,
     leadingControlColumns,
     trailingControlColumns,
     columns,
+    columnWidths,
+    defaultColumnWidth,
+    setColumnWidth,
     schema,
-    mergedPopoverContents,
+    headerIsInteractive,
+  ]);
+
+  const footerRow = useMemo(() => {
+    if (renderFooterCellValue == null) return null;
+    return (
+      <EuiDataGridFooterRow
+        key="footerRow"
+        leadingControlColumns={leadingControlColumns}
+        trailingControlColumns={trailingControlColumns}
+        columns={columns}
+        schema={schema}
+        popoverContents={mergedPopoverContents}
+        columnWidths={columnWidths}
+        defaultColumnWidth={defaultColumnWidth}
+        renderCellValue={renderFooterCellValue}
+        rowIndex={visibleRowIndices.length}
+        visibleRowIndex={visibleRowIndices.length}
+        interactiveCellId={interactiveCellId}
+      />
+    );
+  }, [
     columnWidths,
+    columns,
     defaultColumnWidth,
-    focusedCell,
-    onCellFocus,
-    renderCellValue,
-    renderFooterCellValue,
     interactiveCellId,
+    leadingControlColumns,
+    mergedPopoverContents,
+    renderFooterCellValue,
+    schema,
+    trailingControlColumns,
+    visibleRowIndices.length,
   ]);
 
-  return <Fragment>{rows}</Fragment>;
+  const InnerElement = useMemo(
+    () =>
+      forwardRef<HTMLDivElement, { style: { height: number } }>(
+        ({ children, style, ...rest }, ref) => {
+          return (
+            <>
+              <div
+                ref={ref}
+                style={{
+                  ...style,
+                  height: style.height + HEADER_ROW_HEIGHT,
+                }}
+                {...rest}>
+                {headerRow}
+                {children}
+              </div>
+              {footerRow}
+            </>
+          );
+        }
+      ),
+    [headerRow, footerRow]
+  );
+
+  const gridRef = useRef<Grid>(null);
+  useEffect(() => {
+    gridRef.current!.resetAfterColumnIndex(0);
+  }, [columns, columnWidths]);
+
+  const ROW_HEIGHT = 34;
+  const SCROLLBAR_HEIGHT = 15;
+
+  const getWidth = useCallback(
+    (index: number) => {
+      if (index < leadingControlColumns.length) {
+        // this is a leading control column
+        return leadingControlColumns[index].width;
+      } else if (index >= leadingControlColumns.length + columns.length) {
+        // this is a trailing control column
+        return trailingControlColumns[
+          index - leadingControlColumns.length - columns.length
+        ].width;
+      }
+      // normal data column
+      return (
+        columnWidths[columns[index - leadingControlColumns.length].id] ||
+        defaultColumnWidth ||
+        100
+      );
+    },
+    [
+      leadingControlColumns,
+      columns,
+      columnWidths,
+      defaultColumnWidth,
+      trailingControlColumns,
+    ]
+  );
+  const getRowHeight = useRef(() => ROW_HEIGHT);
+
+  return (
+    <Grid
+      ref={gridRef}
+      innerElementType={InnerElement}
+      columnCount={
+        leadingControlColumns.length +
+        columns.length +
+        trailingControlColumns.length
+      }
+      width={gridWidth}
+      columnWidth={getWidth}
+      // columnWidth={(index) => {
+      //   if (index < leadingControlColumns.length) {
+      //     // this is a leading control column
+      //     return leadingControlColumns[index].width;
+      //   } else if (index >= leadingControlColumns.length + columns.length) {
+      //     // this is a trailing control column
+      //     return trailingControlColumns[
+      //       index - leadingControlColumns.length - columns.length
+      //     ].width;
+      //   }
+      //   // normal data column
+      //   return (
+      //     columnWidths[columns[index - leadingControlColumns.length].id] ||
+      //     defaultColumnWidth ||
+      //     100
+      //   );
+      // }}
+      height={
+        ROW_HEIGHT * visibleRowIndices.length +
+        SCROLLBAR_HEIGHT +
+        HEADER_ROW_HEIGHT +
+        (footerRow ? FOOTER_ROW_HEIGHT : 0)
+      }
+      rowHeight={getRowHeight.current}
+      itemData={{
+        rowMap,
+        rowOffset: pagination ? pagination.pageIndex * pagination.pageSize : 0,
+        leadingControlColumns,
+        trailingControlColumns,
+        columns,
+        schema,
+        popoverContents: mergedPopoverContents,
+        columnWidths,
+        defaultColumnWidth,
+        renderCellValue,
+        interactiveCellId,
+      }}
+      rowCount={visibleRowIndices.length}>
+      {Cell}
+    </Grid>
+  );
+
+  // const rows = useMemo(() => {
+  //   const rowsToRender = visibleRowIndices.map((rowIndex, i) => {
+  //     rowIndex = rowMap.hasOwnProperty(rowIndex) ? rowMap[rowIndex] : rowIndex;
+  //     return (
+  //       <EuiDataGridDataRow
+  //         key={rowIndex}
+  //         leadingControlColumns={leadingControlColumns}
+  //         trailingControlColumns={trailingControlColumns}
+  //         columns={columns}
+  //         schema={schema}
+  //         popoverContents={mergedPopoverContents}
+  //         columnWidths={columnWidths}
+  //         defaultColumnWidth={defaultColumnWidth}
+  //         focusedCellPositionInTheRow={
+  //           focusedCell != null && i === focusedCell[1] ? focusedCell[0] : null
+  //         }
+  //         onCellFocus={onCellFocus}
+  //         renderCellValue={renderCellValue}
+  //         rowIndex={rowIndex}
+  //         visibleRowIndex={i}
+  //         interactiveCellId={interactiveCellId}
+  //       />
+  //     );
+  //   });
+  //
+  //   if (renderFooterCellValue) {
+  //     rowsToRender.push(
+  //       <EuiDataGridFooterRow
+  //         key="footerRow"
+  //         leadingControlColumns={leadingControlColumns}
+  //         trailingControlColumns={trailingControlColumns}
+  //         columns={columns}
+  //         schema={schema}
+  //         popoverContents={mergedPopoverContents}
+  //         columnWidths={columnWidths}
+  //         defaultColumnWidth={defaultColumnWidth}
+  //         focusedCellPositionInTheRow={
+  //           focusedCell != null && visibleRowIndices.length === focusedCell[1]
+  //             ? focusedCell[0]
+  //             : null
+  //         }
+  //         onCellFocus={onCellFocus}
+  //         renderCellValue={renderFooterCellValue}
+  //         rowIndex={visibleRowIndices.length}
+  //         visibleRowIndex={visibleRowIndices.length}
+  //         interactiveCellId={interactiveCellId}
+  //       />
+  //     );
+  //   }
+  //
+  //   return rowsToRender;
+  // }, [
+  //   leadingControlColumns,
+  //   trailingControlColumns,
+  //   defaultColumnWidth,
+  //   setColumnWidth,
+  //   schema,
+  //   sorting,
+  //   headerIsInteractive,
+  //   columnWidths,
+  //   columns,
+  //   schema,
+  //   mergedPopoverContents,
+  //   columnWidths,
+  //   defaultColumnWidth,
+  //   focusedCell,
+  //   onCellFocus,
+  //   renderCellValue,
+  //   renderFooterCellValue,
+  //   interactiveCellId,
+  // ]);
+  //
+  // return <Fragment>{rows}</Fragment>;
 };
diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index c3d83290a9d..3966b335b2e 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -40,7 +40,7 @@ import {
   EuiDataGridPopoverContent,
 } from './data_grid_types';
 import { EuiMutationObserver } from '../observer/mutation_observer';
-import { DataGridContext } from './data_grid_context';
+import { DataGridFocusContext } from './data_grid_context';
 import { EuiFocusTrap } from '../focus_trap';
 import { keys } from '../../services';
 import { EuiDataGridCellButtons } from './data_grid_cell_buttons';
@@ -84,8 +84,6 @@ export interface EuiDataGridCellProps {
   columnId: string;
   columnType?: string | null;
   width?: number;
-  isFocused: boolean;
-  onCellFocus: Function;
   interactiveCellId: string;
   isExpandable: boolean;
   className?: string;
@@ -104,7 +102,7 @@ interface EuiDataGridCellState {
 
 export type EuiDataGridCellValueProps = Omit<
   EuiDataGridCellProps,
-  'width' | 'isFocused' | 'interactiveCellId' | 'onCellFocus' | 'popoverContent'
+  'width' | 'interactiveCellId' | 'popoverContent'
 >;
 
 const EuiDataGridCellContent: FunctionComponent<
@@ -140,7 +138,7 @@ export class EuiDataGridCell extends Component<
   };
   unsubscribeCell?: Function = () => {};
 
-  static contextType = DataGridContext;
+  static contextType = DataGridFocusContext;
 
   getInteractables = () => {
     const tabbingRef = this.cellContentsRef;
@@ -154,11 +152,10 @@ export class EuiDataGridCell extends Component<
     return [];
   };
 
-  updateFocus = () => {
+  takeFocus = () => {
     const cell = this.cellRef.current;
-    const { isFocused } = this.props;
 
-    if (cell && isFocused) {
+    if (cell) {
       // only update focus if we are not already focused on something in this cell
       let element: Element | null = document.activeElement;
       while (element != null && element !== cell) {
@@ -179,26 +176,25 @@ export class EuiDataGridCell extends Component<
   };
 
   componentDidMount() {
+    console.log('mounted');
     this.unsubscribeCell = this.context.onFocusUpdate(
       [this.props.colIndex, this.props.visibleRowIndex],
-      this.updateFocus
+      this.onFocusUpdate
     );
   }
 
+  onFocusUpdate = (isFocused: boolean) => {
+    if (isFocused) {
+      this.takeFocus();
+    }
+  };
+
   componentWillUnmount() {
     if (this.unsubscribeCell) {
       this.unsubscribeCell();
     }
   }
 
-  componentDidUpdate(prevProps: EuiDataGridCellProps) {
-    const didFocusChange = prevProps.isFocused !== this.props.isFocused;
-
-    if (didFocusChange) {
-      this.updateFocus();
-    }
-  }
-
   shouldComponentUpdate(
     nextProps: EuiDataGridCellProps,
     nextState: EuiDataGridCellState
@@ -210,8 +206,6 @@ export class EuiDataGridCell extends Component<
     if (nextProps.columnType !== this.props.columnType) return true;
     if (nextProps.width !== this.props.width) return true;
     if (nextProps.renderCellValue !== this.props.renderCellValue) return true;
-    if (nextProps.onCellFocus !== this.props.onCellFocus) return true;
-    if (nextProps.isFocused !== this.props.isFocused) return true;
     if (nextProps.interactiveCellId !== this.props.interactiveCellId)
       return true;
     if (nextProps.popoverContent !== this.props.popoverContent) return true;
@@ -242,13 +236,8 @@ export class EuiDataGridCell extends Component<
     //  * if the cell children include portalled content React will bubble the focus
     //      event up, which can trigger the focus() call below, causing focus lock fighting
     if (this.cellRef.current === e.target) {
-      const {
-        onCellFocus,
-        colIndex,
-        visibleRowIndex,
-        isExpandable,
-      } = this.props;
-      onCellFocus([colIndex, visibleRowIndex]);
+      const { colIndex, visibleRowIndex, isExpandable } = this.props;
+      this.context.setFocusedCell([colIndex, visibleRowIndex]);
 
       const interactables = this.getInteractables();
       if (interactables.length === 1 && isExpandable === false) {
@@ -286,12 +275,10 @@ export class EuiDataGridCell extends Component<
   render() {
     const {
       width,
-      isFocused,
       isExpandable,
       popoverContent: PopoverContent,
       interactiveCellId,
       columnType,
-      onCellFocus,
       className,
       column,
       ...rest
@@ -484,7 +471,7 @@ export class EuiDataGridCell extends Component<
             panelRefFn={(ref) => (this.popoverPanelRef.current = ref)}
             popoverIsOpen={this.state.popoverIsOpen}
             rowIndex={rowIndex}
-            updateFocus={this.updateFocus}
+            updateFocus={this.takeFocus}
             renderCellValue={rest.renderCellValue}
             popoverContent={PopoverContent}
           />
@@ -495,7 +482,9 @@ export class EuiDataGridCell extends Component<
     return (
       <div
         role="gridcell"
-        tabIndex={isFocused && !this.state.disableCellTabIndex ? 0 : -1}
+        // tabIndex={isFocused && !this.state.disableCellTabIndex ? 0 : -1}
+        // @todo
+        tabIndex={!this.state.disableCellTabIndex ? 0 : -1}
         ref={this.cellRef}
         {...cellProps}
         data-test-subj="dataGridRowCell"
diff --git a/src/components/datagrid/data_grid_cell_popover.tsx b/src/components/datagrid/data_grid_cell_popover.tsx
index 288ae7dce8f..41c69da1939 100644
--- a/src/components/datagrid/data_grid_cell_popover.tsx
+++ b/src/components/datagrid/data_grid_cell_popover.tsx
@@ -81,7 +81,9 @@ export function EuiDataGridCellPopover({
           closePopover();
         }
       }}
-      onTrapDeactivation={updateFocus}>
+      // todo
+      // onTrapDeactivation={updateFocus}
+    >
       {popoverIsOpen ? (
         <>
           <PopoverContent cellContentsElement={cellContentsRef!}>
diff --git a/src/components/datagrid/data_grid_context.tsx b/src/components/datagrid/data_grid_context.tsx
index f1cd28f3f6d..1d24e825174 100644
--- a/src/components/datagrid/data_grid_context.tsx
+++ b/src/components/datagrid/data_grid_context.tsx
@@ -18,8 +18,20 @@
  */
 
 import React from 'react';
-import { EuiDataGridFocusedCell } from './data_grid_types';
+import { EuiDataGridFocusedCell, EuiDataGridSorting } from './data_grid_types';
 
-export const DataGridContext = React.createContext({
-  onFocusUpdate: (_cell: EuiDataGridFocusedCell, _updateFocus: Function) => {},
+export interface DataGridFocusContextShape {
+  setFocusedCell: (cell: EuiDataGridFocusedCell) => void;
+  onFocusUpdate: (cell: EuiDataGridFocusedCell, updateFocus: Function) => void;
+}
+
+export const DataGridFocusContext = React.createContext<
+  DataGridFocusContextShape
+>({
+  setFocusedCell: () => {},
+  onFocusUpdate: () => {},
 });
+
+export const DataGridSortingContext = React.createContext<
+  EuiDataGridSorting | undefined
+>(undefined);
diff --git a/src/components/datagrid/data_grid_control_header_cell.tsx b/src/components/datagrid/data_grid_control_header_cell.tsx
index d8af548fda8..758648fbc8f 100644
--- a/src/components/datagrid/data_grid_control_header_cell.tsx
+++ b/src/components/datagrid/data_grid_control_header_cell.tsx
@@ -21,40 +21,27 @@ import React, { FunctionComponent, useEffect, useRef, useState } from 'react';
 import classnames from 'classnames';
 import { keys } from '../../services';
 import tabbable from 'tabbable';
-import {
-  EuiDataGridControlColumn,
-  EuiDataGridFocusedCell,
-} from './data_grid_types';
-import { EuiDataGridDataRowProps } from './data_grid_data_row';
+import { EuiDataGridControlColumn } from './data_grid_types';
 
 export interface EuiDataGridControlHeaderRowProps {
   index: number;
   controlColumn: EuiDataGridControlColumn;
-  focusedCell?: EuiDataGridFocusedCell;
-  setFocusedCell: EuiDataGridDataRowProps['onCellFocus'];
   headerIsInteractive: boolean;
   className?: string;
 }
 
-export const EuiDataGridControlHeaderCell: FunctionComponent<EuiDataGridControlHeaderRowProps> = (
-  props
-) => {
-  const {
-    controlColumn,
-    index,
-    focusedCell,
-    setFocusedCell,
-    headerIsInteractive,
-    className,
-  } = props;
+export const EuiDataGridControlHeaderCell: FunctionComponent<EuiDataGridControlHeaderRowProps> = props => {
+  const { controlColumn, index, headerIsInteractive, className } = props;
 
   const { headerCellRender: HeaderCellRender, width, id } = controlColumn;
 
   const classes = classnames('euiDataGridHeaderCell', className);
 
   const headerRef = useRef<HTMLDivElement>(null);
-  const isFocused =
-    focusedCell != null && focusedCell[0] === index && focusedCell[1] === -1;
+  // todo
+  const isFocused = false;
+  // const isFocused =
+  //   focusedCell != null && focusedCell[0] === index && focusedCell[1] === -1;
   const [isCellEntered, setIsCellEntered] = useState(false);
 
   useEffect(() => {
@@ -118,7 +105,8 @@ export const EuiDataGridControlHeaderCell: FunctionComponent<EuiDataGridControlH
           return false;
         } else {
           // take the focus
-          setFocusedCell([index, -1]);
+          // todo
+          // setFocusedCell([index, -1]);
         }
       }
 
@@ -175,7 +163,7 @@ export const EuiDataGridControlHeaderCell: FunctionComponent<EuiDataGridControlH
         headerNode.removeEventListener('keyup', onKeyUp);
       };
     }
-  }, [headerIsInteractive, isFocused, setIsCellEntered, setFocusedCell, index]);
+  }, [headerIsInteractive, isFocused, setIsCellEntered, index]);
 
   return (
     <div
diff --git a/src/components/datagrid/data_grid_footer_row.tsx b/src/components/datagrid/data_grid_footer_row.tsx
index 299d3c93d83..3ebc36a49bb 100644
--- a/src/components/datagrid/data_grid_footer_row.tsx
+++ b/src/components/datagrid/data_grid_footer_row.tsx
@@ -42,9 +42,7 @@ export type EuiDataGridFooterRowProps = CommonProps &
     popoverContents: EuiDataGridPopoverContents;
     columnWidths: EuiDataGridColumnWidths;
     defaultColumnWidth?: number | null;
-    focusedCellPositionInTheRow?: number | null;
     renderCellValue: EuiDataGridCellProps['renderCellValue'];
-    onCellFocus: Function;
     interactiveCellId: EuiDataGridCellProps['interactiveCellId'];
     visibleRowIndex?: number;
   };
@@ -65,8 +63,6 @@ const EuiDataGridFooterRow: FunctionComponent<EuiDataGridFooterRowProps> = memo(
     className,
     renderCellValue,
     rowIndex,
-    focusedCellPositionInTheRow,
-    onCellFocus,
     interactiveCellId,
     'data-test-subj': _dataTestSubj,
     visibleRowIndex = rowIndex,
@@ -95,8 +91,6 @@ const EuiDataGridFooterRow: FunctionComponent<EuiDataGridFooterRowProps> = memo(
             popoverContent={DefaultColumnFormatter}
             width={width}
             renderCellValue={() => null}
-            onCellFocus={onCellFocus}
-            isFocused={focusedCellPositionInTheRow === i}
             interactiveCellId={interactiveCellId}
             isExpandable={true}
             className="euiDataGridFooterCell euiDataGridRowCell--controlColumn"
@@ -122,8 +116,6 @@ const EuiDataGridFooterRow: FunctionComponent<EuiDataGridFooterRowProps> = memo(
               popoverContent={popoverContent}
               width={width || undefined}
               renderCellValue={renderCellValue}
-              onCellFocus={onCellFocus}
-              isFocused={focusedCellPositionInTheRow === columnPosition}
               interactiveCellId={interactiveCellId}
               isExpandable={true}
               className="euiDataGridFooterCell"
@@ -143,8 +135,6 @@ const EuiDataGridFooterRow: FunctionComponent<EuiDataGridFooterRowProps> = memo(
               popoverContent={DefaultColumnFormatter}
               width={width}
               renderCellValue={() => null}
-              onCellFocus={onCellFocus}
-              isFocused={focusedCellPositionInTheRow === colIndex}
               interactiveCellId={interactiveCellId}
               isExpandable={true}
               className="euiDataGridFooterCell euiDataGridRowCell--controlColumn"
diff --git a/src/components/datagrid/data_grid_header_cell.tsx b/src/components/datagrid/data_grid_header_cell.tsx
index 4eb6a2fe561..f1259292818 100644
--- a/src/components/datagrid/data_grid_header_cell.tsx
+++ b/src/components/datagrid/data_grid_header_cell.tsx
@@ -21,7 +21,7 @@ import React, {
   AriaAttributes,
   FunctionComponent,
   HTMLAttributes,
-  useCallback,
+  useCallback, useContext,
   useEffect,
   useRef,
   useState,
@@ -39,6 +39,7 @@ import { EuiDataGridColumn } from './data_grid_types';
 import { getColumnActions } from './column_actions';
 import { useEuiI18n } from '../i18n';
 import { EuiIcon } from '../icon';
+import { DataGridSortingContext } from './data_grid_context';
 
 export interface EuiDataGridHeaderCellProps
   extends Omit<
@@ -63,9 +64,6 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
     setColumnWidth,
     setVisibleColumns,
     switchColumnPos,
-    sorting,
-    focusedCell,
-    onCellFocus: setFocusedCell,
     headerIsInteractive,
     className,
   } = props;
@@ -85,6 +83,8 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
     'Header actions'
   );
 
+  const sorting = useContext(DataGridSortingContext);
+
   if (sorting) {
     const sortedColumnIds = new Set(sorting.columns.map(({ id }) => id));
 
@@ -118,8 +118,10 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
   );
 
   const headerRef = useRef<HTMLDivElement>(null);
-  const isFocused =
-    focusedCell != null && focusedCell[0] === index && focusedCell[1] === -1;
+  // todo
+  const isFocused = false;
+  // const isFocused =
+  //   focusedCell != null && focusedCell[0] === index && focusedCell[1] === -1;
   const [isCellEntered, setIsCellEntered] = useState(false);
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
@@ -188,23 +190,24 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
           return false;
         } else {
           // take the focus
-          if (
-            focusedCell == null ||
-            focusedCell[0] !== index ||
-            focusedCell[1] !== -1
-          ) {
-            setFocusedCell([index, -1]);
-          } else if (headerRef.current) {
-            // this cell already had the grid's focus, so re-enable interactives
-            enableInteractives();
-            setIsCellEntered(true);
-
-            // if there is only one interactive element shift focus to the interactive element
-            const tabbables = tabbable(headerRef.current);
-            if (tabbables.length === 1) {
-              tabbables[0].focus();
-            }
-          }
+          // todo
+          // if (
+          //   focusedCell == null ||
+          //   focusedCell[0] !== index ||
+          //   focusedCell[1] !== -1
+          // ) {
+          //   setFocusedCell([index, -1]);
+          // } else if (headerRef.current) {
+          //   // this cell already had the grid's focus, so re-enable interactives
+          //   enableInteractives();
+          //   setIsCellEntered(true);
+          //
+          //   // if there is only one interactive element shift focus to the interactive element
+          //   const tabbables = tabbable(headerRef.current);
+          //   if (tabbables.length === 1) {
+          //     tabbables[0].focus();
+          //   }
+          // }
         }
       }
 
@@ -266,8 +269,6 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
     headerIsInteractive,
     isFocused,
     setIsCellEntered,
-    focusedCell,
-    setFocusedCell,
     index,
   ]);
 
diff --git a/src/components/datagrid/data_grid_header_row.tsx b/src/components/datagrid/data_grid_header_row.tsx
index 1c51dc99bb1..1a3fc97a431 100644
--- a/src/components/datagrid/data_grid_header_row.tsx
+++ b/src/components/datagrid/data_grid_header_row.tsx
@@ -23,12 +23,10 @@ import {
   EuiDataGridColumnWidths,
   EuiDataGridColumn,
   EuiDataGridSorting,
-  EuiDataGridFocusedCell,
   EuiDataGridControlColumn,
 } from './data_grid_types';
 import { CommonProps } from '../common';
 import { EuiDataGridSchema } from './data_grid_schema';
-import { EuiDataGridDataRowProps } from './data_grid_data_row';
 import { EuiDataGridHeaderCell } from './data_grid_header_cell';
 import { EuiDataGridControlHeaderCell } from './data_grid_control_header_cell';
 
@@ -42,9 +40,6 @@ export interface EuiDataGridHeaderRowPropsSpecificProps {
   setColumnWidth: (columnId: string, width: number) => void;
   setVisibleColumns: (columnId: string[]) => void;
   switchColumnPos: (colFromId: string, colToId: string) => void;
-  sorting?: EuiDataGridSorting;
-  focusedCell?: EuiDataGridFocusedCell;
-  onCellFocus: EuiDataGridDataRowProps['onCellFocus'];
   headerIsInteractive: boolean;
 }
 
@@ -67,9 +62,6 @@ const EuiDataGridHeaderRow = forwardRef<
     setColumnWidth,
     setVisibleColumns,
     switchColumnPos,
-    sorting,
-    focusedCell,
-    onCellFocus: setFocusedCell,
     headerIsInteractive,
     'data-test-subj': _dataTestSubj,
     ...rest
@@ -90,8 +82,6 @@ const EuiDataGridHeaderRow = forwardRef<
           key={controlColumn.id}
           index={index}
           controlColumn={controlColumn}
-          focusedCell={focusedCell}
-          setFocusedCell={setFocusedCell}
           headerIsInteractive={headerIsInteractive}
           className="euiDataGridHeaderCell--controlColumn"
         />
@@ -103,14 +93,11 @@ const EuiDataGridHeaderRow = forwardRef<
           columns={columns}
           index={index + leadingControlColumns.length}
           columnWidths={columnWidths}
-          focusedCell={focusedCell}
-          onCellFocus={setFocusedCell}
           schema={schema}
           setColumnWidth={setColumnWidth}
           setVisibleColumns={setVisibleColumns}
           switchColumnPos={switchColumnPos}
           defaultColumnWidth={defaultColumnWidth}
-          sorting={sorting}
           headerIsInteractive={headerIsInteractive}
         />
       ))}
@@ -119,8 +106,6 @@ const EuiDataGridHeaderRow = forwardRef<
           key={controlColumn.id}
           index={index + leadingControlColumns.length + columns.length}
           controlColumn={controlColumn}
-          focusedCell={focusedCell}
-          setFocusedCell={setFocusedCell}
           headerIsInteractive={headerIsInteractive}
           className="euiDataGridHeaderCell--controlColumn"
         />
diff --git a/src/components/datagrid/data_grid_schema.tsx b/src/components/datagrid/data_grid_schema.tsx
index beec874e110..6ede9cd2c39 100644
--- a/src/components/datagrid/data_grid_schema.tsx
+++ b/src/components/datagrid/data_grid_schema.tsx
@@ -288,6 +288,7 @@ function scoreValueBySchemaType(
 // represents lowest score a type detector can have to be considered valid
 const MINIMUM_SCORE_MATCH = 0.5;
 
+const emptyArray: unknown = []; // for in-memory object permanence
 export function useDetectSchema(
   inMemory: EuiDataGridInMemory | undefined,
   inMemoryValues: EuiDataGridInMemoryValues,
@@ -295,6 +296,9 @@ export function useDetectSchema(
   definedColumnSchemas: { [key: string]: string },
   autoDetectSchema: boolean
 ) {
+  const inMemorySkipColumns =
+    inMemory?.skipColumns || (emptyArray as EuiDataGridInMemory['skipColumns']);
+
   const schema = useMemo(() => {
     const schema: EuiDataGridSchema = {};
     if (autoDetectSchema === false) {
@@ -309,7 +313,7 @@ export function useDetectSchema(
     const rowIndices = Object.keys(inMemoryValues);
 
     const columnIdsWithDefinedSchemas = new Set<string>([
-      ...((inMemory && inMemory.skipColumns) || []),
+      ...inMemorySkipColumns,
       ...Object.keys(definedColumnSchemas),
     ]);
 
@@ -404,7 +408,7 @@ export function useDetectSchema(
   }, [
     autoDetectSchema,
     definedColumnSchemas,
-    inMemory,
+    inMemorySkipColumns,
     inMemoryValues,
     schemaDetectors,
   ]);

From 3795c28da238d705a231e2b309a6478d105a85f2 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Mon, 2 Nov 2020 12:54:03 -0700
Subject: [PATCH 02/54] Fix leading/trailing column focus management

---
 src/components/datagrid/data_grid_body.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index 403b3d7f4a2..8e4b96788ad 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -164,15 +164,15 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
   } else if (columnIndex >= leadingControlColumns.length + columns.length) {
     // this is a trailing control column
     const columnOffset = columns.length + leadingControlColumns.length;
-    const adjustedColumnIndex = columnIndex - columnOffset;
-    const trailingColumn = trailingControlColumns[adjustedColumnIndex];
+    const trailingColumnIndex = columnIndex - columnOffset;
+    const trailingColumn = trailingControlColumns[trailingColumnIndex];
     const { id, rowCellRender } = trailingColumn;
 
     cellContent = (
       <EuiDataGridCell
         rowIndex={rowIndex}
         visibleRowIndex={_rowIndex}
-        colIndex={adjustedColumnIndex}
+        colIndex={columnIndex}
         columnId={id}
         popoverContent={DefaultColumnFormatter}
         width={trailingColumn.width}
@@ -186,8 +186,8 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
     // this is a normal data cell
 
     // offset the column index by the leading control columns
-    columnIndex -= leadingControlColumns.length;
-    const column = columns[columnIndex];
+    const dataColumnIndex = columnIndex - leadingControlColumns.length;
+    const column = columns[dataColumnIndex];
     const columnId = column.id;
     const columnType = schema[columnId] ? schema[columnId].columnType : null;
 

From d4060e5ec62f6d17c33c89acd7f3465a533ce28f Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Tue, 3 Nov 2020 09:08:44 -0700
Subject: [PATCH 03/54] Re-enabled datagrid header focus

---
 src/components/datagrid/data_grid.tsx         | 56 ++++++++++++-------
 .../datagrid/data_grid_header_cell.tsx        | 52 +++++++++--------
 2 files changed, 63 insertions(+), 45 deletions(-)

diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index e5845ac9fe5..b579ecca25d 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -76,8 +76,11 @@ import {
   schemaDetectors as providedSchemaDetectors,
 } from './data_grid_schema';
 import { useColumnSorting } from './column_sorting';
-import { EuiMutationObserver } from '../observer/mutation_observer';
-import { DataGridFocusContext, DataGridFocusContextShape, DataGridSortingContext } from './data_grid_context';
+import {
+  DataGridFocusContext,
+  DataGridFocusContextShape,
+  DataGridSortingContext,
+} from './data_grid_context';
 
 // Used to short-circuit some async browser behaviour that is difficult to account for in tests
 const IS_JEST_ENVIRONMENT = global.hasOwnProperty('_isJest');
@@ -675,25 +678,35 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
     [_setFocusedCell]
   );
 
-  // @todo
-  // const handleHeaderChange = useCallback<(headerRow: HTMLElement) => void>(
-  //   (headerRow) => {
-  //     const tabbables = tabbable(headerRow);
-  //     const managed = headerRow.querySelectorAll('[data-euigrid-tab-managed]');
-  //     const hasInteractives = tabbables.length > 0 || managed.length > 0;
-  //     if (hasInteractives !== headerIsInteractive) {
-  //       setHeaderIsInteractive(hasInteractives);
-  //
-  //       // if the focus is on the header, and the header is no longer interactive
-  //       // move the focus down to the first row
-  //       if (hasInteractives === false && focusedCell && focusedCell[1] === -1) {
-  //         setFocusedCell([focusedCell[0], 0]);
-  //       }
-  //     }
-  //   },
-  //   [headerIsInteractive, setHeaderIsInteractive, focusedCell, setFocusedCell]
-  // );
-  const handleHeaderChange = useCallback(() => {}, []);
+  // maintain a statically-referenced copy of `focusedCell`
+  // so it can be looked up when needed without causing a re-render
+  const focusedCellReference = useRef<
+    EuiDataGridFocusedCell | null | undefined
+  >(focusedCell);
+  useEffect(() => {
+    focusedCellReference.current = focusedCell;
+  }, [focusedCell]);
+
+  const handleHeaderChange = useCallback<(headerRow: HTMLElement) => void>(
+    (headerRow) => {
+      const tabbables = tabbable(headerRow);
+      const managed = headerRow.querySelectorAll('[data-euigrid-tab-managed]');
+      const hasInteractives = tabbables.length > 0 || managed.length > 0;
+      if (hasInteractives !== headerIsInteractive) {
+        setHeaderIsInteractive(hasInteractives);
+
+        // if the focus is on the header, and the header is no longer interactive
+        // move the focus down to the first row
+        // if (hasInteractives === false && focusedCell && focusedCell[1] === -1) {
+        const focusedCell = focusedCellReference.current;
+        if (hasInteractives === false && focusedCell && focusedCell[1] === -1) {
+          setFocusedCell([focusedCell[0], 0]);
+        }
+      }
+    },
+    [headerIsInteractive, setHeaderIsInteractive, setFocusedCell]
+  );
+
   const handleHeaderMutation = useCallback<MutationCallback>(
     (records) => {
       const [{ target }] = records;
@@ -936,6 +949,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
 
   const focusAfterRender = useAfterRender(() => {
     if (focusedCell) {
+      // todo
       // const key = `${focusedCell[0]}-${focusedCell[1]}`;
       // if (cellsUpdateFocus.current.has(key)) {
       //   cellsUpdateFocus.current.get(key)!();
diff --git a/src/components/datagrid/data_grid_header_cell.tsx b/src/components/datagrid/data_grid_header_cell.tsx
index 359c066e9ed..4189bda2202 100644
--- a/src/components/datagrid/data_grid_header_cell.tsx
+++ b/src/components/datagrid/data_grid_header_cell.tsx
@@ -21,7 +21,8 @@ import React, {
   AriaAttributes,
   FunctionComponent,
   HTMLAttributes,
-  useCallback, useContext,
+  useCallback,
+  useContext,
   useEffect,
   useRef,
   useState,
@@ -39,7 +40,10 @@ import { EuiDataGridColumn } from './data_grid_types';
 import { getColumnActions } from './column_actions';
 import { useEuiI18n } from '../i18n';
 import { EuiIcon } from '../icon';
-import { DataGridSortingContext } from './data_grid_context';
+import {
+  DataGridFocusContext,
+  DataGridSortingContext,
+} from './data_grid_context';
 
 export interface EuiDataGridHeaderCellProps
   extends Omit<
@@ -85,6 +89,7 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
   );
 
   const sorting = useContext(DataGridSortingContext);
+  const { setFocusedCell, onFocusUpdate } = useContext(DataGridFocusContext);
 
   if (sorting) {
     const sortedColumnIds = new Set(sorting.columns.map(({ id }) => id));
@@ -118,11 +123,15 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
     className
   );
 
+  const [isFocused, setIsFocused] = useState(false);
+
+  useEffect(() => {
+    onFocusUpdate([index, -1], (isFocused: boolean) => {
+      setIsFocused(isFocused);
+    });
+  }, []);
+
   const headerRef = useRef<HTMLDivElement>(null);
-  // todo
-  const isFocused = false;
-  // const isFocused =
-  //   focusedCell != null && focusedCell[0] === index && focusedCell[1] === -1;
   const [isCellEntered, setIsCellEntered] = useState(false);
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
@@ -191,24 +200,19 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
           return false;
         } else {
           // take the focus
-          // todo
-          // if (
-          //   focusedCell == null ||
-          //   focusedCell[0] !== index ||
-          //   focusedCell[1] !== -1
-          // ) {
-          //   setFocusedCell([index, -1]);
-          // } else if (headerRef.current) {
-          //   // this cell already had the grid's focus, so re-enable interactives
-          //   enableInteractives();
-          //   setIsCellEntered(true);
-          //
-          //   // if there is only one interactive element shift focus to the interactive element
-          //   const tabbables = tabbable(headerRef.current);
-          //   if (tabbables.length === 1) {
-          //     tabbables[0].focus();
-          //   }
-          // }
+          if (isFocused === false) {
+            setFocusedCell([index, -1]);
+          } else if (headerRef.current) {
+            // this cell already had the grid's focus, so re-enable interactives
+            enableInteractives();
+            setIsCellEntered(true);
+
+            // if there is only one interactive element shift focus to the interactive element
+            const tabbables = tabbable(headerRef.current);
+            if (tabbables.length === 1) {
+              tabbables[0].focus();
+            }
+          }
         }
       }
 

From 37c6146555353ef84b130940bef40c71c791c870 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Wed, 4 Nov 2020 13:31:24 -0700
Subject: [PATCH 04/54] Fix cell tabIndex enable/disabling

---
 src/components/datagrid/data_grid_cell.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index 3966b335b2e..a75afa58143 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -96,6 +96,7 @@ export interface EuiDataGridCellProps {
 interface EuiDataGridCellState {
   cellProps: CommonProps & HTMLAttributes<HTMLDivElement>;
   popoverIsOpen: boolean; // is expansion popover open
+  isFocused: boolean; // tracks if this cell has focus or not, used to enable tabIndex on the cell
   isEntered: boolean; // enables focus trap for non-expandable cells with multiple interactive elements
   disableCellTabIndex: boolean; // disables tabIndex on the wrapping cell, used for focus management of a single interactive child
 }
@@ -133,6 +134,7 @@ export class EuiDataGridCell extends Component<
   state: EuiDataGridCellState = {
     cellProps: {},
     popoverIsOpen: false,
+    isFocused: false,
     isEntered: false,
     disableCellTabIndex: false,
   };
@@ -184,9 +186,11 @@ export class EuiDataGridCell extends Component<
   }
 
   onFocusUpdate = (isFocused: boolean) => {
-    if (isFocused) {
-      this.takeFocus();
-    }
+    this.setState({ isFocused }, () => {
+      if (isFocused) {
+        this.takeFocus();
+      }
+    });
   };
 
   componentWillUnmount() {
@@ -213,6 +217,7 @@ export class EuiDataGridCell extends Component<
     if (nextState.cellProps !== this.state.cellProps) return true;
     if (nextState.popoverIsOpen !== this.state.popoverIsOpen) return true;
     if (nextState.isEntered !== this.state.isEntered) return true;
+    if (nextState.isFocused !== this.state.isFocused) return true;
     if (nextState.disableCellTabIndex !== this.state.disableCellTabIndex)
       return true;
 
@@ -482,9 +487,7 @@ export class EuiDataGridCell extends Component<
     return (
       <div
         role="gridcell"
-        // tabIndex={isFocused && !this.state.disableCellTabIndex ? 0 : -1}
-        // @todo
-        tabIndex={!this.state.disableCellTabIndex ? 0 : -1}
+        tabIndex={this.state.isFocused && !this.state.disableCellTabIndex ? 0 : -1}
         ref={this.cellRef}
         {...cellProps}
         data-test-subj="dataGridRowCell"

From 70cec0915317462891468e5f5b42575f3db8e014 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Thu, 5 Nov 2020 11:05:35 -0700
Subject: [PATCH 05/54] Re-enabled initial grid focus when tabbing into it

---
 src/components/datagrid/data_grid.tsx         | 103 ++++++------------
 .../data_grid_control_header_cell.tsx         |  29 +++--
 .../datagrid/data_grid_header_cell.tsx        |   3 +-
 3 files changed, 54 insertions(+), 81 deletions(-)

diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index b579ecca25d..c91fe99de43 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -28,8 +28,7 @@ import React, {
   ReactChild,
   useMemo,
   useRef,
-  Dispatch,
-  SetStateAction,
+  MutableRefObject,
 } from 'react';
 import classNames from 'classnames';
 import tabbable from 'tabbable';
@@ -461,8 +460,7 @@ function createKeyDownHandler(
   trailingControlColumns: EuiDataGridControlColumn[],
   focusedCell: EuiDataGridFocusedCell | undefined,
   headerIsInteractive: boolean,
-  setFocusedCell: (focusedCell: EuiDataGridFocusedCell) => void,
-  updateFocus: Function
+  setFocusedCell: (focusedCell: EuiDataGridFocusedCell) => void
 ) {
   return (event: KeyboardEvent<HTMLDivElement>) => {
     if (focusedCell == null) return;
@@ -508,7 +506,6 @@ function createKeyDownHandler(
           props.pagination.onChangePage(pageIndex + 1);
         }
         setFocusedCell([focusedCell[0], 0]);
-        updateFocus();
       }
     } else if (key === keys.PAGE_UP) {
       if (props.pagination) {
@@ -518,7 +515,6 @@ function createKeyDownHandler(
           props.pagination.onChangePage(pageIndex - 1);
         }
         setFocusedCell([focusedCell[0], props.pagination.pageSize - 1]);
-        updateFocus();
       }
     } else if (key === (ctrlKey && keys.END)) {
       event.preventDefault();
@@ -536,44 +532,41 @@ function createKeyDownHandler(
   };
 }
 
-function useAfterRender(fn: Function): Function {
-  const [isSubscribed, setIsSubscribed] = useState(false);
-  const [needsExecution, setNeedsExecution] = useState(false);
-
-  // first useEffect waits for the parent & children to render & flush to dom
-  useEffect(() => {
-    if (isSubscribed) {
-      setIsSubscribed(false);
-      setNeedsExecution(true);
-    }
-  }, [isSubscribed, setIsSubscribed, setNeedsExecution]);
-
-  // second useEffect allows for a new `fn` to have been created
-  // with any state updates before being called
-  useEffect(() => {
-    if (needsExecution) {
-      setNeedsExecution(false);
-      fn();
-    }
-  }, [needsExecution, setNeedsExecution, fn]);
-
-  return () => {
-    setIsSubscribed(true);
-  };
-}
-
 type FocusProps = Pick<HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onFocus'>;
 const useFocus = (
-  headerIsInteractive: boolean
+  headerIsInteractive: boolean,
+  cellsUpdateFocus: MutableRefObject<Map<string, Function>>
 ): [
   FocusProps,
   EuiDataGridFocusedCell | undefined,
-  Dispatch<SetStateAction<EuiDataGridFocusedCell | undefined>>
+  (focusedCell: EuiDataGridFocusedCell) => void
 ] => {
-  const [focusedCell, setFocusedCell] = useState<
+  const [focusedCell, _setFocusedCell] = useState<
     EuiDataGridFocusedCell | undefined
   >(undefined);
 
+  const setFocusedCell = useCallback(
+    (focusedCell: EuiDataGridFocusedCell) => {
+      _setFocusedCell((previousCell) => {
+        // verify that the cell has changed
+        if (
+          previousCell != null &&
+          previousCell[0] === focusedCell[0] &&
+          previousCell[1] === focusedCell[1]
+        ) {
+          return previousCell;
+        }
+
+        if (previousCell) {
+          notifyCellOfFocusState(cellsUpdateFocus.current, previousCell, false);
+        }
+        notifyCellOfFocusState(cellsUpdateFocus.current, focusedCell, true);
+        return focusedCell;
+      });
+    },
+    [cellsUpdateFocus]
+  );
+
   const hasHadFocus = useMemo(() => focusedCell != null, [focusedCell]);
 
   const focusProps = useMemo<FocusProps>(
@@ -650,32 +643,11 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
 
   const setContainerRef = useCallback((ref) => _setContainerRef(ref), []);
 
-  const [wrappingDivFocusProps, focusedCell, _setFocusedCell] = useFocus(
-    headerIsInteractive
-  );
-
   const cellsUpdateFocus = useRef<Map<string, Function>>(new Map());
 
-  const setFocusedCell = useCallback(
-    (focusedCell: EuiDataGridFocusedCell) => {
-      _setFocusedCell((previousCell) => {
-        // verify that the cell has changed
-        if (
-          previousCell != null &&
-          previousCell[0] === focusedCell[0] &&
-          previousCell[1] === focusedCell[1]
-        ) {
-          return previousCell;
-        }
-
-        if (previousCell) {
-          notifyCellOfFocusState(cellsUpdateFocus.current, previousCell, false);
-        }
-        notifyCellOfFocusState(cellsUpdateFocus.current, focusedCell, true);
-        return focusedCell;
-      });
-    },
-    [_setFocusedCell]
+  const [wrappingDivFocusProps, focusedCell, setFocusedCell] = useFocus(
+    headerIsInteractive,
+    cellsUpdateFocus
   );
 
   // maintain a statically-referenced copy of `focusedCell`
@@ -947,16 +919,6 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
     </EuiI18n>
   );
 
-  const focusAfterRender = useAfterRender(() => {
-    if (focusedCell) {
-      // todo
-      // const key = `${focusedCell[0]}-${focusedCell[1]}`;
-      // if (cellsUpdateFocus.current.has(key)) {
-      //   cellsUpdateFocus.current.get(key)!();
-      // }
-    }
-  });
-
   const onFocusUpdate = useCallback(
     (cell: EuiDataGridFocusedCell, updateFocus: Function) => {
       const key = `${cell[0]}-${cell[1]}`;
@@ -1055,8 +1017,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
                                     trailingControlColumns,
                                     focusedCell,
                                     headerIsInteractive,
-                                    setFocusedCell,
-                                    focusAfterRender
+                                    setFocusedCell
                                   )}
                                   className="euiDataGrid__verticalScroll"
                                   ref={resizeRef}
diff --git a/src/components/datagrid/data_grid_control_header_cell.tsx b/src/components/datagrid/data_grid_control_header_cell.tsx
index 758648fbc8f..ba358ef9365 100644
--- a/src/components/datagrid/data_grid_control_header_cell.tsx
+++ b/src/components/datagrid/data_grid_control_header_cell.tsx
@@ -17,11 +17,18 @@
  * under the License.
  */
 
-import React, { FunctionComponent, useEffect, useRef, useState } from 'react';
+import React, {
+  FunctionComponent,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import classnames from 'classnames';
 import { keys } from '../../services';
 import tabbable from 'tabbable';
 import { EuiDataGridControlColumn } from './data_grid_types';
+import { DataGridFocusContext } from './data_grid_context';
 
 export interface EuiDataGridControlHeaderRowProps {
   index: number;
@@ -30,18 +37,25 @@ export interface EuiDataGridControlHeaderRowProps {
   className?: string;
 }
 
-export const EuiDataGridControlHeaderCell: FunctionComponent<EuiDataGridControlHeaderRowProps> = props => {
+export const EuiDataGridControlHeaderCell: FunctionComponent<EuiDataGridControlHeaderRowProps> = (
+  props
+) => {
   const { controlColumn, index, headerIsInteractive, className } = props;
 
+  const { setFocusedCell, onFocusUpdate } = useContext(DataGridFocusContext);
+
   const { headerCellRender: HeaderCellRender, width, id } = controlColumn;
 
   const classes = classnames('euiDataGridHeaderCell', className);
 
+  const [isFocused, setIsFocused] = useState(false);
+  useEffect(() => {
+    onFocusUpdate([index, -1], (isFocused: boolean) => {
+      setIsFocused(isFocused);
+    });
+  }, [index, onFocusUpdate]);
+
   const headerRef = useRef<HTMLDivElement>(null);
-  // todo
-  const isFocused = false;
-  // const isFocused =
-  //   focusedCell != null && focusedCell[0] === index && focusedCell[1] === -1;
   const [isCellEntered, setIsCellEntered] = useState(false);
 
   useEffect(() => {
@@ -105,8 +119,7 @@ export const EuiDataGridControlHeaderCell: FunctionComponent<EuiDataGridControlH
           return false;
         } else {
           // take the focus
-          // todo
-          // setFocusedCell([index, -1]);
+          setFocusedCell([index, -1]);
         }
       }
 
diff --git a/src/components/datagrid/data_grid_header_cell.tsx b/src/components/datagrid/data_grid_header_cell.tsx
index 4189bda2202..83c1f727987 100644
--- a/src/components/datagrid/data_grid_header_cell.tsx
+++ b/src/components/datagrid/data_grid_header_cell.tsx
@@ -124,12 +124,11 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
   );
 
   const [isFocused, setIsFocused] = useState(false);
-
   useEffect(() => {
     onFocusUpdate([index, -1], (isFocused: boolean) => {
       setIsFocused(isFocused);
     });
-  }, []);
+  }, [index, onFocusUpdate]);
 
   const headerRef = useRef<HTMLDivElement>(null);
   const [isCellEntered, setIsCellEntered] = useState(false);

From 639f3bb1298490b68a52a93eb00fb3e6649110fe Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Thu, 5 Nov 2020 11:23:30 -0700
Subject: [PATCH 06/54] removed outdated code

---
 src/components/datagrid/data_grid_cell.tsx         | 5 +++--
 src/components/datagrid/data_grid_cell_popover.tsx | 4 ----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index a75afa58143..90c0c8edab1 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -476,7 +476,6 @@ export class EuiDataGridCell extends Component<
             panelRefFn={(ref) => (this.popoverPanelRef.current = ref)}
             popoverIsOpen={this.state.popoverIsOpen}
             rowIndex={rowIndex}
-            updateFocus={this.takeFocus}
             renderCellValue={rest.renderCellValue}
             popoverContent={PopoverContent}
           />
@@ -487,7 +486,9 @@ export class EuiDataGridCell extends Component<
     return (
       <div
         role="gridcell"
-        tabIndex={this.state.isFocused && !this.state.disableCellTabIndex ? 0 : -1}
+        tabIndex={
+          this.state.isFocused && !this.state.disableCellTabIndex ? 0 : -1
+        }
         ref={this.cellRef}
         {...cellProps}
         data-test-subj="dataGridRowCell"
diff --git a/src/components/datagrid/data_grid_cell_popover.tsx b/src/components/datagrid/data_grid_cell_popover.tsx
index 41c69da1939..51a66662fda 100644
--- a/src/components/datagrid/data_grid_cell_popover.tsx
+++ b/src/components/datagrid/data_grid_cell_popover.tsx
@@ -42,7 +42,6 @@ interface EuiDataGridCellPopoverProps {
     | JSXElementConstructor<EuiDataGridCellValueElementProps>
     | ((props: EuiDataGridCellValueElementProps) => ReactNode);
   rowIndex: number;
-  updateFocus: () => void;
 }
 
 export function EuiDataGridCellPopover({
@@ -56,7 +55,6 @@ export function EuiDataGridCellPopover({
   popoverIsOpen,
   renderCellValue,
   rowIndex,
-  updateFocus,
 }: EuiDataGridCellPopoverProps) {
   const CellElement = renderCellValue as JSXElementConstructor<
     EuiDataGridCellValueElementProps
@@ -81,8 +79,6 @@ export function EuiDataGridCellPopover({
           closePopover();
         }
       }}
-      // todo
-      // onTrapDeactivation={updateFocus}
     >
       {popoverIsOpen ? (
         <>

From 653a3132ea3ea217704ea898142b72e541b8d950 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Fri, 6 Nov 2020 11:03:23 -0700
Subject: [PATCH 07/54] restructure cell focus update calls to avoid render
 side effect

---
 src/components/datagrid/data_grid.tsx | 48 ++++++++++++++++-----------
 1 file changed, 28 insertions(+), 20 deletions(-)

diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index c91fe99de43..82355dec23f 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -545,27 +545,35 @@ const useFocus = (
     EuiDataGridFocusedCell | undefined
   >(undefined);
 
-  const setFocusedCell = useCallback(
-    (focusedCell: EuiDataGridFocusedCell) => {
-      _setFocusedCell((previousCell) => {
-        // verify that the cell has changed
-        if (
-          previousCell != null &&
-          previousCell[0] === focusedCell[0] &&
-          previousCell[1] === focusedCell[1]
-        ) {
-          return previousCell;
-        }
+  const setFocusedCell = useCallback((focusedCell: EuiDataGridFocusedCell) => {
+    _setFocusedCell((previousCell) => {
+      // verify that the cell has changed
+      if (
+        previousCell != null &&
+        previousCell[0] === focusedCell[0] &&
+        previousCell[1] === focusedCell[1]
+      ) {
+        return previousCell;
+      }
+      return focusedCell;
+    });
+  }, []);
 
-        if (previousCell) {
-          notifyCellOfFocusState(cellsUpdateFocus.current, previousCell, false);
-        }
-        notifyCellOfFocusState(cellsUpdateFocus.current, focusedCell, true);
-        return focusedCell;
-      });
-    },
-    [cellsUpdateFocus]
-  );
+  const previousCell = useRef<EuiDataGridFocusedCell | undefined>(undefined);
+  useEffect(() => {
+    if (previousCell.current) {
+      notifyCellOfFocusState(
+        cellsUpdateFocus.current,
+        previousCell.current,
+        false
+      );
+    }
+    previousCell.current = focusedCell;
+
+    if (focusedCell) {
+      notifyCellOfFocusState(cellsUpdateFocus.current, focusedCell, true);
+    }
+  }, [cellsUpdateFocus, focusedCell]);
 
   const hasHadFocus = useMemo(() => focusedCell != null, [focusedCell]);
 

From 3889cc7072a31d1074097d316816d8fbe6520e5c Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Fri, 6 Nov 2020 12:54:19 -0700
Subject: [PATCH 08/54] respond to changes in cell height

---
 src/components/datagrid/data_grid_body.tsx | 113 +++------------------
 src/components/datagrid/data_grid_cell.tsx |  26 ++++-
 2 files changed, 40 insertions(+), 99 deletions(-)

diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index 8e4b96788ad..5fda93028be 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -25,6 +25,7 @@ import React, {
   useRef,
   useCallback,
   useContext,
+  useState,
 } from 'react';
 import {
   GridChildComponentProps,
@@ -133,6 +134,7 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
     defaultColumnWidth,
     renderCellValue,
     interactiveCellId,
+    setRowHeight,
   } = data;
 
   _rowIndex += rowOffset;
@@ -159,6 +161,7 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
         interactiveCellId={interactiveCellId}
         isExpandable={false}
         className="euiDataGridRowCell--controlColumn"
+        setRowHeight={setRowHeight}
       />
     );
   } else if (columnIndex >= leadingControlColumns.length + columns.length) {
@@ -227,6 +230,9 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
   );
 };
 
+const INITIAL_ROW_HEIGHT = 34;
+const SCROLLBAR_HEIGHT = 15;
+
 export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
   props
 ) => {
@@ -436,9 +442,6 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     gridRef.current!.resetAfterColumnIndex(0);
   }, [columns, columnWidths]);
 
-  const ROW_HEIGHT = 34;
-  const SCROLLBAR_HEIGHT = 15;
-
   const getWidth = useCallback(
     (index: number) => {
       if (index < leadingControlColumns.length) {
@@ -465,7 +468,13 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
       trailingControlColumns,
     ]
   );
-  const getRowHeight = useRef(() => ROW_HEIGHT);
+
+  const [rowHeight, setRowHeight] = useState(INITIAL_ROW_HEIGHT);
+  const getRowHeight = useCallback(() => rowHeight, [rowHeight]);
+
+  useEffect(() => {
+    if (gridRef.current) gridRef.current.resetAfterRowIndex(0);
+  }, [getRowHeight]);
 
   return (
     <Grid
@@ -478,31 +487,15 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
       }
       width={gridWidth}
       columnWidth={getWidth}
-      // columnWidth={(index) => {
-      //   if (index < leadingControlColumns.length) {
-      //     // this is a leading control column
-      //     return leadingControlColumns[index].width;
-      //   } else if (index >= leadingControlColumns.length + columns.length) {
-      //     // this is a trailing control column
-      //     return trailingControlColumns[
-      //       index - leadingControlColumns.length - columns.length
-      //     ].width;
-      //   }
-      //   // normal data column
-      //   return (
-      //     columnWidths[columns[index - leadingControlColumns.length].id] ||
-      //     defaultColumnWidth ||
-      //     100
-      //   );
-      // }}
       height={
-        ROW_HEIGHT * visibleRowIndices.length +
+        rowHeight * visibleRowIndices.length +
         SCROLLBAR_HEIGHT +
         HEADER_ROW_HEIGHT +
         (footerRow ? FOOTER_ROW_HEIGHT : 0)
       }
-      rowHeight={getRowHeight.current}
+      rowHeight={getRowHeight}
       itemData={{
+        setRowHeight,
         rowMap,
         rowOffset: pagination ? pagination.pageIndex * pagination.pageSize : 0,
         leadingControlColumns,
@@ -519,78 +512,4 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
       {Cell}
     </Grid>
   );
-
-  // const rows = useMemo(() => {
-  //   const rowsToRender = visibleRowIndices.map((rowIndex, i) => {
-  //     rowIndex = rowMap.hasOwnProperty(rowIndex) ? rowMap[rowIndex] : rowIndex;
-  //     return (
-  //       <EuiDataGridDataRow
-  //         key={rowIndex}
-  //         leadingControlColumns={leadingControlColumns}
-  //         trailingControlColumns={trailingControlColumns}
-  //         columns={columns}
-  //         schema={schema}
-  //         popoverContents={mergedPopoverContents}
-  //         columnWidths={columnWidths}
-  //         defaultColumnWidth={defaultColumnWidth}
-  //         focusedCellPositionInTheRow={
-  //           focusedCell != null && i === focusedCell[1] ? focusedCell[0] : null
-  //         }
-  //         onCellFocus={onCellFocus}
-  //         renderCellValue={renderCellValue}
-  //         rowIndex={rowIndex}
-  //         visibleRowIndex={i}
-  //         interactiveCellId={interactiveCellId}
-  //       />
-  //     );
-  //   });
-  //
-  //   if (renderFooterCellValue) {
-  //     rowsToRender.push(
-  //       <EuiDataGridFooterRow
-  //         key="footerRow"
-  //         leadingControlColumns={leadingControlColumns}
-  //         trailingControlColumns={trailingControlColumns}
-  //         columns={columns}
-  //         schema={schema}
-  //         popoverContents={mergedPopoverContents}
-  //         columnWidths={columnWidths}
-  //         defaultColumnWidth={defaultColumnWidth}
-  //         focusedCellPositionInTheRow={
-  //           focusedCell != null && visibleRowIndices.length === focusedCell[1]
-  //             ? focusedCell[0]
-  //             : null
-  //         }
-  //         onCellFocus={onCellFocus}
-  //         renderCellValue={renderFooterCellValue}
-  //         rowIndex={visibleRowIndices.length}
-  //         visibleRowIndex={visibleRowIndices.length}
-  //         interactiveCellId={interactiveCellId}
-  //       />
-  //     );
-  //   }
-  //
-  //   return rowsToRender;
-  // }, [
-  //   leadingControlColumns,
-  //   trailingControlColumns,
-  //   defaultColumnWidth,
-  //   setColumnWidth,
-  //   schema,
-  //   sorting,
-  //   headerIsInteractive,
-  //   columnWidths,
-  //   columns,
-  //   schema,
-  //   mergedPopoverContents,
-  //   columnWidths,
-  //   defaultColumnWidth,
-  //   focusedCell,
-  //   onCellFocus,
-  //   renderCellValue,
-  //   renderFooterCellValue,
-  //   interactiveCellId,
-  // ]);
-  //
-  // return <Fragment>{rows}</Fragment>;
 };
diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index 90c0c8edab1..a29f3481d94 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -91,6 +91,7 @@ export interface EuiDataGridCellProps {
   renderCellValue:
     | JSXElementConstructor<EuiDataGridCellValueElementProps>
     | ((props: EuiDataGridCellValueElementProps) => ReactNode);
+  setRowHeight?: (height: number) => void;
 }
 
 interface EuiDataGridCellState {
@@ -128,7 +129,8 @@ export class EuiDataGridCell extends Component<
   EuiDataGridCellProps,
   EuiDataGridCellState
 > {
-  cellRef = createRef<HTMLDivElement>();
+  cellRef = createRef() as MutableRefObject<HTMLDivElement | null>;
+  observer!: ResizeObserver;
   popoverPanelRef: MutableRefObject<HTMLElement | null> = createRef();
   cellContentsRef: HTMLDivElement | null = null;
   state: EuiDataGridCellState = {
@@ -140,6 +142,26 @@ export class EuiDataGridCell extends Component<
   };
   unsubscribeCell?: Function = () => {};
 
+  setCellRef = (ref: HTMLDivElement | null) => {
+    this.cellRef.current = ref;
+
+    // watch the first cell for size changes and use that to re-compute row heights
+    if (this.props.colIndex === 0 && this.props.visibleRowIndex === 0) {
+      if (ref) {
+        this.observer = new window.ResizeObserver(() => {
+          const rowHeight = this.cellRef.current!.getBoundingClientRect()
+            .height;
+          if (this.props.setRowHeight) {
+            this.props.setRowHeight(rowHeight);
+          }
+        });
+        this.observer.observe(ref);
+      } else {
+        this.observer.disconnect();
+      }
+    }
+  };
+
   static contextType = DataGridFocusContext;
 
   getInteractables = () => {
@@ -489,7 +511,7 @@ export class EuiDataGridCell extends Component<
         tabIndex={
           this.state.isFocused && !this.state.disableCellTabIndex ? 0 : -1
         }
-        ref={this.cellRef}
+        ref={this.setCellRef}
         {...cellProps}
         data-test-subj="dataGridRowCell"
         onKeyDown={handleCellKeyDown}

From 9571bc0d29d9e8bde632dcabc5996e1b9aac1805 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Tue, 10 Nov 2020 12:48:16 -0700
Subject: [PATCH 09/54] Add optional height&width props to EuiDataGrid

---
 src-docs/src/routes.js                        |   2 +
 .../datagrid_virtualization_example.js        |  36 +++++
 src-docs/src/views/datagrid/virtualization.js | 146 ++++++++++++++++++
 src/components/datagrid/data_grid.tsx         |  60 ++++---
 src/components/datagrid/data_grid_body.tsx    |   9 +-
 src/components/datagrid/data_grid_cell.tsx    |   1 -
 6 files changed, 226 insertions(+), 28 deletions(-)
 create mode 100644 src-docs/src/views/datagrid/datagrid_virtualization_example.js
 create mode 100644 src-docs/src/views/datagrid/virtualization.js

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index 5905d4889a1..b19e7999f9c 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -75,6 +75,7 @@ import { DataGridFocusExample } from './views/datagrid/datagrid_focus_example';
 import { DataGridStylingExample } from './views/datagrid/datagrid_styling_example';
 import { DataGridControlColumnsExample } from './views/datagrid/datagrid_controlcolumns_example';
 import { DataGridFooterRowExample } from './views/datagrid/datagrid_footer_row_example';
+import { DataGridVirtualizationExample } from './views/datagrid/datagrid_virtualization_example';
 
 import { DatePickerExample } from './views/date_picker/date_picker_example';
 
@@ -368,6 +369,7 @@ const navigation = [
       DataGridStylingExample,
       DataGridControlColumnsExample,
       DataGridFooterRowExample,
+      DataGridVirtualizationExample,
       TableExample,
       TableInMemoryExample,
     ].map((example) => createExample(example)),
diff --git a/src-docs/src/views/datagrid/datagrid_virtualization_example.js b/src-docs/src/views/datagrid/datagrid_virtualization_example.js
new file mode 100644
index 00000000000..1f230d9e2b7
--- /dev/null
+++ b/src-docs/src/views/datagrid/datagrid_virtualization_example.js
@@ -0,0 +1,36 @@
+import React, { Fragment } from 'react';
+
+import { renderToHtml } from '../../services';
+
+import { GuideSectionTypes } from '../../components';
+
+import DataGridVirtualization from './virtualization';
+const dataGridVirtualizationSource = require('!!raw-loader!./virtualization');
+const dataGridVirtualizationHtml = renderToHtml(DataGridVirtualization);
+
+export const DataGridVirtualizationExample = {
+  title: 'Data grid virtualization',
+  sections: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: dataGridVirtualizationSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: dataGridVirtualizationHtml,
+        },
+      ],
+      text: (
+        <Fragment>
+          <p>
+            Virtualization description
+          </p>
+        </Fragment>
+      ),
+      components: { DataGridVirtualization },
+      demo: <DataGridVirtualization />,
+    },
+  ],
+};
diff --git a/src-docs/src/views/datagrid/virtualization.js b/src-docs/src/views/datagrid/virtualization.js
new file mode 100644
index 00000000000..dec598a8606
--- /dev/null
+++ b/src-docs/src/views/datagrid/virtualization.js
@@ -0,0 +1,146 @@
+import React, {
+  Fragment,
+  useCallback,
+  useState,
+  createContext,
+  useContext,
+  useMemo,
+  useEffect,
+} from 'react';
+import { fake } from 'faker';
+
+import { EuiDataGrid, EuiLink, EuiText } from '../../../../src/components/';
+
+const DataContext = createContext();
+
+const raw_data = [];
+
+for (let i = 1; i < 10000; i++) {
+  const email = fake('{{internet.email}}');
+  const name = fake('{{name.lastName}}, {{name.firstName}}');
+  const suffix = fake('{{name.suffix}}');
+  raw_data.push({
+    name: `${name} ${suffix}`,
+    email: <EuiLink href="">{email}</EuiLink>,
+    location: (
+      <Fragment>
+        {`${fake('{{address.city}}')}, `}
+        <EuiLink href="https://google.com">
+          {fake('{{address.country}}')}
+        </EuiLink>
+      </Fragment>
+    ),
+    date: fake('{{date.past}}'),
+    account: fake('{{finance.account}}'),
+    amount: fake('${{commerce.price}}'),
+    phone: fake('{{phone.phoneNumber}}'),
+    version: fake('{{system.semver}}'),
+  });
+}
+
+const columns = [
+  {
+    id: 'name',
+    displayAsText: 'Name',
+    defaultSortDirection: 'asc',
+  },
+  {
+    id: 'email',
+  },
+  {
+    id: 'location',
+  },
+  {
+    id: 'account',
+  },
+  {
+    id: 'date',
+    defaultSortDirection: 'desc',
+  },
+  {
+    id: 'amount',
+  },
+  {
+    id: 'phone',
+    isSortable: false,
+  },
+  {
+    id: 'version',
+    defaultSortDirection: 'desc',
+    initialWidth: 65,
+    isResizable: false,
+  },
+];
+
+function RenderCellValue({ rowIndex, columnId }) {
+  const { data, adjustMountedCellCount } = useContext(DataContext);
+
+  useEffect(() => {
+    adjustMountedCellCount(1);
+    return () => adjustMountedCellCount(-1);
+  }, [adjustMountedCellCount]);
+
+  return data.hasOwnProperty(rowIndex) ? data[rowIndex][columnId] : null;
+}
+
+export default () => {
+  // ** Pagination config
+  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 250 });
+  const onChangeItemsPerPage = useCallback(
+    (pageSize) =>
+      setPagination((pagination) => ({
+        ...pagination,
+        pageSize,
+        pageIndex: 0,
+      })),
+    [setPagination]
+  );
+  const onChangePage = useCallback(
+    (pageIndex) =>
+      setPagination((pagination) => ({ ...pagination, pageIndex })),
+    [setPagination]
+  );
+
+  // Column visibility
+  const [visibleColumns, setVisibleColumns] = useState(() =>
+    columns.map(({ id }) => id)
+  ); // initialize to the full set of columns
+
+  const [mountedCellCount, setMountedCellCount] = useState(0);
+
+  const dataContext = useMemo(
+    () => ({
+      data: raw_data,
+      adjustMountedCellCount: (adjustment) =>
+        setMountedCellCount(
+          (mountedCellCount) => mountedCellCount + adjustment
+        ),
+    }),
+    []
+  );
+
+  return (
+    <>
+      <EuiText>
+        <p>There are {mountedCellCount} mounted cells</p>
+      </EuiText>
+      <DataContext.Provider value={dataContext}>
+        <EuiDataGrid
+          aria-label="Virtualized data grid demo"
+          height={300}
+          width={600}
+          columns={columns}
+          columnVisibility={{ visibleColumns, setVisibleColumns }}
+          rowCount={raw_data.length}
+          renderCellValue={RenderCellValue}
+          pagination={{
+            ...pagination,
+            pageSizeOptions: [50, 250, 1000],
+            onChangeItemsPerPage: onChangeItemsPerPage,
+            onChangePage: onChangePage,
+          }}
+        />
+      </DataContext.Provider>
+    </>
+  );
+};
diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index 82355dec23f..3aed6a3a8a2 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -157,6 +157,14 @@ type CommonGridProps = CommonProps &
      * Defines a minimum width for the grid to show all controls in its header.
      */
     minSizeForControls?: number;
+    /**
+     * Sets the grid's height, forcing it to overflow in a scrollable container with cell virtualization
+     */
+    height?: number;
+    /**
+     * Sets the grid's width, forcing it to overflow in a scrollable container with cell virtualization
+     */
+    width?: number;
   };
 
 // Force either aria-label or aria-labelledby to be defined
@@ -641,6 +649,29 @@ function notifyCellOfFocusState(
 
 const emptyArrayDefault: EuiDataGridControlColumn[] = [];
 export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
+  const {
+    leadingControlColumns = emptyArrayDefault,
+    trailingControlColumns = emptyArrayDefault,
+    columns,
+    columnVisibility,
+    schemaDetectors,
+    rowCount,
+    renderCellValue,
+    renderFooterCellValue,
+    className,
+    gridStyle,
+    toolbarVisibility = true,
+    pagination,
+    sorting,
+    inMemory,
+    popoverContents,
+    onColumnResize,
+    minSizeForControls = MINIMUM_WIDTH_FOR_GRID_CONTROLS,
+    height,
+    width,
+    ...rest
+  } = props;
+
   const [isFullScreen, setIsFullScreen] = useState(false);
   const [gridWidth, setGridWidth] = useState(IS_JEST_ENVIRONMENT ? 500 : 0);
   const [containerRef, _setContainerRef] = useState<HTMLDivElement | null>(
@@ -718,27 +749,6 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
     }
   };
 
-  const {
-    leadingControlColumns = emptyArrayDefault,
-    trailingControlColumns = emptyArrayDefault,
-    columns,
-    columnVisibility,
-    schemaDetectors,
-    rowCount,
-    renderCellValue,
-    renderFooterCellValue,
-    className,
-    gridStyle,
-    toolbarVisibility = true,
-    pagination,
-    sorting,
-    inMemory,
-    popoverContents,
-    onColumnResize,
-    minSizeForControls = MINIMUM_WIDTH_FOR_GRID_CONTROLS,
-    ...rest
-  } = props;
-
   // enables/disables grid controls based on available width
   const onResize = useOnResize(setGridWidth);
   const hasRoomForGridControls = gridWidth > minSizeForControls || isFullScreen;
@@ -999,7 +1009,9 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
                       <div
                         className={classes}
                         onKeyDown={handleGridKeyDown}
-                        ref={setContainerRef}>
+                        style={{ width }}
+                        ref={setContainerRef}
+                        {...rest}>
                         {(IS_JEST_ENVIRONMENT || defaultColumnWidth) && (
                           <>
                             {showToolbar ? (
@@ -1028,8 +1040,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
                                     setFocusedCell
                                   )}
                                   className="euiDataGrid__verticalScroll"
-                                  ref={resizeRef}
-                                  {...rest}>
+                                  ref={resizeRef}>
                                   <div className="euiDataGrid__overflow">
                                     {inMemory ? (
                                       <EuiDataGridInMemoryRenderer
@@ -1074,6 +1085,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
                                         handleHeaderMutation={
                                           handleHeaderMutation
                                         }
+                                        gridHeight={height}
                                         gridWidth={gridWidth}
                                         inMemoryValues={inMemoryValues}
                                         inMemory={inMemory}
diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index 5fda93028be..d2bacc23d7a 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -57,6 +57,7 @@ import { EuiText } from '../text';
 import { DataGridSortingContext } from './data_grid_context';
 
 export interface EuiDataGridBodyProps {
+  gridHeight?: number;
   gridWidth: number;
   columnWidths: EuiDataGridColumnWidths;
   defaultColumnWidth?: number | null;
@@ -237,6 +238,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
   props
 ) => {
   const {
+    gridHeight,
     gridWidth,
     columnWidths,
     defaultColumnWidth,
@@ -488,10 +490,11 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
       width={gridWidth}
       columnWidth={getWidth}
       height={
+        gridHeight ??
         rowHeight * visibleRowIndices.length +
-        SCROLLBAR_HEIGHT +
-        HEADER_ROW_HEIGHT +
-        (footerRow ? FOOTER_ROW_HEIGHT : 0)
+          SCROLLBAR_HEIGHT +
+          HEADER_ROW_HEIGHT +
+          (footerRow ? FOOTER_ROW_HEIGHT : 0)
       }
       rowHeight={getRowHeight}
       itemData={{
diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index a29f3481d94..ae82db297ec 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -200,7 +200,6 @@ export class EuiDataGridCell extends Component<
   };
 
   componentDidMount() {
-    console.log('mounted');
     this.unsubscribeCell = this.context.onFocusUpdate(
       [this.props.colIndex, this.props.visibleRowIndex],
       this.onFocusUpdate

From e81c56dc56bff8ddb2c570394c64697f8efec5c8 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Thu, 12 Nov 2020 13:43:29 -0700
Subject: [PATCH 10/54] Respect height/width props and DOM constraints

---
 .../datagrid_virtualization_example.js        |  29 ++-
 src-docs/src/views/datagrid/virtualization.js |  58 +++++-
 .../datagrid/virtualization_constrained.js    | 168 ++++++++++++++++++
 src/components/datagrid/data_grid.tsx         |  38 +++-
 src/components/datagrid/data_grid_body.tsx    |   6 +-
 5 files changed, 279 insertions(+), 20 deletions(-)
 create mode 100644 src-docs/src/views/datagrid/virtualization_constrained.js

diff --git a/src-docs/src/views/datagrid/datagrid_virtualization_example.js b/src-docs/src/views/datagrid/datagrid_virtualization_example.js
index 1f230d9e2b7..4afb855368d 100644
--- a/src-docs/src/views/datagrid/datagrid_virtualization_example.js
+++ b/src-docs/src/views/datagrid/datagrid_virtualization_example.js
@@ -8,6 +8,12 @@ import DataGridVirtualization from './virtualization';
 const dataGridVirtualizationSource = require('!!raw-loader!./virtualization');
 const dataGridVirtualizationHtml = renderToHtml(DataGridVirtualization);
 
+import DataGridVirtualizationConstrained from './virtualization_constrained';
+const dataGridVirtualizationConstrainedSource = require('!!raw-loader!./virtualization_constrained');
+const dataGridVirtualizationConstrainedHtml = renderToHtml(
+  DataGridVirtualizationConstrained
+);
+
 export const DataGridVirtualizationExample = {
   title: 'Data grid virtualization',
   sections: [
@@ -24,13 +30,30 @@ export const DataGridVirtualizationExample = {
       ],
       text: (
         <Fragment>
-          <p>
-            Virtualization description
-          </p>
+          <p>Virtualization description</p>
         </Fragment>
       ),
       components: { DataGridVirtualization },
       demo: <DataGridVirtualization />,
     },
+    {
+      title: 'Constrained by DOM',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: dataGridVirtualizationConstrainedSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: dataGridVirtualizationConstrainedHtml,
+        },
+      ],
+      text: (
+        <Fragment>
+          <p>Virtualization description</p>
+        </Fragment>
+      ),
+      demo: <DataGridVirtualizationConstrained />,
+    },
   ],
 };
diff --git a/src-docs/src/views/datagrid/virtualization.js b/src-docs/src/views/datagrid/virtualization.js
index dec598a8606..d0cfcb9bb24 100644
--- a/src-docs/src/views/datagrid/virtualization.js
+++ b/src-docs/src/views/datagrid/virtualization.js
@@ -9,7 +9,14 @@ import React, {
 } from 'react';
 import { fake } from 'faker';
 
-import { EuiDataGrid, EuiLink, EuiText } from '../../../../src/components/';
+import {
+  EuiDataGrid,
+  EuiLink,
+  EuiText,
+  EuiSpacer,
+  EuiButtonGroup,
+} from '../../../../src/components/';
+import { EuiFormRow } from '../../../../src/components/form/form_row';
 
 const DataContext = createContext();
 
@@ -83,9 +90,18 @@ function RenderCellValue({ rowIndex, columnId }) {
   return data.hasOwnProperty(rowIndex) ? data[rowIndex][columnId] : null;
 }
 
+const dimensionSizes = {
+  'height-300px': 300,
+  'height-600px': 600,
+
+  'width-200px': 200,
+  'width-50%': '50%',
+  'width-unconstrained': undefined,
+};
+
 export default () => {
   // ** Pagination config
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 250 });
+  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 50 });
   const onChangeItemsPerPage = useCallback(
     (pageSize) =>
       setPagination((pagination) => ({
@@ -119,16 +135,48 @@ export default () => {
     []
   );
 
+  const [height, setHeight] = useState('height-300px');
+  const [width, setWidth] = useState('width-50%');
+
   return (
     <>
+      <EuiFormRow label="Height">
+        <EuiButtonGroup
+          legend="Set a height for the following grid"
+          options={[
+            { id: 'height-300px', label: '300px' },
+            { id: 'height-600px', label: '600px' },
+            { id: 'height-unconstrained', label: 'Unconstrained' },
+          ]}
+          idSelected={height}
+          onChange={setHeight}
+        />
+      </EuiFormRow>
+
+      <EuiFormRow label="Width">
+        <EuiButtonGroup
+          legend="Set a width for the following grid"
+          options={[
+            { id: 'width-200px', label: '200px' },
+            { id: 'width-50%', label: '50%' },
+            { id: 'width-unconstrained', label: 'Unconstrained' },
+          ]}
+          idSelected={width}
+          onChange={setWidth}
+        />
+      </EuiFormRow>
+
+      <EuiSpacer />
+
       <EuiText>
-        <p>There are {mountedCellCount} mounted cells</p>
+        <p>There are {mountedCellCount} rendered cells</p>
       </EuiText>
+
       <DataContext.Provider value={dataContext}>
         <EuiDataGrid
           aria-label="Virtualized data grid demo"
-          height={300}
-          width={600}
+          height={dimensionSizes[height]}
+          width={dimensionSizes[width]}
           columns={columns}
           columnVisibility={{ visibleColumns, setVisibleColumns }}
           rowCount={raw_data.length}
diff --git a/src-docs/src/views/datagrid/virtualization_constrained.js b/src-docs/src/views/datagrid/virtualization_constrained.js
new file mode 100644
index 00000000000..a459cc6a784
--- /dev/null
+++ b/src-docs/src/views/datagrid/virtualization_constrained.js
@@ -0,0 +1,168 @@
+import React, {
+  Fragment,
+  useCallback,
+  useState,
+  createContext,
+  useContext,
+  useMemo,
+  useEffect,
+} from 'react';
+import { fake } from 'faker';
+
+import {
+  EuiDataGrid,
+  EuiLink,
+  EuiText,
+  EuiResizableContainer,
+} from '../../../../src/components/';
+
+const DataContext = createContext();
+
+const raw_data = [];
+
+for (let i = 1; i < 10000; i++) {
+  const email = fake('{{internet.email}}');
+  const name = fake('{{name.lastName}}, {{name.firstName}}');
+  const suffix = fake('{{name.suffix}}');
+  raw_data.push({
+    name: `${name} ${suffix}`,
+    email: <EuiLink href="">{email}</EuiLink>,
+    location: (
+      <Fragment>
+        {`${fake('{{address.city}}')}, `}
+        <EuiLink href="https://google.com">
+          {fake('{{address.country}}')}
+        </EuiLink>
+      </Fragment>
+    ),
+    date: fake('{{date.past}}'),
+    account: fake('{{finance.account}}'),
+    amount: fake('${{commerce.price}}'),
+    phone: fake('{{phone.phoneNumber}}'),
+    version: fake('{{system.semver}}'),
+  });
+}
+
+const columns = [
+  {
+    id: 'name',
+    displayAsText: 'Name',
+    defaultSortDirection: 'asc',
+  },
+  {
+    id: 'email',
+  },
+  {
+    id: 'location',
+  },
+  {
+    id: 'account',
+  },
+  {
+    id: 'date',
+    defaultSortDirection: 'desc',
+  },
+  {
+    id: 'amount',
+  },
+  {
+    id: 'phone',
+    isSortable: false,
+  },
+  {
+    id: 'version',
+    defaultSortDirection: 'desc',
+    initialWidth: 65,
+    isResizable: false,
+  },
+];
+
+function RenderCellValue({ rowIndex, columnId }) {
+  const { data, adjustMountedCellCount } = useContext(DataContext);
+
+  useEffect(() => {
+    adjustMountedCellCount(1);
+    return () => adjustMountedCellCount(-1);
+  }, [adjustMountedCellCount]);
+
+  return data.hasOwnProperty(rowIndex) ? data[rowIndex][columnId] : null;
+}
+
+export default () => {
+  // ** Pagination config
+  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 50 });
+  const onChangeItemsPerPage = useCallback(
+    (pageSize) =>
+      setPagination((pagination) => ({
+        ...pagination,
+        pageSize,
+        pageIndex: 0,
+      })),
+    [setPagination]
+  );
+  const onChangePage = useCallback(
+    (pageIndex) =>
+      setPagination((pagination) => ({ ...pagination, pageIndex })),
+    [setPagination]
+  );
+
+  // Column visibility
+  const [visibleColumns, setVisibleColumns] = useState(() =>
+    columns.map(({ id }) => id)
+  ); // initialize to the full set of columns
+
+  const [mountedCellCount, setMountedCellCount] = useState(0);
+
+  const dataContext = useMemo(
+    () => ({
+      data: raw_data,
+      adjustMountedCellCount: (adjustment) =>
+        setMountedCellCount(
+          (mountedCellCount) => mountedCellCount + adjustment
+        ),
+    }),
+    []
+  );
+
+  const grid = (
+    <EuiDataGrid
+      aria-label="Virtualized data grid demo"
+      columns={columns}
+      columnVisibility={{ visibleColumns, setVisibleColumns }}
+      rowCount={raw_data.length}
+      renderCellValue={RenderCellValue}
+      pagination={{
+        ...pagination,
+        pageSizeOptions: [50, 250, 1000],
+        onChangeItemsPerPage: onChangeItemsPerPage,
+        onChangePage: onChangePage,
+      }}
+    />
+  );
+
+  return (
+    <DataContext.Provider value={dataContext}>
+      <EuiText>
+        <p>There are {mountedCellCount} rendered cells</p>
+      </EuiText>
+
+      <EuiResizableContainer style={{ height: '400px' }}>
+        {(EuiResizablePanel, EuiResizableButton) => (
+          <>
+            <EuiResizablePanel initialSize={50} minSize="30%">
+              {grid}
+            </EuiResizablePanel>
+
+            <EuiResizableButton />
+
+            <EuiResizablePanel initialSize={50} minSize="200px">
+              <EuiText>
+                <p>This is a side panel with more information.</p>
+              </EuiText>
+            </EuiResizablePanel>
+          </>
+        )}
+      </EuiResizableContainer>
+    </DataContext.Provider>
+  );
+};
diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index 3aed6a3a8a2..76dfb636ba0 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -29,6 +29,7 @@ import React, {
   useMemo,
   useRef,
   MutableRefObject,
+  CSSProperties,
 } from 'react';
 import classNames from 'classnames';
 import tabbable from 'tabbable';
@@ -160,11 +161,11 @@ type CommonGridProps = CommonProps &
     /**
      * Sets the grid's height, forcing it to overflow in a scrollable container with cell virtualization
      */
-    height?: number;
+    height?: CSSProperties['height'];
     /**
      * Sets the grid's width, forcing it to overflow in a scrollable container with cell virtualization
      */
-    width?: number;
+    width?: CSSProperties['width'];
   };
 
 // Force either aria-label or aria-labelledby to be defined
@@ -402,12 +403,16 @@ function useColumnWidths(
   return [columnWidths, setColumnWidth];
 }
 
-function useOnResize(setGridWidth: (newWidth: number) => void) {
+function useOnResize(
+  setGridWidth: (newWidth: number) => void,
+  setGridHeight: (newHeight: number) => void
+) {
   return useCallback(
-    ({ width }: { width: number }) => {
+    ({ width, height }: { width: number; height: number }) => {
       setGridWidth(width);
+      setGridHeight(height);
     },
-    [setGridWidth]
+    [setGridWidth, setGridHeight]
   );
 }
 
@@ -674,6 +679,22 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
 
   const [isFullScreen, setIsFullScreen] = useState(false);
   const [gridWidth, setGridWidth] = useState(IS_JEST_ENVIRONMENT ? 500 : 0);
+
+  // default DOM layout rules allow block content to naturally expand to the full document width
+  // while height does not automatically expand; this gives us a little extra work when managing height:
+  // if a `height` prop is set, it will be applied via `style` to constrain the grid's DOM, which is reacted to with a resize observer and tracked with `gridHeight`
+  // if no `height` is set - or is unset - we need to unapply any existing `gridHeight` value
+  // this triggers a double re-render when the grid is switched from constrained to unconstrained
+  // but in reality ... maybe don't do that?
+  const [gridHeight, setGridHeight] = useState(IS_JEST_ENVIRONMENT ? 500 : 0);
+  useEffect(() => {
+    if (height == null) {
+      // if already 0 this update will be ignored
+      // if not already 0, this resets the height constraint so a new value can be observed
+      setGridHeight(0);
+    }
+  }, [height, pagination?.pageSize]);
+
   const [containerRef, _setContainerRef] = useState<HTMLDivElement | null>(
     null
   );
@@ -750,7 +771,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
   };
 
   // enables/disables grid controls based on available width
-  const onResize = useOnResize(setGridWidth);
+  const onResize = useOnResize(setGridWidth, setGridHeight);
   const hasRoomForGridControls = gridWidth > minSizeForControls || isFullScreen;
 
   const [columnWidths, setColumnWidth] = useColumnWidths(
@@ -948,7 +969,6 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
     []
   );
   const datagridFocusContext = useMemo<DataGridFocusContextShape>(() => {
-    console.log('creating a datagridFocusContext');
     return {
       setFocusedCell,
       onFocusUpdate,
@@ -1009,7 +1029,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
                       <div
                         className={classes}
                         onKeyDown={handleGridKeyDown}
-                        style={{ width }}
+                        style={{ width, height }}
                         ref={setContainerRef}
                         {...rest}>
                         {(IS_JEST_ENVIRONMENT || defaultColumnWidth) && (
@@ -1085,7 +1105,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
                                         handleHeaderMutation={
                                           handleHeaderMutation
                                         }
-                                        gridHeight={height}
+                                        gridHeight={gridHeight}
                                         gridWidth={gridWidth}
                                         inMemoryValues={inMemoryValues}
                                         inMemory={inMemory}
diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index d2bacc23d7a..90855540a55 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -442,7 +442,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
   const gridRef = useRef<Grid>(null);
   useEffect(() => {
     gridRef.current!.resetAfterColumnIndex(0);
-  }, [columns, columnWidths]);
+  }, [columns, columnWidths, defaultColumnWidth]);
 
   const getWidth = useCallback(
     (index: number) => {
@@ -473,7 +473,6 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
 
   const [rowHeight, setRowHeight] = useState(INITIAL_ROW_HEIGHT);
   const getRowHeight = useCallback(() => rowHeight, [rowHeight]);
-
   useEffect(() => {
     if (gridRef.current) gridRef.current.resetAfterRowIndex(0);
   }, [getRowHeight]);
@@ -490,7 +489,8 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
       width={gridWidth}
       columnWidth={getWidth}
       height={
-        gridHeight ??
+        // intentionally ignoring gridHeight if it is null/undefined/0
+        gridHeight ||
         rowHeight * visibleRowIndices.length +
           SCROLLBAR_HEIGHT +
           HEADER_ROW_HEIGHT +

From b61114ab5f899886e2f8f53c67076583444513fd Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Thu, 12 Nov 2020 13:52:19 -0700
Subject: [PATCH 11/54] updated snapshots

---
 .../__snapshots__/data_grid.test.tsx.snap     | 3030 +++++++++--------
 src/components/datagrid/data_grid.test.tsx    |  211 +-
 src/components/datagrid/data_grid_cell.tsx    |    7 +-
 3 files changed, 1661 insertions(+), 1587 deletions(-)

diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index f2f16ef988d..5d08323e1ba 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -947,6 +947,7 @@ Array [
   >
     <div
       class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2"
+      data-test-subj="test subject string"
     >
       <div
         class="euiDataGrid__controls"
@@ -1033,7 +1034,6 @@ Array [
       </div>
       <div
         class="euiDataGrid__verticalScroll"
-        data-test-subj="test subject string"
       >
         <div
           class="euiDataGrid__overflow"
@@ -1047,437 +1047,451 @@ Array [
             tabindex="0"
           >
             <div
-              class="euiDataGridHeader"
-              data-test-subj="dataGridHeader"
-              role="row"
+              style="position:relative;height:500px;width:500px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
             >
               <div
-                class="euiDataGridHeaderCell"
-                data-test-subj="dataGridHeaderCell-A"
-                role="columnheader"
-                style="width:100px"
-                tabindex="-1"
+                style="height:136px;width:200px"
               >
                 <div
-                  class="euiDataGridColumnResizer"
-                  data-test-subj="dataGridColumnResizer"
-                  style="margin-right:0px"
-                />
-                <button
-                  class="euiDataGridHeaderCell__button"
+                  class="euiDataGridHeader"
+                  data-test-subj="dataGridHeader"
+                  role="row"
                 >
                   <div
-                    class="euiDataGridHeaderCell__content"
-                  >
-                    A
-                  </div>
-                  <div
-                    class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                    class="euiDataGridHeaderCell"
+                    data-test-subj="dataGridHeaderCell-A"
+                    role="columnheader"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor"
+                      class="euiDataGridColumnResizer"
+                      data-test-subj="dataGridColumnResizer"
+                      style="margin-right:0px"
+                    />
+                    <button
+                      class="euiDataGridHeaderCell__button"
                     >
-                      <span
-                        aria-label="Header actions"
-                        color="text"
-                        data-euiicon-type="arrowDown"
-                        data-test-subj="dataGridHeaderCellActionButton-A"
-                      />
-                    </div>
-                  </div>
-                </button>
-              </div>
-              <div
-                class="euiDataGridHeaderCell"
-                data-test-subj="dataGridHeaderCell-B"
-                role="columnheader"
-                style="width:100px"
-                tabindex="-1"
-              >
-                <div
-                  class="euiDataGridColumnResizer"
-                  data-test-subj="dataGridColumnResizer"
-                  style="margin-right:0px"
-                />
-                <button
-                  class="euiDataGridHeaderCell__button"
-                >
-                  <div
-                    class="euiDataGridHeaderCell__content"
-                  >
-                    B
+                      <div
+                        class="euiDataGridHeaderCell__content"
+                      >
+                        A
+                      </div>
+                      <div
+                        class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                      >
+                        <div
+                          class="euiPopover__anchor"
+                        >
+                          <span
+                            aria-label="Header actions"
+                            color="text"
+                            data-euiicon-type="arrowDown"
+                            data-test-subj="dataGridHeaderCellActionButton-A"
+                          />
+                        </div>
+                      </div>
+                    </button>
                   </div>
                   <div
-                    class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                    class="euiDataGridHeaderCell"
+                    data-test-subj="dataGridHeaderCell-B"
+                    role="columnheader"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor"
+                      class="euiDataGridColumnResizer"
+                      data-test-subj="dataGridColumnResizer"
+                      style="margin-right:0px"
+                    />
+                    <button
+                      class="euiDataGridHeaderCell__button"
                     >
-                      <span
-                        aria-label="Header actions"
-                        color="text"
-                        data-euiicon-type="arrowDown"
-                        data-test-subj="dataGridHeaderCellActionButton-B"
-                      />
-                    </div>
+                      <div
+                        class="euiDataGridHeaderCell__content"
+                      >
+                        B
+                      </div>
+                      <div
+                        class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                      >
+                        <div
+                          class="euiPopover__anchor"
+                        >
+                          <span
+                            aria-label="Header actions"
+                            color="text"
+                            data-euiicon-type="arrowDown"
+                            data-test-subj="dataGridHeaderCellActionButton-B"
+                          />
+                        </div>
+                      </div>
+                    </button>
                   </div>
-                </button>
-              </div>
-            </div>
-            <div
-              class="euiDataGridRow"
-              data-test-subj="dataGridRow"
-              role="row"
-            >
-              <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
-              >
+                </div>
                 <div
-                  class="euiDataGridRowCell__content"
+                  style="position:absolute;left:0;top:34px;height:34px;width:100px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 1, Column: 1:
-                            </span>
-                          </p>
                           <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            0, A
+                            class="euiDataGridRowCell__expandFlex"
+                          >
+                            <div
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 1, Column: 1:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                0, A
+                              </div>
+                            </div>
+                            <div
+                              class="euiDataGridRowCell__expandButton"
+                            >
+                              <button
+                                aria-hidden="true"
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
-                        <div
-                          class="euiDataGridRowCell__expandButton"
-                        >
-                          <button
-                            aria-hidden="true"
-                            class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                            tabindex="-1"
-                            title="Click or hit enter to interact with cell content"
-                            type="button"
-                          >
-                            <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
-                            />
-                          </button>
-                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
-              <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
-              >
                 <div
-                  class="euiDataGridRowCell__content"
+                  style="position:absolute;left:100px;top:34px;height:34px;width:100px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 1, Column: 2:
-                            </span>
-                          </p>
                           <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            0, B
+                            class="euiDataGridRowCell__expandFlex"
+                          >
+                            <div
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 1, Column: 2:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                0, B
+                              </div>
+                            </div>
+                            <div
+                              class="euiDataGridRowCell__expandButton"
+                            >
+                              <button
+                                aria-hidden="true"
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
-                        <div
-                          class="euiDataGridRowCell__expandButton"
-                        >
-                          <button
-                            aria-hidden="true"
-                            class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                            tabindex="-1"
-                            title="Click or hit enter to interact with cell content"
-                            type="button"
-                          >
-                            <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
-                            />
-                          </button>
-                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            </div>
-            <div
-              class="euiDataGridRow"
-              data-test-subj="dataGridRow"
-              role="row"
-            >
-              <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
-              >
                 <div
-                  class="euiDataGridRowCell__content"
+                  style="position:absolute;left:0;top:68px;height:34px;width:100px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 2, Column: 1:
-                            </span>
-                          </p>
                           <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            1, A
+                            class="euiDataGridRowCell__expandFlex"
+                          >
+                            <div
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 2, Column: 1:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                1, A
+                              </div>
+                            </div>
+                            <div
+                              class="euiDataGridRowCell__expandButton"
+                            >
+                              <button
+                                aria-hidden="true"
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
-                        <div
-                          class="euiDataGridRowCell__expandButton"
-                        >
-                          <button
-                            aria-hidden="true"
-                            class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                            tabindex="-1"
-                            title="Click or hit enter to interact with cell content"
-                            type="button"
-                          >
-                            <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
-                            />
-                          </button>
-                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
-              <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
-              >
                 <div
-                  class="euiDataGridRowCell__content"
+                  style="position:absolute;left:100px;top:68px;height:34px;width:100px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 2, Column: 2:
-                            </span>
-                          </p>
                           <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            1, B
+                            class="euiDataGridRowCell__expandFlex"
+                          >
+                            <div
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 2, Column: 2:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                1, B
+                              </div>
+                            </div>
+                            <div
+                              class="euiDataGridRowCell__expandButton"
+                            >
+                              <button
+                                aria-hidden="true"
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
-                        <div
-                          class="euiDataGridRowCell__expandButton"
-                        >
-                          <button
-                            aria-hidden="true"
-                            class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                            tabindex="-1"
-                            title="Click or hit enter to interact with cell content"
-                            type="button"
-                          >
-                            <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
-                            />
-                          </button>
-                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            </div>
-            <div
-              class="euiDataGridRow"
-              data-test-subj="dataGridRow"
-              role="row"
-            >
-              <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
-              >
                 <div
-                  class="euiDataGridRowCell__content"
+                  style="position:absolute;left:0;top:102px;height:34px;width:100px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 3, Column: 1:
-                            </span>
-                          </p>
                           <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            2, A
+                            class="euiDataGridRowCell__expandFlex"
+                          >
+                            <div
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 3, Column: 1:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                2, A
+                              </div>
+                            </div>
+                            <div
+                              class="euiDataGridRowCell__expandButton"
+                            >
+                              <button
+                                aria-hidden="true"
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
-                        <div
-                          class="euiDataGridRowCell__expandButton"
-                        >
-                          <button
-                            aria-hidden="true"
-                            class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                            tabindex="-1"
-                            title="Click or hit enter to interact with cell content"
-                            type="button"
-                          >
-                            <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
-                            />
-                          </button>
-                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
-              <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
-              >
                 <div
-                  class="euiDataGridRowCell__content"
+                  style="position:absolute;left:100px;top:102px;height:34px;width:100px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 3, Column: 2:
-                            </span>
-                          </p>
                           <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            2, B
+                            class="euiDataGridRowCell__expandFlex"
+                          >
+                            <div
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 3, Column: 2:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                2, B
+                              </div>
+                            </div>
+                            <div
+                              class="euiDataGridRowCell__expandButton"
+                            >
+                              <button
+                                aria-hidden="true"
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
-                        <div
-                          class="euiDataGridRowCell__expandButton"
-                        >
-                          <button
-                            aria-hidden="true"
-                            class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                            tabindex="-1"
-                            title="Click or hit enter to interact with cell content"
-                            type="button"
-                          >
-                            <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
-                            />
-                          </button>
-                        </div>
                       </div>
                     </div>
                   </div>
@@ -1521,6 +1535,7 @@ Array [
   >
     <div
       class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2"
+      data-test-subj="test subject string"
     >
       <div
         class="euiDataGrid__controls"
@@ -1607,7 +1622,6 @@ Array [
       </div>
       <div
         class="euiDataGrid__verticalScroll"
-        data-test-subj="test subject string"
       >
         <div
           class="euiDataGrid__overflow"
@@ -1621,237 +1635,141 @@ Array [
             tabindex="0"
           >
             <div
-              class="euiDataGridHeader"
-              data-test-subj="dataGridHeader"
-              role="row"
+              style="position:relative;height:500px;width:500px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
             >
               <div
-                class="euiDataGridHeaderCell euiDataGridHeaderCell--controlColumn"
-                data-test-subj="dataGridHeaderCell-leading"
-                role="columnheader"
-                style="width:50px"
-                tabindex="-1"
-              >
-                <div
-                  class="euiDataGridHeaderCell__content"
-                >
-                  <span>
-                    leading heading
-                  </span>
-                </div>
-              </div>
-              <div
-                class="euiDataGridHeaderCell"
-                data-test-subj="dataGridHeaderCell-A"
-                role="columnheader"
-                style="width:100px"
-                tabindex="-1"
+                style="height:136px;width:300px"
               >
                 <div
-                  class="euiDataGridColumnResizer"
-                  data-test-subj="dataGridColumnResizer"
-                  style="margin-right:0px"
-                />
-                <button
-                  class="euiDataGridHeaderCell__button"
+                  class="euiDataGridHeader"
+                  data-test-subj="dataGridHeader"
+                  role="row"
                 >
                   <div
-                    class="euiDataGridHeaderCell__content"
-                  >
-                    A
-                  </div>
-                  <div
-                    class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                    class="euiDataGridHeaderCell euiDataGridHeaderCell--controlColumn"
+                    data-test-subj="dataGridHeaderCell-leading"
+                    role="columnheader"
+                    style="width:50px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor"
+                      class="euiDataGridHeaderCell__content"
                     >
-                      <span
-                        aria-label="Header actions"
-                        color="text"
-                        data-euiicon-type="arrowDown"
-                        data-test-subj="dataGridHeaderCellActionButton-A"
-                      />
+                      <span>
+                        leading heading
+                      </span>
                     </div>
                   </div>
-                </button>
-              </div>
-              <div
-                class="euiDataGridHeaderCell"
-                data-test-subj="dataGridHeaderCell-B"
-                role="columnheader"
-                style="width:100px"
-                tabindex="-1"
-              >
-                <div
-                  class="euiDataGridColumnResizer"
-                  data-test-subj="dataGridColumnResizer"
-                  style="margin-right:0px"
-                />
-                <button
-                  class="euiDataGridHeaderCell__button"
-                >
-                  <div
-                    class="euiDataGridHeaderCell__content"
-                  >
-                    B
-                  </div>
                   <div
-                    class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                    class="euiDataGridHeaderCell"
+                    data-test-subj="dataGridHeaderCell-A"
+                    role="columnheader"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor"
+                      class="euiDataGridColumnResizer"
+                      data-test-subj="dataGridColumnResizer"
+                      style="margin-right:0px"
+                    />
+                    <button
+                      class="euiDataGridHeaderCell__button"
                     >
-                      <span
-                        aria-label="Header actions"
-                        color="text"
-                        data-euiicon-type="arrowDown"
-                        data-test-subj="dataGridHeaderCellActionButton-B"
-                      />
-                    </div>
-                  </div>
-                </button>
-              </div>
-              <div
-                class="euiDataGridHeaderCell euiDataGridHeaderCell--controlColumn"
-                data-test-subj="dataGridHeaderCell-trailing"
-                role="columnheader"
-                style="width:50px"
-                tabindex="-1"
-              >
-                <div
-                  class="euiDataGridHeaderCell__content"
-                >
-                  <span>
-                    trailing heading
-                  </span>
-                </div>
-              </div>
-            </div>
-            <div
-              class="euiDataGridRow"
-              data-test-subj="dataGridRow"
-              role="row"
-            >
-              <div
-                class="euiDataGridRowCell euiDataGridRowCell--controlColumn"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:50px"
-                tabindex="-1"
-              >
-                <div
-                  data-focus-guard="true"
-                  style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                  tabindex="-1"
-                />
-                <div
-                  data-focus-guard="true"
-                  style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                  tabindex="-1"
-                />
-                <div
-                  data-focus-lock-disabled="disabled"
-                >
-                  <div
-                    class="euiDataGridRowCell__expandFlex"
-                  >
-                    <div
-                      class="euiDataGridRowCell__expandContent"
-                    >
-                      <p
-                        class="euiScreenReaderOnly"
+                      <div
+                        class="euiDataGridHeaderCell__content"
                       >
-                        <span>
-                          Row: 1, Column: 1:
-                        </span>
-                      </p>
+                        A
+                      </div>
                       <div
-                        class="euiDataGridRowCell__truncate"
+                        class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
                       >
-                        0
+                        <div
+                          class="euiPopover__anchor"
+                        >
+                          <span
+                            aria-label="Header actions"
+                            color="text"
+                            data-euiicon-type="arrowDown"
+                            data-test-subj="dataGridHeaderCellActionButton-A"
+                          />
+                        </div>
                       </div>
-                    </div>
+                    </button>
                   </div>
-                </div>
-                <div
-                  data-focus-guard="true"
-                  style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                  tabindex="-1"
-                />
-              </div>
-              <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
-              >
-                <div
-                  class="euiDataGridRowCell__content"
-                >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridHeaderCell"
+                    data-test-subj="dataGridHeaderCell-B"
+                    role="columnheader"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridColumnResizer"
+                      data-test-subj="dataGridColumnResizer"
+                      style="margin-right:0px"
+                    />
+                    <button
+                      class="euiDataGridHeaderCell__button"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiDataGridHeaderCell__content"
+                      >
+                        B
+                      </div>
+                      <div
+                        class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
-                        >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 1, Column: 2:
-                            </span>
-                          </p>
-                          <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            0, A
-                          </div>
-                        </div>
-                        <div
-                          class="euiDataGridRowCell__expandButton"
+                          class="euiPopover__anchor"
                         >
-                          <button
-                            aria-hidden="true"
-                            class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                            tabindex="-1"
-                            title="Click or hit enter to interact with cell content"
-                            type="button"
-                          >
-                            <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
-                            />
-                          </button>
+                          <span
+                            aria-label="Header actions"
+                            color="text"
+                            data-euiicon-type="arrowDown"
+                            data-test-subj="dataGridHeaderCellActionButton-B"
+                          />
                         </div>
                       </div>
+                    </button>
+                  </div>
+                  <div
+                    class="euiDataGridHeaderCell euiDataGridHeaderCell--controlColumn"
+                    data-test-subj="dataGridHeaderCell-trailing"
+                    role="columnheader"
+                    style="width:50px"
+                    tabindex="-1"
+                  >
+                    <div
+                      class="euiDataGridHeaderCell__content"
+                    >
+                      <span>
+                        trailing heading
+                      </span>
                     </div>
                   </div>
                 </div>
-              </div>
-              <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
-              >
                 <div
-                  class="euiDataGridRowCell__content"
+                  style="position:absolute;left:0;top:34px;height:34px;width:50px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridRowCell euiDataGridRowCell--controlColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:50px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                    <div
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                    <div
+                      data-focus-lock-disabled="disabled"
                     >
                       <div
                         class="euiDataGridRowCell__expandFlex"
@@ -1863,152 +1781,168 @@ Array [
                             class="euiScreenReaderOnly"
                           >
                             <span>
-                              Row: 1, Column: 3:
+                              Row: 1, Column: 1:
                             </span>
                           </p>
                           <div
                             class="euiDataGridRowCell__truncate"
                           >
-                            0, B
+                            0
                           </div>
                         </div>
-                        <div
-                          class="euiDataGridRowCell__expandButton"
-                        >
-                          <button
-                            aria-hidden="true"
-                            class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                            tabindex="-1"
-                            title="Click or hit enter to interact with cell content"
-                            type="button"
-                          >
-                            <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
-                            />
-                          </button>
-                        </div>
                       </div>
                     </div>
+                    <div
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
                   </div>
                 </div>
-              </div>
-              <div
-                class="euiDataGridRowCell euiDataGridRowCell--controlColumn"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:50px"
-                tabindex="-1"
-              >
                 <div
-                  data-focus-guard="true"
-                  style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                  tabindex="-1"
-                />
-                <div
-                  data-focus-guard="true"
-                  style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                  tabindex="-1"
-                />
-                <div
-                  data-focus-lock-disabled="disabled"
+                  style="position:absolute;left:50px;top:34px;height:34px;width:100px"
                 >
                   <div
-                    class="euiDataGridRowCell__expandFlex"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiDataGridRowCell__expandContent"
+                      class="euiDataGridRowCell__content"
                     >
-                      <p
-                        class="euiScreenReaderOnly"
-                      >
-                        <span>
-                          Row: 1, Column: 4:
-                        </span>
-                      </p>
                       <div
-                        class="euiDataGridRowCell__truncate"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
-                        0
+                        <div
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                        >
+                          <div
+                            class="euiDataGridRowCell__expandFlex"
+                          >
+                            <div
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 1, Column: 2:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                0, A
+                              </div>
+                            </div>
+                            <div
+                              class="euiDataGridRowCell__expandButton"
+                            >
+                              <button
+                                aria-hidden="true"
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div
-                  data-focus-guard="true"
-                  style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                  tabindex="-1"
-                />
-              </div>
-            </div>
-            <div
-              class="euiDataGridRow"
-              data-test-subj="dataGridRow"
-              role="row"
-            >
-              <div
-                class="euiDataGridRowCell euiDataGridRowCell--controlColumn"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:50px"
-                tabindex="-1"
-              >
-                <div
-                  data-focus-guard="true"
-                  style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                  tabindex="-1"
-                />
-                <div
-                  data-focus-guard="true"
-                  style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                  tabindex="-1"
-                />
-                <div
-                  data-focus-lock-disabled="disabled"
+                  style="position:absolute;left:150px;top:34px;height:34px;width:100px"
                 >
                   <div
-                    class="euiDataGridRowCell__expandFlex"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiDataGridRowCell__expandContent"
+                      class="euiDataGridRowCell__content"
                     >
-                      <p
-                        class="euiScreenReaderOnly"
-                      >
-                        <span>
-                          Row: 2, Column: 1:
-                        </span>
-                      </p>
                       <div
-                        class="euiDataGridRowCell__truncate"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
-                        1
+                        <div
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                        >
+                          <div
+                            class="euiDataGridRowCell__expandFlex"
+                          >
+                            <div
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 1, Column: 3:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                0, B
+                              </div>
+                            </div>
+                            <div
+                              class="euiDataGridRowCell__expandButton"
+                            >
+                              <button
+                                aria-hidden="true"
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div
-                  data-focus-guard="true"
-                  style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                  tabindex="-1"
-                />
-              </div>
-              <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
-              >
-                <div
-                  class="euiDataGridRowCell__content"
+                  style="position:absolute;left:250px;top:34px;height:34px;width:50px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridRowCell euiDataGridRowCell--controlColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:50px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                    <div
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                    <div
+                      data-focus-lock-disabled="disabled"
                     >
                       <div
                         class="euiDataGridRowCell__expandFlex"
@@ -2020,52 +1954,46 @@ Array [
                             class="euiScreenReaderOnly"
                           >
                             <span>
-                              Row: 2, Column: 2:
+                              Row: 1, Column: 4:
                             </span>
                           </p>
                           <div
                             class="euiDataGridRowCell__truncate"
                           >
-                            1, A
+                            0
                           </div>
                         </div>
-                        <div
-                          class="euiDataGridRowCell__expandButton"
-                        >
-                          <button
-                            aria-hidden="true"
-                            class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                            tabindex="-1"
-                            title="Click or hit enter to interact with cell content"
-                            type="button"
-                          >
-                            <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
-                            />
-                          </button>
-                        </div>
                       </div>
                     </div>
+                    <div
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
                   </div>
                 </div>
-              </div>
-              <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
-              >
                 <div
-                  class="euiDataGridRowCell__content"
+                  style="position:absolute;left:0;top:68px;height:34px;width:50px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridRowCell euiDataGridRowCell--controlColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:50px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                    <div
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                    <div
+                      data-focus-lock-disabled="disabled"
                     >
                       <div
                         class="euiDataGridRowCell__expandFlex"
@@ -2077,152 +2005,168 @@ Array [
                             class="euiScreenReaderOnly"
                           >
                             <span>
-                              Row: 2, Column: 3:
+                              Row: 2, Column: 1:
                             </span>
                           </p>
                           <div
                             class="euiDataGridRowCell__truncate"
                           >
-                            1, B
+                            1
                           </div>
                         </div>
-                        <div
-                          class="euiDataGridRowCell__expandButton"
-                        >
-                          <button
-                            aria-hidden="true"
-                            class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                            tabindex="-1"
-                            title="Click or hit enter to interact with cell content"
-                            type="button"
-                          >
-                            <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
-                            />
-                          </button>
-                        </div>
                       </div>
                     </div>
+                    <div
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
                   </div>
                 </div>
-              </div>
-              <div
-                class="euiDataGridRowCell euiDataGridRowCell--controlColumn"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:50px"
-                tabindex="-1"
-              >
-                <div
-                  data-focus-guard="true"
-                  style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                  tabindex="-1"
-                />
                 <div
-                  data-focus-guard="true"
-                  style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                  tabindex="-1"
-                />
-                <div
-                  data-focus-lock-disabled="disabled"
+                  style="position:absolute;left:50px;top:68px;height:34px;width:100px"
                 >
                   <div
-                    class="euiDataGridRowCell__expandFlex"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiDataGridRowCell__expandContent"
+                      class="euiDataGridRowCell__content"
                     >
-                      <p
-                        class="euiScreenReaderOnly"
-                      >
-                        <span>
-                          Row: 2, Column: 4:
-                        </span>
-                      </p>
                       <div
-                        class="euiDataGridRowCell__truncate"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
-                        1
+                        <div
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                        >
+                          <div
+                            class="euiDataGridRowCell__expandFlex"
+                          >
+                            <div
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 2, Column: 2:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                1, A
+                              </div>
+                            </div>
+                            <div
+                              class="euiDataGridRowCell__expandButton"
+                            >
+                              <button
+                                aria-hidden="true"
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div
-                  data-focus-guard="true"
-                  style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                  tabindex="-1"
-                />
-              </div>
-            </div>
-            <div
-              class="euiDataGridRow"
-              data-test-subj="dataGridRow"
-              role="row"
-            >
-              <div
-                class="euiDataGridRowCell euiDataGridRowCell--controlColumn"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:50px"
-                tabindex="-1"
-              >
-                <div
-                  data-focus-guard="true"
-                  style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                  tabindex="-1"
-                />
-                <div
-                  data-focus-guard="true"
-                  style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                  tabindex="-1"
-                />
-                <div
-                  data-focus-lock-disabled="disabled"
+                  style="position:absolute;left:150px;top:68px;height:34px;width:100px"
                 >
                   <div
-                    class="euiDataGridRowCell__expandFlex"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiDataGridRowCell__expandContent"
+                      class="euiDataGridRowCell__content"
                     >
-                      <p
-                        class="euiScreenReaderOnly"
-                      >
-                        <span>
-                          Row: 3, Column: 1:
-                        </span>
-                      </p>
                       <div
-                        class="euiDataGridRowCell__truncate"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
-                        2
+                        <div
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                        >
+                          <div
+                            class="euiDataGridRowCell__expandFlex"
+                          >
+                            <div
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 2, Column: 3:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                1, B
+                              </div>
+                            </div>
+                            <div
+                              class="euiDataGridRowCell__expandButton"
+                            >
+                              <button
+                                aria-hidden="true"
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div
-                  data-focus-guard="true"
-                  style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                  tabindex="-1"
-                />
-              </div>
-              <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
-              >
-                <div
-                  class="euiDataGridRowCell__content"
+                  style="position:absolute;left:250px;top:68px;height:34px;width:50px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridRowCell euiDataGridRowCell--controlColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:50px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                    <div
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                    <div
+                      data-focus-lock-disabled="disabled"
                     >
                       <div
                         class="euiDataGridRowCell__expandFlex"
@@ -2234,52 +2178,46 @@ Array [
                             class="euiScreenReaderOnly"
                           >
                             <span>
-                              Row: 3, Column: 2:
+                              Row: 2, Column: 4:
                             </span>
                           </p>
                           <div
                             class="euiDataGridRowCell__truncate"
                           >
-                            2, A
+                            1
                           </div>
                         </div>
-                        <div
-                          class="euiDataGridRowCell__expandButton"
-                        >
-                          <button
-                            aria-hidden="true"
-                            class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                            tabindex="-1"
-                            title="Click or hit enter to interact with cell content"
-                            type="button"
-                          >
-                            <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
-                            />
-                          </button>
-                        </div>
                       </div>
                     </div>
+                    <div
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
                   </div>
                 </div>
-              </div>
-              <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
-              >
                 <div
-                  class="euiDataGridRowCell__content"
+                  style="position:absolute;left:0;top:102px;height:34px;width:50px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridRowCell euiDataGridRowCell--controlColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:50px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                    <div
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                    <div
+                      data-focus-lock-disabled="disabled"
                     >
                       <div
                         class="euiDataGridRowCell__expandFlex"
@@ -2291,83 +2229,197 @@ Array [
                             class="euiScreenReaderOnly"
                           >
                             <span>
-                              Row: 3, Column: 3:
+                              Row: 3, Column: 1:
                             </span>
                           </p>
                           <div
                             class="euiDataGridRowCell__truncate"
                           >
-                            2, B
+                            2
                           </div>
                         </div>
+                      </div>
+                    </div>
+                    <div
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                  </div>
+                </div>
+                <div
+                  style="position:absolute;left:50px;top:102px;height:34px;width:100px"
+                >
+                  <div
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:100px"
+                    tabindex="-1"
+                  >
+                    <div
+                      class="euiDataGridRowCell__content"
+                    >
+                      <div
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                      >
                         <div
-                          class="euiDataGridRowCell__expandButton"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
-                          <button
-                            aria-hidden="true"
-                            class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                            tabindex="-1"
-                            title="Click or hit enter to interact with cell content"
-                            type="button"
-                          >
-                            <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
-                            />
-                          </button>
+                          <div
+                            class="euiDataGridRowCell__expandFlex"
+                          >
+                            <div
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 3, Column: 2:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                2, A
+                              </div>
+                            </div>
+                            <div
+                              class="euiDataGridRowCell__expandButton"
+                            >
+                              <button
+                                aria-hidden="true"
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
+                          </div>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
-              <div
-                class="euiDataGridRowCell euiDataGridRowCell--controlColumn"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:50px"
-                tabindex="-1"
-              >
-                <div
-                  data-focus-guard="true"
-                  style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                  tabindex="-1"
-                />
                 <div
-                  data-focus-guard="true"
-                  style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                  tabindex="-1"
-                />
-                <div
-                  data-focus-lock-disabled="disabled"
+                  style="position:absolute;left:150px;top:102px;height:34px;width:100px"
                 >
                   <div
-                    class="euiDataGridRowCell__expandFlex"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiDataGridRowCell__expandContent"
+                      class="euiDataGridRowCell__content"
                     >
-                      <p
-                        class="euiScreenReaderOnly"
-                      >
-                        <span>
-                          Row: 3, Column: 4:
-                        </span>
-                      </p>
                       <div
-                        class="euiDataGridRowCell__truncate"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
-                        2
+                        <div
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                        >
+                          <div
+                            class="euiDataGridRowCell__expandFlex"
+                          >
+                            <div
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 3, Column: 3:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                2, B
+                              </div>
+                            </div>
+                            <div
+                              class="euiDataGridRowCell__expandButton"
+                            >
+                              <button
+                                aria-hidden="true"
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div
-                  data-focus-guard="true"
-                  style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                  tabindex="-1"
-                />
+                  style="position:absolute;left:250px;top:102px;height:34px;width:50px"
+                >
+                  <div
+                    class="euiDataGridRowCell euiDataGridRowCell--controlColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:50px"
+                    tabindex="-1"
+                  >
+                    <div
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                    <div
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                    <div
+                      data-focus-lock-disabled="disabled"
+                    >
+                      <div
+                        class="euiDataGridRowCell__expandFlex"
+                      >
+                        <div
+                          class="euiDataGridRowCell__expandContent"
+                        >
+                          <p
+                            class="euiScreenReaderOnly"
+                          >
+                            <span>
+                              Row: 3, Column: 4:
+                            </span>
+                          </p>
+                          <div
+                            class="euiDataGridRowCell__truncate"
+                          >
+                            2
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -2407,6 +2459,7 @@ Array [
   >
     <div
       class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2"
+      data-test-subj="test subject string"
     >
       <div
         class="euiDataGrid__controls"
@@ -2490,7 +2543,6 @@ Array [
       </div>
       <div
         class="euiDataGrid__verticalScroll"
-        data-test-subj="test subject string"
       >
         <div
           class="euiDataGrid__overflow"
@@ -2504,439 +2556,453 @@ Array [
             tabindex="0"
           >
             <div
-              class="euiDataGridHeader"
-              data-test-subj="dataGridHeader"
-              role="row"
+              style="position:relative;height:500px;width:500px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
             >
               <div
-                class="euiDataGridHeaderCell"
-                data-test-subj="dataGridHeaderCell-A"
-                role="columnheader"
-                style="width:100px"
-                tabindex="-1"
+                style="height:136px;width:200px"
               >
                 <div
-                  class="euiDataGridColumnResizer"
-                  data-test-subj="dataGridColumnResizer"
-                  style="margin-right:0px"
-                />
-                <button
-                  class="euiDataGridHeaderCell__button"
+                  class="euiDataGridHeader"
+                  data-test-subj="dataGridHeader"
+                  role="row"
                 >
                   <div
-                    class="euiDataGridHeaderCell__content"
-                  >
-                    Column A
-                  </div>
-                  <div
-                    class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                    class="euiDataGridHeaderCell"
+                    data-test-subj="dataGridHeaderCell-A"
+                    role="columnheader"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor"
+                      class="euiDataGridColumnResizer"
+                      data-test-subj="dataGridColumnResizer"
+                      style="margin-right:0px"
+                    />
+                    <button
+                      class="euiDataGridHeaderCell__button"
                     >
-                      <span
-                        aria-label="Header actions"
-                        color="text"
-                        data-euiicon-type="arrowDown"
-                        data-test-subj="dataGridHeaderCellActionButton-A"
-                      />
-                    </div>
-                  </div>
-                </button>
-              </div>
-              <div
-                class="euiDataGridHeaderCell"
-                data-test-subj="dataGridHeaderCell-B"
-                role="columnheader"
-                style="width:100px"
-                tabindex="-1"
-              >
-                <div
-                  class="euiDataGridColumnResizer"
-                  data-test-subj="dataGridColumnResizer"
-                  style="margin-right:0px"
-                />
-                <button
-                  class="euiDataGridHeaderCell__button"
-                >
-                  <div
-                    class="euiDataGridHeaderCell__content"
-                  >
-                    <div>
-                      More Elements
-                    </div>
+                      <div
+                        class="euiDataGridHeaderCell__content"
+                      >
+                        Column A
+                      </div>
+                      <div
+                        class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                      >
+                        <div
+                          class="euiPopover__anchor"
+                        >
+                          <span
+                            aria-label="Header actions"
+                            color="text"
+                            data-euiicon-type="arrowDown"
+                            data-test-subj="dataGridHeaderCellActionButton-A"
+                          />
+                        </div>
+                      </div>
+                    </button>
                   </div>
                   <div
-                    class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                    class="euiDataGridHeaderCell"
+                    data-test-subj="dataGridHeaderCell-B"
+                    role="columnheader"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor"
+                      class="euiDataGridColumnResizer"
+                      data-test-subj="dataGridColumnResizer"
+                      style="margin-right:0px"
+                    />
+                    <button
+                      class="euiDataGridHeaderCell__button"
                     >
-                      <span
-                        aria-label="Header actions"
-                        color="text"
-                        data-euiicon-type="arrowDown"
-                        data-test-subj="dataGridHeaderCellActionButton-B"
-                      />
-                    </div>
+                      <div
+                        class="euiDataGridHeaderCell__content"
+                      >
+                        <div>
+                          More Elements
+                        </div>
+                      </div>
+                      <div
+                        class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                      >
+                        <div
+                          class="euiPopover__anchor"
+                        >
+                          <span
+                            aria-label="Header actions"
+                            color="text"
+                            data-euiicon-type="arrowDown"
+                            data-test-subj="dataGridHeaderCellActionButton-B"
+                          />
+                        </div>
+                      </div>
+                    </button>
                   </div>
-                </button>
-              </div>
-            </div>
-            <div
-              class="euiDataGridRow"
-              data-test-subj="dataGridRow"
-              role="row"
-            >
-              <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
-              >
+                </div>
                 <div
-                  class="euiDataGridRowCell__content"
+                  style="position:absolute;left:0;top:34px;height:34px;width:100px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 1, Column: 1:
-                            </span>
-                          </p>
                           <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            0, A
+                            class="euiDataGridRowCell__expandFlex"
+                          >
+                            <div
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 1, Column: 1:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                0, A
+                              </div>
+                            </div>
+                            <div
+                              class="euiDataGridRowCell__expandButton"
+                            >
+                              <button
+                                aria-hidden="true"
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
-                        <div
-                          class="euiDataGridRowCell__expandButton"
-                        >
-                          <button
-                            aria-hidden="true"
-                            class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                            tabindex="-1"
-                            title="Click or hit enter to interact with cell content"
-                            type="button"
-                          >
-                            <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
-                            />
-                          </button>
-                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
-              <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
-              >
                 <div
-                  class="euiDataGridRowCell__content"
+                  style="position:absolute;left:100px;top:34px;height:34px;width:100px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 1, Column: 2:
-                            </span>
-                          </p>
                           <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            0, B
+                            class="euiDataGridRowCell__expandFlex"
+                          >
+                            <div
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 1, Column: 2:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                0, B
+                              </div>
+                            </div>
+                            <div
+                              class="euiDataGridRowCell__expandButton"
+                            >
+                              <button
+                                aria-hidden="true"
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
-                        <div
-                          class="euiDataGridRowCell__expandButton"
-                        >
-                          <button
-                            aria-hidden="true"
-                            class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                            tabindex="-1"
-                            title="Click or hit enter to interact with cell content"
-                            type="button"
-                          >
-                            <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
-                            />
-                          </button>
-                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            </div>
-            <div
-              class="euiDataGridRow"
-              data-test-subj="dataGridRow"
-              role="row"
-            >
-              <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
-              >
                 <div
-                  class="euiDataGridRowCell__content"
+                  style="position:absolute;left:0;top:68px;height:34px;width:100px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 2, Column: 1:
-                            </span>
-                          </p>
                           <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            1, A
+                            class="euiDataGridRowCell__expandFlex"
+                          >
+                            <div
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 2, Column: 1:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                1, A
+                              </div>
+                            </div>
+                            <div
+                              class="euiDataGridRowCell__expandButton"
+                            >
+                              <button
+                                aria-hidden="true"
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
-                        <div
-                          class="euiDataGridRowCell__expandButton"
-                        >
-                          <button
-                            aria-hidden="true"
-                            class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                            tabindex="-1"
-                            title="Click or hit enter to interact with cell content"
-                            type="button"
-                          >
-                            <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
-                            />
-                          </button>
-                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
-              <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
-              >
                 <div
-                  class="euiDataGridRowCell__content"
+                  style="position:absolute;left:100px;top:68px;height:34px;width:100px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 2, Column: 2:
-                            </span>
-                          </p>
                           <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            1, B
+                            class="euiDataGridRowCell__expandFlex"
+                          >
+                            <div
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 2, Column: 2:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                1, B
+                              </div>
+                            </div>
+                            <div
+                              class="euiDataGridRowCell__expandButton"
+                            >
+                              <button
+                                aria-hidden="true"
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
-                        <div
-                          class="euiDataGridRowCell__expandButton"
-                        >
-                          <button
-                            aria-hidden="true"
-                            class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                            tabindex="-1"
-                            title="Click or hit enter to interact with cell content"
-                            type="button"
-                          >
-                            <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
-                            />
-                          </button>
-                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            </div>
-            <div
-              class="euiDataGridRow"
-              data-test-subj="dataGridRow"
-              role="row"
-            >
-              <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
-              >
                 <div
-                  class="euiDataGridRowCell__content"
+                  style="position:absolute;left:0;top:102px;height:34px;width:100px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 3, Column: 1:
-                            </span>
-                          </p>
                           <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            2, A
+                            class="euiDataGridRowCell__expandFlex"
+                          >
+                            <div
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 3, Column: 1:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                2, A
+                              </div>
+                            </div>
+                            <div
+                              class="euiDataGridRowCell__expandButton"
+                            >
+                              <button
+                                aria-hidden="true"
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
-                        <div
-                          class="euiDataGridRowCell__expandButton"
-                        >
-                          <button
-                            aria-hidden="true"
-                            class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                            tabindex="-1"
-                            title="Click or hit enter to interact with cell content"
-                            type="button"
-                          >
-                            <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
-                            />
-                          </button>
-                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
-              <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
-              >
                 <div
-                  class="euiDataGridRowCell__content"
+                  style="position:absolute;left:100px;top:102px;height:34px;width:100px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 3, Column: 2:
-                            </span>
-                          </p>
                           <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            2, B
+                            class="euiDataGridRowCell__expandFlex"
+                          >
+                            <div
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 3, Column: 2:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                2, B
+                              </div>
+                            </div>
+                            <div
+                              class="euiDataGridRowCell__expandButton"
+                            >
+                              <button
+                                aria-hidden="true"
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
-                        <div
-                          class="euiDataGridRowCell__expandButton"
-                        >
-                          <button
-                            aria-hidden="true"
-                            class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                            tabindex="-1"
-                            title="Click or hit enter to interact with cell content"
-                            type="button"
-                          >
-                            <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
-                            />
-                          </button>
-                        </div>
                       </div>
                     </div>
                   </div>
@@ -2980,6 +3046,7 @@ Array [
   >
     <div
       class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2"
+      data-test-subj="test subject string"
     >
       <div
         class="euiDataGrid__controls"
@@ -3063,7 +3130,6 @@ Array [
       </div>
       <div
         class="euiDataGrid__verticalScroll"
-        data-test-subj="test subject string"
       >
         <div
           class="euiDataGrid__overflow"
@@ -3077,437 +3143,451 @@ Array [
             tabindex="0"
           >
             <div
-              class="euiDataGridHeader"
-              data-test-subj="dataGridHeader"
-              role="row"
+              style="position:relative;height:500px;width:500px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
             >
               <div
-                class="euiDataGridHeaderCell"
-                data-test-subj="dataGridHeaderCell-A"
-                role="columnheader"
-                style="width:100px"
-                tabindex="-1"
+                style="height:136px;width:200px"
               >
                 <div
-                  class="euiDataGridColumnResizer"
-                  data-test-subj="dataGridColumnResizer"
-                  style="margin-right:0px"
-                />
-                <button
-                  class="euiDataGridHeaderCell__button"
+                  class="euiDataGridHeader"
+                  data-test-subj="dataGridHeader"
+                  role="row"
                 >
                   <div
-                    class="euiDataGridHeaderCell__content"
-                  >
-                    A
-                  </div>
-                  <div
-                    class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                    class="euiDataGridHeaderCell"
+                    data-test-subj="dataGridHeaderCell-A"
+                    role="columnheader"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor"
+                      class="euiDataGridColumnResizer"
+                      data-test-subj="dataGridColumnResizer"
+                      style="margin-right:0px"
+                    />
+                    <button
+                      class="euiDataGridHeaderCell__button"
                     >
-                      <span
-                        aria-label="Header actions"
-                        color="text"
-                        data-euiicon-type="arrowDown"
-                        data-test-subj="dataGridHeaderCellActionButton-A"
-                      />
-                    </div>
-                  </div>
-                </button>
-              </div>
-              <div
-                class="euiDataGridHeaderCell"
-                data-test-subj="dataGridHeaderCell-B"
-                role="columnheader"
-                style="width:100px"
-                tabindex="-1"
-              >
-                <div
-                  class="euiDataGridColumnResizer"
-                  data-test-subj="dataGridColumnResizer"
-                  style="margin-right:0px"
-                />
-                <button
-                  class="euiDataGridHeaderCell__button"
-                >
-                  <div
-                    class="euiDataGridHeaderCell__content"
-                  >
-                    B
+                      <div
+                        class="euiDataGridHeaderCell__content"
+                      >
+                        A
+                      </div>
+                      <div
+                        class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                      >
+                        <div
+                          class="euiPopover__anchor"
+                        >
+                          <span
+                            aria-label="Header actions"
+                            color="text"
+                            data-euiicon-type="arrowDown"
+                            data-test-subj="dataGridHeaderCellActionButton-A"
+                          />
+                        </div>
+                      </div>
+                    </button>
                   </div>
                   <div
-                    class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                    class="euiDataGridHeaderCell"
+                    data-test-subj="dataGridHeaderCell-B"
+                    role="columnheader"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor"
+                      class="euiDataGridColumnResizer"
+                      data-test-subj="dataGridColumnResizer"
+                      style="margin-right:0px"
+                    />
+                    <button
+                      class="euiDataGridHeaderCell__button"
                     >
-                      <span
-                        aria-label="Header actions"
-                        color="text"
-                        data-euiicon-type="arrowDown"
-                        data-test-subj="dataGridHeaderCellActionButton-B"
-                      />
-                    </div>
+                      <div
+                        class="euiDataGridHeaderCell__content"
+                      >
+                        B
+                      </div>
+                      <div
+                        class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                      >
+                        <div
+                          class="euiPopover__anchor"
+                        >
+                          <span
+                            aria-label="Header actions"
+                            color="text"
+                            data-euiicon-type="arrowDown"
+                            data-test-subj="dataGridHeaderCellActionButton-B"
+                          />
+                        </div>
+                      </div>
+                    </button>
                   </div>
-                </button>
-              </div>
-            </div>
-            <div
-              class="euiDataGridRow"
-              data-test-subj="dataGridRow"
-              role="row"
-            >
-              <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
-              >
+                </div>
                 <div
-                  class="euiDataGridRowCell__content"
+                  style="position:absolute;left:0;top:34px;height:34px;width:100px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 1, Column: 1:
-                            </span>
-                          </p>
                           <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            0, A
+                            class="euiDataGridRowCell__expandFlex"
+                          >
+                            <div
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 1, Column: 1:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                0, A
+                              </div>
+                            </div>
+                            <div
+                              class="euiDataGridRowCell__expandButton"
+                            >
+                              <button
+                                aria-hidden="true"
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
-                        <div
-                          class="euiDataGridRowCell__expandButton"
-                        >
-                          <button
-                            aria-hidden="true"
-                            class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                            tabindex="-1"
-                            title="Click or hit enter to interact with cell content"
-                            type="button"
-                          >
-                            <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
-                            />
-                          </button>
-                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
-              <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
-              >
                 <div
-                  class="euiDataGridRowCell__content"
+                  style="position:absolute;left:100px;top:34px;height:34px;width:100px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 1, Column: 2:
-                            </span>
-                          </p>
                           <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            0, B
+                            class="euiDataGridRowCell__expandFlex"
+                          >
+                            <div
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 1, Column: 2:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                0, B
+                              </div>
+                            </div>
+                            <div
+                              class="euiDataGridRowCell__expandButton"
+                            >
+                              <button
+                                aria-hidden="true"
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
-                        <div
-                          class="euiDataGridRowCell__expandButton"
-                        >
-                          <button
-                            aria-hidden="true"
-                            class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                            tabindex="-1"
-                            title="Click or hit enter to interact with cell content"
-                            type="button"
-                          >
-                            <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
-                            />
-                          </button>
-                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            </div>
-            <div
-              class="euiDataGridRow"
-              data-test-subj="dataGridRow"
-              role="row"
-            >
-              <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
-              >
                 <div
-                  class="euiDataGridRowCell__content"
+                  style="position:absolute;left:0;top:68px;height:34px;width:100px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 2, Column: 1:
-                            </span>
-                          </p>
                           <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            1, A
+                            class="euiDataGridRowCell__expandFlex"
+                          >
+                            <div
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 2, Column: 1:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                1, A
+                              </div>
+                            </div>
+                            <div
+                              class="euiDataGridRowCell__expandButton"
+                            >
+                              <button
+                                aria-hidden="true"
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
-                        <div
-                          class="euiDataGridRowCell__expandButton"
-                        >
-                          <button
-                            aria-hidden="true"
-                            class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                            tabindex="-1"
-                            title="Click or hit enter to interact with cell content"
-                            type="button"
-                          >
-                            <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
-                            />
-                          </button>
-                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
-              <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
-              >
                 <div
-                  class="euiDataGridRowCell__content"
+                  style="position:absolute;left:100px;top:68px;height:34px;width:100px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 2, Column: 2:
-                            </span>
-                          </p>
                           <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            1, B
+                            class="euiDataGridRowCell__expandFlex"
+                          >
+                            <div
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 2, Column: 2:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                1, B
+                              </div>
+                            </div>
+                            <div
+                              class="euiDataGridRowCell__expandButton"
+                            >
+                              <button
+                                aria-hidden="true"
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
-                        <div
-                          class="euiDataGridRowCell__expandButton"
-                        >
-                          <button
-                            aria-hidden="true"
-                            class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                            tabindex="-1"
-                            title="Click or hit enter to interact with cell content"
-                            type="button"
-                          >
-                            <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
-                            />
-                          </button>
-                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            </div>
-            <div
-              class="euiDataGridRow"
-              data-test-subj="dataGridRow"
-              role="row"
-            >
-              <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
-              >
                 <div
-                  class="euiDataGridRowCell__content"
+                  style="position:absolute;left:0;top:102px;height:34px;width:100px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 3, Column: 1:
-                            </span>
-                          </p>
                           <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            2, A
+                            class="euiDataGridRowCell__expandFlex"
+                          >
+                            <div
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 3, Column: 1:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                2, A
+                              </div>
+                            </div>
+                            <div
+                              class="euiDataGridRowCell__expandButton"
+                            >
+                              <button
+                                aria-hidden="true"
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
-                        <div
-                          class="euiDataGridRowCell__expandButton"
-                        >
-                          <button
-                            aria-hidden="true"
-                            class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                            tabindex="-1"
-                            title="Click or hit enter to interact with cell content"
-                            type="button"
-                          >
-                            <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
-                            />
-                          </button>
-                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
-              <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
-              >
                 <div
-                  class="euiDataGridRowCell__content"
+                  style="position:absolute;left:100px;top:102px;height:34px;width:100px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 3, Column: 2:
-                            </span>
-                          </p>
                           <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            2, B
+                            class="euiDataGridRowCell__expandFlex"
+                          >
+                            <div
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 3, Column: 2:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                2, B
+                              </div>
+                            </div>
+                            <div
+                              class="euiDataGridRowCell__expandButton"
+                            >
+                              <button
+                                aria-hidden="true"
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
-                        <div
-                          class="euiDataGridRowCell__expandButton"
-                        >
-                          <button
-                            aria-hidden="true"
-                            class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                            tabindex="-1"
-                            title="Click or hit enter to interact with cell content"
-                            type="button"
-                          >
-                            <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
-                            />
-                          </button>
-                        </div>
                       </div>
                     </div>
                   </div>
diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx
index e99075b2378..d92918a489b 100644
--- a/src/components/datagrid/data_grid.test.tsx
+++ b/src/components/datagrid/data_grid.test.tsx
@@ -548,61 +548,61 @@ describe('EuiDataGrid', () => {
           return props;
         })
       ).toMatchInlineSnapshot(`
-Array [
-  Object {
-    "className": "euiDataGridRowCell customClass",
-    "data-test-subj": "dataGridRowCell",
-    "onBlur": [Function],
-    "onFocus": [Function],
-    "onKeyDown": [Function],
-    "role": "gridcell",
-    "style": Object {
-      "color": "red",
-      "width": "100px",
-    },
-    "tabIndex": -1,
-  },
-  Object {
-    "className": "euiDataGridRowCell customClass",
-    "data-test-subj": "dataGridRowCell",
-    "onBlur": [Function],
-    "onFocus": [Function],
-    "onKeyDown": [Function],
-    "role": "gridcell",
-    "style": Object {
-      "color": "blue",
-      "width": "100px",
-    },
-    "tabIndex": -1,
-  },
-  Object {
-    "className": "euiDataGridRowCell customClass",
-    "data-test-subj": "dataGridRowCell",
-    "onBlur": [Function],
-    "onFocus": [Function],
-    "onKeyDown": [Function],
-    "role": "gridcell",
-    "style": Object {
-      "color": "red",
-      "width": "100px",
-    },
-    "tabIndex": -1,
-  },
-  Object {
-    "className": "euiDataGridRowCell customClass",
-    "data-test-subj": "dataGridRowCell",
-    "onBlur": [Function],
-    "onFocus": [Function],
-    "onKeyDown": [Function],
-    "role": "gridcell",
-    "style": Object {
-      "color": "blue",
-      "width": "100px",
-    },
-    "tabIndex": -1,
-  },
-]
-`);
+        Array [
+          Object {
+            "className": "euiDataGridRowCell customClass",
+            "data-test-subj": "dataGridRowCell",
+            "onBlur": [Function],
+            "onFocus": [Function],
+            "onKeyDown": [Function],
+            "role": "gridcell",
+            "style": Object {
+              "color": "red",
+              "width": "100px",
+            },
+            "tabIndex": -1,
+          },
+          Object {
+            "className": "euiDataGridRowCell customClass",
+            "data-test-subj": "dataGridRowCell",
+            "onBlur": [Function],
+            "onFocus": [Function],
+            "onKeyDown": [Function],
+            "role": "gridcell",
+            "style": Object {
+              "color": "blue",
+              "width": "100px",
+            },
+            "tabIndex": -1,
+          },
+          Object {
+            "className": "euiDataGridRowCell customClass",
+            "data-test-subj": "dataGridRowCell",
+            "onBlur": [Function],
+            "onFocus": [Function],
+            "onKeyDown": [Function],
+            "role": "gridcell",
+            "style": Object {
+              "color": "red",
+              "width": "100px",
+            },
+            "tabIndex": -1,
+          },
+          Object {
+            "className": "euiDataGridRowCell customClass",
+            "data-test-subj": "dataGridRowCell",
+            "onBlur": [Function],
+            "onFocus": [Function],
+            "onKeyDown": [Function],
+            "role": "gridcell",
+            "style": Object {
+              "color": "blue",
+              "width": "100px",
+            },
+            "tabIndex": -1,
+          },
+        ]
+      `);
     });
 
     it('renders correct aria attributes on column headers', () => {
@@ -791,15 +791,15 @@ Array [
           .find('[className*="euiDataGridRowCell--"]')
           .map((x) => x.props().className);
         expect(gridCellClassNames).toMatchInlineSnapshot(`
-Array [
-  "euiDataGridRowCell euiDataGridRowCell--numeric",
-  "euiDataGridRowCell euiDataGridRowCell--customFormatName",
-  "euiDataGridRowCell euiDataGridRowCell--numeric",
-  "euiDataGridRowCell euiDataGridRowCell--customFormatName",
-  "euiDataGridRowCell euiDataGridRowCell--numeric",
-  "euiDataGridRowCell euiDataGridRowCell--customFormatName",
-]
-`);
+          Array [
+            "euiDataGridRowCell euiDataGridRowCell--numeric",
+            "euiDataGridRowCell euiDataGridRowCell--customFormatName",
+            "euiDataGridRowCell euiDataGridRowCell--numeric",
+            "euiDataGridRowCell euiDataGridRowCell--customFormatName",
+            "euiDataGridRowCell euiDataGridRowCell--numeric",
+            "euiDataGridRowCell euiDataGridRowCell--customFormatName",
+          ]
+        `);
       });
 
       it('automatically detects column types and applies classnames', () => {
@@ -829,15 +829,15 @@ Array [
           .find('[className~="euiDataGridRowCell"]')
           .map((x) => x.props().className);
         expect(gridCellClassNames).toMatchInlineSnapshot(`
-Array [
-  "euiDataGridRowCell euiDataGridRowCell--numeric",
-  "euiDataGridRowCell euiDataGridRowCell--boolean",
-  "euiDataGridRowCell",
-  "euiDataGridRowCell euiDataGridRowCell--numeric",
-  "euiDataGridRowCell euiDataGridRowCell--boolean",
-  "euiDataGridRowCell",
-]
-`);
+          Array [
+            "euiDataGridRowCell euiDataGridRowCell--numeric",
+            "euiDataGridRowCell euiDataGridRowCell--boolean",
+            "euiDataGridRowCell",
+            "euiDataGridRowCell euiDataGridRowCell--numeric",
+            "euiDataGridRowCell euiDataGridRowCell--boolean",
+            "euiDataGridRowCell",
+          ]
+        `);
       });
 
       it('overrides automatically detected column types with supplied schema', () => {
@@ -861,13 +861,13 @@ Array [
           .find('[className~="euiDataGridRowCell"]')
           .map((x) => x.props().className);
         expect(gridCellClassNames).toMatchInlineSnapshot(`
-Array [
-  "euiDataGridRowCell euiDataGridRowCell--numeric",
-  "euiDataGridRowCell euiDataGridRowCell--alphanumeric",
-  "euiDataGridRowCell euiDataGridRowCell--numeric",
-  "euiDataGridRowCell euiDataGridRowCell--alphanumeric",
-]
-`);
+          Array [
+            "euiDataGridRowCell euiDataGridRowCell--numeric",
+            "euiDataGridRowCell euiDataGridRowCell--alphanumeric",
+            "euiDataGridRowCell euiDataGridRowCell--numeric",
+            "euiDataGridRowCell euiDataGridRowCell--alphanumeric",
+          ]
+        `);
       });
 
       it('detects all of the supported types', () => {
@@ -898,16 +898,15 @@ Array [
           .find('[className~="euiDataGridRowCell"]')
           .map((x) => x.props().className);
         expect(gridCellClassNames).toMatchInlineSnapshot(`
-Array [
-  "euiDataGridRowCell euiDataGridRowCell--numeric",
-  "euiDataGridRowCell euiDataGridRowCell--boolean",
-  "euiDataGridRowCell euiDataGridRowCell--currency",
-  "euiDataGridRowCell euiDataGridRowCell--datetime",
-  "euiDataGridRowCell euiDataGridRowCell--datetime",
-  "euiDataGridRowCell euiDataGridRowCell--datetime",
-  "euiDataGridRowCell euiDataGridRowCell--datetime",
-]
-`);
+          Array [
+            "euiDataGridRowCell euiDataGridRowCell--numeric",
+            "euiDataGridRowCell euiDataGridRowCell--boolean",
+            "euiDataGridRowCell euiDataGridRowCell--currency",
+            "euiDataGridRowCell euiDataGridRowCell--datetime",
+            "euiDataGridRowCell euiDataGridRowCell--datetime",
+            "euiDataGridRowCell euiDataGridRowCell--datetime",
+          ]
+        `);
       });
 
       it('accepts extra detectors', () => {
@@ -947,11 +946,11 @@ Array [
           .find('[className~="euiDataGridRowCell"]')
           .map((x) => x.props().className);
         expect(gridCellClassNames).toMatchInlineSnapshot(`
-Array [
-  "euiDataGridRowCell euiDataGridRowCell--numeric",
-  "euiDataGridRowCell euiDataGridRowCell--ipaddress",
-]
-`);
+          Array [
+            "euiDataGridRowCell euiDataGridRowCell--numeric",
+            "euiDataGridRowCell euiDataGridRowCell--ipaddress",
+          ]
+        `);
       });
     });
   });
@@ -974,21 +973,13 @@ Array [
         />
       );
       expect(extractGridData(component)).toMatchInlineSnapshot(`
-Array [
-  Array [
-    "Column 1",
-    "Column 2",
-  ],
-  Array [
-    "Hello, Row 0-Column 1!",
-    "Hello, Row 0-Column 2!",
-  ],
-  Array [
-    "Hello, Row 1-Column 1!",
-    "Hello, Row 1-Column 2!",
-  ],
-]
-`);
+        Array [
+          Array [
+            "Column 1",
+            "Column 2",
+          ],
+        ]
+      `);
     });
   });
 
diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index ae82db297ec..fdc21e9a95b 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -125,6 +125,9 @@ const EuiDataGridCellContent: FunctionComponent<
   );
 });
 
+const hasResizeObserver =
+  typeof window !== 'undefined' && typeof window.ResizeObserver !== 'undefined';
+
 export class EuiDataGridCell extends Component<
   EuiDataGridCellProps,
   EuiDataGridCellState
@@ -147,7 +150,7 @@ export class EuiDataGridCell extends Component<
 
     // watch the first cell for size changes and use that to re-compute row heights
     if (this.props.colIndex === 0 && this.props.visibleRowIndex === 0) {
-      if (ref) {
+      if (ref && hasResizeObserver) {
         this.observer = new window.ResizeObserver(() => {
           const rowHeight = this.cellRef.current!.getBoundingClientRect()
             .height;
@@ -156,7 +159,7 @@ export class EuiDataGridCell extends Component<
           }
         });
         this.observer.observe(ref);
-      } else {
+      } else if (this.observer) {
         this.observer.disconnect();
       }
     }

From bef507301c137df69ea8830309c457c939af8939 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Wed, 2 Dec 2020 08:47:47 -0800
Subject: [PATCH 12/54] grid cells styling fixes

---
 src/components/datagrid/_data_grid.scss    |  9 +++++----
 src/components/datagrid/data_grid_body.tsx | 23 +++++++++++++---------
 src/components/datagrid/data_grid_cell.tsx |  9 ++++-----
 3 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/components/datagrid/_data_grid.scss b/src/components/datagrid/_data_grid.scss
index ece9c84cb8f..604414ab0e2 100644
--- a/src/components/datagrid/_data_grid.scss
+++ b/src/components/datagrid/_data_grid.scss
@@ -28,12 +28,8 @@
 }
 
 .euiDataGrid__content {
-  @include euiScrollBar;
-
   height: 100%;
-  overflow: auto;
   font-feature-settings: 'tnum' 1; // Tabular numbers
-  scroll-padding: 0;
   max-width: 100%;
   width: 100%;
   z-index: 2; // Sits above the pagination below it, but below the controls above it
@@ -117,3 +113,8 @@
 .euiDataGrid__focusWrap {
   height: 100%;
 }
+
+.euiDataGrid__virtualized {
+  @include euiScrollBar;
+  scroll-padding: 0;
+}
diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index 90855540a55..dc52ffa4d97 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -163,6 +163,10 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
         isExpandable={false}
         className="euiDataGridRowCell--controlColumn"
         setRowHeight={setRowHeight}
+        style={{
+          ...style,
+          top: `${parseFloat(style.top as string) + HEADER_ROW_HEIGHT}px`,
+        }}
       />
     );
   } else if (columnIndex >= leadingControlColumns.length + columns.length) {
@@ -184,6 +188,10 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
         interactiveCellId={interactiveCellId}
         isExpandable={false}
         className="euiDataGridRowCell--controlColumn"
+        style={{
+          ...style,
+          top: `${parseFloat(style.top as string) + HEADER_ROW_HEIGHT}px`,
+        }}
       />
     );
   } else {
@@ -216,19 +224,15 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
         renderCellValue={renderCellValue}
         interactiveCellId={interactiveCellId}
         isExpandable={isExpandable}
+        style={{
+          ...style,
+          top: `${parseFloat(style.top as string) + HEADER_ROW_HEIGHT}px`,
+        }}
       />
     );
   }
 
-  return (
-    <div
-      style={{
-        ...style,
-        top: `${parseFloat(style.top as string) + HEADER_ROW_HEIGHT}px`,
-      }}>
-      {cellContent}
-    </div>
-  );
+  return cellContent;
 };
 
 const INITIAL_ROW_HEIGHT = 34;
@@ -481,6 +485,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     <Grid
       ref={gridRef}
       innerElementType={InnerElement}
+      className="euiDataGrid__virtualized"
       columnCount={
         leadingControlColumns.length +
         columns.length +
diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index fdc21e9a95b..f54b987b76d 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -92,6 +92,7 @@ export interface EuiDataGridCellProps {
     | JSXElementConstructor<EuiDataGridCellValueElementProps>
     | ((props: EuiDataGridCellValueElementProps) => ReactNode);
   setRowHeight?: (height: number) => void;
+  style: any;
 }
 
 interface EuiDataGridCellState {
@@ -144,6 +145,7 @@ export class EuiDataGridCell extends Component<
     disableCellTabIndex: false,
   };
   unsubscribeCell?: Function = () => {};
+  style = null;
 
   setCellRef = (ref: HTMLDivElement | null) => {
     this.cellRef.current = ref;
@@ -310,6 +312,7 @@ export class EuiDataGridCell extends Component<
       columnType,
       className,
       column,
+      style,
       ...rest
     } = this.props;
     const { colIndex, rowIndex } = rest;
@@ -332,11 +335,7 @@ export class EuiDataGridCell extends Component<
     };
 
     const widthStyle = width != null ? { width: `${width}px` } : {};
-    if (cellProps.hasOwnProperty('style')) {
-      cellProps.style = { ...cellProps.style, ...widthStyle };
-    } else {
-      cellProps.style = widthStyle;
-    }
+    cellProps.style = { ...style, widthStyle };
 
     const handleCellKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
       if (isExpandable) {

From 1449d0288265fab305de697e5b7112722788a298 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Thu, 3 Dec 2020 13:47:58 -0800
Subject: [PATCH 13/54] fix borders and stripes

---
 .../datagrid/_data_grid_data_row.scss         |  8 ++---
 src/components/datagrid/data_grid_body.tsx    | 35 +++++++++++++++----
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index a30c1d904f3..a70a89f09b4 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/src/components/datagrid/_data_grid_data_row.scss
@@ -21,11 +21,11 @@
     width: 100%;
   }
 
-  &:first-of-type {
+  &.euiDataGridRowCell--firstColumn {
     border-left: $euiBorderThin;
   }
 
-  &:last-of-type {
+  &.euiDataGridRowCell--lastColumn {
     border-right-color: $euiBorderColor;
   }
 
@@ -159,8 +159,8 @@
 
 // Stripes
 @include euiDataGridStyles(stripes) {
-  .euiDataGridRow:nth-child(odd) {
-    @include euiDataGridRowCell {
+  @include euiDataGridRowCell {
+    &.euiDataGridRowCell--stripe {
       background: $euiColorLightestShade;
     }
   }
diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index dc52ffa4d97..cb091df81f3 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -27,6 +27,7 @@ import React, {
   useContext,
   useState,
 } from 'react';
+import classNames from 'classnames';
 import {
   GridChildComponentProps,
   VariableSizeGrid as Grid,
@@ -145,8 +146,30 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
 
   let cellContent;
 
-  if (columnIndex < leadingControlColumns.length) {
-    // this is a leading control column
+  const isFirstColumn = columnIndex === 0;
+  const isLastColumn =
+    columnIndex ===
+    columns.length +
+      leadingControlColumns.length +
+      trailingControlColumns.length -
+      1;
+  const isStripableRow = rowIndex % 2 !== 0;
+
+  const isLeadingControlColumn = columnIndex < leadingControlColumns.length;
+  const isTrailingControlColumn =
+    columnIndex >= leadingControlColumns.length + columns.length;
+
+  console.log(rowIndex, columnIndex);
+
+  const classes = classNames({
+    'euiDataGridRowCell--stripe': isStripableRow,
+    'euiDataGridRowCell--firstColumn': isFirstColumn,
+    'euiDataGridRowCell--lastColumn': isLastColumn,
+    'euiDataGridRowCell--controlColumn':
+      isLeadingControlColumn || isTrailingControlColumn,
+  });
+
+  if (isLeadingControlColumn) {
     const leadingColumn = leadingControlColumns[columnIndex];
     const { id, rowCellRender } = leadingColumn;
 
@@ -161,7 +184,7 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
         renderCellValue={rowCellRender}
         interactiveCellId={interactiveCellId}
         isExpandable={false}
-        className="euiDataGridRowCell--controlColumn"
+        className={classes}
         setRowHeight={setRowHeight}
         style={{
           ...style,
@@ -169,8 +192,7 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
         }}
       />
     );
-  } else if (columnIndex >= leadingControlColumns.length + columns.length) {
-    // this is a trailing control column
+  } else if (isTrailingControlColumn) {
     const columnOffset = columns.length + leadingControlColumns.length;
     const trailingColumnIndex = columnIndex - columnOffset;
     const trailingColumn = trailingControlColumns[trailingColumnIndex];
@@ -187,7 +209,7 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
         renderCellValue={rowCellRender}
         interactiveCellId={interactiveCellId}
         isExpandable={false}
-        className="euiDataGridRowCell--controlColumn"
+        className={classes}
         style={{
           ...style,
           top: `${parseFloat(style.top as string) + HEADER_ROW_HEIGHT}px`,
@@ -224,6 +246,7 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
         renderCellValue={renderCellValue}
         interactiveCellId={interactiveCellId}
         isExpandable={isExpandable}
+        className={classes}
         style={{
           ...style,
           top: `${parseFloat(style.top as string) + HEADER_ROW_HEIGHT}px`,

From 300801e4fb471caf16ce1b23a84a123c5be0b53d Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Thu, 3 Dec 2020 13:57:22 -0800
Subject: [PATCH 14/54] remove data_row, since it's no longer in use

---
 .../datagrid/data_grid_data_row.tsx           | 167 ------------------
 src/components/datagrid/index.ts              |   1 -
 2 files changed, 168 deletions(-)
 delete mode 100644 src/components/datagrid/data_grid_data_row.tsx

diff --git a/src/components/datagrid/data_grid_data_row.tsx b/src/components/datagrid/data_grid_data_row.tsx
deleted file mode 100644
index a29b19fb9c3..00000000000
--- a/src/components/datagrid/data_grid_data_row.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import React, { FunctionComponent, HTMLAttributes, memo } from 'react';
-import classnames from 'classnames';
-import {
-  EuiDataGridControlColumn,
-  EuiDataGridColumn,
-  EuiDataGridColumnWidths,
-  EuiDataGridPopoverContent,
-  EuiDataGridPopoverContents,
-} from './data_grid_types';
-import { CommonProps } from '../common';
-
-import { EuiDataGridCell, EuiDataGridCellProps } from './data_grid_cell';
-import { EuiDataGridSchema } from './data_grid_schema';
-import { EuiText } from '../text';
-
-export type EuiDataGridDataRowProps = CommonProps &
-  HTMLAttributes<HTMLDivElement> & {
-    rowIndex: number;
-    leadingControlColumns: EuiDataGridControlColumn[];
-    trailingControlColumns: EuiDataGridControlColumn[];
-    columns: EuiDataGridColumn[];
-    schema: EuiDataGridSchema;
-    popoverContents: EuiDataGridPopoverContents;
-    columnWidths: EuiDataGridColumnWidths;
-    defaultColumnWidth?: number | null;
-    focusedCellPositionInTheRow?: number | null;
-    renderCellValue: EuiDataGridCellProps['renderCellValue'];
-    onCellFocus: Function;
-    interactiveCellId: EuiDataGridCellProps['interactiveCellId'];
-    visibleRowIndex: number;
-  };
-
-const DefaultColumnFormatter: EuiDataGridPopoverContent = ({ children }) => {
-  return <EuiText>{children}</EuiText>;
-};
-
-const EuiDataGridDataRow: FunctionComponent<EuiDataGridDataRowProps> = memo(
-  (props) => {
-    const {
-      leadingControlColumns,
-      trailingControlColumns,
-      columns,
-      schema,
-      popoverContents,
-      columnWidths,
-      defaultColumnWidth,
-      className,
-      renderCellValue,
-      rowIndex,
-      focusedCellPositionInTheRow,
-      onCellFocus,
-      interactiveCellId,
-      'data-test-subj': _dataTestSubj,
-      visibleRowIndex,
-      ...rest
-    } = props;
-
-    const classes = classnames('euiDataGridRow', className);
-    const dataTestSubj = classnames('dataGridRow', _dataTestSubj);
-
-    return (
-      <div
-        role="row"
-        className={classes}
-        data-test-subj={dataTestSubj}
-        {...rest}>
-        {leadingControlColumns.map((leadingColumn, i) => {
-          const { id, rowCellRender } = leadingColumn;
-
-          return (
-            <EuiDataGridCell
-              key={`${id}-${rowIndex}`}
-              rowIndex={rowIndex}
-              visibleRowIndex={visibleRowIndex}
-              colIndex={i}
-              columnId={id}
-              column={leadingColumn}
-              popoverContent={DefaultColumnFormatter}
-              width={leadingColumn.width}
-              renderCellValue={rowCellRender}
-              onCellFocus={onCellFocus}
-              isFocused={focusedCellPositionInTheRow === i}
-              interactiveCellId={interactiveCellId}
-              isExpandable={false}
-              className="euiDataGridRowCell--controlColumn"
-            />
-          );
-        })}
-        {columns.map((props, i) => {
-          const { id } = props;
-          const columnType = schema[id] ? schema[id].columnType : null;
-
-          const isExpandable =
-            props.isExpandable !== undefined ? props.isExpandable : true;
-          const popoverContent =
-            popoverContents[columnType as string] || DefaultColumnFormatter;
-
-          const width = columnWidths[id] || defaultColumnWidth;
-          const columnPosition = i + leadingControlColumns.length;
-
-          return (
-            <EuiDataGridCell
-              key={`${id}-${rowIndex}`}
-              rowIndex={rowIndex}
-              visibleRowIndex={visibleRowIndex}
-              colIndex={columnPosition}
-              columnId={id}
-              column={props}
-              columnType={columnType}
-              popoverContent={popoverContent}
-              width={width || undefined}
-              renderCellValue={renderCellValue}
-              onCellFocus={onCellFocus}
-              isFocused={focusedCellPositionInTheRow === columnPosition}
-              interactiveCellId={interactiveCellId}
-              isExpandable={isExpandable}
-            />
-          );
-        })}
-        {trailingControlColumns.map((trailingColumn, i) => {
-          const { id, rowCellRender } = trailingColumn;
-          const colIndex = i + columns.length + leadingControlColumns.length;
-
-          return (
-            <EuiDataGridCell
-              key={`${id}-${rowIndex}`}
-              rowIndex={rowIndex}
-              visibleRowIndex={visibleRowIndex}
-              colIndex={colIndex}
-              columnId={id}
-              column={trailingColumn}
-              popoverContent={DefaultColumnFormatter}
-              width={trailingColumn.width}
-              renderCellValue={rowCellRender}
-              onCellFocus={onCellFocus}
-              isFocused={focusedCellPositionInTheRow === colIndex}
-              interactiveCellId={interactiveCellId}
-              isExpandable={false}
-              className="euiDataGridRowCell--controlColumn"
-            />
-          );
-        })}
-      </div>
-    );
-  }
-);
-
-export { EuiDataGridDataRow };
diff --git a/src/components/datagrid/index.ts b/src/components/datagrid/index.ts
index 2ceffd67b49..8f09f373cd8 100644
--- a/src/components/datagrid/index.ts
+++ b/src/components/datagrid/index.ts
@@ -26,7 +26,6 @@ export {
   EuiDataGridCellValueElementProps,
 } from './data_grid_cell';
 export { EuiDataGridColumnResizerProps } from './data_grid_column_resizer';
-export { EuiDataGridDataRowProps } from './data_grid_data_row';
 export { EuiDataGridHeaderRowProps } from './data_grid_header_row';
 export { EuiDataGridHeaderCellProps } from './data_grid_header_cell';
 export { EuiDataGridControlHeaderRowProps } from './data_grid_control_header_cell';

From 8656fc8e3d5807b461f66a7a466c0d0d11f2314f Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Thu, 3 Dec 2020 14:02:20 -0800
Subject: [PATCH 15/54] fix prop and type for style

---
 src/components/datagrid/data_grid_cell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index f54b987b76d..7b3cac114c0 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -92,7 +92,7 @@ export interface EuiDataGridCellProps {
     | JSXElementConstructor<EuiDataGridCellValueElementProps>
     | ((props: EuiDataGridCellValueElementProps) => ReactNode);
   setRowHeight?: (height: number) => void;
-  style: any;
+  style?: React.CSSProperties;
 }
 
 interface EuiDataGridCellState {

From 83254c157da439e5eda7ef3182d83e8a2cef0ea7 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Thu, 3 Dec 2020 16:58:14 -0800
Subject: [PATCH 16/54] remove console log

---
 src/components/datagrid/data_grid_body.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index cb091df81f3..6b864be03cd 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -159,8 +159,6 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
   const isTrailingControlColumn =
     columnIndex >= leadingControlColumns.length + columns.length;
 
-  console.log(rowIndex, columnIndex);
-
   const classes = classNames({
     'euiDataGridRowCell--stripe': isStripableRow,
     'euiDataGridRowCell--firstColumn': isFirstColumn,

From 6281a5c7733189cf58dd243f1caac4ff56db14d0 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Tue, 8 Dec 2020 08:29:04 -0800
Subject: [PATCH 17/54] let popover in header act as a toggle

---
 src/components/datagrid/data_grid_header_cell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/datagrid/data_grid_header_cell.tsx b/src/components/datagrid/data_grid_header_cell.tsx
index 0d699f0a49b..ea6052d194f 100644
--- a/src/components/datagrid/data_grid_header_cell.tsx
+++ b/src/components/datagrid/data_grid_header_cell.tsx
@@ -318,7 +318,7 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
       ) : (
         <button
           className="euiDataGridHeaderCell__button"
-          onClick={() => setIsPopoverOpen(true)}>
+          onClick={() => setIsPopoverOpen(!isPopoverOpen)}>
           <div className="euiDataGridHeaderCell__content">
             {display || displayAsText || id}
           </div>

From 00ed6960c4a55a2cd6cdfcc010e450990d8fd893 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Fri, 18 Dec 2020 10:29:00 -0700
Subject: [PATCH 18/54] recompute grid height when rowCount changes

---
 src/components/datagrid/data_grid.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index 13de56184aa..eb4e2e55991 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -687,13 +687,18 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
   // this triggers a double re-render when the grid is switched from constrained to unconstrained
   // but in reality ... maybe don't do that?
   const [gridHeight, setGridHeight] = useState(IS_JEST_ENVIRONMENT ? 500 : 0);
+  const pageSize = pagination?.pageSize;
   useEffect(() => {
     if (height == null) {
       // if already 0 this update will be ignored
       // if not already 0, this resets the height constraint so a new value can be observed
       setGridHeight(0);
     }
-  }, [height, pagination?.pageSize]);
+  }, [
+    height,
+    pageSize,
+    rowCount, // recompute height if the rowCount changes
+  ]);
 
   const [containerRef, _setContainerRef] = useState<HTMLDivElement | null>(
     null

From 8b4ed63fed292db2de55f21ab19747476658e463 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Fri, 18 Dec 2020 12:43:10 -0700
Subject: [PATCH 19/54] Dynamically detect header row height

---
 src/components/datagrid/data_grid_body.tsx    | 74 ++++++++++---------
 .../observer/mutation_observer/index.ts       |  2 +-
 .../mutation_observer.test.tsx                | 34 ++++++++-
 .../mutation_observer/mutation_observer.ts    | 71 +++++++++++++-----
 4 files changed, 125 insertions(+), 56 deletions(-)

diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index 6b864be03cd..2d5e3cd03dd 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -53,9 +53,10 @@ import {
   EuiDataGridHeaderRow,
   EuiDataGridHeaderRowProps,
 } from './data_grid_header_row';
-import { EuiMutationObserver } from '../observer/mutation_observer';
+import { useMutationObserver } from '../observer/mutation_observer';
 import { EuiText } from '../text';
 import { DataGridSortingContext } from './data_grid_context';
+import { useResizeObserver } from '../observer/resize_observer';
 
 export interface EuiDataGridBodyProps {
   gridHeight?: number;
@@ -111,7 +112,6 @@ const providedPopoverContents: EuiDataGridPopoverContents = {
   },
 };
 
-const HEADER_ROW_HEIGHT = 34;
 const FOOTER_ROW_HEIGHT = 34;
 
 const DefaultColumnFormatter: EuiDataGridPopoverContent = ({ children }) => {
@@ -137,6 +137,7 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
     renderCellValue,
     interactiveCellId,
     setRowHeight,
+    headerRowDimensions,
   } = data;
 
   _rowIndex += rowOffset;
@@ -186,7 +187,9 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
         setRowHeight={setRowHeight}
         style={{
           ...style,
-          top: `${parseFloat(style.top as string) + HEADER_ROW_HEIGHT}px`,
+          top: `${
+            parseFloat(style.top as string) + headerRowDimensions.height
+          }px`,
         }}
       />
     );
@@ -210,7 +213,9 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
         className={classes}
         style={{
           ...style,
-          top: `${parseFloat(style.top as string) + HEADER_ROW_HEIGHT}px`,
+          top: `${
+            parseFloat(style.top as string) + headerRowDimensions.height
+          }px`,
         }}
       />
     );
@@ -247,7 +252,9 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
         className={classes}
         style={{
           ...style,
-          top: `${parseFloat(style.top as string) + HEADER_ROW_HEIGHT}px`,
+          top: `${
+            parseFloat(style.top as string) + headerRowDimensions.height
+          }px`,
         }}
       />
     );
@@ -287,6 +294,14 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     switchColumnPos,
   } = props;
 
+  const [headerRowRef, setHeaderRowRef] = useState<HTMLDivElement | null>(null);
+
+  useMutationObserver(headerRowRef, handleHeaderMutation, {
+    subtree: true,
+    childList: true,
+  });
+  const headerRowDimensions = useResizeObserver(headerRowRef, 'height');
+
   const startRow = pagination ? pagination.pageIndex * pagination.pageSize : 0;
   let endRow = pagination
     ? (pagination.pageIndex + 1) * pagination.pageSize
@@ -356,7 +371,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     }
 
     return rowMap;
-  }, [sorting, inMemory, inMemoryValues, schema, schemaDetectors]);
+  }, [sorting, inMemoryValues, schema, schemaDetectors]);
 
   const mergedPopoverContents = useMemo(
     () => ({
@@ -368,34 +383,22 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
 
   const headerRow = useMemo(() => {
     return (
-      <>
-        <EuiMutationObserver
-          observerOptions={{
-            subtree: true,
-            childList: true,
-          }}
-          onMutation={handleHeaderMutation}>
-          {(ref) => (
-            <EuiDataGridHeaderRow
-              ref={ref}
-              switchColumnPos={switchColumnPos}
-              setVisibleColumns={setVisibleColumns}
-              leadingControlColumns={leadingControlColumns}
-              trailingControlColumns={trailingControlColumns}
-              columns={columns}
-              columnWidths={columnWidths}
-              defaultColumnWidth={defaultColumnWidth}
-              setColumnWidth={setColumnWidth}
-              schema={schema}
-              schemaDetectors={schemaDetectors}
-              headerIsInteractive={headerIsInteractive}
-            />
-          )}
-        </EuiMutationObserver>
-      </>
+      <EuiDataGridHeaderRow
+        ref={setHeaderRowRef}
+        switchColumnPos={switchColumnPos}
+        setVisibleColumns={setVisibleColumns}
+        leadingControlColumns={leadingControlColumns}
+        trailingControlColumns={trailingControlColumns}
+        columns={columns}
+        columnWidths={columnWidths}
+        defaultColumnWidth={defaultColumnWidth}
+        setColumnWidth={setColumnWidth}
+        schema={schema}
+        schemaDetectors={schemaDetectors}
+        headerIsInteractive={headerIsInteractive}
+      />
     );
   }, [
-    handleHeaderMutation,
     switchColumnPos,
     setVisibleColumns,
     leadingControlColumns,
@@ -450,7 +453,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
                 ref={ref}
                 style={{
                   ...style,
-                  height: style.height + HEADER_ROW_HEIGHT,
+                  height: style.height + headerRowDimensions.height,
                 }}
                 {...rest}>
                 {headerRow}
@@ -461,7 +464,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
           );
         }
       ),
-    [headerRow, footerRow]
+    [headerRowDimensions.height, headerRow, footerRow]
   );
 
   const gridRef = useRef<Grid>(null);
@@ -519,7 +522,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
         gridHeight ||
         rowHeight * visibleRowIndices.length +
           SCROLLBAR_HEIGHT +
-          HEADER_ROW_HEIGHT +
+          headerRowDimensions.height +
           (footerRow ? FOOTER_ROW_HEIGHT : 0)
       }
       rowHeight={getRowHeight}
@@ -536,6 +539,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
         defaultColumnWidth,
         renderCellValue,
         interactiveCellId,
+        headerRowDimensions,
       }}
       rowCount={visibleRowIndices.length}>
       {Cell}
diff --git a/src/components/observer/mutation_observer/index.ts b/src/components/observer/mutation_observer/index.ts
index 007d8bd2c05..9522e7bc401 100644
--- a/src/components/observer/mutation_observer/index.ts
+++ b/src/components/observer/mutation_observer/index.ts
@@ -17,4 +17,4 @@
  * under the License.
  */
 
-export { EuiMutationObserver } from './mutation_observer';
+export { EuiMutationObserver, useMutationObserver } from './mutation_observer';
diff --git a/src/components/observer/mutation_observer/mutation_observer.test.tsx b/src/components/observer/mutation_observer/mutation_observer.test.tsx
index 1805bd89ec9..4f6775ec6c1 100644
--- a/src/components/observer/mutation_observer/mutation_observer.test.tsx
+++ b/src/components/observer/mutation_observer/mutation_observer.test.tsx
@@ -17,9 +17,9 @@
  * under the License.
  */
 
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, useState } from 'react';
 import { mount } from 'enzyme';
-import { EuiMutationObserver } from './mutation_observer';
+import { EuiMutationObserver, useMutationObserver } from './mutation_observer';
 import { sleep } from '../../../test';
 
 export async function waitforMutationObserver(period = 30) {
@@ -55,3 +55,33 @@ describe('EuiMutationObserver', () => {
     expect(onMutation).toHaveBeenCalledTimes(1);
   });
 });
+
+describe('useMutationObserver', () => {
+  it('watches changing content', async () => {
+    expect.assertions(2);
+
+    const mutationCallback = jest.fn();
+    const Wrapper: FunctionComponent<{}> = jest.fn(({ children }) => {
+      const [ref, setRef] = useState<Element | null>(null);
+      useMutationObserver(ref, mutationCallback, { childList: true, subtree: true });
+      return <div ref={setRef}>{children}</div>;
+    });
+
+    const component = mount(<Wrapper children={<div>Hello World</div>} />);
+
+    await waitforMutationObserver();
+    expect(mutationCallback).toHaveBeenCalledTimes(0);
+
+    component.setProps({
+      children: (
+        <div>
+          <div>Hello World</div>
+          <div>Hello Again</div>
+        </div>
+      ),
+    });
+
+    await waitforMutationObserver();
+    expect(mutationCallback).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/components/observer/mutation_observer/mutation_observer.ts b/src/components/observer/mutation_observer/mutation_observer.ts
index 4db7fe6050f..c3af6083fa0 100644
--- a/src/components/observer/mutation_observer/mutation_observer.ts
+++ b/src/components/observer/mutation_observer/mutation_observer.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { ReactNode } from 'react';
+import { ReactNode, useEffect } from 'react';
 
 import { EuiObserver } from '../observer';
 
@@ -40,22 +40,57 @@ export class EuiMutationObserver extends EuiObserver<Props> {
   };
 
   beginObserve = () => {
-    // IE11 and the MutationObserver polyfill used in Kibana (for Jest) implement
-    // an older spec in which specifying `attributeOldValue` or `attributeFilter`
-    // without specifying `attributes` results in a `SyntaxError`.
-    // The following logic patches the newer spec in which `attributes: true` can be
-    // implied when appropriate (`attributeOldValue` or `attributeFilter` is specified).
-    const observerOptions: MutationObserverInit = {
-      ...this.props.observerOptions,
-    };
-    const needsAttributes =
-      observerOptions.hasOwnProperty('attributeOldValue') ||
-      observerOptions.hasOwnProperty('attributeFilter');
-    if (needsAttributes && !observerOptions.hasOwnProperty('attributes')) {
-      observerOptions.attributes = true;
-    }
-
-    this.observer = new MutationObserver(this.onMutation);
-    this.observer.observe(this.childNode!, observerOptions);
+    const childNode = this.childNode!;
+    this.observer = makeMutationObserver(
+      childNode,
+      this.props.observerOptions,
+      this.onMutation
+    );
   };
 }
+
+const makeMutationObserver = (
+  node: Element,
+  _observerOptions: MutationObserverInit | undefined,
+  callback: MutationCallback
+) => {
+  // IE11 and the MutationObserver polyfill used in Kibana (for Jest) implement
+  // an older spec in which specifying `attributeOldValue` or `attributeFilter`
+  // without specifying `attributes` results in a `SyntaxError`.
+  // The following logic patches the newer spec in which `attributes: true` can be
+  // implied when appropriate (`attributeOldValue` or `attributeFilter` is specified).
+  const observerOptions: MutationObserverInit = {
+    ..._observerOptions,
+  };
+  const needsAttributes =
+    observerOptions.hasOwnProperty('attributeOldValue') ||
+    observerOptions.hasOwnProperty('attributeFilter');
+  if (needsAttributes && !observerOptions.hasOwnProperty('attributes')) {
+    observerOptions.attributes = true;
+  }
+
+  const observer = new MutationObserver(callback);
+  observer.observe(node, observerOptions);
+
+  return observer;
+};
+
+export const useMutationObserver = (
+  container: Element | null,
+  callback: MutationCallback,
+  observerOptions?: MutationObserverInit
+) => {
+  useEffect(
+    () => {
+      if (container != null) {
+        const observer = makeMutationObserver(container, observerOptions, () =>
+          console.log('SOMETHING CHANGED')
+        );
+        return () => observer.disconnect();
+      }
+    },
+    // ignore changing observerOptions
+    // eslint-disable-next-line
+    [container, callback]
+  );
+};

From 99e5346a3023f647520446983a8caf0fb976baae Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Fri, 18 Dec 2020 13:48:05 -0700
Subject: [PATCH 20/54] Make useMutationObserver actually function

---
 .../observer/mutation_observer/mutation_observer.test.tsx   | 5 ++++-
 .../observer/mutation_observer/mutation_observer.ts         | 6 ++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/observer/mutation_observer/mutation_observer.test.tsx b/src/components/observer/mutation_observer/mutation_observer.test.tsx
index 4f6775ec6c1..71f55788bb3 100644
--- a/src/components/observer/mutation_observer/mutation_observer.test.tsx
+++ b/src/components/observer/mutation_observer/mutation_observer.test.tsx
@@ -63,7 +63,10 @@ describe('useMutationObserver', () => {
     const mutationCallback = jest.fn();
     const Wrapper: FunctionComponent<{}> = jest.fn(({ children }) => {
       const [ref, setRef] = useState<Element | null>(null);
-      useMutationObserver(ref, mutationCallback, { childList: true, subtree: true });
+      useMutationObserver(ref, mutationCallback, {
+        childList: true,
+        subtree: true,
+      });
       return <div ref={setRef}>{children}</div>;
     });
 
diff --git a/src/components/observer/mutation_observer/mutation_observer.ts b/src/components/observer/mutation_observer/mutation_observer.ts
index c3af6083fa0..458fd8ea6e9 100644
--- a/src/components/observer/mutation_observer/mutation_observer.ts
+++ b/src/components/observer/mutation_observer/mutation_observer.ts
@@ -83,8 +83,10 @@ export const useMutationObserver = (
   useEffect(
     () => {
       if (container != null) {
-        const observer = makeMutationObserver(container, observerOptions, () =>
-          console.log('SOMETHING CHANGED')
+        const observer = makeMutationObserver(
+          container,
+          observerOptions,
+          callback
         );
         return () => observer.disconnect();
       }

From 532834790ba40821c95a1de68de6e0e13f43f7bd Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Fri, 18 Dec 2020 14:06:17 -0700
Subject: [PATCH 21/54] fix double-clicky and getting-stuck header cell
 popovers

---
 src/components/datagrid/data_grid_header_cell.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/datagrid/data_grid_header_cell.tsx b/src/components/datagrid/data_grid_header_cell.tsx
index 9b423a51509..e0dd67903ae 100644
--- a/src/components/datagrid/data_grid_header_cell.tsx
+++ b/src/components/datagrid/data_grid_header_cell.tsx
@@ -274,6 +274,7 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
     isFocused,
     setIsCellEntered,
     index,
+    setFocusedCell,
   ]);
 
   const columnActions = getColumnActions(
@@ -330,7 +331,7 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
       ) : (
         <button
           className="euiDataGridHeaderCell__button"
-          onClick={() => setIsPopoverOpen(!isPopoverOpen)}>
+          onClick={() => setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen)}>
           {sortingArrow}
           <div className="euiDataGridHeaderCell__content">
             {display || displayAsText || id}
@@ -339,6 +340,7 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
             className="euiDataGridHeaderCell__popover"
             panelPaddingSize="none"
             anchorPosition="downRight"
+            ownFocus
             button={
               <EuiIcon
                 type="arrowDown"
@@ -349,8 +351,7 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
               />
             }
             isOpen={isPopoverOpen}
-            closePopover={() => setIsPopoverOpen(false)}
-            ownFocus={isFocused}>
+            closePopover={() => setIsPopoverOpen(false)}>
             <div>
               <EuiListGroup
                 listItems={columnActions}

From 1179b6f07a90e2dbcf3c2ce8c9d1d0fb07f80bb9 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Fri, 18 Dec 2020 15:14:29 -0700
Subject: [PATCH 22/54] small header height refactor

---
 src/components/datagrid/data_grid_body.tsx    | 106 +++++++++---------
 src/components/datagrid/data_grid_cell.tsx    |   7 ++
 src/components/datagrid/data_grid_context.tsx |   2 +
 3 files changed, 63 insertions(+), 52 deletions(-)

diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index 2d5e3cd03dd..1a46bf29747 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -55,7 +55,10 @@ import {
 } from './data_grid_header_row';
 import { useMutationObserver } from '../observer/mutation_observer';
 import { EuiText } from '../text';
-import { DataGridSortingContext } from './data_grid_context';
+import {
+  DataGridSortingContext,
+  DataGridHeaderRowHeightContext,
+} from './data_grid_context';
 import { useResizeObserver } from '../observer/resize_observer';
 
 export interface EuiDataGridBodyProps {
@@ -137,9 +140,10 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
     renderCellValue,
     interactiveCellId,
     setRowHeight,
-    headerRowDimensions,
   } = data;
 
+  const headerRowHeight = useContext(DataGridHeaderRowHeightContext);
+
   _rowIndex += rowOffset;
   const rowIndex = rowMap.hasOwnProperty(_rowIndex)
     ? rowMap[_rowIndex]
@@ -187,9 +191,7 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
         setRowHeight={setRowHeight}
         style={{
           ...style,
-          top: `${
-            parseFloat(style.top as string) + headerRowDimensions.height
-          }px`,
+          top: `${parseFloat(style.top as string) + headerRowHeight}px`,
         }}
       />
     );
@@ -213,9 +215,7 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
         className={classes}
         style={{
           ...style,
-          top: `${
-            parseFloat(style.top as string) + headerRowDimensions.height
-          }px`,
+          top: `${parseFloat(style.top as string) + headerRowHeight}px`,
         }}
       />
     );
@@ -252,9 +252,7 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
         className={classes}
         style={{
           ...style,
-          top: `${
-            parseFloat(style.top as string) + headerRowDimensions.height
-          }px`,
+          top: `${parseFloat(style.top as string) + headerRowHeight}px`,
         }}
       />
     );
@@ -300,7 +298,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     subtree: true,
     childList: true,
   });
-  const headerRowDimensions = useResizeObserver(headerRowRef, 'height');
+  const { height: headerRowHeight } = useResizeObserver(headerRowRef, 'height');
 
   const startRow = pagination ? pagination.pageIndex * pagination.pageSize : 0;
   let endRow = pagination
@@ -447,13 +445,14 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     () =>
       forwardRef<HTMLDivElement, { style: { height: number } }>(
         ({ children, style, ...rest }, ref) => {
+          const headerRowHeight = useContext(DataGridHeaderRowHeightContext);
           return (
             <>
               <div
                 ref={ref}
                 style={{
                   ...style,
-                  height: style.height + headerRowDimensions.height,
+                  height: style.height + headerRowHeight,
                 }}
                 {...rest}>
                 {headerRow}
@@ -464,7 +463,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
           );
         }
       ),
-    [headerRowDimensions.height, headerRow, footerRow]
+    [headerRow, footerRow]
   );
 
   const gridRef = useRef<Grid>(null);
@@ -506,43 +505,46 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
   }, [getRowHeight]);
 
   return (
-    <Grid
-      ref={gridRef}
-      innerElementType={InnerElement}
-      className="euiDataGrid__virtualized"
-      columnCount={
-        leadingControlColumns.length +
-        columns.length +
-        trailingControlColumns.length
-      }
-      width={gridWidth}
-      columnWidth={getWidth}
-      height={
-        // intentionally ignoring gridHeight if it is null/undefined/0
-        gridHeight ||
-        rowHeight * visibleRowIndices.length +
-          SCROLLBAR_HEIGHT +
-          headerRowDimensions.height +
-          (footerRow ? FOOTER_ROW_HEIGHT : 0)
-      }
-      rowHeight={getRowHeight}
-      itemData={{
-        setRowHeight,
-        rowMap,
-        rowOffset: pagination ? pagination.pageIndex * pagination.pageSize : 0,
-        leadingControlColumns,
-        trailingControlColumns,
-        columns,
-        schema,
-        popoverContents: mergedPopoverContents,
-        columnWidths,
-        defaultColumnWidth,
-        renderCellValue,
-        interactiveCellId,
-        headerRowDimensions,
-      }}
-      rowCount={visibleRowIndices.length}>
-      {Cell}
-    </Grid>
+    <DataGridHeaderRowHeightContext.Provider value={headerRowHeight}>
+      <Grid
+        ref={gridRef}
+        innerElementType={InnerElement}
+        className="euiDataGrid__virtualized"
+        columnCount={
+          leadingControlColumns.length +
+          columns.length +
+          trailingControlColumns.length
+        }
+        width={gridWidth}
+        columnWidth={getWidth}
+        height={
+          // intentionally ignoring gridHeight if it is null/undefined/0
+          gridHeight ||
+          rowHeight * visibleRowIndices.length +
+            SCROLLBAR_HEIGHT +
+            headerRowHeight +
+            (footerRow ? FOOTER_ROW_HEIGHT : 0)
+        }
+        rowHeight={getRowHeight}
+        itemData={{
+          setRowHeight,
+          rowMap,
+          rowOffset: pagination
+            ? pagination.pageIndex * pagination.pageSize
+            : 0,
+          leadingControlColumns,
+          trailingControlColumns,
+          columns,
+          schema,
+          popoverContents: mergedPopoverContents,
+          columnWidths,
+          defaultColumnWidth,
+          renderCellValue,
+          interactiveCellId,
+        }}
+        rowCount={visibleRowIndices.length}>
+        {Cell}
+      </Grid>
+    </DataGridHeaderRowHeightContext.Provider>
   );
 };
diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index e15e7bc5618..59854de8f1d 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -240,6 +240,13 @@ export class EuiDataGridCell extends Component<
       return true;
     if (nextProps.popoverContent !== this.props.popoverContent) return true;
 
+    // respond to adjusted top/left
+    if (nextProps.style) {
+      if (!this.props.style) return true;
+      if (nextProps.style.top !== this.props.style.top) return true;
+      if (nextProps.style.left !== this.props.style.left) return true;
+    }
+
     if (nextState.cellProps !== this.state.cellProps) return true;
     if (nextState.popoverIsOpen !== this.state.popoverIsOpen) return true;
     if (nextState.isEntered !== this.state.isEntered) return true;
diff --git a/src/components/datagrid/data_grid_context.tsx b/src/components/datagrid/data_grid_context.tsx
index 1d24e825174..49f1989658d 100644
--- a/src/components/datagrid/data_grid_context.tsx
+++ b/src/components/datagrid/data_grid_context.tsx
@@ -35,3 +35,5 @@ export const DataGridFocusContext = React.createContext<
 export const DataGridSortingContext = React.createContext<
   EuiDataGridSorting | undefined
 >(undefined);
+
+export const DataGridHeaderRowHeightContext = React.createContext<number>(0);

From 52798b3e6ce756d0b142b2624743059eeaee9acb Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Mon, 21 Dec 2020 10:22:29 -0700
Subject: [PATCH 23/54] fix grid height detection to wait until header height
 is known

---
 src/components/datagrid/data_grid.tsx      | 171 ++++++++++-----------
 src/components/datagrid/data_grid_body.tsx |   6 +-
 2 files changed, 83 insertions(+), 94 deletions(-)

diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index eb4e2e55991..0cebf489d93 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -64,10 +64,7 @@ import { useDataGridColumnSelector } from './column_selector';
 import { useDataGridStyleSelector, startingStyles } from './style_selector';
 import { EuiTablePagination } from '../table/table_pagination';
 import { EuiFocusTrap } from '../focus_trap';
-import {
-  EuiResizeObserver,
-  useResizeObserver,
-} from '../observer/resize_observer';
+import { useResizeObserver } from '../observer/resize_observer';
 import { EuiDataGridInMemoryRenderer } from './data_grid_inmemory_renderer';
 import {
   useMergedSchema,
@@ -403,19 +400,6 @@ function useColumnWidths(
   return [columnWidths, setColumnWidth];
 }
 
-function useOnResize(
-  setGridWidth: (newWidth: number) => void,
-  setGridHeight: (newHeight: number) => void
-) {
-  return useCallback(
-    ({ width, height }: { width: number; height: number }) => {
-      setGridWidth(width);
-      setGridHeight(height);
-    },
-    [setGridWidth, setGridHeight]
-  );
-}
-
 function useInMemoryValues(
   inMemory: EuiDataGridInMemory | undefined,
   rowCount: number
@@ -688,6 +672,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
   // but in reality ... maybe don't do that?
   const [gridHeight, setGridHeight] = useState(IS_JEST_ENVIRONMENT ? 500 : 0);
   const pageSize = pagination?.pageSize;
+  const resetGridHeight = useCallback(() => setGridHeight(0), []);
   useEffect(() => {
     if (height == null) {
       // if already 0 this update will be ignored
@@ -776,7 +761,14 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
   };
 
   // enables/disables grid controls based on available width
-  const onResize = useOnResize(setGridWidth, setGridHeight);
+  const [resizeRef, setResizeRef] = useState<HTMLDivElement | null>(null);
+  const gridDimensions = useResizeObserver(resizeRef);
+  useEffect(() => {
+    const { height, width } = gridDimensions;
+    setGridWidth(width);
+    setGridHeight(height);
+  }, [gridDimensions]);
+
   const hasRoomForGridControls = gridWidth > minSizeForControls || isFullScreen;
 
   const [columnWidths, setColumnWidth] = useColumnWidths(
@@ -1054,83 +1046,76 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
                                   : null}
                               </div>
                             ) : null}
-                            <EuiResizeObserver onResize={onResize}>
-                              {(resizeRef) => (
+                            <div
+                              onKeyDown={createKeyDownHandler(
+                                props,
+                                orderedVisibleColumns,
+                                leadingControlColumns,
+                                trailingControlColumns,
+                                focusedCell,
+                                headerIsInteractive,
+                                setFocusedCell
+                              )}
+                              className="euiDataGrid__verticalScroll"
+                              ref={setResizeRef}>
+                              <div className="euiDataGrid__overflow">
+                                {inMemory ? (
+                                  <EuiDataGridInMemoryRenderer
+                                    inMemory={inMemory}
+                                    renderCellValue={renderCellValue}
+                                    columns={columns}
+                                    rowCount={
+                                      inMemory.level === 'enhancements'
+                                        ? // if `inMemory.level === enhancements` then we can only be sure the pagination's pageSize is available in memory
+                                          pagination?.pageSize || rowCount
+                                        : // otherwise, all of the data is present and usable
+                                          rowCount
+                                    }
+                                    onCellRender={onCellRender}
+                                  />
+                                ) : null}
                                 <div
-                                  onKeyDown={createKeyDownHandler(
-                                    props,
-                                    orderedVisibleColumns,
-                                    leadingControlColumns,
-                                    trailingControlColumns,
-                                    focusedCell,
-                                    headerIsInteractive,
-                                    setFocusedCell
-                                  )}
-                                  className="euiDataGrid__verticalScroll"
-                                  ref={resizeRef}>
-                                  <div className="euiDataGrid__overflow">
-                                    {inMemory ? (
-                                      <EuiDataGridInMemoryRenderer
-                                        inMemory={inMemory}
-                                        renderCellValue={renderCellValue}
-                                        columns={columns}
-                                        rowCount={
-                                          inMemory.level === 'enhancements'
-                                            ? // if `inMemory.level === enhancements` then we can only be sure the pagination's pageSize is available in memory
-                                              pagination?.pageSize || rowCount
-                                            : // otherwise, all of the data is present and usable
-                                              rowCount
-                                        }
-                                        onCellRender={onCellRender}
-                                      />
-                                    ) : null}
-                                    <div
-                                      ref={setContentRef}
-                                      data-test-subj="dataGridWrapper"
-                                      className="euiDataGrid__content"
-                                      role="grid"
-                                      id={gridId}
-                                      {...wrappingDivFocusProps}
-                                      {...gridAriaProps}>
-                                      <EuiDataGridBody
-                                        columns={orderedVisibleColumns}
-                                        columnWidths={columnWidths}
-                                        defaultColumnWidth={defaultColumnWidth}
-                                        leadingControlColumns={
-                                          leadingControlColumns
-                                        }
-                                        schema={mergedSchema}
-                                        trailingControlColumns={
-                                          trailingControlColumns
-                                        }
-                                        setVisibleColumns={setVisibleColumns}
-                                        switchColumnPos={switchColumnPos}
-                                        setColumnWidth={setColumnWidth}
-                                        headerIsInteractive={
-                                          headerIsInteractive
-                                        }
-                                        handleHeaderMutation={
-                                          handleHeaderMutation
-                                        }
-                                        gridHeight={gridHeight}
-                                        gridWidth={gridWidth}
-                                        inMemoryValues={inMemoryValues}
-                                        inMemory={inMemory}
-                                        schemaDetectors={allSchemaDetectors}
-                                        popoverContents={popoverContents}
-                                        pagination={pagination}
-                                        renderCellValue={renderCellValue}
-                                        renderFooterCellValue={
-                                          renderFooterCellValue
-                                        }
-                                        rowCount={rowCount}
-                                        interactiveCellId={interactiveCellId}
-                                      />
-                                    </div>
-                                  </div>
+                                  ref={setContentRef}
+                                  data-test-subj="dataGridWrapper"
+                                  className="euiDataGrid__content"
+                                  role="grid"
+                                  id={gridId}
+                                  {...wrappingDivFocusProps}
+                                  {...gridAriaProps}>
+                                  <EuiDataGridBody
+                                    columns={orderedVisibleColumns}
+                                    columnWidths={columnWidths}
+                                    defaultColumnWidth={defaultColumnWidth}
+                                    leadingControlColumns={
+                                      leadingControlColumns
+                                    }
+                                    schema={mergedSchema}
+                                    trailingControlColumns={
+                                      trailingControlColumns
+                                    }
+                                    setVisibleColumns={setVisibleColumns}
+                                    switchColumnPos={switchColumnPos}
+                                    setColumnWidth={setColumnWidth}
+                                    headerIsInteractive={headerIsInteractive}
+                                    handleHeaderMutation={handleHeaderMutation}
+                                    gridHeight={gridHeight}
+                                    gridWidth={gridWidth}
+                                    inMemoryValues={inMemoryValues}
+                                    inMemory={inMemory}
+                                    schemaDetectors={allSchemaDetectors}
+                                    popoverContents={popoverContents}
+                                    pagination={pagination}
+                                    renderCellValue={renderCellValue}
+                                    renderFooterCellValue={
+                                      renderFooterCellValue
+                                    }
+                                    rowCount={rowCount}
+                                    interactiveCellId={interactiveCellId}
+                                    resetGridHeight={resetGridHeight}
+                                  />
                                 </div>
-                              )}
-                            </EuiResizeObserver>
+                              </div>
+                            </div>
                             {props.pagination && props['aria-labelledby'] && (
                               <p id={ariaLabelledBy} hidden>
                                 {ariaLabelledBy}
diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index 1a46bf29747..91f01c9fe83 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -84,6 +84,7 @@ export interface EuiDataGridBodyProps {
   handleHeaderMutation: MutationCallback;
   setVisibleColumns: EuiDataGridHeaderRowProps['setVisibleColumns'];
   switchColumnPos: EuiDataGridHeaderRowProps['switchColumnPos'];
+  resetGridHeight: () => void;
 }
 
 const defaultComparator: NonNullable<
@@ -290,6 +291,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     handleHeaderMutation,
     setVisibleColumns,
     switchColumnPos,
+    resetGridHeight
   } = props;
 
   const [headerRowRef, setHeaderRowRef] = useState<HTMLDivElement | null>(null);
@@ -300,6 +302,8 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
   });
   const { height: headerRowHeight } = useResizeObserver(headerRowRef, 'height');
 
+  useEffect(() => resetGridHeight(), [headerRowHeight]);
+
   const startRow = pagination ? pagination.pageIndex * pagination.pageSize : 0;
   let endRow = pagination
     ? (pagination.pageIndex + 1) * pagination.pageSize
@@ -519,7 +523,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
         columnWidth={getWidth}
         height={
           // intentionally ignoring gridHeight if it is null/undefined/0
-          gridHeight ||
+          (headerRowHeight && gridHeight) ||
           rowHeight * visibleRowIndices.length +
             SCROLLBAR_HEIGHT +
             headerRowHeight +

From 458d25fd2a9f27ebab4f0992cd40ce2f48e197d4 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Mon, 21 Dec 2020 14:49:06 -0700
Subject: [PATCH 24/54] Fix footer column widths

---
 src/components/datagrid/data_grid.tsx         |  23 ++-
 src/components/datagrid/data_grid_body.tsx    |  40 +++--
 src/components/datagrid/data_grid_cell.tsx    |   3 +-
 .../datagrid/data_grid_footer_row.tsx         | 170 +++++++++---------
 4 files changed, 137 insertions(+), 99 deletions(-)

diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index 0cebf489d93..e5a95612d36 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -761,13 +761,27 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
   };
 
   // enables/disables grid controls based on available width
+  const [sizeIsStable, setSizeIsStable] = useState(false);
+
   const [resizeRef, setResizeRef] = useState<HTMLDivElement | null>(null);
   const gridDimensions = useResizeObserver(resizeRef);
   useEffect(() => {
-    const { height, width } = gridDimensions;
-    setGridWidth(width);
-    setGridHeight(height);
-  }, [gridDimensions]);
+    if (resizeRef) {
+      if (sizeIsStable) {
+        const { height, width } = gridDimensions;
+        setGridWidth(width);
+        setGridHeight((currentHeight) => {
+          // because of a race condition between useResizeObserver which
+          // fires async outside of the React lifecycle
+          // and useEffect, we allow the height to grow but not shrink
+          return currentHeight < height ? height : currentHeight;
+        });
+      }
+    } else {
+      setGridWidth(0);
+      setGridHeight(0);
+    }
+  }, [sizeIsStable, resizeRef, gridDimensions]);
 
   const hasRoomForGridControls = gridWidth > minSizeForControls || isFullScreen;
 
@@ -1112,6 +1126,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
                                     rowCount={rowCount}
                                     interactiveCellId={interactiveCellId}
                                     resetGridHeight={resetGridHeight}
+                                    setSizeIsStable={setSizeIsStable}
                                   />
                                 </div>
                               </div>
diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index 91f01c9fe83..b9ee10b9f96 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -85,6 +85,7 @@ export interface EuiDataGridBodyProps {
   setVisibleColumns: EuiDataGridHeaderRowProps['setVisibleColumns'];
   switchColumnPos: EuiDataGridHeaderRowProps['switchColumnPos'];
   resetGridHeight: () => void;
+  setSizeIsStable: (sizeIsStable: boolean) => void;
 }
 
 const defaultComparator: NonNullable<
@@ -116,8 +117,6 @@ const providedPopoverContents: EuiDataGridPopoverContents = {
   },
 };
 
-const FOOTER_ROW_HEIGHT = 34;
-
 const DefaultColumnFormatter: EuiDataGridPopoverContent = ({ children }) => {
   return <EuiText>{children}</EuiText>;
 };
@@ -291,18 +290,31 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     handleHeaderMutation,
     setVisibleColumns,
     switchColumnPos,
-    resetGridHeight
+    resetGridHeight,
+    setSizeIsStable,
   } = props;
 
+  const hasFooterRow = renderFooterCellValue;
+
   const [headerRowRef, setHeaderRowRef] = useState<HTMLDivElement | null>(null);
+  const [footerRowRef, setFooterRowRef] = useState<HTMLDivElement | null>(null);
 
   useMutationObserver(headerRowRef, handleHeaderMutation, {
     subtree: true,
     childList: true,
   });
   const { height: headerRowHeight } = useResizeObserver(headerRowRef, 'height');
+  const { height: footerRowHeight } = useResizeObserver(footerRowRef, 'height');
 
-  useEffect(() => resetGridHeight(), [headerRowHeight]);
+  useEffect(() => {
+    const isHeaderStable = headerRowHeight !== 0;
+    const isFooterStable = !hasFooterRow || footerRowHeight !== 0;
+    setSizeIsStable(isHeaderStable && isFooterStable);
+  }, [hasFooterRow, setSizeIsStable, headerRowHeight, footerRowHeight]);
+
+  useEffect(() => {
+    resetGridHeight();
+  }, [resetGridHeight, headerRowHeight, footerRowHeight]);
 
   const startRow = pagination ? pagination.pageIndex * pagination.pageSize : 0;
   let endRow = pagination
@@ -419,6 +431,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     return (
       <EuiDataGridFooterRow
         key="footerRow"
+        ref={setFooterRowRef}
         leadingControlColumns={leadingControlColumns}
         trailingControlColumns={trailingControlColumns}
         columns={columns}
@@ -508,6 +521,16 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     if (gridRef.current) gridRef.current.resetAfterRowIndex(0);
   }, [getRowHeight]);
 
+  const height =
+    // intentionally ignoring gridHeight if it is null/undefined/0
+    // and using it only if we have found the header&footer heights
+    (headerRowHeight && (!hasFooterRow || footerRowHeight) && gridHeight) ||
+    // otherwise compute the height
+    rowHeight * visibleRowIndices.length +
+      SCROLLBAR_HEIGHT +
+      headerRowHeight +
+      footerRowHeight;
+
   return (
     <DataGridHeaderRowHeightContext.Provider value={headerRowHeight}>
       <Grid
@@ -521,14 +544,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
         }
         width={gridWidth}
         columnWidth={getWidth}
-        height={
-          // intentionally ignoring gridHeight if it is null/undefined/0
-          (headerRowHeight && gridHeight) ||
-          rowHeight * visibleRowIndices.length +
-            SCROLLBAR_HEIGHT +
-            headerRowHeight +
-            (footerRow ? FOOTER_ROW_HEIGHT : 0)
-        }
+        height={height}
         rowHeight={getRowHeight}
         itemData={{
           setRowHeight,
diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index 59854de8f1d..2f3964e7589 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -341,8 +341,7 @@ export class EuiDataGridCell extends Component<
       className: classNames(cellClasses, this.state.cellProps.className),
     };
 
-    const widthStyle = width != null ? { width: `${width}px` } : {};
-    cellProps.style = { ...style, widthStyle };
+    cellProps.style = { ...style, width };
 
     const handleCellKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
       if (isExpandable) {
diff --git a/src/components/datagrid/data_grid_footer_row.tsx b/src/components/datagrid/data_grid_footer_row.tsx
index 3ebc36a49bb..9a7b79bb8f0 100644
--- a/src/components/datagrid/data_grid_footer_row.tsx
+++ b/src/components/datagrid/data_grid_footer_row.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { FunctionComponent, HTMLAttributes, memo } from 'react';
+import React, { forwardRef, HTMLAttributes, memo } from 'react';
 import classnames from 'classnames';
 import {
   EuiDataGridControlColumn,
@@ -51,86 +51,47 @@ const DefaultColumnFormatter: EuiDataGridPopoverContent = ({ children }) => {
   return <EuiText>{children}</EuiText>;
 };
 
-const EuiDataGridFooterRow: FunctionComponent<EuiDataGridFooterRowProps> = memo(
-  ({
-    leadingControlColumns,
-    trailingControlColumns,
-    columns,
-    schema,
-    popoverContents,
-    columnWidths,
-    defaultColumnWidth,
-    className,
-    renderCellValue,
-    rowIndex,
-    interactiveCellId,
-    'data-test-subj': _dataTestSubj,
-    visibleRowIndex = rowIndex,
-    ...rest
-  }) => {
-    const classes = classnames(
-      'euiDataGridRow',
-      'euiDataGridFooter',
-      className
-    );
-    const dataTestSubj = classnames('dataGridRow', _dataTestSubj);
+const EuiDataGridFooterRow = memo(
+  forwardRef<HTMLDivElement, EuiDataGridFooterRowProps>(
+    (
+      {
+        leadingControlColumns,
+        trailingControlColumns,
+        columns,
+        schema,
+        popoverContents,
+        columnWidths,
+        defaultColumnWidth,
+        className,
+        renderCellValue,
+        rowIndex,
+        interactiveCellId,
+        'data-test-subj': _dataTestSubj,
+        visibleRowIndex = rowIndex,
+        ...rest
+      },
+      ref
+    ) => {
+      const classes = classnames(
+        'euiDataGridRow',
+        'euiDataGridFooter',
+        className
+      );
+      const dataTestSubj = classnames('dataGridRow', _dataTestSubj);
 
-    return (
-      <div
-        role="row"
-        className={classes}
-        data-test-subj={dataTestSubj}
-        {...rest}>
-        {leadingControlColumns.map(({ id, width }, i) => (
-          <EuiDataGridCell
-            key={`${id}-${rowIndex}`}
-            rowIndex={rowIndex}
-            visibleRowIndex={visibleRowIndex}
-            colIndex={i}
-            columnId={id}
-            popoverContent={DefaultColumnFormatter}
-            width={width}
-            renderCellValue={() => null}
-            interactiveCellId={interactiveCellId}
-            isExpandable={true}
-            className="euiDataGridFooterCell euiDataGridRowCell--controlColumn"
-          />
-        ))}
-        {columns.map(({ id }, i) => {
-          const columnType = schema[id] ? schema[id].columnType : null;
-          const popoverContent =
-            (columnType && popoverContents[columnType]) ||
-            DefaultColumnFormatter;
-
-          const width = columnWidths[id] || defaultColumnWidth;
-          const columnPosition = i + leadingControlColumns.length;
-
-          return (
+      return (
+        <div
+          ref={ref}
+          role="row"
+          className={classes}
+          data-test-subj={dataTestSubj}
+          {...rest}>
+          {leadingControlColumns.map(({ id, width }, i) => (
             <EuiDataGridCell
               key={`${id}-${rowIndex}`}
               rowIndex={rowIndex}
               visibleRowIndex={visibleRowIndex}
-              colIndex={columnPosition}
-              columnId={id}
-              columnType={columnType}
-              popoverContent={popoverContent}
-              width={width || undefined}
-              renderCellValue={renderCellValue}
-              interactiveCellId={interactiveCellId}
-              isExpandable={true}
-              className="euiDataGridFooterCell"
-            />
-          );
-        })}
-        {trailingControlColumns.map(({ id, width }, i) => {
-          const colIndex = i + columns.length + leadingControlColumns.length;
-
-          return (
-            <EuiDataGridCell
-              key={`${id}-${rowIndex}`}
-              rowIndex={rowIndex}
-              visibleRowIndex={visibleRowIndex}
-              colIndex={colIndex}
+              colIndex={i}
               columnId={id}
               popoverContent={DefaultColumnFormatter}
               width={width}
@@ -139,11 +100,58 @@ const EuiDataGridFooterRow: FunctionComponent<EuiDataGridFooterRowProps> = memo(
               isExpandable={true}
               className="euiDataGridFooterCell euiDataGridRowCell--controlColumn"
             />
-          );
-        })}
-      </div>
-    );
-  }
+          ))}
+          {columns.map(({ id }, i) => {
+            const columnType = schema[id] ? schema[id].columnType : null;
+            const popoverContent =
+              (columnType && popoverContents[columnType]) ||
+              DefaultColumnFormatter;
+
+            const width = columnWidths[id] || defaultColumnWidth;
+            const columnPosition = i + leadingControlColumns.length;
+
+            return (
+              <EuiDataGridCell
+                key={`${id}-${rowIndex}`}
+                rowIndex={rowIndex}
+                visibleRowIndex={visibleRowIndex}
+                colIndex={columnPosition}
+                columnId={id}
+                columnType={columnType}
+                popoverContent={popoverContent}
+                width={width || undefined}
+                renderCellValue={renderCellValue}
+                interactiveCellId={interactiveCellId}
+                isExpandable={true}
+                className="euiDataGridFooterCell"
+              />
+            );
+          })}
+          {trailingControlColumns.map(({ id, width }, i) => {
+            const colIndex = i + columns.length + leadingControlColumns.length;
+
+            return (
+              <EuiDataGridCell
+                key={`${id}-${rowIndex}`}
+                rowIndex={rowIndex}
+                visibleRowIndex={visibleRowIndex}
+                colIndex={colIndex}
+                columnId={id}
+                popoverContent={DefaultColumnFormatter}
+                width={width}
+                renderCellValue={() => null}
+                interactiveCellId={interactiveCellId}
+                isExpandable={true}
+                className="euiDataGridFooterCell euiDataGridRowCell--controlColumn"
+              />
+            );
+          })}
+        </div>
+      );
+    }
+  )
 );
 
+EuiDataGridFooterRow.displayName = 'EuiDataGridFooterRow';
+
 export { EuiDataGridFooterRow };

From 037c9795ebdaeccb5969a215d79d2a6c68fa786c Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Tue, 22 Dec 2020 12:57:14 -0700
Subject: [PATCH 25/54] Down to 2 failing unit tests

---
 .../__snapshots__/data_grid.test.tsx.snap     | 2184 ++++++++---------
 src/components/datagrid/data_grid.test.tsx    |  153 +-
 src/components/datagrid/data_grid.tsx         |   12 +-
 src/components/datagrid/data_grid_body.tsx    |    5 +-
 4 files changed, 1120 insertions(+), 1234 deletions(-)

diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index 9ba2b4c536f..cc2e4907ec5 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -1047,10 +1047,11 @@ Array [
             tabindex="0"
           >
             <div
+              class="euiDataGrid__virtualized"
               style="position:relative;height:500px;width:500px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
             >
               <div
-                style="height:136px;width:200px"
+                style="height:102px;width:200px"
               >
                 <div
                   class="euiDataGridHeader"
@@ -1131,60 +1132,56 @@ Array [
                   </div>
                 </div>
                 <div
-                  style="position:absolute;left:0;top:34px;height:34px;width:100px"
+                  class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:0;top:0px;height:34px;width:100px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiDataGridRowCell__content"
+                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiPopover__anchor euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
+                            <p
+                              class="euiScreenReaderOnly"
+                            >
+                              <span>
+                                Row: 1, Column: 1:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandContent"
-                            >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 1, Column: 1:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                0, A
-                              </div>
+                              class="euiDataGridRowCell__truncate"
+                            >
+                              0, A
                             </div>
-                            <div
-                              class="euiDataGridRowCell__expandButton"
+                          </div>
+                          <div
+                            class="euiDataGridRowCell__expandButton"
+                          >
+                            <button
+                              aria-hidden="true"
+                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                              tabindex="-1"
+                              title="Click or hit enter to interact with cell content"
+                              type="button"
                             >
-                              <button
+                              <span
                                 aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
-                            </div>
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="expandMini"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -1192,60 +1189,56 @@ Array [
                   </div>
                 </div>
                 <div
-                  style="position:absolute;left:100px;top:34px;height:34px;width:100px"
+                  class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:100px;top:0px;height:34px;width:100px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiDataGridRowCell__content"
+                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiPopover__anchor euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
+                            <p
+                              class="euiScreenReaderOnly"
+                            >
+                              <span>
+                                Row: 1, Column: 2:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandContent"
-                            >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 1, Column: 2:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                0, B
-                              </div>
+                              class="euiDataGridRowCell__truncate"
+                            >
+                              0, B
                             </div>
-                            <div
-                              class="euiDataGridRowCell__expandButton"
+                          </div>
+                          <div
+                            class="euiDataGridRowCell__expandButton"
+                          >
+                            <button
+                              aria-hidden="true"
+                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                              tabindex="-1"
+                              title="Click or hit enter to interact with cell content"
+                              type="button"
                             >
-                              <button
+                              <span
                                 aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
-                            </div>
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="expandMini"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -1253,60 +1246,56 @@ Array [
                   </div>
                 </div>
                 <div
-                  style="position:absolute;left:0;top:68px;height:34px;width:100px"
+                  class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:0;top:34px;height:34px;width:100px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiDataGridRowCell__content"
+                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiPopover__anchor euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
+                            <p
+                              class="euiScreenReaderOnly"
+                            >
+                              <span>
+                                Row: 2, Column: 1:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandContent"
-                            >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 2, Column: 1:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                1, A
-                              </div>
+                              class="euiDataGridRowCell__truncate"
+                            >
+                              1, A
                             </div>
-                            <div
-                              class="euiDataGridRowCell__expandButton"
+                          </div>
+                          <div
+                            class="euiDataGridRowCell__expandButton"
+                          >
+                            <button
+                              aria-hidden="true"
+                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                              tabindex="-1"
+                              title="Click or hit enter to interact with cell content"
+                              type="button"
                             >
-                              <button
+                              <span
                                 aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
-                            </div>
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="expandMini"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -1314,60 +1303,56 @@ Array [
                   </div>
                 </div>
                 <div
-                  style="position:absolute;left:100px;top:68px;height:34px;width:100px"
+                  class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:100px;top:34px;height:34px;width:100px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiDataGridRowCell__content"
+                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiPopover__anchor euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
+                            <p
+                              class="euiScreenReaderOnly"
+                            >
+                              <span>
+                                Row: 2, Column: 2:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandContent"
-                            >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 2, Column: 2:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                1, B
-                              </div>
+                              class="euiDataGridRowCell__truncate"
+                            >
+                              1, B
                             </div>
-                            <div
-                              class="euiDataGridRowCell__expandButton"
+                          </div>
+                          <div
+                            class="euiDataGridRowCell__expandButton"
+                          >
+                            <button
+                              aria-hidden="true"
+                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                              tabindex="-1"
+                              title="Click or hit enter to interact with cell content"
+                              type="button"
                             >
-                              <button
+                              <span
                                 aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
-                            </div>
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="expandMini"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -1375,60 +1360,56 @@ Array [
                   </div>
                 </div>
                 <div
-                  style="position:absolute;left:0;top:102px;height:34px;width:100px"
+                  class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:0;top:68px;height:34px;width:100px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiDataGridRowCell__content"
+                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiPopover__anchor euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
+                            <p
+                              class="euiScreenReaderOnly"
+                            >
+                              <span>
+                                Row: 3, Column: 1:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandContent"
-                            >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 3, Column: 1:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                2, A
-                              </div>
+                              class="euiDataGridRowCell__truncate"
+                            >
+                              2, A
                             </div>
-                            <div
-                              class="euiDataGridRowCell__expandButton"
+                          </div>
+                          <div
+                            class="euiDataGridRowCell__expandButton"
+                          >
+                            <button
+                              aria-hidden="true"
+                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                              tabindex="-1"
+                              title="Click or hit enter to interact with cell content"
+                              type="button"
                             >
-                              <button
+                              <span
                                 aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
-                            </div>
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="expandMini"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -1436,60 +1417,56 @@ Array [
                   </div>
                 </div>
                 <div
-                  style="position:absolute;left:100px;top:102px;height:34px;width:100px"
+                  class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:100px;top:68px;height:34px;width:100px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiDataGridRowCell__content"
+                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiPopover__anchor euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
+                            <p
+                              class="euiScreenReaderOnly"
+                            >
+                              <span>
+                                Row: 3, Column: 2:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandContent"
-                            >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 3, Column: 2:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                2, B
-                              </div>
+                              class="euiDataGridRowCell__truncate"
+                            >
+                              2, B
                             </div>
-                            <div
-                              class="euiDataGridRowCell__expandButton"
+                          </div>
+                          <div
+                            class="euiDataGridRowCell__expandButton"
+                          >
+                            <button
+                              aria-hidden="true"
+                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                              tabindex="-1"
+                              title="Click or hit enter to interact with cell content"
+                              type="button"
                             >
-                              <button
+                              <span
                                 aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
-                            </div>
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="expandMini"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -1635,10 +1612,11 @@ Array [
             tabindex="0"
           >
             <div
+              class="euiDataGrid__virtualized"
               style="position:relative;height:500px;width:500px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
             >
               <div
-                style="height:136px;width:300px"
+                style="height:102px;width:300px"
               >
                 <div
                   class="euiDataGridHeader"
@@ -1749,111 +1727,103 @@ Array [
                   </div>
                 </div>
                 <div
-                  style="position:absolute;left:0;top:34px;height:34px;width:50px"
+                  class="euiDataGridRowCell euiDataGridRowCell--firstColumn euiDataGridRowCell--controlColumn"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:0;top:0px;height:34px;width:50px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--controlColumn"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:50px"
+                    data-focus-guard="true"
+                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                    tabindex="-1"
+                  />
+                  <div
+                    data-focus-guard="true"
+                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
                     tabindex="-1"
+                  />
+                  <div
+                    data-focus-lock-disabled="disabled"
                   >
                     <div
-                      data-focus-guard="true"
-                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                      tabindex="-1"
-                    />
-                    <div
-                      data-focus-guard="true"
-                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                      tabindex="-1"
-                    />
-                    <div
-                      data-focus-lock-disabled="disabled"
+                      class="euiDataGridRowCell__expandFlex"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiDataGridRowCell__expandContent"
                       >
+                        <p
+                          class="euiScreenReaderOnly"
+                        >
+                          <span>
+                            Row: 1, Column: 1:
+                          </span>
+                        </p>
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiDataGridRowCell__truncate"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 1, Column: 1:
-                            </span>
-                          </p>
-                          <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            0
-                          </div>
+                          0
                         </div>
                       </div>
                     </div>
-                    <div
-                      data-focus-guard="true"
-                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                      tabindex="-1"
-                    />
                   </div>
+                  <div
+                    data-focus-guard="true"
+                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                    tabindex="-1"
+                  />
                 </div>
                 <div
-                  style="position:absolute;left:50px;top:34px;height:34px;width:100px"
+                  class="euiDataGridRowCell"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:50px;top:0px;height:34px;width:100px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiDataGridRowCell__content"
+                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiPopover__anchor euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
+                            <p
+                              class="euiScreenReaderOnly"
+                            >
+                              <span>
+                                Row: 1, Column: 2:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandContent"
-                            >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 1, Column: 2:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                0, A
-                              </div>
+                              class="euiDataGridRowCell__truncate"
+                            >
+                              0, A
                             </div>
-                            <div
-                              class="euiDataGridRowCell__expandButton"
+                          </div>
+                          <div
+                            class="euiDataGridRowCell__expandButton"
+                          >
+                            <button
+                              aria-hidden="true"
+                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                              tabindex="-1"
+                              title="Click or hit enter to interact with cell content"
+                              type="button"
                             >
-                              <button
+                              <span
                                 aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
-                            </div>
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="expandMini"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -1861,60 +1831,56 @@ Array [
                   </div>
                 </div>
                 <div
-                  style="position:absolute;left:150px;top:34px;height:34px;width:100px"
+                  class="euiDataGridRowCell"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:150px;top:0px;height:34px;width:100px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiDataGridRowCell__content"
+                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiPopover__anchor euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
+                            <p
+                              class="euiScreenReaderOnly"
+                            >
+                              <span>
+                                Row: 1, Column: 3:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandContent"
-                            >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 1, Column: 3:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                0, B
-                              </div>
+                              class="euiDataGridRowCell__truncate"
+                            >
+                              0, B
                             </div>
-                            <div
-                              class="euiDataGridRowCell__expandButton"
+                          </div>
+                          <div
+                            class="euiDataGridRowCell__expandButton"
+                          >
+                            <button
+                              aria-hidden="true"
+                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                              tabindex="-1"
+                              title="Click or hit enter to interact with cell content"
+                              type="button"
                             >
-                              <button
+                              <span
                                 aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
-                            </div>
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="expandMini"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -1922,162 +1888,150 @@ Array [
                   </div>
                 </div>
                 <div
-                  style="position:absolute;left:250px;top:34px;height:34px;width:50px"
+                  class="euiDataGridRowCell euiDataGridRowCell--lastColumn euiDataGridRowCell--controlColumn"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:250px;top:0px;height:34px;width:50px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--controlColumn"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:50px"
+                    data-focus-guard="true"
+                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
                     tabindex="-1"
+                  />
+                  <div
+                    data-focus-guard="true"
+                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                    tabindex="-1"
+                  />
+                  <div
+                    data-focus-lock-disabled="disabled"
                   >
                     <div
-                      data-focus-guard="true"
-                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                      tabindex="-1"
-                    />
-                    <div
-                      data-focus-guard="true"
-                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                      tabindex="-1"
-                    />
-                    <div
-                      data-focus-lock-disabled="disabled"
+                      class="euiDataGridRowCell__expandFlex"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiDataGridRowCell__expandContent"
                       >
+                        <p
+                          class="euiScreenReaderOnly"
+                        >
+                          <span>
+                            Row: 1, Column: 4:
+                          </span>
+                        </p>
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiDataGridRowCell__truncate"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 1, Column: 4:
-                            </span>
-                          </p>
-                          <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            0
-                          </div>
+                          0
                         </div>
                       </div>
                     </div>
-                    <div
-                      data-focus-guard="true"
-                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                      tabindex="-1"
-                    />
                   </div>
+                  <div
+                    data-focus-guard="true"
+                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                    tabindex="-1"
+                  />
                 </div>
                 <div
-                  style="position:absolute;left:0;top:68px;height:34px;width:50px"
+                  class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn euiDataGridRowCell--controlColumn"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:0;top:34px;height:34px;width:50px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--controlColumn"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:50px"
+                    data-focus-guard="true"
+                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
                     tabindex="-1"
+                  />
+                  <div
+                    data-focus-guard="true"
+                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                    tabindex="-1"
+                  />
+                  <div
+                    data-focus-lock-disabled="disabled"
                   >
                     <div
-                      data-focus-guard="true"
-                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                      tabindex="-1"
-                    />
-                    <div
-                      data-focus-guard="true"
-                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                      tabindex="-1"
-                    />
-                    <div
-                      data-focus-lock-disabled="disabled"
+                      class="euiDataGridRowCell__expandFlex"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiDataGridRowCell__expandContent"
                       >
+                        <p
+                          class="euiScreenReaderOnly"
+                        >
+                          <span>
+                            Row: 2, Column: 1:
+                          </span>
+                        </p>
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiDataGridRowCell__truncate"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 2, Column: 1:
-                            </span>
-                          </p>
-                          <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            1
-                          </div>
+                          1
                         </div>
                       </div>
                     </div>
-                    <div
-                      data-focus-guard="true"
-                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                      tabindex="-1"
-                    />
                   </div>
+                  <div
+                    data-focus-guard="true"
+                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                    tabindex="-1"
+                  />
                 </div>
                 <div
-                  style="position:absolute;left:50px;top:68px;height:34px;width:100px"
+                  class="euiDataGridRowCell euiDataGridRowCell--stripe"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:50px;top:34px;height:34px;width:100px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiDataGridRowCell__content"
+                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiPopover__anchor euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
+                            <p
+                              class="euiScreenReaderOnly"
+                            >
+                              <span>
+                                Row: 2, Column: 2:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandContent"
-                            >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 2, Column: 2:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                1, A
-                              </div>
+                              class="euiDataGridRowCell__truncate"
+                            >
+                              1, A
                             </div>
-                            <div
-                              class="euiDataGridRowCell__expandButton"
+                          </div>
+                          <div
+                            class="euiDataGridRowCell__expandButton"
+                          >
+                            <button
+                              aria-hidden="true"
+                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                              tabindex="-1"
+                              title="Click or hit enter to interact with cell content"
+                              type="button"
                             >
-                              <button
+                              <span
                                 aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
-                            </div>
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="expandMini"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -2085,60 +2039,56 @@ Array [
                   </div>
                 </div>
                 <div
-                  style="position:absolute;left:150px;top:68px;height:34px;width:100px"
+                  class="euiDataGridRowCell euiDataGridRowCell--stripe"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:150px;top:34px;height:34px;width:100px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiDataGridRowCell__content"
+                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiPopover__anchor euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
+                            <p
+                              class="euiScreenReaderOnly"
+                            >
+                              <span>
+                                Row: 2, Column: 3:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandContent"
-                            >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 2, Column: 3:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                1, B
-                              </div>
+                              class="euiDataGridRowCell__truncate"
+                            >
+                              1, B
                             </div>
-                            <div
-                              class="euiDataGridRowCell__expandButton"
+                          </div>
+                          <div
+                            class="euiDataGridRowCell__expandButton"
+                          >
+                            <button
+                              aria-hidden="true"
+                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                              tabindex="-1"
+                              title="Click or hit enter to interact with cell content"
+                              type="button"
                             >
-                              <button
+                              <span
                                 aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
-                            </div>
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="expandMini"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -2146,162 +2096,150 @@ Array [
                   </div>
                 </div>
                 <div
-                  style="position:absolute;left:250px;top:68px;height:34px;width:50px"
+                  class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn euiDataGridRowCell--controlColumn"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:250px;top:34px;height:34px;width:50px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--controlColumn"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:50px"
+                    data-focus-guard="true"
+                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
                     tabindex="-1"
+                  />
+                  <div
+                    data-focus-guard="true"
+                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                    tabindex="-1"
+                  />
+                  <div
+                    data-focus-lock-disabled="disabled"
                   >
                     <div
-                      data-focus-guard="true"
-                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                      tabindex="-1"
-                    />
-                    <div
-                      data-focus-guard="true"
-                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                      tabindex="-1"
-                    />
-                    <div
-                      data-focus-lock-disabled="disabled"
+                      class="euiDataGridRowCell__expandFlex"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiDataGridRowCell__expandContent"
                       >
+                        <p
+                          class="euiScreenReaderOnly"
+                        >
+                          <span>
+                            Row: 2, Column: 4:
+                          </span>
+                        </p>
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiDataGridRowCell__truncate"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 2, Column: 4:
-                            </span>
-                          </p>
-                          <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            1
-                          </div>
+                          1
                         </div>
                       </div>
                     </div>
-                    <div
-                      data-focus-guard="true"
-                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                      tabindex="-1"
-                    />
                   </div>
+                  <div
+                    data-focus-guard="true"
+                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                    tabindex="-1"
+                  />
                 </div>
                 <div
-                  style="position:absolute;left:0;top:102px;height:34px;width:50px"
+                  class="euiDataGridRowCell euiDataGridRowCell--firstColumn euiDataGridRowCell--controlColumn"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:0;top:68px;height:34px;width:50px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--controlColumn"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:50px"
+                    data-focus-guard="true"
+                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                    tabindex="-1"
+                  />
+                  <div
+                    data-focus-guard="true"
+                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
                     tabindex="-1"
+                  />
+                  <div
+                    data-focus-lock-disabled="disabled"
                   >
                     <div
-                      data-focus-guard="true"
-                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                      tabindex="-1"
-                    />
-                    <div
-                      data-focus-guard="true"
-                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                      tabindex="-1"
-                    />
-                    <div
-                      data-focus-lock-disabled="disabled"
+                      class="euiDataGridRowCell__expandFlex"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiDataGridRowCell__expandContent"
                       >
+                        <p
+                          class="euiScreenReaderOnly"
+                        >
+                          <span>
+                            Row: 3, Column: 1:
+                          </span>
+                        </p>
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiDataGridRowCell__truncate"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 3, Column: 1:
-                            </span>
-                          </p>
-                          <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            2
-                          </div>
+                          2
                         </div>
                       </div>
                     </div>
-                    <div
-                      data-focus-guard="true"
-                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                      tabindex="-1"
-                    />
                   </div>
+                  <div
+                    data-focus-guard="true"
+                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                    tabindex="-1"
+                  />
                 </div>
                 <div
-                  style="position:absolute;left:50px;top:102px;height:34px;width:100px"
+                  class="euiDataGridRowCell"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:50px;top:68px;height:34px;width:100px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiDataGridRowCell__content"
+                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiPopover__anchor euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
+                            <p
+                              class="euiScreenReaderOnly"
+                            >
+                              <span>
+                                Row: 3, Column: 2:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandContent"
-                            >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 3, Column: 2:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                2, A
-                              </div>
+                              class="euiDataGridRowCell__truncate"
+                            >
+                              2, A
                             </div>
-                            <div
-                              class="euiDataGridRowCell__expandButton"
+                          </div>
+                          <div
+                            class="euiDataGridRowCell__expandButton"
+                          >
+                            <button
+                              aria-hidden="true"
+                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                              tabindex="-1"
+                              title="Click or hit enter to interact with cell content"
+                              type="button"
                             >
-                              <button
+                              <span
                                 aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
-                            </div>
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="expandMini"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -2309,60 +2247,56 @@ Array [
                   </div>
                 </div>
                 <div
-                  style="position:absolute;left:150px;top:102px;height:34px;width:100px"
+                  class="euiDataGridRowCell"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:150px;top:68px;height:34px;width:100px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiDataGridRowCell__content"
+                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiPopover__anchor euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
+                            <p
+                              class="euiScreenReaderOnly"
+                            >
+                              <span>
+                                Row: 3, Column: 3:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandContent"
-                            >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 3, Column: 3:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                2, B
-                              </div>
+                              class="euiDataGridRowCell__truncate"
+                            >
+                              2, B
                             </div>
-                            <div
-                              class="euiDataGridRowCell__expandButton"
+                          </div>
+                          <div
+                            class="euiDataGridRowCell__expandButton"
+                          >
+                            <button
+                              aria-hidden="true"
+                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                              tabindex="-1"
+                              title="Click or hit enter to interact with cell content"
+                              type="button"
                             >
-                              <button
+                              <span
                                 aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
-                            </div>
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="expandMini"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -2370,55 +2304,51 @@ Array [
                   </div>
                 </div>
                 <div
-                  style="position:absolute;left:250px;top:102px;height:34px;width:50px"
+                  class="euiDataGridRowCell euiDataGridRowCell--lastColumn euiDataGridRowCell--controlColumn"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:250px;top:68px;height:34px;width:50px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--controlColumn"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:50px"
+                    data-focus-guard="true"
+                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
                     tabindex="-1"
+                  />
+                  <div
+                    data-focus-guard="true"
+                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                    tabindex="-1"
+                  />
+                  <div
+                    data-focus-lock-disabled="disabled"
                   >
                     <div
-                      data-focus-guard="true"
-                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                      tabindex="-1"
-                    />
-                    <div
-                      data-focus-guard="true"
-                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                      tabindex="-1"
-                    />
-                    <div
-                      data-focus-lock-disabled="disabled"
+                      class="euiDataGridRowCell__expandFlex"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiDataGridRowCell__expandContent"
                       >
+                        <p
+                          class="euiScreenReaderOnly"
+                        >
+                          <span>
+                            Row: 3, Column: 4:
+                          </span>
+                        </p>
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiDataGridRowCell__truncate"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 3, Column: 4:
-                            </span>
-                          </p>
-                          <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            2
-                          </div>
+                          2
                         </div>
                       </div>
                     </div>
-                    <div
-                      data-focus-guard="true"
-                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                      tabindex="-1"
-                    />
                   </div>
+                  <div
+                    data-focus-guard="true"
+                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                    tabindex="-1"
+                  />
                 </div>
               </div>
             </div>
@@ -2556,10 +2486,11 @@ Array [
             tabindex="0"
           >
             <div
+              class="euiDataGrid__virtualized"
               style="position:relative;height:500px;width:500px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
             >
               <div
-                style="height:136px;width:200px"
+                style="height:102px;width:200px"
               >
                 <div
                   class="euiDataGridHeader"
@@ -2642,60 +2573,56 @@ Array [
                   </div>
                 </div>
                 <div
-                  style="position:absolute;left:0;top:34px;height:34px;width:100px"
+                  class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:0;top:0px;height:34px;width:100px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiDataGridRowCell__content"
+                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiPopover__anchor euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
+                            <p
+                              class="euiScreenReaderOnly"
+                            >
+                              <span>
+                                Row: 1, Column: 1:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandContent"
-                            >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 1, Column: 1:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                0, A
-                              </div>
+                              class="euiDataGridRowCell__truncate"
+                            >
+                              0, A
                             </div>
-                            <div
-                              class="euiDataGridRowCell__expandButton"
+                          </div>
+                          <div
+                            class="euiDataGridRowCell__expandButton"
+                          >
+                            <button
+                              aria-hidden="true"
+                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                              tabindex="-1"
+                              title="Click or hit enter to interact with cell content"
+                              type="button"
                             >
-                              <button
+                              <span
                                 aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
-                            </div>
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="expandMini"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -2703,60 +2630,56 @@ Array [
                   </div>
                 </div>
                 <div
-                  style="position:absolute;left:100px;top:34px;height:34px;width:100px"
+                  class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:100px;top:0px;height:34px;width:100px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiDataGridRowCell__content"
+                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiPopover__anchor euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
+                            <p
+                              class="euiScreenReaderOnly"
+                            >
+                              <span>
+                                Row: 1, Column: 2:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandContent"
-                            >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 1, Column: 2:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                0, B
-                              </div>
+                              class="euiDataGridRowCell__truncate"
+                            >
+                              0, B
                             </div>
-                            <div
-                              class="euiDataGridRowCell__expandButton"
+                          </div>
+                          <div
+                            class="euiDataGridRowCell__expandButton"
+                          >
+                            <button
+                              aria-hidden="true"
+                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                              tabindex="-1"
+                              title="Click or hit enter to interact with cell content"
+                              type="button"
                             >
-                              <button
+                              <span
                                 aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
-                            </div>
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="expandMini"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -2764,60 +2687,56 @@ Array [
                   </div>
                 </div>
                 <div
-                  style="position:absolute;left:0;top:68px;height:34px;width:100px"
+                  class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:0;top:34px;height:34px;width:100px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiDataGridRowCell__content"
+                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiPopover__anchor euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
+                            <p
+                              class="euiScreenReaderOnly"
+                            >
+                              <span>
+                                Row: 2, Column: 1:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandContent"
-                            >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 2, Column: 1:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                1, A
-                              </div>
+                              class="euiDataGridRowCell__truncate"
+                            >
+                              1, A
                             </div>
-                            <div
-                              class="euiDataGridRowCell__expandButton"
+                          </div>
+                          <div
+                            class="euiDataGridRowCell__expandButton"
+                          >
+                            <button
+                              aria-hidden="true"
+                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                              tabindex="-1"
+                              title="Click or hit enter to interact with cell content"
+                              type="button"
                             >
-                              <button
+                              <span
                                 aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
-                            </div>
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="expandMini"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -2825,60 +2744,56 @@ Array [
                   </div>
                 </div>
                 <div
-                  style="position:absolute;left:100px;top:68px;height:34px;width:100px"
+                  class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:100px;top:34px;height:34px;width:100px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiDataGridRowCell__content"
+                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiPopover__anchor euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
+                            <p
+                              class="euiScreenReaderOnly"
+                            >
+                              <span>
+                                Row: 2, Column: 2:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandContent"
-                            >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 2, Column: 2:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                1, B
-                              </div>
+                              class="euiDataGridRowCell__truncate"
+                            >
+                              1, B
                             </div>
-                            <div
-                              class="euiDataGridRowCell__expandButton"
+                          </div>
+                          <div
+                            class="euiDataGridRowCell__expandButton"
+                          >
+                            <button
+                              aria-hidden="true"
+                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                              tabindex="-1"
+                              title="Click or hit enter to interact with cell content"
+                              type="button"
                             >
-                              <button
+                              <span
                                 aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
-                            </div>
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="expandMini"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -2886,60 +2801,56 @@ Array [
                   </div>
                 </div>
                 <div
-                  style="position:absolute;left:0;top:102px;height:34px;width:100px"
+                  class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:0;top:68px;height:34px;width:100px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiDataGridRowCell__content"
+                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiPopover__anchor euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
+                            <p
+                              class="euiScreenReaderOnly"
+                            >
+                              <span>
+                                Row: 3, Column: 1:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandContent"
-                            >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 3, Column: 1:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                2, A
-                              </div>
+                              class="euiDataGridRowCell__truncate"
+                            >
+                              2, A
                             </div>
-                            <div
-                              class="euiDataGridRowCell__expandButton"
+                          </div>
+                          <div
+                            class="euiDataGridRowCell__expandButton"
+                          >
+                            <button
+                              aria-hidden="true"
+                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                              tabindex="-1"
+                              title="Click or hit enter to interact with cell content"
+                              type="button"
                             >
-                              <button
+                              <span
                                 aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
-                            </div>
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="expandMini"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -2947,60 +2858,56 @@ Array [
                   </div>
                 </div>
                 <div
-                  style="position:absolute;left:100px;top:102px;height:34px;width:100px"
+                  class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:100px;top:68px;height:34px;width:100px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiDataGridRowCell__content"
+                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiPopover__anchor euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
+                            <p
+                              class="euiScreenReaderOnly"
+                            >
+                              <span>
+                                Row: 3, Column: 2:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandContent"
-                            >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 3, Column: 2:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                2, B
-                              </div>
+                              class="euiDataGridRowCell__truncate"
+                            >
+                              2, B
                             </div>
-                            <div
-                              class="euiDataGridRowCell__expandButton"
+                          </div>
+                          <div
+                            class="euiDataGridRowCell__expandButton"
+                          >
+                            <button
+                              aria-hidden="true"
+                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                              tabindex="-1"
+                              title="Click or hit enter to interact with cell content"
+                              type="button"
                             >
-                              <button
+                              <span
                                 aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
-                            </div>
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="expandMini"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -3143,10 +3050,11 @@ Array [
             tabindex="0"
           >
             <div
+              class="euiDataGrid__virtualized"
               style="position:relative;height:500px;width:500px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
             >
               <div
-                style="height:136px;width:200px"
+                style="height:102px;width:200px"
               >
                 <div
                   class="euiDataGridHeader"
@@ -3227,60 +3135,56 @@ Array [
                   </div>
                 </div>
                 <div
-                  style="position:absolute;left:0;top:34px;height:34px;width:100px"
+                  class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:0;top:0px;height:34px;width:100px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiDataGridRowCell__content"
+                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiPopover__anchor euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
+                            <p
+                              class="euiScreenReaderOnly"
+                            >
+                              <span>
+                                Row: 1, Column: 1:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandContent"
-                            >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 1, Column: 1:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                0, A
-                              </div>
+                              class="euiDataGridRowCell__truncate"
+                            >
+                              0, A
                             </div>
-                            <div
-                              class="euiDataGridRowCell__expandButton"
+                          </div>
+                          <div
+                            class="euiDataGridRowCell__expandButton"
+                          >
+                            <button
+                              aria-hidden="true"
+                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                              tabindex="-1"
+                              title="Click or hit enter to interact with cell content"
+                              type="button"
                             >
-                              <button
+                              <span
                                 aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
-                            </div>
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="expandMini"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -3288,60 +3192,56 @@ Array [
                   </div>
                 </div>
                 <div
-                  style="position:absolute;left:100px;top:34px;height:34px;width:100px"
+                  class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:100px;top:0px;height:34px;width:100px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiDataGridRowCell__content"
+                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiPopover__anchor euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
+                            <p
+                              class="euiScreenReaderOnly"
+                            >
+                              <span>
+                                Row: 1, Column: 2:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandContent"
-                            >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 1, Column: 2:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                0, B
-                              </div>
+                              class="euiDataGridRowCell__truncate"
+                            >
+                              0, B
                             </div>
-                            <div
-                              class="euiDataGridRowCell__expandButton"
+                          </div>
+                          <div
+                            class="euiDataGridRowCell__expandButton"
+                          >
+                            <button
+                              aria-hidden="true"
+                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                              tabindex="-1"
+                              title="Click or hit enter to interact with cell content"
+                              type="button"
                             >
-                              <button
+                              <span
                                 aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
-                            </div>
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="expandMini"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -3349,60 +3249,56 @@ Array [
                   </div>
                 </div>
                 <div
-                  style="position:absolute;left:0;top:68px;height:34px;width:100px"
+                  class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:0;top:34px;height:34px;width:100px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiDataGridRowCell__content"
+                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiPopover__anchor euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
+                            <p
+                              class="euiScreenReaderOnly"
+                            >
+                              <span>
+                                Row: 2, Column: 1:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandContent"
-                            >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 2, Column: 1:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                1, A
-                              </div>
+                              class="euiDataGridRowCell__truncate"
+                            >
+                              1, A
                             </div>
-                            <div
-                              class="euiDataGridRowCell__expandButton"
+                          </div>
+                          <div
+                            class="euiDataGridRowCell__expandButton"
+                          >
+                            <button
+                              aria-hidden="true"
+                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                              tabindex="-1"
+                              title="Click or hit enter to interact with cell content"
+                              type="button"
                             >
-                              <button
+                              <span
                                 aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
-                            </div>
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="expandMini"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -3410,60 +3306,56 @@ Array [
                   </div>
                 </div>
                 <div
-                  style="position:absolute;left:100px;top:68px;height:34px;width:100px"
+                  class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:100px;top:34px;height:34px;width:100px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiDataGridRowCell__content"
+                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiPopover__anchor euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
+                            <p
+                              class="euiScreenReaderOnly"
+                            >
+                              <span>
+                                Row: 2, Column: 2:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandContent"
-                            >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 2, Column: 2:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                1, B
-                              </div>
+                              class="euiDataGridRowCell__truncate"
+                            >
+                              1, B
                             </div>
-                            <div
-                              class="euiDataGridRowCell__expandButton"
+                          </div>
+                          <div
+                            class="euiDataGridRowCell__expandButton"
+                          >
+                            <button
+                              aria-hidden="true"
+                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                              tabindex="-1"
+                              title="Click or hit enter to interact with cell content"
+                              type="button"
                             >
-                              <button
+                              <span
                                 aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
-                            </div>
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="expandMini"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -3471,60 +3363,56 @@ Array [
                   </div>
                 </div>
                 <div
-                  style="position:absolute;left:0;top:102px;height:34px;width:100px"
+                  class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:0;top:68px;height:34px;width:100px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiDataGridRowCell__content"
+                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiPopover__anchor euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
+                            <p
+                              class="euiScreenReaderOnly"
+                            >
+                              <span>
+                                Row: 3, Column: 1:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandContent"
-                            >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 3, Column: 1:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                2, A
-                              </div>
+                              class="euiDataGridRowCell__truncate"
+                            >
+                              2, A
                             </div>
-                            <div
-                              class="euiDataGridRowCell__expandButton"
+                          </div>
+                          <div
+                            class="euiDataGridRowCell__expandButton"
+                          >
+                            <button
+                              aria-hidden="true"
+                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                              tabindex="-1"
+                              title="Click or hit enter to interact with cell content"
+                              type="button"
                             >
-                              <button
+                              <span
                                 aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
-                            </div>
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="expandMini"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
@@ -3532,60 +3420,56 @@ Array [
                   </div>
                 </div>
                 <div
-                  style="position:absolute;left:100px;top:102px;height:34px;width:100px"
+                  class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
+                  data-test-subj="dataGridRowCell"
+                  role="gridcell"
+                  style="position:absolute;left:100px;top:68px;height:34px;width:100px"
+                  tabindex="-1"
                 >
                   <div
-                    class="euiDataGridRowCell"
-                    data-test-subj="dataGridRowCell"
-                    role="gridcell"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiDataGridRowCell__content"
+                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiPopover__anchor euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
+                            <p
+                              class="euiScreenReaderOnly"
+                            >
+                              <span>
+                                Row: 3, Column: 2:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandContent"
-                            >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 3, Column: 2:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                2, B
-                              </div>
+                              class="euiDataGridRowCell__truncate"
+                            >
+                              2, B
                             </div>
-                            <div
-                              class="euiDataGridRowCell__expandButton"
+                          </div>
+                          <div
+                            class="euiDataGridRowCell__expandButton"
+                          >
+                            <button
+                              aria-hidden="true"
+                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                              tabindex="-1"
+                              title="Click or hit enter to interact with cell content"
+                              type="button"
                             >
-                              <button
+                              <span
                                 aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
-                            </div>
+                                class="euiButtonIcon__icon"
+                                data-euiicon-type="expandMini"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx
index 3e32e6f98a7..4d15e5fdc2a 100644
--- a/src/components/datagrid/data_grid.test.tsx
+++ b/src/components/datagrid/data_grid.test.tsx
@@ -19,7 +19,7 @@
 
 import React, { useEffect, useState } from 'react';
 import { mount, ReactWrapper, render } from 'enzyme';
-import { EuiDataGrid } from './';
+import { EuiDataGrid, EuiDataGridProps } from './';
 import {
   findTestSubject,
   requiredProps,
@@ -28,13 +28,12 @@ import {
 import { EuiDataGridColumnResizer } from './data_grid_column_resizer';
 import { keys } from '../../services';
 import { act } from 'react-dom/test-utils';
-import cheerio from 'cheerio';
 
 function getFocusableCell(component: ReactWrapper) {
   return findTestSubject(component, 'dataGridRowCell').find('[tabIndex=0]');
 }
 
-function extractGridData(datagrid: ReactWrapper) {
+function extractGridData(datagrid: ReactWrapper<EuiDataGridProps>) {
   const rows: string[][] = [];
 
   const headerCells = findTestSubject(datagrid, 'dataGridHeaderCell', '|=');
@@ -46,15 +45,18 @@ function extractGridData(datagrid: ReactWrapper) {
   );
   rows.push(headerRow);
 
-  const gridRows = findTestSubject(datagrid, 'dataGridRow');
-  gridRows.forEach((row: any) => {
+  // reduce the virtualized grid of cells into rows
+  const columnCount = datagrid.prop('columnVisibility').visibleColumns.length;
+  const gridCells = findTestSubject(datagrid, 'dataGridRowCell');
+  const visibleRowsCount = gridCells.length / columnCount;
+  for (let i = 0; i < visibleRowsCount; i++) {
     const rowContent: string[] = [];
-    const cells = findTestSubject(row, 'dataGridRowCell');
-    cells.forEach((cell: any) =>
-      rowContent.push(cell.find('[data-test-subj="cell-content"]').text())
-    );
+    for (let j = i * columnCount; j < (i + 1) * columnCount; j++) {
+      const cell = gridCells.at(j);
+      rowContent.push(cell.find('[data-test-subj="cell-content"]').text());
+    }
     rows.push(rowContent);
-  });
+  }
 
   return rows;
 }
@@ -378,7 +380,7 @@ function setColumnVisibility(
 }
 
 function moveColumnToIndex(
-  datagrid: ReactWrapper,
+  datagrid: ReactWrapper<EuiDataGridProps>,
   columnId: string,
   nextIndex: number
 ) {
@@ -481,38 +483,6 @@ describe('EuiDataGrid', () => {
       expect(component).toMatchSnapshot();
     });
 
-    it('renders with appropriate role structure', () => {
-      const component = render(
-        <EuiDataGrid
-          {...requiredProps}
-          columns={[{ id: 'A' }, { id: 'B' }]}
-          columnVisibility={{
-            visibleColumns: ['A', 'B'],
-            setVisibleColumns: () => {},
-          }}
-          rowCount={3}
-          renderCellValue={({ rowIndex, columnId }) =>
-            `${rowIndex}, ${columnId}`
-          }
-        />
-      );
-
-      // purposefully not using data-test-subj attrs to test role semantics
-      const grid = component.find('[role="grid"]');
-      const rows = grid.children('[role="row"]'); // technically, this test should also allow role=rowgroup but we don't currently use rowgroups
-
-      expect(rows.length).not.toBe(0);
-      expect(grid.children().length).toBe(rows.length);
-
-      rows.each((i, element) => {
-        const $element = cheerio(element);
-        const allCells = $element.children(
-          '[role="columnheader"], [role="rowheader"], [role="gridcell"]'
-        );
-        expect($element.children().length).toBe(allCells.length);
-      });
-    });
-
     it('renders and applies custom props', () => {
       const component = mount(
         <EuiDataGrid
@@ -546,54 +516,66 @@ describe('EuiDataGrid', () => {
       ).toMatchInlineSnapshot(`
         Array [
           Object {
-            "className": "euiDataGridRowCell customClass",
+            "className": "euiDataGridRowCell euiDataGridRowCell--firstColumn customClass",
             "data-test-subj": "dataGridRowCell",
             "onBlur": [Function],
             "onFocus": [Function],
             "onKeyDown": [Function],
             "role": "gridcell",
             "style": Object {
-              "color": "red",
-              "width": "100px",
+              "height": 34,
+              "left": 0,
+              "position": "absolute",
+              "top": "0px",
+              "width": 100,
             },
             "tabIndex": -1,
           },
           Object {
-            "className": "euiDataGridRowCell customClass",
+            "className": "euiDataGridRowCell euiDataGridRowCell--lastColumn customClass",
             "data-test-subj": "dataGridRowCell",
             "onBlur": [Function],
             "onFocus": [Function],
             "onKeyDown": [Function],
             "role": "gridcell",
             "style": Object {
-              "color": "blue",
-              "width": "100px",
+              "height": 34,
+              "left": 100,
+              "position": "absolute",
+              "top": "0px",
+              "width": 100,
             },
             "tabIndex": -1,
           },
           Object {
-            "className": "euiDataGridRowCell customClass",
+            "className": "euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn customClass",
             "data-test-subj": "dataGridRowCell",
             "onBlur": [Function],
             "onFocus": [Function],
             "onKeyDown": [Function],
             "role": "gridcell",
             "style": Object {
-              "color": "red",
-              "width": "100px",
+              "height": 34,
+              "left": 0,
+              "position": "absolute",
+              "top": "34px",
+              "width": 100,
             },
             "tabIndex": -1,
           },
           Object {
-            "className": "euiDataGridRowCell customClass",
+            "className": "euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn customClass",
             "data-test-subj": "dataGridRowCell",
             "onBlur": [Function],
             "onFocus": [Function],
             "onKeyDown": [Function],
             "role": "gridcell",
             "style": Object {
-              "color": "blue",
-              "width": "100px",
+              "height": 34,
+              "left": 100,
+              "position": "absolute",
+              "top": "34px",
+              "width": 100,
             },
             "tabIndex": -1,
           },
@@ -753,6 +735,7 @@ describe('EuiDataGrid', () => {
       ).toBe(0);
 
       // style selector
+      component.debug();
       expect(
         findTestSubject(component, 'dataGridStyleSelectorButton').length
       ).toBe(1);
@@ -763,7 +746,7 @@ describe('EuiDataGrid', () => {
       ).toBe(1);
     });
 
-    describe('schema schema classnames', () => {
+    describe('schema classnames', () => {
       it('applies classnames from explicit schemas', () => {
         const component = mount(
           <EuiDataGrid
@@ -788,12 +771,18 @@ describe('EuiDataGrid', () => {
           .map((x) => x.props().className);
         expect(gridCellClassNames).toMatchInlineSnapshot(`
           Array [
-            "euiDataGridRowCell euiDataGridRowCell--numeric",
-            "euiDataGridRowCell euiDataGridRowCell--customFormatName",
-            "euiDataGridRowCell euiDataGridRowCell--numeric",
-            "euiDataGridRowCell euiDataGridRowCell--customFormatName",
-            "euiDataGridRowCell euiDataGridRowCell--numeric",
-            "euiDataGridRowCell euiDataGridRowCell--customFormatName",
+            "euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell--lastColumn",
+            "euiDataGridRowCell euiDataGridRowCell--customFormatName euiDataGridRowCell--lastColumn",
+            "euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn",
+            "euiDataGridRowCell euiDataGridRowCell--customFormatName euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn",
+            "euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell--lastColumn",
+            "euiDataGridRowCell euiDataGridRowCell--customFormatName euiDataGridRowCell--lastColumn",
           ]
         `);
       });
@@ -826,12 +815,12 @@ describe('EuiDataGrid', () => {
           .map((x) => x.props().className);
         expect(gridCellClassNames).toMatchInlineSnapshot(`
           Array [
-            "euiDataGridRowCell euiDataGridRowCell--numeric",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--firstColumn",
             "euiDataGridRowCell euiDataGridRowCell--boolean",
-            "euiDataGridRowCell",
-            "euiDataGridRowCell euiDataGridRowCell--numeric",
-            "euiDataGridRowCell euiDataGridRowCell--boolean",
-            "euiDataGridRowCell",
+            "euiDataGridRowCell euiDataGridRowCell--lastColumn",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--boolean euiDataGridRowCell--stripe",
+            "euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn",
           ]
         `);
       });
@@ -858,10 +847,10 @@ describe('EuiDataGrid', () => {
           .map((x) => x.props().className);
         expect(gridCellClassNames).toMatchInlineSnapshot(`
           Array [
-            "euiDataGridRowCell euiDataGridRowCell--numeric",
-            "euiDataGridRowCell euiDataGridRowCell--alphanumeric",
-            "euiDataGridRowCell euiDataGridRowCell--numeric",
-            "euiDataGridRowCell euiDataGridRowCell--alphanumeric",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--alphanumeric euiDataGridRowCell--lastColumn",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--alphanumeric euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn",
           ]
         `);
       });
@@ -895,7 +884,7 @@ describe('EuiDataGrid', () => {
           .map((x) => x.props().className);
         expect(gridCellClassNames).toMatchInlineSnapshot(`
           Array [
-            "euiDataGridRowCell euiDataGridRowCell--numeric",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--firstColumn",
             "euiDataGridRowCell euiDataGridRowCell--boolean",
             "euiDataGridRowCell euiDataGridRowCell--currency",
             "euiDataGridRowCell euiDataGridRowCell--datetime",
@@ -943,8 +932,8 @@ describe('EuiDataGrid', () => {
           .map((x) => x.props().className);
         expect(gridCellClassNames).toMatchInlineSnapshot(`
           Array [
-            "euiDataGridRowCell euiDataGridRowCell--numeric",
-            "euiDataGridRowCell euiDataGridRowCell--ipaddress",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--ipaddress euiDataGridRowCell--lastColumn",
           ]
         `);
       });
@@ -974,6 +963,14 @@ describe('EuiDataGrid', () => {
             "Column 1",
             "Column 2",
           ],
+          Array [
+            "Hello, Row 0-Column 1!",
+            "Hello, Row 0-Column 2!",
+          ],
+          Array [
+            "Hello, Row 1-Column 1!",
+            "Hello, Row 1-Column 2!",
+          ],
         ]
       `);
     });
@@ -2060,7 +2057,7 @@ describe('EuiDataGrid', () => {
   });
 
   describe('keyboard controls', () => {
-    it('supports simple arrow navigation', () => {
+    it('supports simple arrow navigation', async () => {
       let pagination = {
         pageIndex: 0,
         pageSize: 3,
@@ -2154,9 +2151,9 @@ describe('EuiDataGrid', () => {
       ).toEqual('0, A');
 
       // move down and to the end of the row
-      focusableCell
-        .simulate('keydown', { key: keys.ARROW_DOWN })
-        .simulate('keydown', { key: keys.END });
+      focusableCell.simulate('keydown', { key: keys.ARROW_DOWN });
+      focusableCell = getFocusableCell(component);
+      focusableCell.simulate('keydown', { key: keys.END });
       focusableCell = getFocusableCell(component);
       expect(
         focusableCell.find('[data-test-subj="cell-content"]').text()
diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index e5a95612d36..e7a26ba21fe 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -662,7 +662,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
   } = props;
 
   const [isFullScreen, setIsFullScreen] = useState(false);
-  const [gridWidth, setGridWidth] = useState(IS_JEST_ENVIRONMENT ? 500 : 0);
+  const [gridWidth, setGridWidth] = useState(0);
 
   // default DOM layout rules allow block content to naturally expand to the full document width
   // while height does not automatically expand; this gives us a little extra work when managing height:
@@ -670,9 +670,11 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
   // if no `height` is set - or is unset - we need to unapply any existing `gridHeight` value
   // this triggers a double re-render when the grid is switched from constrained to unconstrained
   // but in reality ... maybe don't do that?
-  const [gridHeight, setGridHeight] = useState(IS_JEST_ENVIRONMENT ? 500 : 0);
+  const [gridHeight, setGridHeight] = useState(0);
   const pageSize = pagination?.pageSize;
-  const resetGridHeight = useCallback(() => setGridHeight(0), []);
+  const resetGridHeight = useCallback(() => {
+    setGridHeight(0);
+  }, []);
   useEffect(() => {
     if (height == null) {
       // if already 0 this update will be ignored
@@ -783,7 +785,9 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
     }
   }, [sizeIsStable, resizeRef, gridDimensions]);
 
-  const hasRoomForGridControls = gridWidth > minSizeForControls || isFullScreen;
+  const hasRoomForGridControls = IS_JEST_ENVIRONMENT
+    ? true
+    : gridWidth > minSizeForControls || isFullScreen;
 
   const [columnWidths, setColumnWidth] = useColumnWidths(
     columns,
diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index b9ee10b9f96..8451a60ea17 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -263,6 +263,7 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
 
 const INITIAL_ROW_HEIGHT = 34;
 const SCROLLBAR_HEIGHT = 15;
+const IS_JEST_ENVIRONMENT = global.hasOwnProperty('_isJest');
 
 export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
   props
@@ -542,9 +543,9 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
           columns.length +
           trailingControlColumns.length
         }
-        width={gridWidth}
+        width={IS_JEST_ENVIRONMENT ? 500 : gridWidth}
         columnWidth={getWidth}
-        height={height}
+        height={IS_JEST_ENVIRONMENT ? 500 : height}
         rowHeight={getRowHeight}
         itemData={{
           setRowHeight,

From adeb437a7243ff962114128ee77bf247a1e68aad Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Wed, 23 Dec 2020 12:54:38 -0700
Subject: [PATCH 26/54] Fix unit tests

---
 src/components/datagrid/data_grid.tsx         | 16 +---------
 src/components/datagrid/data_grid_body.tsx    | 32 ++++++++++---------
 .../datagrid/data_grid_cell_popover.tsx       |  3 +-
 src/components/datagrid/data_grid_context.tsx | 18 ++++++++---
 .../data_grid_control_header_cell.tsx         |  2 +-
 .../datagrid/data_grid_header_cell.tsx        |  2 +-
 src/components/datagrid/data_grid_schema.tsx  |  3 +-
 7 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index e7a26ba21fe..382e5e3b880 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -538,24 +538,10 @@ const useFocus = (
   EuiDataGridFocusedCell | undefined,
   (focusedCell: EuiDataGridFocusedCell) => void
 ] => {
-  const [focusedCell, _setFocusedCell] = useState<
+  const [focusedCell, setFocusedCell] = useState<
     EuiDataGridFocusedCell | undefined
   >(undefined);
 
-  const setFocusedCell = useCallback((focusedCell: EuiDataGridFocusedCell) => {
-    _setFocusedCell((previousCell) => {
-      // verify that the cell has changed
-      if (
-        previousCell != null &&
-        previousCell[0] === focusedCell[0] &&
-        previousCell[1] === focusedCell[1]
-      ) {
-        return previousCell;
-      }
-      return focusedCell;
-    });
-  }, []);
-
   const previousCell = useRef<EuiDataGridFocusedCell | undefined>(undefined);
   useEffect(() => {
     if (previousCell.current) {
diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index 8451a60ea17..2663ad84812 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -57,7 +57,7 @@ import { useMutationObserver } from '../observer/mutation_observer';
 import { EuiText } from '../text';
 import {
   DataGridSortingContext,
-  DataGridHeaderRowHeightContext,
+  DataGridWrapperRowsContext,
 } from './data_grid_context';
 import { useResizeObserver } from '../observer/resize_observer';
 
@@ -123,7 +123,7 @@ const DefaultColumnFormatter: EuiDataGridPopoverContent = ({ children }) => {
 
 const Cell: FunctionComponent<GridChildComponentProps> = ({
   columnIndex,
-  rowIndex: _rowIndex,
+  rowIndex: visibleRowIndex,
   style,
   data,
 }) => {
@@ -142,12 +142,12 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
     setRowHeight,
   } = data;
 
-  const headerRowHeight = useContext(DataGridHeaderRowHeightContext);
+  const { headerRowHeight } = useContext(DataGridWrapperRowsContext);
 
-  _rowIndex += rowOffset;
-  const rowIndex = rowMap.hasOwnProperty(_rowIndex)
-    ? rowMap[_rowIndex]
-    : _rowIndex;
+  const offsetRowIndex = visibleRowIndex + rowOffset;
+  const rowIndex = rowMap.hasOwnProperty(offsetRowIndex)
+    ? rowMap[offsetRowIndex]
+    : offsetRowIndex;
 
   let cellContent;
 
@@ -179,7 +179,7 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
     cellContent = (
       <EuiDataGridCell
         rowIndex={rowIndex}
-        visibleRowIndex={_rowIndex}
+        visibleRowIndex={visibleRowIndex}
         colIndex={columnIndex}
         columnId={id}
         popoverContent={DefaultColumnFormatter}
@@ -204,7 +204,7 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
     cellContent = (
       <EuiDataGridCell
         rowIndex={rowIndex}
-        visibleRowIndex={_rowIndex}
+        visibleRowIndex={visibleRowIndex}
         colIndex={columnIndex}
         columnId={id}
         popoverContent={DefaultColumnFormatter}
@@ -239,7 +239,7 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
     cellContent = (
       <EuiDataGridCell
         rowIndex={rowIndex}
-        visibleRowIndex={_rowIndex}
+        visibleRowIndex={visibleRowIndex}
         colIndex={columnIndex}
         columnId={columnId}
         column={column}
@@ -431,7 +431,6 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     if (renderFooterCellValue == null) return null;
     return (
       <EuiDataGridFooterRow
-        key="footerRow"
         ref={setFooterRowRef}
         leadingControlColumns={leadingControlColumns}
         trailingControlColumns={trailingControlColumns}
@@ -463,7 +462,9 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     () =>
       forwardRef<HTMLDivElement, { style: { height: number } }>(
         ({ children, style, ...rest }, ref) => {
-          const headerRowHeight = useContext(DataGridHeaderRowHeightContext);
+          const { headerRowHeight, headerRow, footerRow } = useContext(
+            DataGridWrapperRowsContext
+          );
           return (
             <>
               <div
@@ -481,7 +482,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
           );
         }
       ),
-    [headerRow, footerRow]
+    []
   );
 
   const gridRef = useRef<Grid>(null);
@@ -533,7 +534,8 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
       footerRowHeight;
 
   return (
-    <DataGridHeaderRowHeightContext.Provider value={headerRowHeight}>
+    <DataGridWrapperRowsContext.Provider
+      value={{ headerRowHeight, headerRow, footerRow }}>
       <Grid
         ref={gridRef}
         innerElementType={InnerElement}
@@ -566,6 +568,6 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
         rowCount={visibleRowIndices.length}>
         {Cell}
       </Grid>
-    </DataGridHeaderRowHeightContext.Provider>
+    </DataGridWrapperRowsContext.Provider>
   );
 };
diff --git a/src/components/datagrid/data_grid_cell_popover.tsx b/src/components/datagrid/data_grid_cell_popover.tsx
index f8e9afe8864..60724d4627e 100644
--- a/src/components/datagrid/data_grid_cell_popover.tsx
+++ b/src/components/datagrid/data_grid_cell_popover.tsx
@@ -78,8 +78,7 @@ export function EuiDataGridCellPopover({
           event.stopPropagation();
           closePopover();
         }
-      }}
-    >
+      }}>
       {popoverIsOpen ? (
         <>
           <PopoverContent cellContentsElement={cellContentsRef!}>
diff --git a/src/components/datagrid/data_grid_context.tsx b/src/components/datagrid/data_grid_context.tsx
index 49f1989658d..07f91351286 100644
--- a/src/components/datagrid/data_grid_context.tsx
+++ b/src/components/datagrid/data_grid_context.tsx
@@ -17,23 +17,33 @@
  * under the License.
  */
 
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { EuiDataGridFocusedCell, EuiDataGridSorting } from './data_grid_types';
 
 export interface DataGridFocusContextShape {
   setFocusedCell: (cell: EuiDataGridFocusedCell) => void;
-  onFocusUpdate: (cell: EuiDataGridFocusedCell, updateFocus: Function) => void;
+  onFocusUpdate: (
+    cell: EuiDataGridFocusedCell,
+    updateFocus: Function
+  ) => () => void;
 }
 
 export const DataGridFocusContext = React.createContext<
   DataGridFocusContextShape
 >({
   setFocusedCell: () => {},
-  onFocusUpdate: () => {},
+  onFocusUpdate: () => () => {},
 });
 
 export const DataGridSortingContext = React.createContext<
   EuiDataGridSorting | undefined
 >(undefined);
 
-export const DataGridHeaderRowHeightContext = React.createContext<number>(0);
+export interface DataGridWrapperRowsContentsShape {
+  headerRowHeight: number;
+  headerRow: ReactElement;
+  footerRow: ReactElement | null;
+}
+export const DataGridWrapperRowsContext = React.createContext<
+  DataGridWrapperRowsContentsShape
+>({ headerRow: <div />, headerRowHeight: 0, footerRow: null });
diff --git a/src/components/datagrid/data_grid_control_header_cell.tsx b/src/components/datagrid/data_grid_control_header_cell.tsx
index ba358ef9365..f469cb702f9 100644
--- a/src/components/datagrid/data_grid_control_header_cell.tsx
+++ b/src/components/datagrid/data_grid_control_header_cell.tsx
@@ -176,7 +176,7 @@ export const EuiDataGridControlHeaderCell: FunctionComponent<EuiDataGridControlH
         headerNode.removeEventListener('keyup', onKeyUp);
       };
     }
-  }, [headerIsInteractive, isFocused, setIsCellEntered, index]);
+  }, [setFocusedCell, headerIsInteractive, isFocused, setIsCellEntered, index]);
 
   return (
     <div
diff --git a/src/components/datagrid/data_grid_header_cell.tsx b/src/components/datagrid/data_grid_header_cell.tsx
index e0dd67903ae..35aec8b1d8c 100644
--- a/src/components/datagrid/data_grid_header_cell.tsx
+++ b/src/components/datagrid/data_grid_header_cell.tsx
@@ -125,7 +125,7 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
 
   const [isFocused, setIsFocused] = useState(false);
   useEffect(() => {
-    onFocusUpdate([index, -1], (isFocused: boolean) => {
+    return onFocusUpdate([index, -1], (isFocused: boolean) => {
       setIsFocused(isFocused);
     });
   }, [index, onFocusUpdate]);
diff --git a/src/components/datagrid/data_grid_schema.tsx b/src/components/datagrid/data_grid_schema.tsx
index 6ede9cd2c39..c25e232d879 100644
--- a/src/components/datagrid/data_grid_schema.tsx
+++ b/src/components/datagrid/data_grid_schema.tsx
@@ -297,7 +297,8 @@ export function useDetectSchema(
   autoDetectSchema: boolean
 ) {
   const inMemorySkipColumns =
-    inMemory?.skipColumns || (emptyArray as EuiDataGridInMemory['skipColumns']);
+    inMemory?.skipColumns ??
+    (emptyArray as NonNullable<EuiDataGridInMemory['skipColumns']>);
 
   const schema = useMemo(() => {
     const schema: EuiDataGridSchema = {};

From 42a0bb1de6ef959814b8da6f392a680fa9d7d8c9 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Wed, 23 Dec 2020 13:25:33 -0700
Subject: [PATCH 27/54] Quick react hook dependency cleanup

---
 src/components/datagrid/data_grid_body.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index 2663ad84812..c4012eb781f 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -386,7 +386,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     }
 
     return rowMap;
-  }, [sorting, inMemoryValues, schema, schemaDetectors]);
+  }, [sorting, inMemoryValues, schema, schemaDetectors, inMemory?.level]);
 
   const mergedPopoverContents = useMemo(
     () => ({

From 33176bc48dbf1ff824a4671abd920dd3228a11df Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Tue, 12 Jan 2021 14:29:24 +0100
Subject: [PATCH 28/54] only show buttons and popover if necessary

---
 src/components/datagrid/data_grid_cell.tsx | 82 +++++++++++++++-------
 1 file changed, 55 insertions(+), 27 deletions(-)

diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index 2f3964e7589..14bd07f6ac9 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -100,6 +100,7 @@ interface EuiDataGridCellState {
   popoverIsOpen: boolean; // is expansion popover open
   isFocused: boolean; // tracks if this cell has focus or not, used to enable tabIndex on the cell
   isEntered: boolean; // enables focus trap for non-expandable cells with multiple interactive elements
+  isHovered: boolean;
   disableCellTabIndex: boolean; // disables tabIndex on the wrapping cell, used for focus management of a single interactive child
 }
 
@@ -142,6 +143,7 @@ export class EuiDataGridCell extends Component<
     popoverIsOpen: false,
     isFocused: false,
     isEntered: false,
+    isHovered: false,
     disableCellTabIndex: false,
   };
   unsubscribeCell?: Function = () => {};
@@ -251,6 +253,7 @@ export class EuiDataGridCell extends Component<
     if (nextState.popoverIsOpen !== this.state.popoverIsOpen) return true;
     if (nextState.isEntered !== this.state.isEntered) return true;
     if (nextState.isFocused !== this.state.isFocused) return true;
+    if (nextState.isHovered !== this.state.isHovered) return true;
     if (nextState.disableCellTabIndex !== this.state.disableCellTabIndex)
       return true;
 
@@ -457,6 +460,13 @@ export class EuiDataGridCell extends Component<
       </EuiFocusTrap>
     );
 
+    const showCellButtons =
+      this.state.isFocused || this.state.isEntered || this.state.isHovered;
+
+      if (showCellButtons) {
+        console.log('showing cell buttons for ' + rowIndex + ',' + colIndex);
+      }
+
     if (isExpandable || (column && column.cellActions)) {
       anchorContent = (
         <div className="euiDataGridRowCell__expandFlex">
@@ -478,39 +488,49 @@ export class EuiDataGridCell extends Component<
               );
             }}
           </EuiMutationObserver>
-          <EuiDataGridCellButtons
-            rowIndex={rowIndex}
-            column={column}
-            popoverIsOpen={this.state.popoverIsOpen}
-            closePopover={() => this.setState({ popoverIsOpen: false })}
-            onExpandClick={() => {
-              this.setState(({ popoverIsOpen }) => ({
-                popoverIsOpen: !popoverIsOpen,
-              }));
-            }}
-          />
+          {showCellButtons && (
+            <EuiDataGridCellButtons
+              rowIndex={rowIndex}
+              column={column}
+              popoverIsOpen={this.state.popoverIsOpen}
+              closePopover={() => this.setState({ popoverIsOpen: false })}
+              onExpandClick={() => {
+                this.setState(({ popoverIsOpen }) => ({
+                  popoverIsOpen: !popoverIsOpen,
+                }));
+              }}
+            />
+          )}
         </div>
       );
     }
 
     let innerContent = anchorContent;
     if (isExpandable || (column && column.cellActions)) {
-      innerContent = (
-        <div className="euiDataGridRowCell__content">
-          <EuiDataGridCellPopover
-            anchorContent={anchorContent}
-            cellContentProps={cellContentProps}
-            cellContentsRef={this.cellContentsRef}
-            closePopover={() => this.setState({ popoverIsOpen: false })}
-            column={column}
-            panelRefFn={(ref) => (this.popoverPanelRef.current = ref)}
-            popoverIsOpen={this.state.popoverIsOpen}
-            rowIndex={rowIndex}
-            renderCellValue={rest.renderCellValue}
-            popoverContent={PopoverContent}
-          />
-        </div>
-      );
+      if (this.state.popoverIsOpen) {
+        innerContent = (
+          <div className="euiDataGridRowCell__content">
+            <EuiDataGridCellPopover
+              anchorContent={anchorContent}
+              cellContentProps={cellContentProps}
+              cellContentsRef={this.cellContentsRef}
+              closePopover={() => this.setState({ popoverIsOpen: false })}
+              column={column}
+              panelRefFn={(ref) => (this.popoverPanelRef.current = ref)}
+              popoverIsOpen={this.state.popoverIsOpen}
+              rowIndex={rowIndex}
+              renderCellValue={rest.renderCellValue}
+              popoverContent={PopoverContent}
+            />
+          </div>
+        );
+      } else {
+        innerContent = (
+          <div className="euiDataGridRowCell__content">
+            <div className="euiDataGridRowCell__expand">{anchorContent}</div>
+          </div>
+        );
+      }
     }
 
     return (
@@ -524,6 +544,14 @@ export class EuiDataGridCell extends Component<
         data-test-subj="dataGridRowCell"
         onKeyDown={handleCellKeyDown}
         onFocus={this.onFocus}
+        onMouseEnter={() => {
+          console.log('hovering');
+          this.setState({ isHovered: true });
+        }}
+        onMouseLeave={() => {
+          console.log('leaving');
+          this.setState({ isHovered: false });
+        }}
         onBlur={this.onBlur}>
         {innerContent}
       </div>

From 1f3ba207bb6a0be39077125ef4e9ff1b2663c264 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Tue, 12 Jan 2021 14:45:31 +0100
Subject: [PATCH 29/54] improve

---
 src/components/datagrid/data_grid_cell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index 14bd07f6ac9..864f44f1029 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -461,7 +461,7 @@ export class EuiDataGridCell extends Component<
     );
 
     const showCellButtons =
-      this.state.isFocused || this.state.isEntered || this.state.isHovered;
+      this.state.isFocused || this.state.isEntered || this.state.isHovered || this.state.popoverIsOpen;
 
       if (showCellButtons) {
         console.log('showing cell buttons for ' + rowIndex + ',' + colIndex);

From 3c47649a0cb8e0c34a3a2312fd7a8e0523752520 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Tue, 12 Jan 2021 16:35:07 +0100
Subject: [PATCH 30/54] make sure buttons and popover are only rendered if
 necessary

---
 .../datagrid/_data_grid_data_row.scss         | 33 +++++-----
 src/components/datagrid/data_grid_cell.tsx    | 62 ++++++++++++++-----
 .../datagrid/data_grid_cell_buttons.tsx       | 27 ++++----
 3 files changed, 79 insertions(+), 43 deletions(-)

diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index a70a89f09b4..f890b14fbc1 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/src/components/datagrid/_data_grid_data_row.scss
@@ -34,30 +34,15 @@
     margin-top: -1px;
   }
 
-  &:focus,
-  &:hover {
-
-    .euiDataGridRowCell__expandButtonIcon {
-      margin-left: $euiDataGridCellPaddingM;
-      width: $euiSizeM;
-      background: $euiColorPrimary; // Needed to prevent the bg-color of .euiButtonIcon--text:focus
-    }
-
-    .euiDataGridRowCell__actionButtonIcon {
-      margin-left: $euiDataGridCellPaddingM;
-      width: $euiSizeM;
-    }
-  }
-
   // Only add the transition effect on hover, so that it is instantaneous on focus
   // Long delays on hover to mitigate the accordion effect
   &:hover {
     .euiDataGridRowCell__expandButtonIcon {
-      transition: margin $euiAnimSpeedFast 1000ms, width $euiAnimSpeedFast 1000ms;
+      transition: margin $euiAnimSpeedFast 500ms, width $euiAnimSpeedFast 500ms;
     }
 
     .euiDataGridRowCell__actionButtonIcon {
-      transition: margin $euiAnimSpeedFast 1000ms, width $euiAnimSpeedFast 1000ms;
+      transition: margin $euiAnimSpeedFast 500ms, width $euiAnimSpeedFast 500ms;
     }
   }
 
@@ -116,6 +101,20 @@
 .euiDataGridRowCell__expandButton {
   display: flex;
   flex-grow: 0;
+
+  &.euiDataGridRowCell__expandButton-isHoveredOrFocused {
+    .euiDataGridRowCell__expandButtonIcon {
+      margin-left: $euiDataGridCellPaddingM;
+      width: $euiSizeM;
+      background: $euiColorPrimary; // Needed to prevent the bg-color of .euiButtonIcon--text:focus
+    }
+
+    .euiDataGridRowCell__actionButtonIcon {
+      margin-left: $euiDataGridCellPaddingM;
+      width: $euiSizeM;
+    }
+  }
+
 }
 
 .euiDataGridRowCell__expandButtonIcon {
diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index 864f44f1029..899fde2c2b8 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -98,9 +98,11 @@ export interface EuiDataGridCellProps {
 interface EuiDataGridCellState {
   cellProps: CommonProps & HTMLAttributes<HTMLDivElement>;
   popoverIsOpen: boolean; // is expansion popover open
+  renderPopoverOpen: boolean; // wait one render cycle to actuall render the popover as open
   isFocused: boolean; // tracks if this cell has focus or not, used to enable tabIndex on the cell
   isEntered: boolean; // enables focus trap for non-expandable cells with multiple interactive elements
   isHovered: boolean;
+  renderIsHovered: boolean;
   disableCellTabIndex: boolean; // disables tabIndex on the wrapping cell, used for focus management of a single interactive child
 }
 
@@ -141,9 +143,11 @@ export class EuiDataGridCell extends Component<
   state: EuiDataGridCellState = {
     cellProps: {},
     popoverIsOpen: false,
+    renderPopoverOpen: false,
     isFocused: false,
     isEntered: false,
     isHovered: false,
+    renderIsHovered: false,
     disableCellTabIndex: false,
   };
   unsubscribeCell?: Function = () => {};
@@ -251,9 +255,12 @@ export class EuiDataGridCell extends Component<
 
     if (nextState.cellProps !== this.state.cellProps) return true;
     if (nextState.popoverIsOpen !== this.state.popoverIsOpen) return true;
+    if (nextState.renderPopoverOpen !== this.state.renderPopoverOpen)
+      return true;
     if (nextState.isEntered !== this.state.isEntered) return true;
     if (nextState.isFocused !== this.state.isFocused) return true;
     if (nextState.isHovered !== this.state.isHovered) return true;
+    if (nextState.renderIsHovered !== this.state.renderIsHovered) return true;
     if (nextState.disableCellTabIndex !== this.state.disableCellTabIndex)
       return true;
 
@@ -313,6 +320,14 @@ export class EuiDataGridCell extends Component<
     }
   };
 
+  closePopover = () => {
+    this.setState({ popoverIsOpen: false }, () =>
+      this.setState(() => ({
+        renderPopoverOpen: false,
+      }))
+    )
+  };
+
   render() {
     const {
       width,
@@ -355,7 +370,11 @@ export class EuiDataGridCell extends Component<
           case keys.ENTER:
           case keys.F2:
             event.preventDefault();
-            this.setState({ popoverIsOpen: true });
+            this.setState({ popoverIsOpen: true }, () =>
+              this.setState(({ popoverIsOpen }) => ({
+                renderPopoverOpen: popoverIsOpen,
+              }))
+            );
             break;
         }
       } else {
@@ -461,11 +480,15 @@ export class EuiDataGridCell extends Component<
     );
 
     const showCellButtons =
-      this.state.isFocused || this.state.isEntered || this.state.isHovered || this.state.popoverIsOpen;
-
-      if (showCellButtons) {
-        console.log('showing cell buttons for ' + rowIndex + ',' + colIndex);
-      }
+      this.state.isFocused ||
+      this.state.isEntered ||
+      this.state.isHovered ||
+      this.state.popoverIsOpen;
+
+    if (showCellButtons) {
+      console.log('showing cell buttons for ' + rowIndex + ',' + colIndex);
+      console.log('renderIsHovered:' + this.state.renderIsHovered);
+    }
 
     if (isExpandable || (column && column.cellActions)) {
       anchorContent = (
@@ -493,11 +516,18 @@ export class EuiDataGridCell extends Component<
               rowIndex={rowIndex}
               column={column}
               popoverIsOpen={this.state.popoverIsOpen}
-              closePopover={() => this.setState({ popoverIsOpen: false })}
+              isHoveredOrFocused={this.state.renderIsHovered}
+              closePopover={this.closePopover}
               onExpandClick={() => {
-                this.setState(({ popoverIsOpen }) => ({
-                  popoverIsOpen: !popoverIsOpen,
-                }));
+                this.setState(
+                  ({ popoverIsOpen }) => ({
+                    popoverIsOpen: !popoverIsOpen,
+                  }),
+                  () =>
+                    this.setState(({ popoverIsOpen }) => ({
+                      renderPopoverOpen: popoverIsOpen,
+                    }))
+                );
               }}
             />
           )}
@@ -517,7 +547,7 @@ export class EuiDataGridCell extends Component<
               closePopover={() => this.setState({ popoverIsOpen: false })}
               column={column}
               panelRefFn={(ref) => (this.popoverPanelRef.current = ref)}
-              popoverIsOpen={this.state.popoverIsOpen}
+              popoverIsOpen={this.state.renderPopoverOpen}
               rowIndex={rowIndex}
               renderCellValue={rest.renderCellValue}
               popoverContent={PopoverContent}
@@ -545,12 +575,14 @@ export class EuiDataGridCell extends Component<
         onKeyDown={handleCellKeyDown}
         onFocus={this.onFocus}
         onMouseEnter={() => {
-          console.log('hovering');
-          this.setState({ isHovered: true });
+          this.setState({ isHovered: true, renderIsHovered: false }, () => {
+            setTimeout(() => {
+              this.setState({ renderIsHovered: true });
+            }, 500);
+          });
         }}
         onMouseLeave={() => {
-          console.log('leaving');
-          this.setState({ isHovered: false });
+          this.setState({ isHovered: false, renderIsHovered: false });
         }}
         onBlur={this.onBlur}>
         {innerContent}
diff --git a/src/components/datagrid/data_grid_cell_buttons.tsx b/src/components/datagrid/data_grid_cell_buttons.tsx
index ee01e8fe6a9..86cf8d6279b 100644
--- a/src/components/datagrid/data_grid_cell_buttons.tsx
+++ b/src/components/datagrid/data_grid_cell_buttons.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { JSXElementConstructor } from 'react';
+import React, { JSXElementConstructor, useMemo } from 'react';
 import {
   EuiDataGridColumn,
   EuiDataGridColumnCellAction,
@@ -28,12 +28,14 @@ import { EuiButtonIcon, EuiButtonIconProps } from '../button/button_icon';
 
 export const EuiDataGridCellButtons = ({
   popoverIsOpen,
+  isHoveredOrFocused,
   closePopover,
   onExpandClick,
   column,
   rowIndex,
 }: {
   popoverIsOpen: boolean;
+  isHoveredOrFocused: boolean;
   closePopover: () => void;
   onExpandClick: () => void;
   column?: EuiDataGridColumn;
@@ -44,6 +46,7 @@ export const EuiDataGridCellButtons = ({
   });
   const buttonClasses = classNames('euiDataGridRowCell__expandButton', {
     'euiDataGridRowCell__expandButton-isActive': popoverIsOpen,
+    'euiDataGridRowCell__expandButton-isHoveredOrFocused': isHoveredOrFocused,
   });
   const expandButton = (
     <EuiI18n
@@ -63,16 +66,16 @@ export const EuiDataGridCellButtons = ({
       )}
     </EuiI18n>
   );
-  const ButtonComponent = (props: EuiButtonIconProps) => (
-    <EuiButtonIcon
-      {...props}
-      aria-hidden
-      className="euiDataGridRowCell__actionButtonIcon"
-      iconSize="s"
-    />
-  );
-  const additionalButtons =
-    column && Array.isArray(column.cellActions)
+  const additionalButtons = useMemo(() => {
+    const ButtonComponent = (props: EuiButtonIconProps) => (
+      <EuiButtonIcon
+        {...props}
+        aria-hidden
+        className="euiDataGridRowCell__actionButtonIcon"
+        iconSize="s"
+      />
+    );
+    return column && Array.isArray(column.cellActions)
       ? column.cellActions.map(
           (Action: EuiDataGridColumnCellAction, idx: number) => {
             // React is more permissible than the TS types indicate
@@ -92,6 +95,8 @@ export const EuiDataGridCellButtons = ({
           }
         )
       : [];
+  }, [column, rowIndex, closePopover]);
+
   return (
     <div className={buttonClasses}>{[...additionalButtons, expandButton]}</div>
   );

From f45009e1b446e35ab49f24f8faf568050e7f3722 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Tue, 12 Jan 2021 14:33:08 -0700
Subject: [PATCH 31/54] Refactor grid container height/width detection, ignore
 datagrid pages from AXE automation testing

---
 scripts/a11y-testing.js                       |    8 +
 src-docs/src/views/datagrid/virtualization.js |    6 +
 .../__snapshots__/data_grid.test.tsx.snap     | 2778 +++++++++--------
 src/components/datagrid/data_grid.tsx         |   52 +-
 src/components/datagrid/data_grid_body.tsx    |  132 +-
 5 files changed, 1488 insertions(+), 1488 deletions(-)

diff --git a/scripts/a11y-testing.js b/scripts/a11y-testing.js
index 39c9f5378b1..81f5c631533 100644
--- a/scripts/a11y-testing.js
+++ b/scripts/a11y-testing.js
@@ -40,6 +40,14 @@ const docsPages = async (root, page) => {
     `${root}#/forms/date-picker`,
     `${root}#/forms/suggest`,
     `${root}#/forms/super-date-picker`,
+    `${root}#/tabular-content/data-grid`,
+    `${root}#/tabular-content/data-grid-in-memory-settings`,
+    `${root}#/tabular-content/data-grid-schemas-and-popovers`,
+    `${root}#/tabular-content/data-grid-focus`,
+    `${root}#/tabular-content/data-grid-styling-and-control`,
+    `${root}#/tabular-content/data-grid-control-columns`,
+    `${root}#/tabular-content/data-grid-footer-row`,
+    `${root}#/tabular-content/data-grid-virtualization`,
     `${root}#/elastic-charts/creating-charts`,
     `${root}#/elastic-charts/part-to-whole-comparisons`,
     `${root}#/utilities/css-utility-classes`,
diff --git a/src-docs/src/views/datagrid/virtualization.js b/src-docs/src/views/datagrid/virtualization.js
index d0cfcb9bb24..0fab30860ea 100644
--- a/src-docs/src/views/datagrid/virtualization.js
+++ b/src-docs/src/views/datagrid/virtualization.js
@@ -174,6 +174,12 @@ export default () => {
 
       <DataContext.Provider value={dataContext}>
         <EuiDataGrid
+          // completely reset the grid when switching between controlled & uncontrolled heights
+          // otherwise, going from constrained->unconstrained is ignored.
+          // this is for example only, don't switch between controlled & uncontrolled heights
+          key={
+            height === 'height-unconstrained' ? 'unconstrained' : 'constrained'
+          }
           aria-label="Virtualized data grid demo"
           height={dimensionSizes[height]}
           width={dimensionSizes[width]}
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index cc2e4907ec5..9a690025567 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -1047,426 +1047,430 @@ Array [
             tabindex="0"
           >
             <div
-              class="euiDataGrid__virtualized"
-              style="position:relative;height:500px;width:500px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
+              style="width:100%;height:100%;overflow:hidden"
             >
               <div
-                style="height:102px;width:200px"
+                class="euiDataGrid__virtualized"
+                style="position:relative;height:500px;width:500px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
               >
                 <div
-                  class="euiDataGridHeader"
-                  data-test-subj="dataGridHeader"
-                  role="row"
+                  style="height:102px;width:200px"
                 >
                   <div
-                    class="euiDataGridHeaderCell"
-                    data-test-subj="dataGridHeaderCell-A"
-                    role="columnheader"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridHeader"
+                    data-test-subj="dataGridHeader"
+                    role="row"
                   >
                     <div
-                      class="euiDataGridColumnResizer"
-                      data-test-subj="dataGridColumnResizer"
-                      style="margin-right:0px"
-                    />
-                    <button
-                      class="euiDataGridHeaderCell__button"
+                      class="euiDataGridHeaderCell"
+                      data-test-subj="dataGridHeaderCell-A"
+                      role="columnheader"
+                      style="width:100px"
+                      tabindex="-1"
                     >
                       <div
-                        class="euiDataGridHeaderCell__content"
-                      >
-                        A
-                      </div>
-                      <div
-                        class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                        class="euiDataGridColumnResizer"
+                        data-test-subj="dataGridColumnResizer"
+                        style="margin-right:0px"
+                      />
+                      <button
+                        class="euiDataGridHeaderCell__button"
                       >
                         <div
-                          class="euiPopover__anchor"
+                          class="euiDataGridHeaderCell__content"
                         >
-                          <span
-                            aria-label="Header actions"
-                            color="text"
-                            data-euiicon-type="arrowDown"
-                            data-test-subj="dataGridHeaderCellActionButton-A"
-                          />
+                          A
                         </div>
-                      </div>
-                    </button>
-                  </div>
-                  <div
-                    class="euiDataGridHeaderCell"
-                    data-test-subj="dataGridHeaderCell-B"
-                    role="columnheader"
-                    style="width:100px"
-                    tabindex="-1"
-                  >
+                        <div
+                          class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                        >
+                          <div
+                            class="euiPopover__anchor"
+                          >
+                            <span
+                              aria-label="Header actions"
+                              color="text"
+                              data-euiicon-type="arrowDown"
+                              data-test-subj="dataGridHeaderCellActionButton-A"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
                     <div
-                      class="euiDataGridColumnResizer"
-                      data-test-subj="dataGridColumnResizer"
-                      style="margin-right:0px"
-                    />
-                    <button
-                      class="euiDataGridHeaderCell__button"
+                      class="euiDataGridHeaderCell"
+                      data-test-subj="dataGridHeaderCell-B"
+                      role="columnheader"
+                      style="width:100px"
+                      tabindex="-1"
                     >
                       <div
-                        class="euiDataGridHeaderCell__content"
-                      >
-                        B
-                      </div>
-                      <div
-                        class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                        class="euiDataGridColumnResizer"
+                        data-test-subj="dataGridColumnResizer"
+                        style="margin-right:0px"
+                      />
+                      <button
+                        class="euiDataGridHeaderCell__button"
                       >
                         <div
-                          class="euiPopover__anchor"
+                          class="euiDataGridHeaderCell__content"
                         >
-                          <span
-                            aria-label="Header actions"
-                            color="text"
-                            data-euiicon-type="arrowDown"
-                            data-test-subj="dataGridHeaderCellActionButton-B"
-                          />
+                          B
                         </div>
-                      </div>
-                    </button>
+                        <div
+                          class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                        >
+                          <div
+                            class="euiPopover__anchor"
+                          >
+                            <span
+                              aria-label="Header actions"
+                              color="text"
+                              data-euiicon-type="arrowDown"
+                              data-test-subj="dataGridHeaderCellActionButton-B"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
                   </div>
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:0;top:0px;height:34px;width:100px"
-                  tabindex="-1"
-                >
                   <div
-                    class="euiDataGridRowCell__content"
+                    class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:0;top:0px;height:34px;width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover__anchor euiDataGridRowCell__expand"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandFlex"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
                           <div
-                            class="euiDataGridRowCell__expandContent"
+                            class="euiDataGridRowCell__expandFlex"
                           >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 1, Column: 1:
-                              </span>
-                            </p>
                             <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              0, A
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 1, Column: 1:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                0, A
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiDataGridRowCell__expandButton"
-                          >
-                            <button
-                              aria-hidden="true"
-                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                              tabindex="-1"
-                              title="Click or hit enter to interact with cell content"
-                              type="button"
+                            <div
+                              class="euiDataGridRowCell__expandButton"
                             >
-                              <span
+                              <button
                                 aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="expandMini"
-                              />
-                            </button>
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:100px;top:0px;height:34px;width:100px"
-                  tabindex="-1"
-                >
                   <div
-                    class="euiDataGridRowCell__content"
+                    class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:100px;top:0px;height:34px;width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover__anchor euiDataGridRowCell__expand"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandFlex"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
                           <div
-                            class="euiDataGridRowCell__expandContent"
+                            class="euiDataGridRowCell__expandFlex"
                           >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 1, Column: 2:
-                              </span>
-                            </p>
                             <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              0, B
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 1, Column: 2:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                0, B
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiDataGridRowCell__expandButton"
-                          >
-                            <button
-                              aria-hidden="true"
-                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                              tabindex="-1"
-                              title="Click or hit enter to interact with cell content"
-                              type="button"
+                            <div
+                              class="euiDataGridRowCell__expandButton"
                             >
-                              <span
+                              <button
                                 aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="expandMini"
-                              />
-                            </button>
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:0;top:34px;height:34px;width:100px"
-                  tabindex="-1"
-                >
                   <div
-                    class="euiDataGridRowCell__content"
+                    class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:0;top:34px;height:34px;width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover__anchor euiDataGridRowCell__expand"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandFlex"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
                           <div
-                            class="euiDataGridRowCell__expandContent"
+                            class="euiDataGridRowCell__expandFlex"
                           >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 2, Column: 1:
-                              </span>
-                            </p>
                             <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              1, A
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 2, Column: 1:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                1, A
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiDataGridRowCell__expandButton"
-                          >
-                            <button
-                              aria-hidden="true"
-                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                              tabindex="-1"
-                              title="Click or hit enter to interact with cell content"
-                              type="button"
+                            <div
+                              class="euiDataGridRowCell__expandButton"
                             >
-                              <span
+                              <button
                                 aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="expandMini"
-                              />
-                            </button>
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:100px;top:34px;height:34px;width:100px"
-                  tabindex="-1"
-                >
                   <div
-                    class="euiDataGridRowCell__content"
+                    class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:100px;top:34px;height:34px;width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover__anchor euiDataGridRowCell__expand"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandFlex"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
                           <div
-                            class="euiDataGridRowCell__expandContent"
+                            class="euiDataGridRowCell__expandFlex"
                           >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 2, Column: 2:
-                              </span>
-                            </p>
                             <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              1, B
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 2, Column: 2:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                1, B
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiDataGridRowCell__expandButton"
-                          >
-                            <button
-                              aria-hidden="true"
-                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                              tabindex="-1"
-                              title="Click or hit enter to interact with cell content"
-                              type="button"
+                            <div
+                              class="euiDataGridRowCell__expandButton"
                             >
-                              <span
+                              <button
                                 aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="expandMini"
-                              />
-                            </button>
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:0;top:68px;height:34px;width:100px"
-                  tabindex="-1"
-                >
                   <div
-                    class="euiDataGridRowCell__content"
+                    class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:0;top:68px;height:34px;width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover__anchor euiDataGridRowCell__expand"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandFlex"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
                           <div
-                            class="euiDataGridRowCell__expandContent"
+                            class="euiDataGridRowCell__expandFlex"
                           >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 3, Column: 1:
-                              </span>
-                            </p>
                             <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              2, A
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 3, Column: 1:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                2, A
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiDataGridRowCell__expandButton"
-                          >
-                            <button
-                              aria-hidden="true"
-                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                              tabindex="-1"
-                              title="Click or hit enter to interact with cell content"
-                              type="button"
+                            <div
+                              class="euiDataGridRowCell__expandButton"
                             >
-                              <span
+                              <button
                                 aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="expandMini"
-                              />
-                            </button>
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:100px;top:68px;height:34px;width:100px"
-                  tabindex="-1"
-                >
                   <div
-                    class="euiDataGridRowCell__content"
+                    class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:100px;top:68px;height:34px;width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover__anchor euiDataGridRowCell__expand"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandFlex"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
                           <div
-                            class="euiDataGridRowCell__expandContent"
+                            class="euiDataGridRowCell__expandFlex"
                           >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 3, Column: 2:
-                              </span>
-                            </p>
                             <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              2, B
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 3, Column: 2:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                2, B
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiDataGridRowCell__expandButton"
-                          >
-                            <button
-                              aria-hidden="true"
-                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                              tabindex="-1"
-                              title="Click or hit enter to interact with cell content"
-                              type="button"
+                            <div
+                              class="euiDataGridRowCell__expandButton"
                             >
-                              <span
+                              <button
                                 aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="expandMini"
-                              />
-                            </button>
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -1612,743 +1616,747 @@ Array [
             tabindex="0"
           >
             <div
-              class="euiDataGrid__virtualized"
-              style="position:relative;height:500px;width:500px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
+              style="width:100%;height:100%;overflow:hidden"
             >
               <div
-                style="height:102px;width:300px"
+                class="euiDataGrid__virtualized"
+                style="position:relative;height:500px;width:500px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
               >
                 <div
-                  class="euiDataGridHeader"
-                  data-test-subj="dataGridHeader"
-                  role="row"
+                  style="height:102px;width:300px"
                 >
                   <div
-                    class="euiDataGridHeaderCell euiDataGridHeaderCell--controlColumn"
-                    data-test-subj="dataGridHeaderCell-leading"
-                    role="columnheader"
-                    style="width:50px"
-                    tabindex="-1"
-                  >
-                    <div
-                      class="euiDataGridHeaderCell__content"
-                    >
-                      <span>
-                        leading heading
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="euiDataGridHeaderCell"
-                    data-test-subj="dataGridHeaderCell-A"
-                    role="columnheader"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridHeader"
+                    data-test-subj="dataGridHeader"
+                    role="row"
                   >
                     <div
-                      class="euiDataGridColumnResizer"
-                      data-test-subj="dataGridColumnResizer"
-                      style="margin-right:0px"
-                    />
-                    <button
-                      class="euiDataGridHeaderCell__button"
+                      class="euiDataGridHeaderCell euiDataGridHeaderCell--controlColumn"
+                      data-test-subj="dataGridHeaderCell-leading"
+                      role="columnheader"
+                      style="width:50px"
+                      tabindex="-1"
                     >
                       <div
                         class="euiDataGridHeaderCell__content"
                       >
-                        A
+                        <span>
+                          leading heading
+                        </span>
                       </div>
+                    </div>
+                    <div
+                      class="euiDataGridHeaderCell"
+                      data-test-subj="dataGridHeaderCell-A"
+                      role="columnheader"
+                      style="width:100px"
+                      tabindex="-1"
+                    >
                       <div
-                        class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                        class="euiDataGridColumnResizer"
+                        data-test-subj="dataGridColumnResizer"
+                        style="margin-right:0px"
+                      />
+                      <button
+                        class="euiDataGridHeaderCell__button"
                       >
                         <div
-                          class="euiPopover__anchor"
+                          class="euiDataGridHeaderCell__content"
                         >
-                          <span
-                            aria-label="Header actions"
-                            color="text"
-                            data-euiicon-type="arrowDown"
-                            data-test-subj="dataGridHeaderCellActionButton-A"
-                          />
+                          A
                         </div>
-                      </div>
-                    </button>
-                  </div>
-                  <div
-                    class="euiDataGridHeaderCell"
-                    data-test-subj="dataGridHeaderCell-B"
-                    role="columnheader"
-                    style="width:100px"
-                    tabindex="-1"
-                  >
+                        <div
+                          class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                        >
+                          <div
+                            class="euiPopover__anchor"
+                          >
+                            <span
+                              aria-label="Header actions"
+                              color="text"
+                              data-euiicon-type="arrowDown"
+                              data-test-subj="dataGridHeaderCellActionButton-A"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
                     <div
-                      class="euiDataGridColumnResizer"
-                      data-test-subj="dataGridColumnResizer"
-                      style="margin-right:0px"
-                    />
-                    <button
-                      class="euiDataGridHeaderCell__button"
+                      class="euiDataGridHeaderCell"
+                      data-test-subj="dataGridHeaderCell-B"
+                      role="columnheader"
+                      style="width:100px"
+                      tabindex="-1"
                     >
                       <div
-                        class="euiDataGridHeaderCell__content"
-                      >
-                        B
-                      </div>
-                      <div
-                        class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                        class="euiDataGridColumnResizer"
+                        data-test-subj="dataGridColumnResizer"
+                        style="margin-right:0px"
+                      />
+                      <button
+                        class="euiDataGridHeaderCell__button"
                       >
                         <div
-                          class="euiPopover__anchor"
+                          class="euiDataGridHeaderCell__content"
                         >
-                          <span
-                            aria-label="Header actions"
-                            color="text"
-                            data-euiicon-type="arrowDown"
-                            data-test-subj="dataGridHeaderCellActionButton-B"
-                          />
+                          B
                         </div>
-                      </div>
-                    </button>
-                  </div>
-                  <div
-                    class="euiDataGridHeaderCell euiDataGridHeaderCell--controlColumn"
-                    data-test-subj="dataGridHeaderCell-trailing"
-                    role="columnheader"
-                    style="width:50px"
-                    tabindex="-1"
-                  >
+                        <div
+                          class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                        >
+                          <div
+                            class="euiPopover__anchor"
+                          >
+                            <span
+                              aria-label="Header actions"
+                              color="text"
+                              data-euiicon-type="arrowDown"
+                              data-test-subj="dataGridHeaderCellActionButton-B"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
                     <div
-                      class="euiDataGridHeaderCell__content"
+                      class="euiDataGridHeaderCell euiDataGridHeaderCell--controlColumn"
+                      data-test-subj="dataGridHeaderCell-trailing"
+                      role="columnheader"
+                      style="width:50px"
+                      tabindex="-1"
                     >
-                      <span>
-                        trailing heading
-                      </span>
+                      <div
+                        class="euiDataGridHeaderCell__content"
+                      >
+                        <span>
+                          trailing heading
+                        </span>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--firstColumn euiDataGridRowCell--controlColumn"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:0;top:0px;height:34px;width:50px"
-                  tabindex="-1"
-                >
-                  <div
-                    data-focus-guard="true"
-                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                    tabindex="-1"
-                  />
                   <div
-                    data-focus-guard="true"
-                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                    class="euiDataGridRowCell euiDataGridRowCell--firstColumn euiDataGridRowCell--controlColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:0;top:0px;height:34px;width:50px"
                     tabindex="-1"
-                  />
-                  <div
-                    data-focus-lock-disabled="disabled"
                   >
                     <div
-                      class="euiDataGridRowCell__expandFlex"
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                    <div
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                    <div
+                      data-focus-lock-disabled="disabled"
                     >
                       <div
-                        class="euiDataGridRowCell__expandContent"
+                        class="euiDataGridRowCell__expandFlex"
                       >
-                        <p
-                          class="euiScreenReaderOnly"
-                        >
-                          <span>
-                            Row: 1, Column: 1:
-                          </span>
-                        </p>
                         <div
-                          class="euiDataGridRowCell__truncate"
+                          class="euiDataGridRowCell__expandContent"
                         >
-                          0
+                          <p
+                            class="euiScreenReaderOnly"
+                          >
+                            <span>
+                              Row: 1, Column: 1:
+                            </span>
+                          </p>
+                          <div
+                            class="euiDataGridRowCell__truncate"
+                          >
+                            0
+                          </div>
                         </div>
                       </div>
                     </div>
+                    <div
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
                   </div>
                   <div
-                    data-focus-guard="true"
-                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:50px;top:0px;height:34px;width:100px"
                     tabindex="-1"
-                  />
-                </div>
-                <div
-                  class="euiDataGridRowCell"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:50px;top:0px;height:34px;width:100px"
-                  tabindex="-1"
-                >
-                  <div
-                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover__anchor euiDataGridRowCell__expand"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandFlex"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
                           <div
-                            class="euiDataGridRowCell__expandContent"
+                            class="euiDataGridRowCell__expandFlex"
                           >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 1, Column: 2:
-                              </span>
-                            </p>
                             <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              0, A
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 1, Column: 2:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                0, A
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiDataGridRowCell__expandButton"
-                          >
-                            <button
-                              aria-hidden="true"
-                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                              tabindex="-1"
-                              title="Click or hit enter to interact with cell content"
-                              type="button"
+                            <div
+                              class="euiDataGridRowCell__expandButton"
                             >
-                              <span
+                              <button
                                 aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="expandMini"
-                              />
-                            </button>
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="euiDataGridRowCell"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:150px;top:0px;height:34px;width:100px"
-                  tabindex="-1"
-                >
                   <div
-                    class="euiDataGridRowCell__content"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:150px;top:0px;height:34px;width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover__anchor euiDataGridRowCell__expand"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandFlex"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
                           <div
-                            class="euiDataGridRowCell__expandContent"
+                            class="euiDataGridRowCell__expandFlex"
                           >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 1, Column: 3:
-                              </span>
-                            </p>
                             <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              0, B
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 1, Column: 3:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                0, B
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiDataGridRowCell__expandButton"
-                          >
-                            <button
-                              aria-hidden="true"
-                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                              tabindex="-1"
-                              title="Click or hit enter to interact with cell content"
-                              type="button"
+                            <div
+                              class="euiDataGridRowCell__expandButton"
                             >
-                              <span
+                              <button
                                 aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="expandMini"
-                              />
-                            </button>
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--lastColumn euiDataGridRowCell--controlColumn"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:250px;top:0px;height:34px;width:50px"
-                  tabindex="-1"
-                >
                   <div
-                    data-focus-guard="true"
-                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                    class="euiDataGridRowCell euiDataGridRowCell--lastColumn euiDataGridRowCell--controlColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:250px;top:0px;height:34px;width:50px"
                     tabindex="-1"
-                  />
-                  <div
-                    data-focus-guard="true"
-                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                    tabindex="-1"
-                  />
-                  <div
-                    data-focus-lock-disabled="disabled"
                   >
                     <div
-                      class="euiDataGridRowCell__expandFlex"
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                    <div
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                    <div
+                      data-focus-lock-disabled="disabled"
                     >
                       <div
-                        class="euiDataGridRowCell__expandContent"
+                        class="euiDataGridRowCell__expandFlex"
                       >
-                        <p
-                          class="euiScreenReaderOnly"
-                        >
-                          <span>
-                            Row: 1, Column: 4:
-                          </span>
-                        </p>
                         <div
-                          class="euiDataGridRowCell__truncate"
+                          class="euiDataGridRowCell__expandContent"
                         >
-                          0
+                          <p
+                            class="euiScreenReaderOnly"
+                          >
+                            <span>
+                              Row: 1, Column: 4:
+                            </span>
+                          </p>
+                          <div
+                            class="euiDataGridRowCell__truncate"
+                          >
+                            0
+                          </div>
                         </div>
                       </div>
                     </div>
+                    <div
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
                   </div>
                   <div
-                    data-focus-guard="true"
-                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                    tabindex="-1"
-                  />
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn euiDataGridRowCell--controlColumn"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:0;top:34px;height:34px;width:50px"
-                  tabindex="-1"
-                >
-                  <div
-                    data-focus-guard="true"
-                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                    tabindex="-1"
-                  />
-                  <div
-                    data-focus-guard="true"
-                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                    class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn euiDataGridRowCell--controlColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:0;top:34px;height:34px;width:50px"
                     tabindex="-1"
-                  />
-                  <div
-                    data-focus-lock-disabled="disabled"
                   >
                     <div
-                      class="euiDataGridRowCell__expandFlex"
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                    <div
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                    <div
+                      data-focus-lock-disabled="disabled"
                     >
                       <div
-                        class="euiDataGridRowCell__expandContent"
+                        class="euiDataGridRowCell__expandFlex"
                       >
-                        <p
-                          class="euiScreenReaderOnly"
-                        >
-                          <span>
-                            Row: 2, Column: 1:
-                          </span>
-                        </p>
                         <div
-                          class="euiDataGridRowCell__truncate"
+                          class="euiDataGridRowCell__expandContent"
                         >
-                          1
+                          <p
+                            class="euiScreenReaderOnly"
+                          >
+                            <span>
+                              Row: 2, Column: 1:
+                            </span>
+                          </p>
+                          <div
+                            class="euiDataGridRowCell__truncate"
+                          >
+                            1
+                          </div>
                         </div>
                       </div>
                     </div>
+                    <div
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
                   </div>
                   <div
-                    data-focus-guard="true"
-                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                    class="euiDataGridRowCell euiDataGridRowCell--stripe"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:50px;top:34px;height:34px;width:100px"
                     tabindex="-1"
-                  />
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--stripe"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:50px;top:34px;height:34px;width:100px"
-                  tabindex="-1"
-                >
-                  <div
-                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover__anchor euiDataGridRowCell__expand"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandFlex"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
                           <div
-                            class="euiDataGridRowCell__expandContent"
+                            class="euiDataGridRowCell__expandFlex"
                           >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 2, Column: 2:
-                              </span>
-                            </p>
                             <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              1, A
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 2, Column: 2:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                1, A
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiDataGridRowCell__expandButton"
-                          >
-                            <button
-                              aria-hidden="true"
-                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                              tabindex="-1"
-                              title="Click or hit enter to interact with cell content"
-                              type="button"
+                            <div
+                              class="euiDataGridRowCell__expandButton"
                             >
-                              <span
+                              <button
                                 aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="expandMini"
-                              />
-                            </button>
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--stripe"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:150px;top:34px;height:34px;width:100px"
-                  tabindex="-1"
-                >
                   <div
-                    class="euiDataGridRowCell__content"
+                    class="euiDataGridRowCell euiDataGridRowCell--stripe"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:150px;top:34px;height:34px;width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover__anchor euiDataGridRowCell__expand"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandFlex"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
                           <div
-                            class="euiDataGridRowCell__expandContent"
+                            class="euiDataGridRowCell__expandFlex"
                           >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 2, Column: 3:
-                              </span>
-                            </p>
                             <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              1, B
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 2, Column: 3:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                1, B
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiDataGridRowCell__expandButton"
-                          >
-                            <button
-                              aria-hidden="true"
-                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                              tabindex="-1"
-                              title="Click or hit enter to interact with cell content"
-                              type="button"
+                            <div
+                              class="euiDataGridRowCell__expandButton"
                             >
-                              <span
+                              <button
                                 aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="expandMini"
-                              />
-                            </button>
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn euiDataGridRowCell--controlColumn"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:250px;top:34px;height:34px;width:50px"
-                  tabindex="-1"
-                >
-                  <div
-                    data-focus-guard="true"
-                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                    tabindex="-1"
-                  />
                   <div
-                    data-focus-guard="true"
-                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                    class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn euiDataGridRowCell--controlColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:250px;top:34px;height:34px;width:50px"
                     tabindex="-1"
-                  />
-                  <div
-                    data-focus-lock-disabled="disabled"
                   >
                     <div
-                      class="euiDataGridRowCell__expandFlex"
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                    <div
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                    <div
+                      data-focus-lock-disabled="disabled"
                     >
                       <div
-                        class="euiDataGridRowCell__expandContent"
+                        class="euiDataGridRowCell__expandFlex"
                       >
-                        <p
-                          class="euiScreenReaderOnly"
-                        >
-                          <span>
-                            Row: 2, Column: 4:
-                          </span>
-                        </p>
                         <div
-                          class="euiDataGridRowCell__truncate"
+                          class="euiDataGridRowCell__expandContent"
                         >
-                          1
+                          <p
+                            class="euiScreenReaderOnly"
+                          >
+                            <span>
+                              Row: 2, Column: 4:
+                            </span>
+                          </p>
+                          <div
+                            class="euiDataGridRowCell__truncate"
+                          >
+                            1
+                          </div>
                         </div>
                       </div>
                     </div>
+                    <div
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
                   </div>
                   <div
-                    data-focus-guard="true"
-                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                    tabindex="-1"
-                  />
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--firstColumn euiDataGridRowCell--controlColumn"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:0;top:68px;height:34px;width:50px"
-                  tabindex="-1"
-                >
-                  <div
-                    data-focus-guard="true"
-                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                    tabindex="-1"
-                  />
-                  <div
-                    data-focus-guard="true"
-                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                    class="euiDataGridRowCell euiDataGridRowCell--firstColumn euiDataGridRowCell--controlColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:0;top:68px;height:34px;width:50px"
                     tabindex="-1"
-                  />
-                  <div
-                    data-focus-lock-disabled="disabled"
                   >
                     <div
-                      class="euiDataGridRowCell__expandFlex"
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                    <div
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                    <div
+                      data-focus-lock-disabled="disabled"
                     >
                       <div
-                        class="euiDataGridRowCell__expandContent"
+                        class="euiDataGridRowCell__expandFlex"
                       >
-                        <p
-                          class="euiScreenReaderOnly"
-                        >
-                          <span>
-                            Row: 3, Column: 1:
-                          </span>
-                        </p>
                         <div
-                          class="euiDataGridRowCell__truncate"
+                          class="euiDataGridRowCell__expandContent"
                         >
-                          2
+                          <p
+                            class="euiScreenReaderOnly"
+                          >
+                            <span>
+                              Row: 3, Column: 1:
+                            </span>
+                          </p>
+                          <div
+                            class="euiDataGridRowCell__truncate"
+                          >
+                            2
+                          </div>
                         </div>
                       </div>
                     </div>
+                    <div
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
                   </div>
                   <div
-                    data-focus-guard="true"
-                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:50px;top:68px;height:34px;width:100px"
                     tabindex="-1"
-                  />
-                </div>
-                <div
-                  class="euiDataGridRowCell"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:50px;top:68px;height:34px;width:100px"
-                  tabindex="-1"
-                >
-                  <div
-                    class="euiDataGridRowCell__content"
                   >
                     <div
-                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover__anchor euiDataGridRowCell__expand"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandFlex"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
                           <div
-                            class="euiDataGridRowCell__expandContent"
+                            class="euiDataGridRowCell__expandFlex"
                           >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 3, Column: 2:
-                              </span>
-                            </p>
                             <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              2, A
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 3, Column: 2:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                2, A
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiDataGridRowCell__expandButton"
-                          >
-                            <button
-                              aria-hidden="true"
-                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                              tabindex="-1"
-                              title="Click or hit enter to interact with cell content"
-                              type="button"
+                            <div
+                              class="euiDataGridRowCell__expandButton"
                             >
-                              <span
+                              <button
                                 aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="expandMini"
-                              />
-                            </button>
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="euiDataGridRowCell"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:150px;top:68px;height:34px;width:100px"
-                  tabindex="-1"
-                >
                   <div
-                    class="euiDataGridRowCell__content"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:150px;top:68px;height:34px;width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover__anchor euiDataGridRowCell__expand"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandFlex"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
                           <div
-                            class="euiDataGridRowCell__expandContent"
+                            class="euiDataGridRowCell__expandFlex"
                           >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 3, Column: 3:
-                              </span>
-                            </p>
                             <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              2, B
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 3, Column: 3:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                2, B
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiDataGridRowCell__expandButton"
-                          >
-                            <button
-                              aria-hidden="true"
-                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                              tabindex="-1"
-                              title="Click or hit enter to interact with cell content"
-                              type="button"
+                            <div
+                              class="euiDataGridRowCell__expandButton"
                             >
-                              <span
+                              <button
                                 aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="expandMini"
-                              />
-                            </button>
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--lastColumn euiDataGridRowCell--controlColumn"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:250px;top:68px;height:34px;width:50px"
-                  tabindex="-1"
-                >
-                  <div
-                    data-focus-guard="true"
-                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                    tabindex="-1"
-                  />
                   <div
-                    data-focus-guard="true"
-                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                    class="euiDataGridRowCell euiDataGridRowCell--lastColumn euiDataGridRowCell--controlColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:250px;top:68px;height:34px;width:50px"
                     tabindex="-1"
-                  />
-                  <div
-                    data-focus-lock-disabled="disabled"
                   >
                     <div
-                      class="euiDataGridRowCell__expandFlex"
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                    <div
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
+                    <div
+                      data-focus-lock-disabled="disabled"
                     >
                       <div
-                        class="euiDataGridRowCell__expandContent"
+                        class="euiDataGridRowCell__expandFlex"
                       >
-                        <p
-                          class="euiScreenReaderOnly"
-                        >
-                          <span>
-                            Row: 3, Column: 4:
-                          </span>
-                        </p>
                         <div
-                          class="euiDataGridRowCell__truncate"
+                          class="euiDataGridRowCell__expandContent"
                         >
-                          2
+                          <p
+                            class="euiScreenReaderOnly"
+                          >
+                            <span>
+                              Row: 3, Column: 4:
+                            </span>
+                          </p>
+                          <div
+                            class="euiDataGridRowCell__truncate"
+                          >
+                            2
+                          </div>
                         </div>
                       </div>
                     </div>
+                    <div
+                      data-focus-guard="true"
+                      style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+                      tabindex="-1"
+                    />
                   </div>
-                  <div
-                    data-focus-guard="true"
-                    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                    tabindex="-1"
-                  />
                 </div>
               </div>
             </div>
@@ -2486,428 +2494,432 @@ Array [
             tabindex="0"
           >
             <div
-              class="euiDataGrid__virtualized"
-              style="position:relative;height:500px;width:500px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
+              style="width:100%;height:100%;overflow:hidden"
             >
               <div
-                style="height:102px;width:200px"
+                class="euiDataGrid__virtualized"
+                style="position:relative;height:500px;width:500px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
               >
                 <div
-                  class="euiDataGridHeader"
-                  data-test-subj="dataGridHeader"
-                  role="row"
+                  style="height:102px;width:200px"
                 >
                   <div
-                    class="euiDataGridHeaderCell"
-                    data-test-subj="dataGridHeaderCell-A"
-                    role="columnheader"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridHeader"
+                    data-test-subj="dataGridHeader"
+                    role="row"
                   >
                     <div
-                      class="euiDataGridColumnResizer"
-                      data-test-subj="dataGridColumnResizer"
-                      style="margin-right:0px"
-                    />
-                    <button
-                      class="euiDataGridHeaderCell__button"
+                      class="euiDataGridHeaderCell"
+                      data-test-subj="dataGridHeaderCell-A"
+                      role="columnheader"
+                      style="width:100px"
+                      tabindex="-1"
                     >
                       <div
-                        class="euiDataGridHeaderCell__content"
-                      >
-                        Column A
-                      </div>
-                      <div
-                        class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                        class="euiDataGridColumnResizer"
+                        data-test-subj="dataGridColumnResizer"
+                        style="margin-right:0px"
+                      />
+                      <button
+                        class="euiDataGridHeaderCell__button"
                       >
                         <div
-                          class="euiPopover__anchor"
+                          class="euiDataGridHeaderCell__content"
                         >
-                          <span
-                            aria-label="Header actions"
-                            color="text"
-                            data-euiicon-type="arrowDown"
-                            data-test-subj="dataGridHeaderCellActionButton-A"
-                          />
+                          Column A
                         </div>
-                      </div>
-                    </button>
-                  </div>
-                  <div
-                    class="euiDataGridHeaderCell"
-                    data-test-subj="dataGridHeaderCell-B"
-                    role="columnheader"
-                    style="width:100px"
-                    tabindex="-1"
-                  >
+                        <div
+                          class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                        >
+                          <div
+                            class="euiPopover__anchor"
+                          >
+                            <span
+                              aria-label="Header actions"
+                              color="text"
+                              data-euiicon-type="arrowDown"
+                              data-test-subj="dataGridHeaderCellActionButton-A"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
                     <div
-                      class="euiDataGridColumnResizer"
-                      data-test-subj="dataGridColumnResizer"
-                      style="margin-right:0px"
-                    />
-                    <button
-                      class="euiDataGridHeaderCell__button"
+                      class="euiDataGridHeaderCell"
+                      data-test-subj="dataGridHeaderCell-B"
+                      role="columnheader"
+                      style="width:100px"
+                      tabindex="-1"
                     >
                       <div
-                        class="euiDataGridHeaderCell__content"
+                        class="euiDataGridColumnResizer"
+                        data-test-subj="dataGridColumnResizer"
+                        style="margin-right:0px"
+                      />
+                      <button
+                        class="euiDataGridHeaderCell__button"
                       >
-                        <div>
-                          More Elements
+                        <div
+                          class="euiDataGridHeaderCell__content"
+                        >
+                          <div>
+                            More Elements
+                          </div>
                         </div>
-                      </div>
-                      <div
-                        class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
-                      >
                         <div
-                          class="euiPopover__anchor"
+                          class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
                         >
-                          <span
-                            aria-label="Header actions"
-                            color="text"
-                            data-euiicon-type="arrowDown"
-                            data-test-subj="dataGridHeaderCellActionButton-B"
-                          />
+                          <div
+                            class="euiPopover__anchor"
+                          >
+                            <span
+                              aria-label="Header actions"
+                              color="text"
+                              data-euiicon-type="arrowDown"
+                              data-test-subj="dataGridHeaderCellActionButton-B"
+                            />
+                          </div>
                         </div>
-                      </div>
-                    </button>
+                      </button>
+                    </div>
                   </div>
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:0;top:0px;height:34px;width:100px"
-                  tabindex="-1"
-                >
                   <div
-                    class="euiDataGridRowCell__content"
+                    class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:0;top:0px;height:34px;width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover__anchor euiDataGridRowCell__expand"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandFlex"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
                           <div
-                            class="euiDataGridRowCell__expandContent"
+                            class="euiDataGridRowCell__expandFlex"
                           >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 1, Column: 1:
-                              </span>
-                            </p>
                             <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              0, A
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 1, Column: 1:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                0, A
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiDataGridRowCell__expandButton"
-                          >
-                            <button
-                              aria-hidden="true"
-                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                              tabindex="-1"
-                              title="Click or hit enter to interact with cell content"
-                              type="button"
+                            <div
+                              class="euiDataGridRowCell__expandButton"
                             >
-                              <span
+                              <button
                                 aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="expandMini"
-                              />
-                            </button>
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:100px;top:0px;height:34px;width:100px"
-                  tabindex="-1"
-                >
                   <div
-                    class="euiDataGridRowCell__content"
+                    class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:100px;top:0px;height:34px;width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover__anchor euiDataGridRowCell__expand"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandFlex"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
                           <div
-                            class="euiDataGridRowCell__expandContent"
+                            class="euiDataGridRowCell__expandFlex"
                           >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 1, Column: 2:
-                              </span>
-                            </p>
                             <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              0, B
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 1, Column: 2:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                0, B
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiDataGridRowCell__expandButton"
-                          >
-                            <button
-                              aria-hidden="true"
-                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                              tabindex="-1"
-                              title="Click or hit enter to interact with cell content"
-                              type="button"
+                            <div
+                              class="euiDataGridRowCell__expandButton"
                             >
-                              <span
+                              <button
                                 aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="expandMini"
-                              />
-                            </button>
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:0;top:34px;height:34px;width:100px"
-                  tabindex="-1"
-                >
                   <div
-                    class="euiDataGridRowCell__content"
+                    class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:0;top:34px;height:34px;width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover__anchor euiDataGridRowCell__expand"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandFlex"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
                           <div
-                            class="euiDataGridRowCell__expandContent"
+                            class="euiDataGridRowCell__expandFlex"
                           >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 2, Column: 1:
-                              </span>
-                            </p>
                             <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              1, A
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 2, Column: 1:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                1, A
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiDataGridRowCell__expandButton"
-                          >
-                            <button
-                              aria-hidden="true"
-                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                              tabindex="-1"
-                              title="Click or hit enter to interact with cell content"
-                              type="button"
+                            <div
+                              class="euiDataGridRowCell__expandButton"
                             >
-                              <span
+                              <button
                                 aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="expandMini"
-                              />
-                            </button>
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:100px;top:34px;height:34px;width:100px"
-                  tabindex="-1"
-                >
                   <div
-                    class="euiDataGridRowCell__content"
+                    class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:100px;top:34px;height:34px;width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover__anchor euiDataGridRowCell__expand"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandFlex"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
                           <div
-                            class="euiDataGridRowCell__expandContent"
+                            class="euiDataGridRowCell__expandFlex"
                           >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 2, Column: 2:
-                              </span>
-                            </p>
                             <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              1, B
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 2, Column: 2:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                1, B
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiDataGridRowCell__expandButton"
-                          >
-                            <button
-                              aria-hidden="true"
-                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                              tabindex="-1"
-                              title="Click or hit enter to interact with cell content"
-                              type="button"
+                            <div
+                              class="euiDataGridRowCell__expandButton"
                             >
-                              <span
+                              <button
                                 aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="expandMini"
-                              />
-                            </button>
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:0;top:68px;height:34px;width:100px"
-                  tabindex="-1"
-                >
                   <div
-                    class="euiDataGridRowCell__content"
+                    class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:0;top:68px;height:34px;width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover__anchor euiDataGridRowCell__expand"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandFlex"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
                           <div
-                            class="euiDataGridRowCell__expandContent"
+                            class="euiDataGridRowCell__expandFlex"
                           >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 3, Column: 1:
-                              </span>
-                            </p>
                             <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              2, A
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 3, Column: 1:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                2, A
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiDataGridRowCell__expandButton"
-                          >
-                            <button
-                              aria-hidden="true"
-                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                              tabindex="-1"
-                              title="Click or hit enter to interact with cell content"
-                              type="button"
+                            <div
+                              class="euiDataGridRowCell__expandButton"
                             >
-                              <span
+                              <button
                                 aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="expandMini"
-                              />
-                            </button>
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:100px;top:68px;height:34px;width:100px"
-                  tabindex="-1"
-                >
                   <div
-                    class="euiDataGridRowCell__content"
+                    class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:100px;top:68px;height:34px;width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover__anchor euiDataGridRowCell__expand"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandFlex"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
                           <div
-                            class="euiDataGridRowCell__expandContent"
+                            class="euiDataGridRowCell__expandFlex"
                           >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 3, Column: 2:
-                              </span>
-                            </p>
                             <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              2, B
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 3, Column: 2:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                2, B
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiDataGridRowCell__expandButton"
-                          >
-                            <button
-                              aria-hidden="true"
-                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                              tabindex="-1"
-                              title="Click or hit enter to interact with cell content"
-                              type="button"
+                            <div
+                              class="euiDataGridRowCell__expandButton"
                             >
-                              <span
+                              <button
                                 aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="expandMini"
-                              />
-                            </button>
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -3050,426 +3062,430 @@ Array [
             tabindex="0"
           >
             <div
-              class="euiDataGrid__virtualized"
-              style="position:relative;height:500px;width:500px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
+              style="width:100%;height:100%;overflow:hidden"
             >
               <div
-                style="height:102px;width:200px"
+                class="euiDataGrid__virtualized"
+                style="position:relative;height:500px;width:500px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
               >
                 <div
-                  class="euiDataGridHeader"
-                  data-test-subj="dataGridHeader"
-                  role="row"
+                  style="height:102px;width:200px"
                 >
                   <div
-                    class="euiDataGridHeaderCell"
-                    data-test-subj="dataGridHeaderCell-A"
-                    role="columnheader"
-                    style="width:100px"
-                    tabindex="-1"
+                    class="euiDataGridHeader"
+                    data-test-subj="dataGridHeader"
+                    role="row"
                   >
                     <div
-                      class="euiDataGridColumnResizer"
-                      data-test-subj="dataGridColumnResizer"
-                      style="margin-right:0px"
-                    />
-                    <button
-                      class="euiDataGridHeaderCell__button"
+                      class="euiDataGridHeaderCell"
+                      data-test-subj="dataGridHeaderCell-A"
+                      role="columnheader"
+                      style="width:100px"
+                      tabindex="-1"
                     >
                       <div
-                        class="euiDataGridHeaderCell__content"
-                      >
-                        A
-                      </div>
-                      <div
-                        class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                        class="euiDataGridColumnResizer"
+                        data-test-subj="dataGridColumnResizer"
+                        style="margin-right:0px"
+                      />
+                      <button
+                        class="euiDataGridHeaderCell__button"
                       >
                         <div
-                          class="euiPopover__anchor"
+                          class="euiDataGridHeaderCell__content"
                         >
-                          <span
-                            aria-label="Header actions"
-                            color="text"
-                            data-euiicon-type="arrowDown"
-                            data-test-subj="dataGridHeaderCellActionButton-A"
-                          />
+                          A
                         </div>
-                      </div>
-                    </button>
-                  </div>
-                  <div
-                    class="euiDataGridHeaderCell"
-                    data-test-subj="dataGridHeaderCell-B"
-                    role="columnheader"
-                    style="width:100px"
-                    tabindex="-1"
-                  >
+                        <div
+                          class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                        >
+                          <div
+                            class="euiPopover__anchor"
+                          >
+                            <span
+                              aria-label="Header actions"
+                              color="text"
+                              data-euiicon-type="arrowDown"
+                              data-test-subj="dataGridHeaderCellActionButton-A"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
                     <div
-                      class="euiDataGridColumnResizer"
-                      data-test-subj="dataGridColumnResizer"
-                      style="margin-right:0px"
-                    />
-                    <button
-                      class="euiDataGridHeaderCell__button"
+                      class="euiDataGridHeaderCell"
+                      data-test-subj="dataGridHeaderCell-B"
+                      role="columnheader"
+                      style="width:100px"
+                      tabindex="-1"
                     >
                       <div
-                        class="euiDataGridHeaderCell__content"
-                      >
-                        B
-                      </div>
-                      <div
-                        class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                        class="euiDataGridColumnResizer"
+                        data-test-subj="dataGridColumnResizer"
+                        style="margin-right:0px"
+                      />
+                      <button
+                        class="euiDataGridHeaderCell__button"
                       >
                         <div
-                          class="euiPopover__anchor"
+                          class="euiDataGridHeaderCell__content"
                         >
-                          <span
-                            aria-label="Header actions"
-                            color="text"
-                            data-euiicon-type="arrowDown"
-                            data-test-subj="dataGridHeaderCellActionButton-B"
-                          />
+                          B
                         </div>
-                      </div>
-                    </button>
+                        <div
+                          class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                        >
+                          <div
+                            class="euiPopover__anchor"
+                          >
+                            <span
+                              aria-label="Header actions"
+                              color="text"
+                              data-euiicon-type="arrowDown"
+                              data-test-subj="dataGridHeaderCellActionButton-B"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
                   </div>
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:0;top:0px;height:34px;width:100px"
-                  tabindex="-1"
-                >
                   <div
-                    class="euiDataGridRowCell__content"
+                    class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:0;top:0px;height:34px;width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover__anchor euiDataGridRowCell__expand"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandFlex"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
                           <div
-                            class="euiDataGridRowCell__expandContent"
+                            class="euiDataGridRowCell__expandFlex"
                           >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 1, Column: 1:
-                              </span>
-                            </p>
                             <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              0, A
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 1, Column: 1:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                0, A
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiDataGridRowCell__expandButton"
-                          >
-                            <button
-                              aria-hidden="true"
-                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                              tabindex="-1"
-                              title="Click or hit enter to interact with cell content"
-                              type="button"
+                            <div
+                              class="euiDataGridRowCell__expandButton"
                             >
-                              <span
+                              <button
                                 aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="expandMini"
-                              />
-                            </button>
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:100px;top:0px;height:34px;width:100px"
-                  tabindex="-1"
-                >
                   <div
-                    class="euiDataGridRowCell__content"
+                    class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:100px;top:0px;height:34px;width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover__anchor euiDataGridRowCell__expand"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandFlex"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
                           <div
-                            class="euiDataGridRowCell__expandContent"
+                            class="euiDataGridRowCell__expandFlex"
                           >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 1, Column: 2:
-                              </span>
-                            </p>
                             <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              0, B
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 1, Column: 2:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                0, B
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiDataGridRowCell__expandButton"
-                          >
-                            <button
-                              aria-hidden="true"
-                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                              tabindex="-1"
-                              title="Click or hit enter to interact with cell content"
-                              type="button"
+                            <div
+                              class="euiDataGridRowCell__expandButton"
                             >
-                              <span
+                              <button
                                 aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="expandMini"
-                              />
-                            </button>
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:0;top:34px;height:34px;width:100px"
-                  tabindex="-1"
-                >
                   <div
-                    class="euiDataGridRowCell__content"
+                    class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:0;top:34px;height:34px;width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover__anchor euiDataGridRowCell__expand"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandFlex"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
                           <div
-                            class="euiDataGridRowCell__expandContent"
+                            class="euiDataGridRowCell__expandFlex"
                           >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 2, Column: 1:
-                              </span>
-                            </p>
                             <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              1, A
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 2, Column: 1:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                1, A
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiDataGridRowCell__expandButton"
-                          >
-                            <button
-                              aria-hidden="true"
-                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                              tabindex="-1"
-                              title="Click or hit enter to interact with cell content"
-                              type="button"
+                            <div
+                              class="euiDataGridRowCell__expandButton"
                             >
-                              <span
+                              <button
                                 aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="expandMini"
-                              />
-                            </button>
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:100px;top:34px;height:34px;width:100px"
-                  tabindex="-1"
-                >
                   <div
-                    class="euiDataGridRowCell__content"
+                    class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:100px;top:34px;height:34px;width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover__anchor euiDataGridRowCell__expand"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandFlex"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
                           <div
-                            class="euiDataGridRowCell__expandContent"
+                            class="euiDataGridRowCell__expandFlex"
                           >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 2, Column: 2:
-                              </span>
-                            </p>
                             <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              1, B
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 2, Column: 2:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                1, B
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiDataGridRowCell__expandButton"
-                          >
-                            <button
-                              aria-hidden="true"
-                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                              tabindex="-1"
-                              title="Click or hit enter to interact with cell content"
-                              type="button"
+                            <div
+                              class="euiDataGridRowCell__expandButton"
                             >
-                              <span
+                              <button
                                 aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="expandMini"
-                              />
-                            </button>
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:0;top:68px;height:34px;width:100px"
-                  tabindex="-1"
-                >
                   <div
-                    class="euiDataGridRowCell__content"
+                    class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:0;top:68px;height:34px;width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover__anchor euiDataGridRowCell__expand"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandFlex"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
                           <div
-                            class="euiDataGridRowCell__expandContent"
+                            class="euiDataGridRowCell__expandFlex"
                           >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 3, Column: 1:
-                              </span>
-                            </p>
                             <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              2, A
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 3, Column: 1:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                2, A
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiDataGridRowCell__expandButton"
-                          >
-                            <button
-                              aria-hidden="true"
-                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                              tabindex="-1"
-                              title="Click or hit enter to interact with cell content"
-                              type="button"
+                            <div
+                              class="euiDataGridRowCell__expandButton"
                             >
-                              <span
+                              <button
                                 aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="expandMini"
-                              />
-                            </button>
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
-                  data-test-subj="dataGridRowCell"
-                  role="gridcell"
-                  style="position:absolute;left:100px;top:68px;height:34px;width:100px"
-                  tabindex="-1"
-                >
                   <div
-                    class="euiDataGridRowCell__content"
+                    class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:100px;top:68px;height:34px;width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                      class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover__anchor euiDataGridRowCell__expand"
+                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
                       >
                         <div
-                          class="euiDataGridRowCell__expandFlex"
+                          class="euiPopover__anchor euiDataGridRowCell__expand"
                         >
                           <div
-                            class="euiDataGridRowCell__expandContent"
+                            class="euiDataGridRowCell__expandFlex"
                           >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 3, Column: 2:
-                              </span>
-                            </p>
                             <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              2, B
+                              class="euiDataGridRowCell__expandContent"
+                            >
+                              <p
+                                class="euiScreenReaderOnly"
+                              >
+                                <span>
+                                  Row: 3, Column: 2:
+                                </span>
+                              </p>
+                              <div
+                                class="euiDataGridRowCell__truncate"
+                              >
+                                2, B
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="euiDataGridRowCell__expandButton"
-                          >
-                            <button
-                              aria-hidden="true"
-                              class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                              tabindex="-1"
-                              title="Click or hit enter to interact with cell content"
-                              type="button"
+                            <div
+                              class="euiDataGridRowCell__expandButton"
                             >
-                              <span
+                              <button
                                 aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="expandMini"
-                              />
-                            </button>
+                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
+                                tabindex="-1"
+                                title="Click or hit enter to interact with cell content"
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="euiButtonIcon__icon"
+                                  data-euiicon-type="expandMini"
+                                />
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index 382e5e3b880..e6ffd45478b 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -650,29 +650,6 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
   const [isFullScreen, setIsFullScreen] = useState(false);
   const [gridWidth, setGridWidth] = useState(0);
 
-  // default DOM layout rules allow block content to naturally expand to the full document width
-  // while height does not automatically expand; this gives us a little extra work when managing height:
-  // if a `height` prop is set, it will be applied via `style` to constrain the grid's DOM, which is reacted to with a resize observer and tracked with `gridHeight`
-  // if no `height` is set - or is unset - we need to unapply any existing `gridHeight` value
-  // this triggers a double re-render when the grid is switched from constrained to unconstrained
-  // but in reality ... maybe don't do that?
-  const [gridHeight, setGridHeight] = useState(0);
-  const pageSize = pagination?.pageSize;
-  const resetGridHeight = useCallback(() => {
-    setGridHeight(0);
-  }, []);
-  useEffect(() => {
-    if (height == null) {
-      // if already 0 this update will be ignored
-      // if not already 0, this resets the height constraint so a new value can be observed
-      setGridHeight(0);
-    }
-  }, [
-    height,
-    pageSize,
-    rowCount, // recompute height if the rowCount changes
-  ]);
-
   const [containerRef, _setContainerRef] = useState<HTMLDivElement | null>(
     null
   );
@@ -749,27 +726,16 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
   };
 
   // enables/disables grid controls based on available width
-  const [sizeIsStable, setSizeIsStable] = useState(false);
-
   const [resizeRef, setResizeRef] = useState<HTMLDivElement | null>(null);
-  const gridDimensions = useResizeObserver(resizeRef);
+  const gridDimensions = useResizeObserver(resizeRef, 'width');
   useEffect(() => {
     if (resizeRef) {
-      if (sizeIsStable) {
-        const { height, width } = gridDimensions;
-        setGridWidth(width);
-        setGridHeight((currentHeight) => {
-          // because of a race condition between useResizeObserver which
-          // fires async outside of the React lifecycle
-          // and useEffect, we allow the height to grow but not shrink
-          return currentHeight < height ? height : currentHeight;
-        });
-      }
+      const { width } = gridDimensions;
+      setGridWidth(width);
     } else {
       setGridWidth(0);
-      setGridHeight(0);
     }
-  }, [sizeIsStable, resizeRef, gridDimensions]);
+  }, [resizeRef, gridDimensions]);
 
   const hasRoomForGridControls = IS_JEST_ENVIRONMENT
     ? true
@@ -1060,8 +1026,8 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
                                 headerIsInteractive,
                                 setFocusedCell
                               )}
-                              className="euiDataGrid__verticalScroll"
-                              ref={setResizeRef}>
+                              ref={setResizeRef}
+                              className="euiDataGrid__verticalScroll">
                               <div className="euiDataGrid__overflow">
                                 {inMemory ? (
                                   <EuiDataGridInMemoryRenderer
@@ -1102,8 +1068,8 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
                                     setColumnWidth={setColumnWidth}
                                     headerIsInteractive={headerIsInteractive}
                                     handleHeaderMutation={handleHeaderMutation}
-                                    gridHeight={gridHeight}
-                                    gridWidth={gridWidth}
+                                    // gridHeight={gridHeight}
+                                    // gridWidth={gridWidth}
                                     inMemoryValues={inMemoryValues}
                                     inMemory={inMemory}
                                     schemaDetectors={allSchemaDetectors}
@@ -1115,8 +1081,6 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
                                     }
                                     rowCount={rowCount}
                                     interactiveCellId={interactiveCellId}
-                                    resetGridHeight={resetGridHeight}
-                                    setSizeIsStable={setSizeIsStable}
                                   />
                                 </div>
                               </div>
diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index c4012eb781f..8d268e7338f 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -62,8 +62,6 @@ import {
 import { useResizeObserver } from '../observer/resize_observer';
 
 export interface EuiDataGridBodyProps {
-  gridHeight?: number;
-  gridWidth: number;
   columnWidths: EuiDataGridColumnWidths;
   defaultColumnWidth?: number | null;
   leadingControlColumns?: EuiDataGridControlColumn[];
@@ -84,8 +82,6 @@ export interface EuiDataGridBodyProps {
   handleHeaderMutation: MutationCallback;
   setVisibleColumns: EuiDataGridHeaderRowProps['setVisibleColumns'];
   switchColumnPos: EuiDataGridHeaderRowProps['switchColumnPos'];
-  resetGridHeight: () => void;
-  setSizeIsStable: (sizeIsStable: boolean) => void;
 }
 
 const defaultComparator: NonNullable<
@@ -269,8 +265,6 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
   props
 ) => {
   const {
-    gridHeight,
-    gridWidth,
     columnWidths,
     defaultColumnWidth,
     leadingControlColumns = [],
@@ -291,12 +285,8 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     handleHeaderMutation,
     setVisibleColumns,
     switchColumnPos,
-    resetGridHeight,
-    setSizeIsStable,
   } = props;
 
-  const hasFooterRow = renderFooterCellValue;
-
   const [headerRowRef, setHeaderRowRef] = useState<HTMLDivElement | null>(null);
   const [footerRowRef, setFooterRowRef] = useState<HTMLDivElement | null>(null);
 
@@ -307,16 +297,6 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
   const { height: headerRowHeight } = useResizeObserver(headerRowRef, 'height');
   const { height: footerRowHeight } = useResizeObserver(footerRowRef, 'height');
 
-  useEffect(() => {
-    const isHeaderStable = headerRowHeight !== 0;
-    const isFooterStable = !hasFooterRow || footerRowHeight !== 0;
-    setSizeIsStable(isHeaderStable && isFooterStable);
-  }, [hasFooterRow, setSizeIsStable, headerRowHeight, footerRowHeight]);
-
-  useEffect(() => {
-    resetGridHeight();
-  }, [resetGridHeight, headerRowHeight, footerRowHeight]);
-
   const startRow = pagination ? pagination.pageIndex * pagination.pageSize : 0;
   let endRow = pagination
     ? (pagination.pageIndex + 1) * pagination.pageSize
@@ -523,51 +503,77 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     if (gridRef.current) gridRef.current.resetAfterRowIndex(0);
   }, [getRowHeight]);
 
-  const height =
-    // intentionally ignoring gridHeight if it is null/undefined/0
-    // and using it only if we have found the header&footer heights
-    (headerRowHeight && (!hasFooterRow || footerRowHeight) && gridHeight) ||
-    // otherwise compute the height
+  const unconstrainedHeight =
     rowHeight * visibleRowIndices.length +
-      SCROLLBAR_HEIGHT +
-      headerRowHeight +
-      footerRowHeight;
+    SCROLLBAR_HEIGHT +
+    headerRowHeight +
+    footerRowHeight;
+
+  // unable to determine this until the container's size is known anyway
+  const unconstrainedWidth = 0;
+
+  const [height, setHeight] = useState<number | undefined>(undefined);
+  const [width, setWidth] = useState<number | undefined>(undefined);
+
+  // reset height constraint when rowCount changes
+  useEffect(() => {
+    setHeight(undefined);
+  }, [rowCount]);
+
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const wrapperDimensions = useResizeObserver(wrapperRef.current);
+
+  useEffect(() => {
+    const boundingRect = wrapperRef.current!.getBoundingClientRect();
+
+    if (boundingRect.height !== unconstrainedHeight) {
+      // unconstrained height did not change, apply the bounding height
+      setHeight(boundingRect.height);
+    }
+    if (boundingRect.width !== unconstrainedWidth) {
+      setWidth(boundingRect.width);
+    }
+  }, [unconstrainedHeight, wrapperDimensions]);
 
   return (
-    <DataGridWrapperRowsContext.Provider
-      value={{ headerRowHeight, headerRow, footerRow }}>
-      <Grid
-        ref={gridRef}
-        innerElementType={InnerElement}
-        className="euiDataGrid__virtualized"
-        columnCount={
-          leadingControlColumns.length +
-          columns.length +
-          trailingControlColumns.length
-        }
-        width={IS_JEST_ENVIRONMENT ? 500 : gridWidth}
-        columnWidth={getWidth}
-        height={IS_JEST_ENVIRONMENT ? 500 : height}
-        rowHeight={getRowHeight}
-        itemData={{
-          setRowHeight,
-          rowMap,
-          rowOffset: pagination
-            ? pagination.pageIndex * pagination.pageSize
-            : 0,
-          leadingControlColumns,
-          trailingControlColumns,
-          columns,
-          schema,
-          popoverContents: mergedPopoverContents,
-          columnWidths,
-          defaultColumnWidth,
-          renderCellValue,
-          interactiveCellId,
-        }}
-        rowCount={visibleRowIndices.length}>
-        {Cell}
-      </Grid>
-    </DataGridWrapperRowsContext.Provider>
+    <div
+      style={{ width: '100%', height: '100%', overflow: 'hidden' }}
+      ref={wrapperRef}>
+      <DataGridWrapperRowsContext.Provider
+        value={{ headerRowHeight, headerRow, footerRow }}>
+        <Grid
+          ref={gridRef}
+          innerElementType={InnerElement}
+          className="euiDataGrid__virtualized"
+          columnCount={
+            leadingControlColumns.length +
+            columns.length +
+            trailingControlColumns.length
+          }
+          width={IS_JEST_ENVIRONMENT ? 500 : width || unconstrainedWidth}
+          columnWidth={getWidth}
+          height={IS_JEST_ENVIRONMENT ? 500 : height || unconstrainedHeight}
+          rowHeight={getRowHeight}
+          itemData={{
+            setRowHeight,
+            rowMap,
+            rowOffset: pagination
+              ? pagination.pageIndex * pagination.pageSize
+              : 0,
+            leadingControlColumns,
+            trailingControlColumns,
+            columns,
+            schema,
+            popoverContents: mergedPopoverContents,
+            columnWidths,
+            defaultColumnWidth,
+            renderCellValue,
+            interactiveCellId,
+          }}
+          rowCount={visibleRowIndices.length}>
+          {Cell}
+        </Grid>
+      </DataGridWrapperRowsContext.Provider>
+    </div>
   );
 };

From 4e5111bf205e705ab00252314768fd6b4818a1c0 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Tue, 12 Jan 2021 14:45:03 -0700
Subject: [PATCH 32/54] Fix datagrid setCellProps with a style object

---
 src/components/datagrid/data_grid.test.tsx | 4 ++++
 src/components/datagrid/data_grid_cell.tsx | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx
index 4d15e5fdc2a..5c0725bc122 100644
--- a/src/components/datagrid/data_grid.test.tsx
+++ b/src/components/datagrid/data_grid.test.tsx
@@ -523,6 +523,7 @@ describe('EuiDataGrid', () => {
             "onKeyDown": [Function],
             "role": "gridcell",
             "style": Object {
+              "color": "red",
               "height": 34,
               "left": 0,
               "position": "absolute",
@@ -539,6 +540,7 @@ describe('EuiDataGrid', () => {
             "onKeyDown": [Function],
             "role": "gridcell",
             "style": Object {
+              "color": "blue",
               "height": 34,
               "left": 100,
               "position": "absolute",
@@ -555,6 +557,7 @@ describe('EuiDataGrid', () => {
             "onKeyDown": [Function],
             "role": "gridcell",
             "style": Object {
+              "color": "red",
               "height": 34,
               "left": 0,
               "position": "absolute",
@@ -571,6 +574,7 @@ describe('EuiDataGrid', () => {
             "onKeyDown": [Function],
             "role": "gridcell",
             "style": Object {
+              "color": "blue",
               "height": 34,
               "left": 100,
               "position": "absolute",
diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index 2f3964e7589..6e63ed448ed 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -341,7 +341,7 @@ export class EuiDataGridCell extends Component<
       className: classNames(cellClasses, this.state.cellProps.className),
     };
 
-    cellProps.style = { ...style, width };
+    cellProps.style = { ...style, width, ...cellProps.style };
 
     const handleCellKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
       if (isExpandable) {

From 1b2788ba03d3da9e72820d7c1f1f8e3b083608e6 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Tue, 12 Jan 2021 14:48:28 -0700
Subject: [PATCH 33/54] remove an inaccurate comment

---
 src/components/datagrid/data_grid_body.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index 8d268e7338f..be1500a7079 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -527,7 +527,6 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     const boundingRect = wrapperRef.current!.getBoundingClientRect();
 
     if (boundingRect.height !== unconstrainedHeight) {
-      // unconstrained height did not change, apply the bounding height
       setHeight(boundingRect.height);
     }
     if (boundingRect.width !== unconstrainedWidth) {

From c05d4937655fe26581a47207e923fc31773a8b8d Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Thu, 14 Jan 2021 14:39:37 +0100
Subject: [PATCH 34/54] clean up

---
 .../__snapshots__/data_grid.test.tsx.snap     | 1032 +++++------------
 .../datagrid/_data_grid_data_row.scss         |   52 +-
 src/components/datagrid/data_grid.test.tsx    |   27 +-
 src/components/datagrid/data_grid_cell.tsx    |   19 +-
 .../datagrid/data_grid_cell_buttons.tsx       |    3 -
 5 files changed, 329 insertions(+), 804 deletions(-)

diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index 9a690025567..3b560bd4ca4 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -1145,46 +1145,25 @@ Array [
                       class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
-                            <div
-                              class="euiDataGridRowCell__expandContent"
+                            <p
+                              class="euiScreenReaderOnly"
                             >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 1, Column: 1:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                0, A
-                              </div>
-                            </div>
+                              <span>
+                                Row: 1, Column: 1:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandButton"
+                              class="euiDataGridRowCell__truncate"
                             >
-                              <button
-                                aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
+                              0, A
                             </div>
                           </div>
                         </div>
@@ -1202,46 +1181,25 @@ Array [
                       class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
-                            <div
-                              class="euiDataGridRowCell__expandContent"
+                            <p
+                              class="euiScreenReaderOnly"
                             >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 1, Column: 2:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                0, B
-                              </div>
-                            </div>
+                              <span>
+                                Row: 1, Column: 2:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandButton"
+                              class="euiDataGridRowCell__truncate"
                             >
-                              <button
-                                aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
+                              0, B
                             </div>
                           </div>
                         </div>
@@ -1259,46 +1217,25 @@ Array [
                       class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
-                            <div
-                              class="euiDataGridRowCell__expandContent"
+                            <p
+                              class="euiScreenReaderOnly"
                             >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 2, Column: 1:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                1, A
-                              </div>
-                            </div>
+                              <span>
+                                Row: 2, Column: 1:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandButton"
+                              class="euiDataGridRowCell__truncate"
                             >
-                              <button
-                                aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
+                              1, A
                             </div>
                           </div>
                         </div>
@@ -1316,46 +1253,25 @@ Array [
                       class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
-                            <div
-                              class="euiDataGridRowCell__expandContent"
+                            <p
+                              class="euiScreenReaderOnly"
                             >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 2, Column: 2:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                1, B
-                              </div>
-                            </div>
+                              <span>
+                                Row: 2, Column: 2:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandButton"
+                              class="euiDataGridRowCell__truncate"
                             >
-                              <button
-                                aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
+                              1, B
                             </div>
                           </div>
                         </div>
@@ -1373,46 +1289,25 @@ Array [
                       class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
-                            <div
-                              class="euiDataGridRowCell__expandContent"
+                            <p
+                              class="euiScreenReaderOnly"
                             >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 3, Column: 1:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                2, A
-                              </div>
-                            </div>
+                              <span>
+                                Row: 3, Column: 1:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandButton"
+                              class="euiDataGridRowCell__truncate"
                             >
-                              <button
-                                aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
+                              2, A
                             </div>
                           </div>
                         </div>
@@ -1430,46 +1325,25 @@ Array [
                       class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
-                            <div
-                              class="euiDataGridRowCell__expandContent"
+                            <p
+                              class="euiScreenReaderOnly"
                             >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 3, Column: 2:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                2, B
-                              </div>
-                            </div>
+                              <span>
+                                Row: 3, Column: 2:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandButton"
+                              class="euiDataGridRowCell__truncate"
                             >
-                              <button
-                                aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
+                              2, B
                             </div>
                           </div>
                         </div>
@@ -1791,46 +1665,25 @@ Array [
                       class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
-                            <div
-                              class="euiDataGridRowCell__expandContent"
+                            <p
+                              class="euiScreenReaderOnly"
                             >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 1, Column: 2:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                0, A
-                              </div>
-                            </div>
+                              <span>
+                                Row: 1, Column: 2:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandButton"
+                              class="euiDataGridRowCell__truncate"
                             >
-                              <button
-                                aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
+                              0, A
                             </div>
                           </div>
                         </div>
@@ -1848,46 +1701,25 @@ Array [
                       class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
-                            <div
-                              class="euiDataGridRowCell__expandContent"
+                            <p
+                              class="euiScreenReaderOnly"
                             >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 1, Column: 3:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                0, B
-                              </div>
-                            </div>
+                              <span>
+                                Row: 1, Column: 3:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandButton"
+                              class="euiDataGridRowCell__truncate"
                             >
-                              <button
-                                aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
+                              0, B
                             </div>
                           </div>
                         </div>
@@ -1999,46 +1831,25 @@ Array [
                       class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
-                            <div
-                              class="euiDataGridRowCell__expandContent"
+                            <p
+                              class="euiScreenReaderOnly"
                             >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 2, Column: 2:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                1, A
-                              </div>
-                            </div>
+                              <span>
+                                Row: 2, Column: 2:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandButton"
+                              class="euiDataGridRowCell__truncate"
                             >
-                              <button
-                                aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
+                              1, A
                             </div>
                           </div>
                         </div>
@@ -2056,46 +1867,25 @@ Array [
                       class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
-                            <div
-                              class="euiDataGridRowCell__expandContent"
+                            <p
+                              class="euiScreenReaderOnly"
                             >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 2, Column: 3:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                1, B
-                              </div>
-                            </div>
+                              <span>
+                                Row: 2, Column: 3:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandButton"
+                              class="euiDataGridRowCell__truncate"
                             >
-                              <button
-                                aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
+                              1, B
                             </div>
                           </div>
                         </div>
@@ -2207,46 +1997,25 @@ Array [
                       class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
-                            <div
-                              class="euiDataGridRowCell__expandContent"
+                            <p
+                              class="euiScreenReaderOnly"
                             >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 3, Column: 2:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                2, A
-                              </div>
-                            </div>
+                              <span>
+                                Row: 3, Column: 2:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandButton"
+                              class="euiDataGridRowCell__truncate"
                             >
-                              <button
-                                aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
+                              2, A
                             </div>
                           </div>
                         </div>
@@ -2264,46 +2033,25 @@ Array [
                       class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
-                            <div
-                              class="euiDataGridRowCell__expandContent"
+                            <p
+                              class="euiScreenReaderOnly"
                             >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 3, Column: 3:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                2, B
-                              </div>
-                            </div>
+                              <span>
+                                Row: 3, Column: 3:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandButton"
+                              class="euiDataGridRowCell__truncate"
                             >
-                              <button
-                                aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
+                              2, B
                             </div>
                           </div>
                         </div>
@@ -2594,46 +2342,25 @@ Array [
                       class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
-                            <div
-                              class="euiDataGridRowCell__expandContent"
+                            <p
+                              class="euiScreenReaderOnly"
                             >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 1, Column: 1:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                0, A
-                              </div>
-                            </div>
+                              <span>
+                                Row: 1, Column: 1:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandButton"
+                              class="euiDataGridRowCell__truncate"
                             >
-                              <button
-                                aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
+                              0, A
                             </div>
                           </div>
                         </div>
@@ -2651,46 +2378,25 @@ Array [
                       class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
-                            <div
-                              class="euiDataGridRowCell__expandContent"
+                            <p
+                              class="euiScreenReaderOnly"
                             >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 1, Column: 2:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                0, B
-                              </div>
-                            </div>
+                              <span>
+                                Row: 1, Column: 2:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandButton"
+                              class="euiDataGridRowCell__truncate"
                             >
-                              <button
-                                aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
+                              0, B
                             </div>
                           </div>
                         </div>
@@ -2708,46 +2414,25 @@ Array [
                       class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
-                            <div
-                              class="euiDataGridRowCell__expandContent"
+                            <p
+                              class="euiScreenReaderOnly"
                             >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 2, Column: 1:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                1, A
-                              </div>
-                            </div>
+                              <span>
+                                Row: 2, Column: 1:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandButton"
+                              class="euiDataGridRowCell__truncate"
                             >
-                              <button
-                                aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
+                              1, A
                             </div>
                           </div>
                         </div>
@@ -2765,46 +2450,25 @@ Array [
                       class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
-                            <div
-                              class="euiDataGridRowCell__expandContent"
+                            <p
+                              class="euiScreenReaderOnly"
                             >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 2, Column: 2:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                1, B
-                              </div>
-                            </div>
+                              <span>
+                                Row: 2, Column: 2:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandButton"
+                              class="euiDataGridRowCell__truncate"
                             >
-                              <button
-                                aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
+                              1, B
                             </div>
                           </div>
                         </div>
@@ -2822,46 +2486,25 @@ Array [
                       class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
-                            <div
-                              class="euiDataGridRowCell__expandContent"
+                            <p
+                              class="euiScreenReaderOnly"
                             >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 3, Column: 1:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                2, A
-                              </div>
-                            </div>
+                              <span>
+                                Row: 3, Column: 1:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandButton"
+                              class="euiDataGridRowCell__truncate"
                             >
-                              <button
-                                aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
+                              2, A
                             </div>
                           </div>
                         </div>
@@ -2879,46 +2522,25 @@ Array [
                       class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
-                            <div
-                              class="euiDataGridRowCell__expandContent"
+                            <p
+                              class="euiScreenReaderOnly"
                             >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 3, Column: 2:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                2, B
-                              </div>
-                            </div>
+                              <span>
+                                Row: 3, Column: 2:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandButton"
+                              class="euiDataGridRowCell__truncate"
                             >
-                              <button
-                                aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
+                              2, B
                             </div>
                           </div>
                         </div>
@@ -3160,46 +2782,25 @@ Array [
                       class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
-                            <div
-                              class="euiDataGridRowCell__expandContent"
+                            <p
+                              class="euiScreenReaderOnly"
                             >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 1, Column: 1:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                0, A
-                              </div>
-                            </div>
+                              <span>
+                                Row: 1, Column: 1:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandButton"
+                              class="euiDataGridRowCell__truncate"
                             >
-                              <button
-                                aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
+                              0, A
                             </div>
                           </div>
                         </div>
@@ -3217,46 +2818,25 @@ Array [
                       class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
-                            <div
-                              class="euiDataGridRowCell__expandContent"
+                            <p
+                              class="euiScreenReaderOnly"
                             >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 1, Column: 2:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                0, B
-                              </div>
-                            </div>
+                              <span>
+                                Row: 1, Column: 2:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandButton"
+                              class="euiDataGridRowCell__truncate"
                             >
-                              <button
-                                aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
+                              0, B
                             </div>
                           </div>
                         </div>
@@ -3274,46 +2854,25 @@ Array [
                       class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
-                            <div
-                              class="euiDataGridRowCell__expandContent"
+                            <p
+                              class="euiScreenReaderOnly"
                             >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 2, Column: 1:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                1, A
-                              </div>
-                            </div>
+                              <span>
+                                Row: 2, Column: 1:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandButton"
+                              class="euiDataGridRowCell__truncate"
                             >
-                              <button
-                                aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
+                              1, A
                             </div>
                           </div>
                         </div>
@@ -3331,46 +2890,25 @@ Array [
                       class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
-                            <div
-                              class="euiDataGridRowCell__expandContent"
+                            <p
+                              class="euiScreenReaderOnly"
                             >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 2, Column: 2:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                1, B
-                              </div>
-                            </div>
+                              <span>
+                                Row: 2, Column: 2:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandButton"
+                              class="euiDataGridRowCell__truncate"
                             >
-                              <button
-                                aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
+                              1, B
                             </div>
                           </div>
                         </div>
@@ -3388,46 +2926,25 @@ Array [
                       class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
-                            <div
-                              class="euiDataGridRowCell__expandContent"
+                            <p
+                              class="euiScreenReaderOnly"
                             >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 3, Column: 1:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                2, A
-                              </div>
-                            </div>
+                              <span>
+                                Row: 3, Column: 1:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandButton"
+                              class="euiDataGridRowCell__truncate"
                             >
-                              <button
-                                aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
+                              2, A
                             </div>
                           </div>
                         </div>
@@ -3445,46 +2962,25 @@ Array [
                       class="euiDataGridRowCell__content"
                     >
                       <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                        class="euiDataGridRowCell__expand"
                       >
                         <div
-                          class="euiPopover__anchor euiDataGridRowCell__expand"
+                          class="euiDataGridRowCell__expandFlex"
                         >
                           <div
-                            class="euiDataGridRowCell__expandFlex"
+                            class="euiDataGridRowCell__expandContent"
                           >
-                            <div
-                              class="euiDataGridRowCell__expandContent"
+                            <p
+                              class="euiScreenReaderOnly"
                             >
-                              <p
-                                class="euiScreenReaderOnly"
-                              >
-                                <span>
-                                  Row: 3, Column: 2:
-                                </span>
-                              </p>
-                              <div
-                                class="euiDataGridRowCell__truncate"
-                              >
-                                2, B
-                              </div>
-                            </div>
+                              <span>
+                                Row: 3, Column: 2:
+                              </span>
+                            </p>
                             <div
-                              class="euiDataGridRowCell__expandButton"
+                              class="euiDataGridRowCell__truncate"
                             >
-                              <button
-                                aria-hidden="true"
-                                class="euiButtonIcon euiButtonIcon--ghost euiDataGridRowCell__expandButtonIcon"
-                                tabindex="-1"
-                                title="Click or hit enter to interact with cell content"
-                                type="button"
-                              >
-                                <span
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="expandMini"
-                                />
-                              </button>
+                              2, B
                             </div>
                           </div>
                         </div>
diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index f890b14fbc1..07b45ece8c9 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/src/components/datagrid/_data_grid_data_row.scss
@@ -3,6 +3,18 @@
   min-width: 100%; // Needed to prevent wraps. Inline flex is tricky
 }
 
+@keyframes euiDataGridCellButtonSlideIn {
+  from {
+    margin-left: 0;
+    width: 0;
+  }
+
+  to {
+    margin-left: $euiDataGridCellPaddingM;
+    width: $euiSizeM;
+  }
+}
+
 @include euiDataGridRowCell {
   @include euiFontSizeS;
 
@@ -38,11 +50,31 @@
   // Long delays on hover to mitigate the accordion effect
   &:hover {
     .euiDataGridRowCell__expandButtonIcon {
-      transition: margin $euiAnimSpeedFast 500ms, width $euiAnimSpeedFast 500ms;
+      animation-duration: $euiAnimSpeedFast;
+      animation-name: euiDataGridCellButtonSlideIn;
+      animation-iteration-count: 1;
+      animation-delay: 1000ms;
+      animation-fill-mode: forwards;  
+    }
+
+    .euiDataGridRowCell__actionButtonIcon {
+      animation-duration: $euiAnimSpeedFast;
+      animation-name: euiDataGridCellButtonSlideIn;
+      animation-iteration-count: 1;
+      animation-delay: 1000ms;
+      animation-fill-mode: forwards;  
+    }
+  }
+
+  &:not(:hover) {
+    .euiDataGridRowCell__expandButtonIcon {
+      margin-left: $euiDataGridCellPaddingM;
+      width: $euiSizeM;
     }
 
     .euiDataGridRowCell__actionButtonIcon {
-      transition: margin $euiAnimSpeedFast 500ms, width $euiAnimSpeedFast 500ms;
+      margin-left: $euiDataGridCellPaddingM;
+      width: $euiSizeM;
     }
   }
 
@@ -74,6 +106,7 @@
       white-space: nowrap;
     }
   }
+
 }
 
 .euiDataGridRowCell__popover {
@@ -102,21 +135,12 @@
   display: flex;
   flex-grow: 0;
 
-  &.euiDataGridRowCell__expandButton-isHoveredOrFocused {
-    .euiDataGridRowCell__expandButtonIcon {
-      margin-left: $euiDataGridCellPaddingM;
-      width: $euiSizeM;
-      background: $euiColorPrimary; // Needed to prevent the bg-color of .euiButtonIcon--text:focus
-    }
-
-    .euiDataGridRowCell__actionButtonIcon {
-      margin-left: $euiDataGridCellPaddingM;
-      width: $euiSizeM;
-    }
+  .euiDataGridRowCell__expandButtonIcon {
+    background: $euiColorPrimary; // Needed to prevent the bg-color of .euiButtonIcon--text:focus
   }
-
 }
 
+
 .euiDataGridRowCell__expandButtonIcon {
   height: $euiSizeM;
   min-height: $euiSizeM;
diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx
index 5c0725bc122..380517d5dcf 100644
--- a/src/components/datagrid/data_grid.test.tsx
+++ b/src/components/datagrid/data_grid.test.tsx
@@ -28,6 +28,7 @@ import {
 import { EuiDataGridColumnResizer } from './data_grid_column_resizer';
 import { keys } from '../../services';
 import { act } from 'react-dom/test-utils';
+import { EuiDataGridCellButtons } from './data_grid_cell_buttons';
 
 function getFocusableCell(component: ReactWrapper) {
   return findTestSubject(component, 'dataGridRowCell').find('[tabIndex=0]');
@@ -521,6 +522,8 @@ describe('EuiDataGrid', () => {
             "onBlur": [Function],
             "onFocus": [Function],
             "onKeyDown": [Function],
+            "onMouseEnter": [Function],
+            "onMouseLeave": [Function],
             "role": "gridcell",
             "style": Object {
               "color": "red",
@@ -538,6 +541,8 @@ describe('EuiDataGrid', () => {
             "onBlur": [Function],
             "onFocus": [Function],
             "onKeyDown": [Function],
+            "onMouseEnter": [Function],
+            "onMouseLeave": [Function],
             "role": "gridcell",
             "style": Object {
               "color": "blue",
@@ -555,6 +560,8 @@ describe('EuiDataGrid', () => {
             "onBlur": [Function],
             "onFocus": [Function],
             "onKeyDown": [Function],
+            "onMouseEnter": [Function],
+            "onMouseLeave": [Function],
             "role": "gridcell",
             "style": Object {
               "color": "red",
@@ -572,6 +579,8 @@ describe('EuiDataGrid', () => {
             "onBlur": [Function],
             "onFocus": [Function],
             "onKeyDown": [Function],
+            "onMouseEnter": [Function],
+            "onMouseLeave": [Function],
             "role": "gridcell",
             "style": Object {
               "color": "blue",
@@ -1986,7 +1995,7 @@ describe('EuiDataGrid', () => {
   });
 
   describe('render column cell actions', () => {
-    it('renders various column cell actions configurations', () => {
+    it('renders various column cell actions configurations after cell gets hovered', async () => {
       const alertFn = jest.fn();
       const happyFn = jest.fn();
       const component = mount(
@@ -2041,9 +2050,21 @@ describe('EuiDataGrid', () => {
         />
       );
 
-      findTestSubject(component, 'alertAction').at(1).simulate('click');
+      // cell buttons should not get rendered for unfocused, unhovered cell
+      expect(findTestSubject(component, 'alertAction').exists()).toBe(false);
+      expect(findTestSubject(component, 'happyAction').exists()).toBe(false);
+
+      await act(async () => {
+        findTestSubject(component, 'dataGridRowCell')
+          .at(1)
+          .prop('onMouseEnter')!({} as React.MouseEvent);
+      });
+
+      component.update();
+
+      findTestSubject(component, 'alertAction').at(0).simulate('click');
       expect(alertFn).toHaveBeenCalledWith(1, 'A');
-      findTestSubject(component, 'happyAction').at(1).simulate('click');
+      findTestSubject(component, 'happyAction').at(0).simulate('click');
       expect(happyFn).toHaveBeenCalledWith(1, 'A');
       alertFn.mockReset();
       happyFn.mockReset();
diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index 4d869f3a5fb..ecedaffdb9b 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -102,7 +102,6 @@ interface EuiDataGridCellState {
   isFocused: boolean; // tracks if this cell has focus or not, used to enable tabIndex on the cell
   isEntered: boolean; // enables focus trap for non-expandable cells with multiple interactive elements
   isHovered: boolean;
-  renderIsHovered: boolean;
   disableCellTabIndex: boolean; // disables tabIndex on the wrapping cell, used for focus management of a single interactive child
 }
 
@@ -147,7 +146,6 @@ export class EuiDataGridCell extends Component<
     isFocused: false,
     isEntered: false,
     isHovered: false,
-    renderIsHovered: false,
     disableCellTabIndex: false,
   };
   unsubscribeCell?: Function = () => {};
@@ -260,7 +258,6 @@ export class EuiDataGridCell extends Component<
     if (nextState.isEntered !== this.state.isEntered) return true;
     if (nextState.isFocused !== this.state.isFocused) return true;
     if (nextState.isHovered !== this.state.isHovered) return true;
-    if (nextState.renderIsHovered !== this.state.renderIsHovered) return true;
     if (nextState.disableCellTabIndex !== this.state.disableCellTabIndex)
       return true;
 
@@ -296,7 +293,7 @@ export class EuiDataGridCell extends Component<
   };
 
   onBlur = () => {
-    this.setState({ disableCellTabIndex: false });
+    this.setState({ disableCellTabIndex: false, isFocused: false });
   };
 
   preventTabbing = () => {
@@ -485,11 +482,6 @@ export class EuiDataGridCell extends Component<
       this.state.isHovered ||
       this.state.popoverIsOpen;
 
-    if (showCellButtons) {
-      console.log('showing cell buttons for ' + rowIndex + ',' + colIndex);
-      console.log('renderIsHovered:' + this.state.renderIsHovered);
-    }
-
     if (isExpandable || (column && column.cellActions)) {
       anchorContent = (
         <div className="euiDataGridRowCell__expandFlex">
@@ -516,7 +508,6 @@ export class EuiDataGridCell extends Component<
               rowIndex={rowIndex}
               column={column}
               popoverIsOpen={this.state.popoverIsOpen}
-              isHoveredOrFocused={this.state.renderIsHovered}
               closePopover={this.closePopover}
               onExpandClick={() => {
                 this.setState(
@@ -575,14 +566,10 @@ export class EuiDataGridCell extends Component<
         onKeyDown={handleCellKeyDown}
         onFocus={this.onFocus}
         onMouseEnter={() => {
-          this.setState({ isHovered: true, renderIsHovered: false }, () => {
-            setTimeout(() => {
-              this.setState({ renderIsHovered: true });
-            }, 500);
-          });
+          this.setState({ isHovered: true });
         }}
         onMouseLeave={() => {
-          this.setState({ isHovered: false, renderIsHovered: false });
+          this.setState({ isHovered: false });
         }}
         onBlur={this.onBlur}>
         {innerContent}
diff --git a/src/components/datagrid/data_grid_cell_buttons.tsx b/src/components/datagrid/data_grid_cell_buttons.tsx
index 86cf8d6279b..5e3d69844d4 100644
--- a/src/components/datagrid/data_grid_cell_buttons.tsx
+++ b/src/components/datagrid/data_grid_cell_buttons.tsx
@@ -28,14 +28,12 @@ import { EuiButtonIcon, EuiButtonIconProps } from '../button/button_icon';
 
 export const EuiDataGridCellButtons = ({
   popoverIsOpen,
-  isHoveredOrFocused,
   closePopover,
   onExpandClick,
   column,
   rowIndex,
 }: {
   popoverIsOpen: boolean;
-  isHoveredOrFocused: boolean;
   closePopover: () => void;
   onExpandClick: () => void;
   column?: EuiDataGridColumn;
@@ -46,7 +44,6 @@ export const EuiDataGridCellButtons = ({
   });
   const buttonClasses = classNames('euiDataGridRowCell__expandButton', {
     'euiDataGridRowCell__expandButton-isActive': popoverIsOpen,
-    'euiDataGridRowCell__expandButton-isHoveredOrFocused': isHoveredOrFocused,
   });
   const expandButton = (
     <EuiI18n

From 5dadd413c6060cd93d2cda7a2eb9eafa96d82048 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Thu, 14 Jan 2021 15:41:03 +0100
Subject: [PATCH 35/54] reduce rerenders

---
 src/components/datagrid/data_grid.tsx         | 17 +---
 src/components/datagrid/data_grid_body.tsx    | 95 +++++++++++--------
 .../resize_observer/resize_observer.tsx       | 15 ++-
 3 files changed, 75 insertions(+), 52 deletions(-)

diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index e6ffd45478b..45afba38289 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -298,14 +298,11 @@ function renderPagination(props: EuiDataGridProps, controls: string) {
 }
 
 function useDefaultColumnWidth(
-  container: HTMLElement | null,
+  gridWidth: number,
   leadingControlColumns: EuiDataGridControlColumn[],
   trailingControlColumns: EuiDataGridControlColumn[],
   columns: EuiDataGridProps['columns']
 ): number | null {
-  const containerSize = useResizeObserver(container, 'width');
-  const gridWidth = containerSize.width;
-
   const computeDefaultWidth = useCallback((): number | null => {
     if (IS_JEST_ENVIRONMENT) return 100;
     if (gridWidth === 0) return null; // we can't tell what size to compute yet
@@ -624,6 +621,7 @@ function notifyCellOfFocusState(
 
 const emptyArrayDefault: EuiDataGridControlColumn[] = [];
 export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
+  console.log('render data grid');
   const {
     leadingControlColumns = emptyArrayDefault,
     trailingControlColumns = emptyArrayDefault,
@@ -650,13 +648,9 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
   const [isFullScreen, setIsFullScreen] = useState(false);
   const [gridWidth, setGridWidth] = useState(0);
 
-  const [containerRef, _setContainerRef] = useState<HTMLDivElement | null>(
-    null
-  );
   const [interactiveCellId] = useState(htmlIdGenerator()());
   const [headerIsInteractive, setHeaderIsInteractive] = useState(false);
 
-  const setContainerRef = useCallback((ref) => _setContainerRef(ref), []);
 
   const cellsUpdateFocus = useRef<Map<string, Function>>(new Map());
 
@@ -727,7 +721,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
 
   // enables/disables grid controls based on available width
   const [resizeRef, setResizeRef] = useState<HTMLDivElement | null>(null);
-  const gridDimensions = useResizeObserver(resizeRef, 'width');
+  const gridDimensions = useResizeObserver(resizeRef, 'width', 'main');
   useEffect(() => {
     if (resizeRef) {
       const { width } = gridDimensions;
@@ -808,7 +802,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
 
   // compute the default column width from the container's clientWidth and count of visible columns
   const defaultColumnWidth = useDefaultColumnWidth(
-    containerRef,
+    gridDimensions.width,
     leadingControlColumns,
     trailingControlColumns,
     orderedVisibleColumns
@@ -999,7 +993,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
                         className={classes}
                         onKeyDown={handleGridKeyDown}
                         style={{ width, height }}
-                        ref={setContainerRef}
+                        ref={setResizeRef}
                         {...rest}>
                         {(IS_JEST_ENVIRONMENT || defaultColumnWidth) && (
                           <>
@@ -1026,7 +1020,6 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
                                 headerIsInteractive,
                                 setFocusedCell
                               )}
-                              ref={setResizeRef}
                               className="euiDataGrid__verticalScroll">
                               <div className="euiDataGrid__overflow">
                                 {inMemory ? (
diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index be1500a7079..f999b4eca5a 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -264,6 +264,7 @@ const IS_JEST_ENVIRONMENT = global.hasOwnProperty('_isJest');
 export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
   props
 ) => {
+  console.log('render data grid body');
   const {
     columnWidths,
     defaultColumnWidth,
@@ -467,7 +468,9 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
 
   const gridRef = useRef<Grid>(null);
   useEffect(() => {
-    gridRef.current!.resetAfterColumnIndex(0);
+    if (gridRef.current) {
+      gridRef.current.resetAfterColumnIndex(0);
+    }
   }, [columns, columnWidths, defaultColumnWidth]);
 
   const getWidth = useCallback(
@@ -521,15 +524,27 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
   }, [rowCount]);
 
   const wrapperRef = useRef<HTMLDivElement | null>(null);
-  const wrapperDimensions = useResizeObserver(wrapperRef.current);
+  const wrapperDimensions = useResizeObserver(
+    wrapperRef.current,
+    undefined,
+    'wrapper'
+  );
 
   useEffect(() => {
     const boundingRect = wrapperRef.current!.getBoundingClientRect();
 
-    if (boundingRect.height !== unconstrainedHeight) {
+    if (
+      boundingRect.height !== unconstrainedHeight &&
+      height !== boundingRect.height
+    ) {
+      console.log('setting height');
       setHeight(boundingRect.height);
     }
-    if (boundingRect.width !== unconstrainedWidth) {
+    if (
+      boundingRect.width !== unconstrainedWidth &&
+      width !== boundingRect.width
+    ) {
+      console.log('setting width');
       setWidth(boundingRect.width);
     }
   }, [unconstrainedHeight, wrapperDimensions]);
@@ -538,41 +553,43 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     <div
       style={{ width: '100%', height: '100%', overflow: 'hidden' }}
       ref={wrapperRef}>
-      <DataGridWrapperRowsContext.Provider
-        value={{ headerRowHeight, headerRow, footerRow }}>
-        <Grid
-          ref={gridRef}
-          innerElementType={InnerElement}
-          className="euiDataGrid__virtualized"
-          columnCount={
-            leadingControlColumns.length +
-            columns.length +
-            trailingControlColumns.length
-          }
-          width={IS_JEST_ENVIRONMENT ? 500 : width || unconstrainedWidth}
-          columnWidth={getWidth}
-          height={IS_JEST_ENVIRONMENT ? 500 : height || unconstrainedHeight}
-          rowHeight={getRowHeight}
-          itemData={{
-            setRowHeight,
-            rowMap,
-            rowOffset: pagination
-              ? pagination.pageIndex * pagination.pageSize
-              : 0,
-            leadingControlColumns,
-            trailingControlColumns,
-            columns,
-            schema,
-            popoverContents: mergedPopoverContents,
-            columnWidths,
-            defaultColumnWidth,
-            renderCellValue,
-            interactiveCellId,
-          }}
-          rowCount={visibleRowIndices.length}>
-          {Cell}
-        </Grid>
-      </DataGridWrapperRowsContext.Provider>
+      {width && width > 0 && (
+        <DataGridWrapperRowsContext.Provider
+          value={{ headerRowHeight, headerRow, footerRow }}>
+          <Grid
+            ref={gridRef}
+            innerElementType={InnerElement}
+            className="euiDataGrid__virtualized"
+            columnCount={
+              leadingControlColumns.length +
+              columns.length +
+              trailingControlColumns.length
+            }
+            width={IS_JEST_ENVIRONMENT ? 500 : width || unconstrainedWidth}
+            columnWidth={getWidth}
+            height={IS_JEST_ENVIRONMENT ? 500 : height || unconstrainedHeight}
+            rowHeight={getRowHeight}
+            itemData={{
+              setRowHeight,
+              rowMap,
+              rowOffset: pagination
+                ? pagination.pageIndex * pagination.pageSize
+                : 0,
+              leadingControlColumns,
+              trailingControlColumns,
+              columns,
+              schema,
+              popoverContents: mergedPopoverContents,
+              columnWidths,
+              defaultColumnWidth,
+              renderCellValue,
+              interactiveCellId,
+            }}
+            rowCount={visibleRowIndices.length}>
+            {Cell}
+          </Grid>
+        </DataGridWrapperRowsContext.Provider>
+      )}
     </div>
   );
 };
diff --git a/src/components/observer/resize_observer/resize_observer.tsx b/src/components/observer/resize_observer/resize_observer.tsx
index d3b598ecf86..d4cb1ad1294 100644
--- a/src/components/observer/resize_observer/resize_observer.tsx
+++ b/src/components/observer/resize_observer/resize_observer.tsx
@@ -102,7 +102,8 @@ const makeResizeObserver = (node: Element, callback: () => void) => {
 
 export const useResizeObserver = (
   container: Element | null,
-  dimension?: 'width' | 'height'
+  dimension?: 'width' | 'height',
+  debug = ''
 ) => {
   const [size, _setSize] = useState({ width: 0, height: 0 });
 
@@ -120,6 +121,9 @@ export const useResizeObserver = (
           _currentDimensions.current.height !== dimensions.height)
       ) {
         _currentDimensions.current = dimensions;
+        if (debug) {
+          console.log(`${debug}: setting size`);
+        }
         _setSize(dimensions);
       }
     },
@@ -131,12 +135,18 @@ export const useResizeObserver = (
       // ResizeObserver's first call to the observation callback is scheduled in the future
       // so find the container's initial dimensions now
       const boundingRect = container.getBoundingClientRect();
+      if (debug) {
+        console.log(`${debug}: initial size setting`);
+      }
       setSize({
         width: boundingRect.width,
         height: boundingRect.height,
       });
 
       const observer = makeResizeObserver(container, () => {
+        if (debug) {
+          console.log(`${debug}: observer fired`);
+        }
         const boundingRect = container.getBoundingClientRect();
         setSize({
           width: boundingRect.width,
@@ -150,5 +160,8 @@ export const useResizeObserver = (
     }
   }, [container, setSize]);
 
+  if (debug) {
+    console.log(`${debug}: ${JSON.stringify(size)}`);
+  }
   return size;
 };

From c0d6c4ecdaefc8b423bde6b48c3b2070bb756b82 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Thu, 14 Jan 2021 16:56:14 +0100
Subject: [PATCH 36/54] remove console logs

---
 src/components/datagrid/data_grid.tsx             |  3 +--
 src/components/datagrid/data_grid_body.tsx        |  9 +--------
 src/components/datagrid/data_grid_cell.tsx        |  7 ++++---
 .../observer/resize_observer/resize_observer.tsx  | 15 +--------------
 4 files changed, 7 insertions(+), 27 deletions(-)

diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index 45afba38289..51497998157 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -621,7 +621,6 @@ function notifyCellOfFocusState(
 
 const emptyArrayDefault: EuiDataGridControlColumn[] = [];
 export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
-  console.log('render data grid');
   const {
     leadingControlColumns = emptyArrayDefault,
     trailingControlColumns = emptyArrayDefault,
@@ -721,7 +720,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
 
   // enables/disables grid controls based on available width
   const [resizeRef, setResizeRef] = useState<HTMLDivElement | null>(null);
-  const gridDimensions = useResizeObserver(resizeRef, 'width', 'main');
+  const gridDimensions = useResizeObserver(resizeRef, 'width');
   useEffect(() => {
     if (resizeRef) {
       const { width } = gridDimensions;
diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index f999b4eca5a..792fafb6568 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -264,7 +264,6 @@ const IS_JEST_ENVIRONMENT = global.hasOwnProperty('_isJest');
 export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
   props
 ) => {
-  console.log('render data grid body');
   const {
     columnWidths,
     defaultColumnWidth,
@@ -524,11 +523,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
   }, [rowCount]);
 
   const wrapperRef = useRef<HTMLDivElement | null>(null);
-  const wrapperDimensions = useResizeObserver(
-    wrapperRef.current,
-    undefined,
-    'wrapper'
-  );
+  const wrapperDimensions = useResizeObserver(wrapperRef.current, undefined);
 
   useEffect(() => {
     const boundingRect = wrapperRef.current!.getBoundingClientRect();
@@ -537,14 +532,12 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
       boundingRect.height !== unconstrainedHeight &&
       height !== boundingRect.height
     ) {
-      console.log('setting height');
       setHeight(boundingRect.height);
     }
     if (
       boundingRect.width !== unconstrainedWidth &&
       width !== boundingRect.width
     ) {
-      console.log('setting width');
       setWidth(boundingRect.width);
     }
   }, [unconstrainedHeight, wrapperDimensions]);
diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index ecedaffdb9b..6be4e85b131 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -469,9 +469,10 @@ export class EuiDataGridCell extends Component<
                     <EuiDataGridCellContent {...cellContentProps} />
                   </div>
                 </div>
-              );
-            }}
-          </EuiMutationObserver>
+             );
+
+              }}
+            </EuiMutationObserver>
         </div>
       </EuiFocusTrap>
     );
diff --git a/src/components/observer/resize_observer/resize_observer.tsx b/src/components/observer/resize_observer/resize_observer.tsx
index d4cb1ad1294..d3b598ecf86 100644
--- a/src/components/observer/resize_observer/resize_observer.tsx
+++ b/src/components/observer/resize_observer/resize_observer.tsx
@@ -102,8 +102,7 @@ const makeResizeObserver = (node: Element, callback: () => void) => {
 
 export const useResizeObserver = (
   container: Element | null,
-  dimension?: 'width' | 'height',
-  debug = ''
+  dimension?: 'width' | 'height'
 ) => {
   const [size, _setSize] = useState({ width: 0, height: 0 });
 
@@ -121,9 +120,6 @@ export const useResizeObserver = (
           _currentDimensions.current.height !== dimensions.height)
       ) {
         _currentDimensions.current = dimensions;
-        if (debug) {
-          console.log(`${debug}: setting size`);
-        }
         _setSize(dimensions);
       }
     },
@@ -135,18 +131,12 @@ export const useResizeObserver = (
       // ResizeObserver's first call to the observation callback is scheduled in the future
       // so find the container's initial dimensions now
       const boundingRect = container.getBoundingClientRect();
-      if (debug) {
-        console.log(`${debug}: initial size setting`);
-      }
       setSize({
         width: boundingRect.width,
         height: boundingRect.height,
       });
 
       const observer = makeResizeObserver(container, () => {
-        if (debug) {
-          console.log(`${debug}: observer fired`);
-        }
         const boundingRect = container.getBoundingClientRect();
         setSize({
           width: boundingRect.width,
@@ -160,8 +150,5 @@ export const useResizeObserver = (
     }
   }, [container, setSize]);
 
-  if (debug) {
-    console.log(`${debug}: ${JSON.stringify(size)}`);
-  }
   return size;
 };

From d2055596dc43d30ed21e0d4ef44faf9b3a3f7bd1 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Thu, 14 Jan 2021 17:33:45 +0100
Subject: [PATCH 37/54] fix tests

---
 src/components/datagrid/data_grid.test.tsx                | 8 ++++----
 src/components/datagrid/data_grid_body.tsx                | 2 +-
 .../observer/resize_observer/resize_observer.tsx          | 7 ++++++-
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx
index 380517d5dcf..65dc60e41d2 100644
--- a/src/components/datagrid/data_grid.test.tsx
+++ b/src/components/datagrid/data_grid.test.tsx
@@ -530,7 +530,7 @@ describe('EuiDataGrid', () => {
               "height": 34,
               "left": 0,
               "position": "absolute",
-              "top": "0px",
+              "top": "100px",
               "width": 100,
             },
             "tabIndex": -1,
@@ -549,7 +549,7 @@ describe('EuiDataGrid', () => {
               "height": 34,
               "left": 100,
               "position": "absolute",
-              "top": "0px",
+              "top": "100px",
               "width": 100,
             },
             "tabIndex": -1,
@@ -568,7 +568,7 @@ describe('EuiDataGrid', () => {
               "height": 34,
               "left": 0,
               "position": "absolute",
-              "top": "34px",
+              "top": "134px",
               "width": 100,
             },
             "tabIndex": -1,
@@ -587,7 +587,7 @@ describe('EuiDataGrid', () => {
               "height": 34,
               "left": 100,
               "position": "absolute",
-              "top": "34px",
+              "top": "134px",
               "width": 100,
             },
             "tabIndex": -1,
diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index 792fafb6568..8182a2ca44b 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -546,7 +546,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     <div
       style={{ width: '100%', height: '100%', overflow: 'hidden' }}
       ref={wrapperRef}>
-      {width && width > 0 && (
+      {(IS_JEST_ENVIRONMENT || (width && width > 0)) && (
         <DataGridWrapperRowsContext.Provider
           value={{ headerRowHeight, headerRow, footerRow }}>
           <Grid
diff --git a/src/components/observer/resize_observer/resize_observer.tsx b/src/components/observer/resize_observer/resize_observer.tsx
index d3b598ecf86..1f0a0e6f99b 100644
--- a/src/components/observer/resize_observer/resize_observer.tsx
+++ b/src/components/observer/resize_observer/resize_observer.tsx
@@ -20,6 +20,9 @@
 import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { EuiObserver, Observer } from '../observer';
 
+// Used to short-circuit some async browser behaviour that is difficult to account for in tests
+const IS_JEST_ENVIRONMENT = global.hasOwnProperty('_isJest');
+
 interface Props {
   /**
    * ReactNode to render as this component's content
@@ -127,7 +130,9 @@ export const useResizeObserver = (
   );
 
   useEffect(() => {
-    if (container != null) {
+    if (IS_JEST_ENVIRONMENT) {
+      setSize({ width: 100, height: 100 });
+    } else if (container != null) {
       // ResizeObserver's first call to the observation callback is scheduled in the future
       // so find the container's initial dimensions now
       const boundingRect = container.getBoundingClientRect();

From 0d91454187ab0ad68430596f653e00f6623f29e2 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Fri, 15 Jan 2021 14:49:14 +0100
Subject: [PATCH 38/54] convert to single mutation observer

---
 src/components/datagrid/data_grid_body.tsx | 110 +++++++++++++--------
 src/components/datagrid/data_grid_cell.tsx |  56 ++++-------
 2 files changed, 86 insertions(+), 80 deletions(-)

diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index 8182a2ca44b..5cc716a75c5 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -28,6 +28,7 @@ import React, {
   useState,
 } from 'react';
 import classNames from 'classnames';
+import tabbable from 'tabbable';
 import {
   GridChildComponentProps,
   VariableSizeGrid as Grid,
@@ -53,7 +54,10 @@ import {
   EuiDataGridHeaderRow,
   EuiDataGridHeaderRowProps,
 } from './data_grid_header_row';
-import { useMutationObserver } from '../observer/mutation_observer';
+import {
+  EuiMutationObserver,
+  useMutationObserver,
+} from '../observer/mutation_observer';
 import { EuiText } from '../text';
 import {
   DataGridSortingContext,
@@ -542,47 +546,71 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     }
   }, [unconstrainedHeight, wrapperDimensions]);
 
+  const preventTabbing = useCallback(() => {
+    if (wrapperRef.current) {
+      const tabbables = tabbable(wrapperRef.current);
+      for (let i = 0; i < tabbables.length; i++) {
+        const element = tabbables[i];
+        if (element.getAttribute('role') !== 'gridcell' && !element.dataset['euigrid-tab-managed']) {
+          element.setAttribute('tabIndex', '-1');
+          element.setAttribute('data-datagrid-interactable', 'true');
+        }
+      }
+    }
+  }, [wrapperRef]);
+
   return (
-    <div
-      style={{ width: '100%', height: '100%', overflow: 'hidden' }}
-      ref={wrapperRef}>
-      {(IS_JEST_ENVIRONMENT || (width && width > 0)) && (
-        <DataGridWrapperRowsContext.Provider
-          value={{ headerRowHeight, headerRow, footerRow }}>
-          <Grid
-            ref={gridRef}
-            innerElementType={InnerElement}
-            className="euiDataGrid__virtualized"
-            columnCount={
-              leadingControlColumns.length +
-              columns.length +
-              trailingControlColumns.length
-            }
-            width={IS_JEST_ENVIRONMENT ? 500 : width || unconstrainedWidth}
-            columnWidth={getWidth}
-            height={IS_JEST_ENVIRONMENT ? 500 : height || unconstrainedHeight}
-            rowHeight={getRowHeight}
-            itemData={{
-              setRowHeight,
-              rowMap,
-              rowOffset: pagination
-                ? pagination.pageIndex * pagination.pageSize
-                : 0,
-              leadingControlColumns,
-              trailingControlColumns,
-              columns,
-              schema,
-              popoverContents: mergedPopoverContents,
-              columnWidths,
-              defaultColumnWidth,
-              renderCellValue,
-              interactiveCellId,
-            }}
-            rowCount={visibleRowIndices.length}>
-            {Cell}
-          </Grid>
-        </DataGridWrapperRowsContext.Provider>
+    <EuiMutationObserver
+      observerOptions={{ subtree: true, childList: true }}
+      onMutation={preventTabbing}>
+      {(mutationRef) => (
+        <div
+          style={{ width: '100%', height: '100%', overflow: 'hidden' }}
+          ref={(el) => {
+            wrapperRef.current = el;
+            mutationRef(el);
+          }}>
+          {(IS_JEST_ENVIRONMENT || (width && width > 0)) && (
+            <DataGridWrapperRowsContext.Provider
+              value={{ headerRowHeight, headerRow, footerRow }}>
+              <Grid
+                ref={gridRef}
+                innerElementType={InnerElement}
+                className="euiDataGrid__virtualized"
+                columnCount={
+                  leadingControlColumns.length +
+                  columns.length +
+                  trailingControlColumns.length
+                }
+                width={IS_JEST_ENVIRONMENT ? 500 : width || unconstrainedWidth}
+                columnWidth={getWidth}
+                height={
+                  IS_JEST_ENVIRONMENT ? 500 : height || unconstrainedHeight
+                }
+                rowHeight={getRowHeight}
+                itemData={{
+                  setRowHeight,
+                  rowMap,
+                  rowOffset: pagination
+                    ? pagination.pageIndex * pagination.pageSize
+                    : 0,
+                  leadingControlColumns,
+                  trailingControlColumns,
+                  columns,
+                  schema,
+                  popoverContents: mergedPopoverContents,
+                  columnWidths,
+                  defaultColumnWidth,
+                  renderCellValue,
+                  interactiveCellId,
+                }}
+                rowCount={visibleRowIndices.length}>
+                {Cell}
+              </Grid>
+            </DataGridWrapperRowsContext.Provider>
+          )}
+        </div>
       )}
-    </div>
+    </EuiMutationObserver>
   );
 };
diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index 6be4e85b131..db00f988237 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -39,7 +39,6 @@ import {
   EuiDataGridColumn,
   EuiDataGridPopoverContent,
 } from './data_grid_types';
-import { EuiMutationObserver } from '../observer/mutation_observer';
 import { DataGridFocusContext } from './data_grid_context';
 import { EuiFocusTrap } from '../focus_trap';
 import { keys } from '../../services';
@@ -322,7 +321,7 @@ export class EuiDataGridCell extends Component<
       this.setState(() => ({
         renderPopoverOpen: false,
       }))
-    )
+    );
   };
 
   render() {
@@ -454,25 +453,14 @@ export class EuiDataGridCell extends Component<
         }}
         clickOutsideDisables={true}>
         <div className="euiDataGridRowCell__expandFlex">
-          <EuiMutationObserver
-            observerOptions={{ subtree: true, childList: true }}
-            onMutation={this.preventTabbing}>
-            {(mutationRef) => {
-              return (
-                <div
-                  ref={mutationRef}
-                  className="euiDataGridRowCell__expandContent">
-                  {screenReaderPosition}
-                  <div
-                    ref={this.setCellContentsRef}
-                    className="euiDataGridRowCell__truncate">
-                    <EuiDataGridCellContent {...cellContentProps} />
-                  </div>
-                </div>
-             );
-
-              }}
-            </EuiMutationObserver>
+          <div className="euiDataGridRowCell__expandContent">
+            {screenReaderPosition}
+            <div
+              ref={this.setCellContentsRef}
+              className="euiDataGridRowCell__truncate">
+              <EuiDataGridCellContent {...cellContentProps} />
+            </div>
+          </div>
         </div>
       </EuiFocusTrap>
     );
@@ -486,24 +474,14 @@ export class EuiDataGridCell extends Component<
     if (isExpandable || (column && column.cellActions)) {
       anchorContent = (
         <div className="euiDataGridRowCell__expandFlex">
-          <EuiMutationObserver
-            observerOptions={{ subtree: true, childList: true }}
-            onMutation={this.preventTabbing}>
-            {(mutationRef) => {
-              return (
-                <div
-                  ref={mutationRef}
-                  className="euiDataGridRowCell__expandContent">
-                  {screenReaderPosition}
-                  <div
-                    ref={this.setCellContentsRef}
-                    className="euiDataGridRowCell__truncate">
-                    <EuiDataGridCellContent {...cellContentProps} />
-                  </div>
-                </div>
-              );
-            }}
-          </EuiMutationObserver>
+          <div className="euiDataGridRowCell__expandContent">
+            {screenReaderPosition}
+            <div
+              ref={this.setCellContentsRef}
+              className="euiDataGridRowCell__truncate">
+              <EuiDataGridCellContent {...cellContentProps} />
+            </div>
+          </div>
           {showCellButtons && (
             <EuiDataGridCellButtons
               rowIndex={rowIndex}

From c75f81a50d4e6a8ebd3bd39d17a1da48ac957257 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Fri, 15 Jan 2021 12:58:22 -0700
Subject: [PATCH 39/54] Small PR feedback cleanup

---
 src/components/datagrid/data_grid.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index e6ffd45478b..9cf9f07def1 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -684,7 +684,6 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
 
         // if the focus is on the header, and the header is no longer interactive
         // move the focus down to the first row
-        // if (hasInteractives === false && focusedCell && focusedCell[1] === -1) {
         const focusedCell = focusedCellReference.current;
         if (hasInteractives === false && focusedCell && focusedCell[1] === -1) {
           setFocusedCell([focusedCell[0], 0]);
@@ -1068,8 +1067,6 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
                                     setColumnWidth={setColumnWidth}
                                     headerIsInteractive={headerIsInteractive}
                                     handleHeaderMutation={handleHeaderMutation}
-                                    // gridHeight={gridHeight}
-                                    // gridWidth={gridWidth}
                                     inMemoryValues={inMemoryValues}
                                     inMemory={inMemory}
                                     schemaDetectors={allSchemaDetectors}

From b1b9ae25a2f2fc83a6c2bd0500e1084d4669d2d8 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Fri, 15 Jan 2021 13:32:18 -0700
Subject: [PATCH 40/54] Fix fullscreen experience; revert change to default
 example which duplicated the control column

---
 src-docs/src/views/datagrid/datagrid.js    | 65 ----------------------
 src/components/datagrid/data_grid.tsx      |  3 +-
 src/components/datagrid/data_grid_body.tsx | 13 ++++-
 3 files changed, 13 insertions(+), 68 deletions(-)

diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js
index 3a39b9199f7..f496a176b42 100644
--- a/src-docs/src/views/datagrid/datagrid.js
+++ b/src-docs/src/views/datagrid/datagrid.js
@@ -167,70 +167,6 @@ const columns = [
   },
 ];
 
-const leadingControlColumns = [
-  {
-    id: 'actions',
-    width: 40,
-    headerCellRender: () => null,
-    rowCellRender: function RowCellRender() {
-      const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-      return (
-        <div>
-          <EuiPopover
-            isOpen={isPopoverOpen}
-            panelPaddingSize="s"
-            anchorPosition="upCenter"
-            button={
-              <EuiButtonIcon
-                aria-label="show actions"
-                iconType="boxesHorizontal"
-                color="text"
-                onClick={() => setIsPopoverOpen(!isPopoverOpen)}
-              />
-            }
-            closePopover={() => setIsPopoverOpen(false)}
-            ownFocus={true}>
-            <EuiPopoverTitle>Actions</EuiPopoverTitle>
-            <div style={{ width: 150 }}>
-              <button onClick={() => {}}>
-                <EuiFlexGroup
-                  alignItems="center"
-                  component="span"
-                  gutterSize="s">
-                  <EuiFlexItem grow={false}>
-                    <EuiButtonIcon
-                      aria-label="Pin selected items"
-                      iconType="pin"
-                      color="text"
-                    />
-                  </EuiFlexItem>
-                  <EuiFlexItem>Pin</EuiFlexItem>
-                </EuiFlexGroup>
-              </button>
-              <EuiSpacer size="s" />
-              <button onClick={() => {}}>
-                <EuiFlexGroup
-                  alignItems="center"
-                  component="span"
-                  gutterSize="s">
-                  <EuiFlexItem grow={false}>
-                    <EuiButtonIcon
-                      aria-label="Delete selected items"
-                      iconType="trash"
-                      color="text"
-                    />
-                  </EuiFlexItem>
-                  <EuiFlexItem>Delete</EuiFlexItem>
-                </EuiFlexGroup>
-              </button>
-            </div>
-          </EuiPopover>
-        </div>
-      );
-    },
-  },
-];
-
 const trailingControlColumns = [
   {
     id: 'actions',
@@ -368,7 +304,6 @@ export default () => {
         aria-label="Data grid demo"
         columns={columns}
         columnVisibility={{ visibleColumns, setVisibleColumns }}
-        leadingControlColumns={leadingControlColumns}
         trailingControlColumns={trailingControlColumns}
         rowCount={raw_data.length}
         renderCellValue={renderCellValue}
diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index 9cf9f07def1..7f8d5f84324 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -997,7 +997,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
                       <div
                         className={classes}
                         onKeyDown={handleGridKeyDown}
-                        style={{ width, height }}
+                        style={isFullScreen ? undefined : { width, height }}
                         ref={setContainerRef}
                         {...rest}>
                         {(IS_JEST_ENVIRONMENT || defaultColumnWidth) && (
@@ -1052,6 +1052,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
                                   {...wrappingDivFocusProps}
                                   {...gridAriaProps}>
                                   <EuiDataGridBody
+                                    isFullScreen={isFullScreen}
                                     columns={orderedVisibleColumns}
                                     columnWidths={columnWidths}
                                     defaultColumnWidth={defaultColumnWidth}
diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index be1500a7079..277fbb6f108 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -62,6 +62,7 @@ import {
 import { useResizeObserver } from '../observer/resize_observer';
 
 export interface EuiDataGridBodyProps {
+  isFullScreen: boolean;
   columnWidths: EuiDataGridColumnWidths;
   defaultColumnWidth?: number | null;
   leadingControlColumns?: EuiDataGridControlColumn[];
@@ -265,6 +266,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
   props
 ) => {
   const {
+    isFullScreen,
     columnWidths,
     defaultColumnWidth,
     leadingControlColumns = [],
@@ -534,6 +536,13 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     }
   }, [unconstrainedHeight, wrapperDimensions]);
 
+  let finalHeight = IS_JEST_ENVIRONMENT ? 500 : height || unconstrainedHeight;
+  let finalWidth = IS_JEST_ENVIRONMENT ? 500 : width || unconstrainedWidth;
+  if (isFullScreen) {
+    finalHeight = window.innerHeight;
+    finalWidth = window.innerWidth;
+  }
+
   return (
     <div
       style={{ width: '100%', height: '100%', overflow: 'hidden' }}
@@ -549,9 +558,9 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
             columns.length +
             trailingControlColumns.length
           }
-          width={IS_JEST_ENVIRONMENT ? 500 : width || unconstrainedWidth}
+          width={finalWidth}
           columnWidth={getWidth}
-          height={IS_JEST_ENVIRONMENT ? 500 : height || unconstrainedHeight}
+          height={finalHeight}
           rowHeight={getRowHeight}
           itemData={{
             setRowHeight,

From dfe0a90eb9f31b38029bb92b49038cde2292e9b6 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Mon, 18 Jan 2021 11:32:53 +0100
Subject: [PATCH 41/54] reduce number of wrapper elements if not necessary

---
 .../__snapshots__/data_grid.test.tsx.snap     | 840 ++++--------------
 .../datagrid/_data_grid_data_row.scss         |   5 +
 src/components/datagrid/data_grid.test.tsx    |  56 +-
 src/components/datagrid/data_grid_body.tsx    |   9 +-
 src/components/datagrid/data_grid_cell.tsx    | 102 ++-
 5 files changed, 250 insertions(+), 762 deletions(-)

diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index 3b560bd4ca4..823891f428a 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -1135,220 +1135,88 @@ Array [
                     </div>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:0px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    <div
-                      class="euiDataGridRowCell__content"
+                    0, A
+                    <p
+                      class="euiScreenReaderOnly"
                     >
-                      <div
-                        class="euiDataGridRowCell__expand"
-                      >
-                        <div
-                          class="euiDataGridRowCell__expandFlex"
-                        >
-                          <div
-                            class="euiDataGridRowCell__expandContent"
-                          >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 1, Column: 1:
-                              </span>
-                            </p>
-                            <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              0, A
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                      Row: 1, Column: 1:
+                    </p>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--lastColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:0px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    <div
-                      class="euiDataGridRowCell__content"
+                    0, B
+                    <p
+                      class="euiScreenReaderOnly"
                     >
-                      <div
-                        class="euiDataGridRowCell__expand"
-                      >
-                        <div
-                          class="euiDataGridRowCell__expandFlex"
-                        >
-                          <div
-                            class="euiDataGridRowCell__expandContent"
-                          >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 1, Column: 2:
-                              </span>
-                            </p>
-                            <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              0, B
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                      Row: 1, Column: 2:
+                    </p>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:34px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    <div
-                      class="euiDataGridRowCell__content"
+                    1, A
+                    <p
+                      class="euiScreenReaderOnly"
                     >
-                      <div
-                        class="euiDataGridRowCell__expand"
-                      >
-                        <div
-                          class="euiDataGridRowCell__expandFlex"
-                        >
-                          <div
-                            class="euiDataGridRowCell__expandContent"
-                          >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 2, Column: 1:
-                              </span>
-                            </p>
-                            <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              1, A
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                      Row: 2, Column: 1:
+                    </p>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:34px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    <div
-                      class="euiDataGridRowCell__content"
+                    1, B
+                    <p
+                      class="euiScreenReaderOnly"
                     >
-                      <div
-                        class="euiDataGridRowCell__expand"
-                      >
-                        <div
-                          class="euiDataGridRowCell__expandFlex"
-                        >
-                          <div
-                            class="euiDataGridRowCell__expandContent"
-                          >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 2, Column: 2:
-                              </span>
-                            </p>
-                            <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              1, B
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                      Row: 2, Column: 2:
+                    </p>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:68px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    <div
-                      class="euiDataGridRowCell__content"
+                    2, A
+                    <p
+                      class="euiScreenReaderOnly"
                     >
-                      <div
-                        class="euiDataGridRowCell__expand"
-                      >
-                        <div
-                          class="euiDataGridRowCell__expandFlex"
-                        >
-                          <div
-                            class="euiDataGridRowCell__expandContent"
-                          >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 3, Column: 1:
-                              </span>
-                            </p>
-                            <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              2, A
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                      Row: 3, Column: 1:
+                    </p>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--lastColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:68px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    <div
-                      class="euiDataGridRowCell__content"
+                    2, B
+                    <p
+                      class="euiScreenReaderOnly"
                     >
-                      <div
-                        class="euiDataGridRowCell__expand"
-                      >
-                        <div
-                          class="euiDataGridRowCell__expandFlex"
-                        >
-                          <div
-                            class="euiDataGridRowCell__expandContent"
-                          >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 3, Column: 2:
-                              </span>
-                            </p>
-                            <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              2, B
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                      Row: 3, Column: 2:
+                    </p>
                   </div>
                 </div>
               </div>
@@ -1636,9 +1504,7 @@ Array [
                           <p
                             class="euiScreenReaderOnly"
                           >
-                            <span>
-                              Row: 1, Column: 1:
-                            </span>
+                            Row: 1, Column: 1:
                           </p>
                           <div
                             class="euiDataGridRowCell__truncate"
@@ -1655,76 +1521,32 @@ Array [
                     />
                   </div>
                   <div
-                    class="euiDataGridRowCell"
+                    class="euiDataGridRowCell euiDataGridRowCell__truncate"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:50px;top:0px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    <div
-                      class="euiDataGridRowCell__content"
+                    0, A
+                    <p
+                      class="euiScreenReaderOnly"
                     >
-                      <div
-                        class="euiDataGridRowCell__expand"
-                      >
-                        <div
-                          class="euiDataGridRowCell__expandFlex"
-                        >
-                          <div
-                            class="euiDataGridRowCell__expandContent"
-                          >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 1, Column: 2:
-                              </span>
-                            </p>
-                            <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              0, A
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                      Row: 1, Column: 2:
+                    </p>
                   </div>
                   <div
-                    class="euiDataGridRowCell"
+                    class="euiDataGridRowCell euiDataGridRowCell__truncate"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:150px;top:0px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    <div
-                      class="euiDataGridRowCell__content"
+                    0, B
+                    <p
+                      class="euiScreenReaderOnly"
                     >
-                      <div
-                        class="euiDataGridRowCell__expand"
-                      >
-                        <div
-                          class="euiDataGridRowCell__expandFlex"
-                        >
-                          <div
-                            class="euiDataGridRowCell__expandContent"
-                          >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 1, Column: 3:
-                              </span>
-                            </p>
-                            <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              0, B
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                      Row: 1, Column: 3:
+                    </p>
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--lastColumn euiDataGridRowCell--controlColumn"
@@ -1755,9 +1577,7 @@ Array [
                           <p
                             class="euiScreenReaderOnly"
                           >
-                            <span>
-                              Row: 1, Column: 4:
-                            </span>
+                            Row: 1, Column: 4:
                           </p>
                           <div
                             class="euiDataGridRowCell__truncate"
@@ -1802,9 +1622,7 @@ Array [
                           <p
                             class="euiScreenReaderOnly"
                           >
-                            <span>
-                              Row: 2, Column: 1:
-                            </span>
+                            Row: 2, Column: 1:
                           </p>
                           <div
                             class="euiDataGridRowCell__truncate"
@@ -1821,76 +1639,32 @@ Array [
                     />
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--stripe"
+                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--stripe"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:50px;top:34px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    <div
-                      class="euiDataGridRowCell__content"
+                    1, A
+                    <p
+                      class="euiScreenReaderOnly"
                     >
-                      <div
-                        class="euiDataGridRowCell__expand"
-                      >
-                        <div
-                          class="euiDataGridRowCell__expandFlex"
-                        >
-                          <div
-                            class="euiDataGridRowCell__expandContent"
-                          >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 2, Column: 2:
-                              </span>
-                            </p>
-                            <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              1, A
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                      Row: 2, Column: 2:
+                    </p>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--stripe"
+                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--stripe"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:150px;top:34px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    <div
-                      class="euiDataGridRowCell__content"
+                    1, B
+                    <p
+                      class="euiScreenReaderOnly"
                     >
-                      <div
-                        class="euiDataGridRowCell__expand"
-                      >
-                        <div
-                          class="euiDataGridRowCell__expandFlex"
-                        >
-                          <div
-                            class="euiDataGridRowCell__expandContent"
-                          >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 2, Column: 3:
-                              </span>
-                            </p>
-                            <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              1, B
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                      Row: 2, Column: 3:
+                    </p>
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn euiDataGridRowCell--controlColumn"
@@ -1921,9 +1695,7 @@ Array [
                           <p
                             class="euiScreenReaderOnly"
                           >
-                            <span>
-                              Row: 2, Column: 4:
-                            </span>
+                            Row: 2, Column: 4:
                           </p>
                           <div
                             class="euiDataGridRowCell__truncate"
@@ -1968,9 +1740,7 @@ Array [
                           <p
                             class="euiScreenReaderOnly"
                           >
-                            <span>
-                              Row: 3, Column: 1:
-                            </span>
+                            Row: 3, Column: 1:
                           </p>
                           <div
                             class="euiDataGridRowCell__truncate"
@@ -1987,76 +1757,32 @@ Array [
                     />
                   </div>
                   <div
-                    class="euiDataGridRowCell"
+                    class="euiDataGridRowCell euiDataGridRowCell__truncate"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:50px;top:68px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    <div
-                      class="euiDataGridRowCell__content"
+                    2, A
+                    <p
+                      class="euiScreenReaderOnly"
                     >
-                      <div
-                        class="euiDataGridRowCell__expand"
-                      >
-                        <div
-                          class="euiDataGridRowCell__expandFlex"
-                        >
-                          <div
-                            class="euiDataGridRowCell__expandContent"
-                          >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 3, Column: 2:
-                              </span>
-                            </p>
-                            <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              2, A
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                      Row: 3, Column: 2:
+                    </p>
                   </div>
                   <div
-                    class="euiDataGridRowCell"
+                    class="euiDataGridRowCell euiDataGridRowCell__truncate"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:150px;top:68px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    <div
-                      class="euiDataGridRowCell__content"
+                    2, B
+                    <p
+                      class="euiScreenReaderOnly"
                     >
-                      <div
-                        class="euiDataGridRowCell__expand"
-                      >
-                        <div
-                          class="euiDataGridRowCell__expandFlex"
-                        >
-                          <div
-                            class="euiDataGridRowCell__expandContent"
-                          >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 3, Column: 3:
-                              </span>
-                            </p>
-                            <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              2, B
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                      Row: 3, Column: 3:
+                    </p>
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--lastColumn euiDataGridRowCell--controlColumn"
@@ -2087,9 +1813,7 @@ Array [
                           <p
                             class="euiScreenReaderOnly"
                           >
-                            <span>
-                              Row: 3, Column: 4:
-                            </span>
+                            Row: 3, Column: 4:
                           </p>
                           <div
                             class="euiDataGridRowCell__truncate"
@@ -2332,220 +2056,88 @@ Array [
                     </div>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:0px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    <div
-                      class="euiDataGridRowCell__content"
+                    0, A
+                    <p
+                      class="euiScreenReaderOnly"
                     >
-                      <div
-                        class="euiDataGridRowCell__expand"
-                      >
-                        <div
-                          class="euiDataGridRowCell__expandFlex"
-                        >
-                          <div
-                            class="euiDataGridRowCell__expandContent"
-                          >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 1, Column: 1:
-                              </span>
-                            </p>
-                            <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              0, A
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                      Row: 1, Column: 1:
+                    </p>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--lastColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:0px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    <div
-                      class="euiDataGridRowCell__content"
+                    0, B
+                    <p
+                      class="euiScreenReaderOnly"
                     >
-                      <div
-                        class="euiDataGridRowCell__expand"
-                      >
-                        <div
-                          class="euiDataGridRowCell__expandFlex"
-                        >
-                          <div
-                            class="euiDataGridRowCell__expandContent"
-                          >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 1, Column: 2:
-                              </span>
-                            </p>
-                            <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              0, B
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                      Row: 1, Column: 2:
+                    </p>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:34px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    <div
-                      class="euiDataGridRowCell__content"
+                    1, A
+                    <p
+                      class="euiScreenReaderOnly"
                     >
-                      <div
-                        class="euiDataGridRowCell__expand"
-                      >
-                        <div
-                          class="euiDataGridRowCell__expandFlex"
-                        >
-                          <div
-                            class="euiDataGridRowCell__expandContent"
-                          >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 2, Column: 1:
-                              </span>
-                            </p>
-                            <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              1, A
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                      Row: 2, Column: 1:
+                    </p>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:34px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    <div
-                      class="euiDataGridRowCell__content"
+                    1, B
+                    <p
+                      class="euiScreenReaderOnly"
                     >
-                      <div
-                        class="euiDataGridRowCell__expand"
-                      >
-                        <div
-                          class="euiDataGridRowCell__expandFlex"
-                        >
-                          <div
-                            class="euiDataGridRowCell__expandContent"
-                          >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 2, Column: 2:
-                              </span>
-                            </p>
-                            <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              1, B
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                      Row: 2, Column: 2:
+                    </p>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:68px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    <div
-                      class="euiDataGridRowCell__content"
+                    2, A
+                    <p
+                      class="euiScreenReaderOnly"
                     >
-                      <div
-                        class="euiDataGridRowCell__expand"
-                      >
-                        <div
-                          class="euiDataGridRowCell__expandFlex"
-                        >
-                          <div
-                            class="euiDataGridRowCell__expandContent"
-                          >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 3, Column: 1:
-                              </span>
-                            </p>
-                            <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              2, A
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                      Row: 3, Column: 1:
+                    </p>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--lastColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:68px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    <div
-                      class="euiDataGridRowCell__content"
+                    2, B
+                    <p
+                      class="euiScreenReaderOnly"
                     >
-                      <div
-                        class="euiDataGridRowCell__expand"
-                      >
-                        <div
-                          class="euiDataGridRowCell__expandFlex"
-                        >
-                          <div
-                            class="euiDataGridRowCell__expandContent"
-                          >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 3, Column: 2:
-                              </span>
-                            </p>
-                            <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              2, B
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                      Row: 3, Column: 2:
+                    </p>
                   </div>
                 </div>
               </div>
@@ -2772,220 +2364,88 @@ Array [
                     </div>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:0px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    <div
-                      class="euiDataGridRowCell__content"
+                    0, A
+                    <p
+                      class="euiScreenReaderOnly"
                     >
-                      <div
-                        class="euiDataGridRowCell__expand"
-                      >
-                        <div
-                          class="euiDataGridRowCell__expandFlex"
-                        >
-                          <div
-                            class="euiDataGridRowCell__expandContent"
-                          >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 1, Column: 1:
-                              </span>
-                            </p>
-                            <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              0, A
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                      Row: 1, Column: 1:
+                    </p>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--lastColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:0px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    <div
-                      class="euiDataGridRowCell__content"
+                    0, B
+                    <p
+                      class="euiScreenReaderOnly"
                     >
-                      <div
-                        class="euiDataGridRowCell__expand"
-                      >
-                        <div
-                          class="euiDataGridRowCell__expandFlex"
-                        >
-                          <div
-                            class="euiDataGridRowCell__expandContent"
-                          >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 1, Column: 2:
-                              </span>
-                            </p>
-                            <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              0, B
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                      Row: 1, Column: 2:
+                    </p>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:34px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    <div
-                      class="euiDataGridRowCell__content"
+                    1, A
+                    <p
+                      class="euiScreenReaderOnly"
                     >
-                      <div
-                        class="euiDataGridRowCell__expand"
-                      >
-                        <div
-                          class="euiDataGridRowCell__expandFlex"
-                        >
-                          <div
-                            class="euiDataGridRowCell__expandContent"
-                          >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 2, Column: 1:
-                              </span>
-                            </p>
-                            <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              1, A
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                      Row: 2, Column: 1:
+                    </p>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:34px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    <div
-                      class="euiDataGridRowCell__content"
+                    1, B
+                    <p
+                      class="euiScreenReaderOnly"
                     >
-                      <div
-                        class="euiDataGridRowCell__expand"
-                      >
-                        <div
-                          class="euiDataGridRowCell__expandFlex"
-                        >
-                          <div
-                            class="euiDataGridRowCell__expandContent"
-                          >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 2, Column: 2:
-                              </span>
-                            </p>
-                            <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              1, B
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                      Row: 2, Column: 2:
+                    </p>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:68px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    <div
-                      class="euiDataGridRowCell__content"
+                    2, A
+                    <p
+                      class="euiScreenReaderOnly"
                     >
-                      <div
-                        class="euiDataGridRowCell__expand"
-                      >
-                        <div
-                          class="euiDataGridRowCell__expandFlex"
-                        >
-                          <div
-                            class="euiDataGridRowCell__expandContent"
-                          >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 3, Column: 1:
-                              </span>
-                            </p>
-                            <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              2, A
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                      Row: 3, Column: 1:
+                    </p>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--lastColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:68px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    <div
-                      class="euiDataGridRowCell__content"
+                    2, B
+                    <p
+                      class="euiScreenReaderOnly"
                     >
-                      <div
-                        class="euiDataGridRowCell__expand"
-                      >
-                        <div
-                          class="euiDataGridRowCell__expandFlex"
-                        >
-                          <div
-                            class="euiDataGridRowCell__expandContent"
-                          >
-                            <p
-                              class="euiScreenReaderOnly"
-                            >
-                              <span>
-                                Row: 3, Column: 2:
-                              </span>
-                            </p>
-                            <div
-                              class="euiDataGridRowCell__truncate"
-                            >
-                              2, B
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                      Row: 3, Column: 2:
+                    </p>
                   </div>
                 </div>
               </div>
diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index 07b45ece8c9..8d1f9c32ffd 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/src/components/datagrid/_data_grid_data_row.scss
@@ -96,10 +96,15 @@
     text-transform: capitalize;
   }
 
+  &.euiDataGridRowCell__truncate {
+    display: block;
+  }
+
   // We only truncate if the cell is not a control column.
   &:not(.euiDataGridRowCell--controlColumn) {
     .euiDataGridRowCell__content,
     .euiDataGridRowCell__truncate,
+    &.euiDataGridRowCell__truncate,
     .euiDataGridRowCell__expandContent {
       @include euiTextTruncate;
       overflow: hidden;
diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx
index 65dc60e41d2..2f7a1081bfb 100644
--- a/src/components/datagrid/data_grid.test.tsx
+++ b/src/components/datagrid/data_grid.test.tsx
@@ -517,7 +517,7 @@ describe('EuiDataGrid', () => {
       ).toMatchInlineSnapshot(`
         Array [
           Object {
-            "className": "euiDataGridRowCell euiDataGridRowCell--firstColumn customClass",
+            "className": "euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn customClass",
             "data-test-subj": "dataGridRowCell",
             "onBlur": [Function],
             "onFocus": [Function],
@@ -536,7 +536,7 @@ describe('EuiDataGrid', () => {
             "tabIndex": -1,
           },
           Object {
-            "className": "euiDataGridRowCell euiDataGridRowCell--lastColumn customClass",
+            "className": "euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--lastColumn customClass",
             "data-test-subj": "dataGridRowCell",
             "onBlur": [Function],
             "onFocus": [Function],
@@ -555,7 +555,7 @@ describe('EuiDataGrid', () => {
             "tabIndex": -1,
           },
           Object {
-            "className": "euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn customClass",
+            "className": "euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn customClass",
             "data-test-subj": "dataGridRowCell",
             "onBlur": [Function],
             "onFocus": [Function],
@@ -574,7 +574,7 @@ describe('EuiDataGrid', () => {
             "tabIndex": -1,
           },
           Object {
-            "className": "euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn customClass",
+            "className": "euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn customClass",
             "data-test-subj": "dataGridRowCell",
             "onBlur": [Function],
             "onFocus": [Function],
@@ -785,17 +785,17 @@ describe('EuiDataGrid', () => {
         expect(gridCellClassNames).toMatchInlineSnapshot(`
           Array [
             "euiDataGridRowCell--firstColumn",
-            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn",
             "euiDataGridRowCell--lastColumn",
-            "euiDataGridRowCell euiDataGridRowCell--customFormatName euiDataGridRowCell--lastColumn",
+            "euiDataGridRowCell euiDataGridRowCell--customFormatName euiDataGridRowCell__truncate euiDataGridRowCell--lastColumn",
             "euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn",
-            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn",
             "euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn",
-            "euiDataGridRowCell euiDataGridRowCell--customFormatName euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn",
+            "euiDataGridRowCell euiDataGridRowCell--customFormatName euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn",
             "euiDataGridRowCell--firstColumn",
-            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn",
             "euiDataGridRowCell--lastColumn",
-            "euiDataGridRowCell euiDataGridRowCell--customFormatName euiDataGridRowCell--lastColumn",
+            "euiDataGridRowCell euiDataGridRowCell--customFormatName euiDataGridRowCell__truncate euiDataGridRowCell--lastColumn",
           ]
         `);
       });
@@ -828,12 +828,12 @@ describe('EuiDataGrid', () => {
           .map((x) => x.props().className);
         expect(gridCellClassNames).toMatchInlineSnapshot(`
           Array [
-            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--firstColumn",
-            "euiDataGridRowCell euiDataGridRowCell--boolean",
-            "euiDataGridRowCell euiDataGridRowCell--lastColumn",
-            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn",
-            "euiDataGridRowCell euiDataGridRowCell--boolean euiDataGridRowCell--stripe",
-            "euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--boolean euiDataGridRowCell__truncate",
+            "euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--lastColumn",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--boolean euiDataGridRowCell__truncate euiDataGridRowCell--stripe",
+            "euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn",
           ]
         `);
       });
@@ -860,10 +860,10 @@ describe('EuiDataGrid', () => {
           .map((x) => x.props().className);
         expect(gridCellClassNames).toMatchInlineSnapshot(`
           Array [
-            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--firstColumn",
-            "euiDataGridRowCell euiDataGridRowCell--alphanumeric euiDataGridRowCell--lastColumn",
-            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn",
-            "euiDataGridRowCell euiDataGridRowCell--alphanumeric euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--alphanumeric euiDataGridRowCell__truncate euiDataGridRowCell--lastColumn",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--alphanumeric euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn",
           ]
         `);
       });
@@ -897,12 +897,12 @@ describe('EuiDataGrid', () => {
           .map((x) => x.props().className);
         expect(gridCellClassNames).toMatchInlineSnapshot(`
           Array [
-            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--firstColumn",
-            "euiDataGridRowCell euiDataGridRowCell--boolean",
-            "euiDataGridRowCell euiDataGridRowCell--currency",
-            "euiDataGridRowCell euiDataGridRowCell--datetime",
-            "euiDataGridRowCell euiDataGridRowCell--datetime",
-            "euiDataGridRowCell euiDataGridRowCell--datetime",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--boolean euiDataGridRowCell__truncate",
+            "euiDataGridRowCell euiDataGridRowCell--currency euiDataGridRowCell__truncate",
+            "euiDataGridRowCell euiDataGridRowCell--datetime euiDataGridRowCell__truncate",
+            "euiDataGridRowCell euiDataGridRowCell--datetime euiDataGridRowCell__truncate",
+            "euiDataGridRowCell euiDataGridRowCell--datetime euiDataGridRowCell__truncate",
           ]
         `);
       });
@@ -945,8 +945,8 @@ describe('EuiDataGrid', () => {
           .map((x) => x.props().className);
         expect(gridCellClassNames).toMatchInlineSnapshot(`
           Array [
-            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--firstColumn",
-            "euiDataGridRowCell euiDataGridRowCell--ipaddress euiDataGridRowCell--lastColumn",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--ipaddress euiDataGridRowCell__truncate euiDataGridRowCell--lastColumn",
           ]
         `);
       });
diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index a08f9ba73f6..9ae3d9a975b 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -582,7 +582,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
             wrapperRef.current = el;
             mutationRef(el);
           }}>
-          {(IS_JEST_ENVIRONMENT || (width && width > 0)) && (
+          {(IS_JEST_ENVIRONMENT || finalWidth > 0) && (
             <DataGridWrapperRowsContext.Provider
               value={{ headerRowHeight, headerRow, footerRow }}>
               <Grid
@@ -595,7 +595,6 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
                   trailingControlColumns.length
                 }
                 width={finalWidth}
-                width={IS_JEST_ENVIRONMENT ? 500 : width || unconstrainedWidth}
                 columnWidth={getWidth}
                 height={finalHeight}
                 rowHeight={getRowHeight}
@@ -615,7 +614,11 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
                   renderCellValue,
                   interactiveCellId,
                 }}
-                rowCount={visibleRowIndices.length}>
+                rowCount={
+                  IS_JEST_ENVIRONMENT || headerRowHeight > 0
+                    ? visibleRowIndices.length
+                    : 0
+                }>
                 {Cell}
               </Grid>
             </DataGridWrapperRowsContext.Provider>
diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index ce525b1f412..494d77d77aa 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -45,6 +45,7 @@ import { keys } from '../../services';
 import { EuiDataGridCellButtons } from './data_grid_cell_buttons';
 import { EuiDataGridCellPopover } from './data_grid_cell_popover';
 
+let count = 0;
 export interface EuiDataGridCellValueElementProps {
   /**
    * index of the row being rendered, 0 represents the first row. This index always includes
@@ -232,6 +233,7 @@ export class EuiDataGridCell extends Component<
     nextProps: EuiDataGridCellProps,
     nextState: EuiDataGridCellState
   ) {
+    console.log(++count);
     if (nextProps.rowIndex !== this.props.rowIndex) return true;
     if (nextProps.visibleRowIndex !== this.props.visibleRowIndex) return true;
     if (nextProps.colIndex !== this.props.colIndex) return true;
@@ -246,7 +248,10 @@ export class EuiDataGridCell extends Component<
     // respond to adjusted top/left
     if (nextProps.style) {
       if (!this.props.style) return true;
-      if (nextProps.style.top !== this.props.style.top) return true;
+      if (nextProps.style.top !== this.props.style.top) {
+        console.log(`${nextProps.style.top} from ${this.props.style.top}`);
+        return true;
+      }
       if (nextProps.style.left !== this.props.style.left) return true;
     }
 
@@ -338,12 +343,19 @@ export class EuiDataGridCell extends Component<
     } = this.props;
     const { colIndex, rowIndex } = rest;
 
+    const showCellButtons =
+      this.state.isFocused ||
+      this.state.isEntered ||
+      this.state.isHovered ||
+      this.state.popoverIsOpen;
+
     const cellClasses = classNames(
       'euiDataGridRowCell',
       {
         [`euiDataGridRowCell--${columnType}`]: columnType,
+        euiDataGridRowCell__truncate: (isExpandable || (column && column.cellActions)) && !showCellButtons,
       },
-      className
+      className,
     );
 
     const cellProps = {
@@ -435,9 +447,9 @@ export class EuiDataGridCell extends Component<
             tokens={['euiDataGridCell.row', 'euiDataGridCell.column']}
             defaults={['Row', 'Column']}>
             {([row, column]: ReactChild[]) => (
-              <span>
+              <>
                 {row}: {rowIndex + 1}, {column}: {colIndex + 1}:
-              </span>
+              </>
             )}
           </EuiI18n>
         </p>
@@ -465,44 +477,47 @@ export class EuiDataGridCell extends Component<
       </EuiFocusTrap>
     );
 
-    const showCellButtons =
-      this.state.isFocused ||
-      this.state.isEntered ||
-      this.state.isHovered ||
-      this.state.popoverIsOpen;
-
     if (isExpandable || (column && column.cellActions)) {
-      anchorContent = (
-        <div className="euiDataGridRowCell__expandFlex">
-          <div className="euiDataGridRowCell__expandContent">
-            {screenReaderPosition}
-            <div
-              ref={this.setCellContentsRef}
-              className="euiDataGridRowCell__truncate">
-              <EuiDataGridCellContent {...cellContentProps} />
+      if (showCellButtons) {
+        anchorContent = (
+          <div className="euiDataGridRowCell__expandFlex">
+            <div className="euiDataGridRowCell__expandContent">
+              <div
+                ref={this.setCellContentsRef}
+                className="euiDataGridRowCell__truncate">
+                <EuiDataGridCellContent {...cellContentProps} />
+              </div>
+              {screenReaderPosition}
             </div>
+            {showCellButtons && (
+              <EuiDataGridCellButtons
+                rowIndex={rowIndex}
+                column={column}
+                popoverIsOpen={this.state.popoverIsOpen}
+                closePopover={this.closePopover}
+                onExpandClick={() => {
+                  this.setState(
+                    ({ popoverIsOpen }) => ({
+                      popoverIsOpen: !popoverIsOpen,
+                    }),
+                    () =>
+                      this.setState(({ popoverIsOpen }) => ({
+                        renderPopoverOpen: popoverIsOpen,
+                      }))
+                  );
+                }}
+              />
+            )}
           </div>
-          {showCellButtons && (
-            <EuiDataGridCellButtons
-              rowIndex={rowIndex}
-              column={column}
-              popoverIsOpen={this.state.popoverIsOpen}
-              closePopover={this.closePopover}
-              onExpandClick={() => {
-                this.setState(
-                  ({ popoverIsOpen }) => ({
-                    popoverIsOpen: !popoverIsOpen,
-                  }),
-                  () =>
-                    this.setState(({ popoverIsOpen }) => ({
-                      renderPopoverOpen: popoverIsOpen,
-                    }))
-                );
-              }}
-            />
-          )}
-        </div>
-      );
+        );
+      } else {
+        anchorContent = (
+          <>
+            <EuiDataGridCellContent {...cellContentProps} />
+            {screenReaderPosition}
+          </>
+        );
+      }
     }
 
     let innerContent = anchorContent;
@@ -525,7 +540,7 @@ export class EuiDataGridCell extends Component<
           </div>
         );
       } else {
-        innerContent = (anchorContent);
+        innerContent = anchorContent;
       }
     }
 
@@ -535,7 +550,12 @@ export class EuiDataGridCell extends Component<
         tabIndex={
           this.state.isFocused && !this.state.disableCellTabIndex ? 0 : -1
         }
-        ref={this.setCellRef}
+        ref={(el) => {
+          this.setCellRef(el);
+          if ((isExpandable || (column && column.cellActions)) && showCellButtons) {
+            this.setCellContentsRef(el);
+          }
+        }}
         {...cellProps}
         data-test-subj="dataGridRowCell"
         onKeyDown={handleCellKeyDown}

From 43712b9292fd310548c35d7f903af6e84101c600 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Mon, 18 Jan 2021 16:27:28 +0100
Subject: [PATCH 42/54] fix some bugs

---
 .../__snapshots__/data_grid.test.tsx.snap     | 384 +++++++++++-------
 .../datagrid/_data_grid_data_row.scss         |   6 +-
 src/components/datagrid/data_grid.test.tsx    |  56 +--
 src/components/datagrid/data_grid_cell.tsx    |  17 +-
 4 files changed, 276 insertions(+), 187 deletions(-)

diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index 823891f428a..a89cd309577 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -1135,88 +1135,112 @@ Array [
                     </div>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:0px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    0, A
-                    <p
-                      class="euiScreenReaderOnly"
+                    <div
+                      class="euiDataGridRowCell__truncate"
                     >
-                      Row: 1, Column: 1:
-                    </p>
+                      0, A
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 1, Column: 1:
+                      </p>
+                    </div>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--lastColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:0px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    0, B
-                    <p
-                      class="euiScreenReaderOnly"
+                    <div
+                      class="euiDataGridRowCell__truncate"
                     >
-                      Row: 1, Column: 2:
-                    </p>
+                      0, B
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 1, Column: 2:
+                      </p>
+                    </div>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:34px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    1, A
-                    <p
-                      class="euiScreenReaderOnly"
+                    <div
+                      class="euiDataGridRowCell__truncate"
                     >
-                      Row: 2, Column: 1:
-                    </p>
+                      1, A
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 2, Column: 1:
+                      </p>
+                    </div>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:34px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    1, B
-                    <p
-                      class="euiScreenReaderOnly"
+                    <div
+                      class="euiDataGridRowCell__truncate"
                     >
-                      Row: 2, Column: 2:
-                    </p>
+                      1, B
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 2, Column: 2:
+                      </p>
+                    </div>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:68px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    2, A
-                    <p
-                      class="euiScreenReaderOnly"
+                    <div
+                      class="euiDataGridRowCell__truncate"
                     >
-                      Row: 3, Column: 1:
-                    </p>
+                      2, A
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 3, Column: 1:
+                      </p>
+                    </div>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--lastColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:68px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    2, B
-                    <p
-                      class="euiScreenReaderOnly"
+                    <div
+                      class="euiDataGridRowCell__truncate"
                     >
-                      Row: 3, Column: 2:
-                    </p>
+                      2, B
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 3, Column: 2:
+                      </p>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -1521,32 +1545,40 @@ Array [
                     />
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell__truncate"
+                    class="euiDataGridRowCell"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:50px;top:0px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    0, A
-                    <p
-                      class="euiScreenReaderOnly"
+                    <div
+                      class="euiDataGridRowCell__truncate"
                     >
-                      Row: 1, Column: 2:
-                    </p>
+                      0, A
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 1, Column: 2:
+                      </p>
+                    </div>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell__truncate"
+                    class="euiDataGridRowCell"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:150px;top:0px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    0, B
-                    <p
-                      class="euiScreenReaderOnly"
+                    <div
+                      class="euiDataGridRowCell__truncate"
                     >
-                      Row: 1, Column: 3:
-                    </p>
+                      0, B
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 1, Column: 3:
+                      </p>
+                    </div>
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--lastColumn euiDataGridRowCell--controlColumn"
@@ -1639,32 +1671,40 @@ Array [
                     />
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--stripe"
+                    class="euiDataGridRowCell euiDataGridRowCell--stripe"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:50px;top:34px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    1, A
-                    <p
-                      class="euiScreenReaderOnly"
+                    <div
+                      class="euiDataGridRowCell__truncate"
                     >
-                      Row: 2, Column: 2:
-                    </p>
+                      1, A
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 2, Column: 2:
+                      </p>
+                    </div>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--stripe"
+                    class="euiDataGridRowCell euiDataGridRowCell--stripe"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:150px;top:34px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    1, B
-                    <p
-                      class="euiScreenReaderOnly"
+                    <div
+                      class="euiDataGridRowCell__truncate"
                     >
-                      Row: 2, Column: 3:
-                    </p>
+                      1, B
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 2, Column: 3:
+                      </p>
+                    </div>
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn euiDataGridRowCell--controlColumn"
@@ -1757,32 +1797,40 @@ Array [
                     />
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell__truncate"
+                    class="euiDataGridRowCell"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:50px;top:68px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    2, A
-                    <p
-                      class="euiScreenReaderOnly"
+                    <div
+                      class="euiDataGridRowCell__truncate"
                     >
-                      Row: 3, Column: 2:
-                    </p>
+                      2, A
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 3, Column: 2:
+                      </p>
+                    </div>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell__truncate"
+                    class="euiDataGridRowCell"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:150px;top:68px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    2, B
-                    <p
-                      class="euiScreenReaderOnly"
+                    <div
+                      class="euiDataGridRowCell__truncate"
                     >
-                      Row: 3, Column: 3:
-                    </p>
+                      2, B
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 3, Column: 3:
+                      </p>
+                    </div>
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--lastColumn euiDataGridRowCell--controlColumn"
@@ -2056,88 +2104,112 @@ Array [
                     </div>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:0px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    0, A
-                    <p
-                      class="euiScreenReaderOnly"
+                    <div
+                      class="euiDataGridRowCell__truncate"
                     >
-                      Row: 1, Column: 1:
-                    </p>
+                      0, A
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 1, Column: 1:
+                      </p>
+                    </div>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--lastColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:0px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    0, B
-                    <p
-                      class="euiScreenReaderOnly"
+                    <div
+                      class="euiDataGridRowCell__truncate"
                     >
-                      Row: 1, Column: 2:
-                    </p>
+                      0, B
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 1, Column: 2:
+                      </p>
+                    </div>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:34px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    1, A
-                    <p
-                      class="euiScreenReaderOnly"
+                    <div
+                      class="euiDataGridRowCell__truncate"
                     >
-                      Row: 2, Column: 1:
-                    </p>
+                      1, A
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 2, Column: 1:
+                      </p>
+                    </div>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:34px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    1, B
-                    <p
-                      class="euiScreenReaderOnly"
+                    <div
+                      class="euiDataGridRowCell__truncate"
                     >
-                      Row: 2, Column: 2:
-                    </p>
+                      1, B
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 2, Column: 2:
+                      </p>
+                    </div>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:68px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    2, A
-                    <p
-                      class="euiScreenReaderOnly"
+                    <div
+                      class="euiDataGridRowCell__truncate"
                     >
-                      Row: 3, Column: 1:
-                    </p>
+                      2, A
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 3, Column: 1:
+                      </p>
+                    </div>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--lastColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:68px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    2, B
-                    <p
-                      class="euiScreenReaderOnly"
+                    <div
+                      class="euiDataGridRowCell__truncate"
                     >
-                      Row: 3, Column: 2:
-                    </p>
+                      2, B
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 3, Column: 2:
+                      </p>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -2364,88 +2436,112 @@ Array [
                     </div>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:0px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    0, A
-                    <p
-                      class="euiScreenReaderOnly"
+                    <div
+                      class="euiDataGridRowCell__truncate"
                     >
-                      Row: 1, Column: 1:
-                    </p>
+                      0, A
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 1, Column: 1:
+                      </p>
+                    </div>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--lastColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:0px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    0, B
-                    <p
-                      class="euiScreenReaderOnly"
+                    <div
+                      class="euiDataGridRowCell__truncate"
                     >
-                      Row: 1, Column: 2:
-                    </p>
+                      0, B
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 1, Column: 2:
+                      </p>
+                    </div>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:34px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    1, A
-                    <p
-                      class="euiScreenReaderOnly"
+                    <div
+                      class="euiDataGridRowCell__truncate"
                     >
-                      Row: 2, Column: 1:
-                    </p>
+                      1, A
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 2, Column: 1:
+                      </p>
+                    </div>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:34px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    1, B
-                    <p
-                      class="euiScreenReaderOnly"
+                    <div
+                      class="euiDataGridRowCell__truncate"
                     >
-                      Row: 2, Column: 2:
-                    </p>
+                      1, B
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 2, Column: 2:
+                      </p>
+                    </div>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:68px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    2, A
-                    <p
-                      class="euiScreenReaderOnly"
+                    <div
+                      class="euiDataGridRowCell__truncate"
                     >
-                      Row: 3, Column: 1:
-                    </p>
+                      2, A
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 3, Column: 1:
+                      </p>
+                    </div>
                   </div>
                   <div
-                    class="euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--lastColumn"
+                    class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:68px;height:34px;width:100px"
                     tabindex="-1"
                   >
-                    2, B
-                    <p
-                      class="euiScreenReaderOnly"
+                    <div
+                      class="euiDataGridRowCell__truncate"
                     >
-                      Row: 3, Column: 2:
-                    </p>
+                      2, B
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 3, Column: 2:
+                      </p>
+                    </div>
                   </div>
                 </div>
               </div>
diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index 8d1f9c32ffd..705af2655ea 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/src/components/datagrid/_data_grid_data_row.scss
@@ -66,7 +66,7 @@
     }
   }
 
-  &:not(:hover) {
+  &:not(:hover):not(.euiDataGridRowCell--hovered) {
     .euiDataGridRowCell__expandButtonIcon {
       margin-left: $euiDataGridCellPaddingM;
       width: $euiSizeM;
@@ -96,10 +96,6 @@
     text-transform: capitalize;
   }
 
-  &.euiDataGridRowCell__truncate {
-    display: block;
-  }
-
   // We only truncate if the cell is not a control column.
   &:not(.euiDataGridRowCell--controlColumn) {
     .euiDataGridRowCell__content,
diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx
index 2f7a1081bfb..65dc60e41d2 100644
--- a/src/components/datagrid/data_grid.test.tsx
+++ b/src/components/datagrid/data_grid.test.tsx
@@ -517,7 +517,7 @@ describe('EuiDataGrid', () => {
       ).toMatchInlineSnapshot(`
         Array [
           Object {
-            "className": "euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn customClass",
+            "className": "euiDataGridRowCell euiDataGridRowCell--firstColumn customClass",
             "data-test-subj": "dataGridRowCell",
             "onBlur": [Function],
             "onFocus": [Function],
@@ -536,7 +536,7 @@ describe('EuiDataGrid', () => {
             "tabIndex": -1,
           },
           Object {
-            "className": "euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--lastColumn customClass",
+            "className": "euiDataGridRowCell euiDataGridRowCell--lastColumn customClass",
             "data-test-subj": "dataGridRowCell",
             "onBlur": [Function],
             "onFocus": [Function],
@@ -555,7 +555,7 @@ describe('EuiDataGrid', () => {
             "tabIndex": -1,
           },
           Object {
-            "className": "euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn customClass",
+            "className": "euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn customClass",
             "data-test-subj": "dataGridRowCell",
             "onBlur": [Function],
             "onFocus": [Function],
@@ -574,7 +574,7 @@ describe('EuiDataGrid', () => {
             "tabIndex": -1,
           },
           Object {
-            "className": "euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn customClass",
+            "className": "euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn customClass",
             "data-test-subj": "dataGridRowCell",
             "onBlur": [Function],
             "onFocus": [Function],
@@ -785,17 +785,17 @@ describe('EuiDataGrid', () => {
         expect(gridCellClassNames).toMatchInlineSnapshot(`
           Array [
             "euiDataGridRowCell--firstColumn",
-            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--firstColumn",
             "euiDataGridRowCell--lastColumn",
-            "euiDataGridRowCell euiDataGridRowCell--customFormatName euiDataGridRowCell__truncate euiDataGridRowCell--lastColumn",
+            "euiDataGridRowCell euiDataGridRowCell--customFormatName euiDataGridRowCell--lastColumn",
             "euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn",
-            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn",
             "euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn",
-            "euiDataGridRowCell euiDataGridRowCell--customFormatName euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn",
+            "euiDataGridRowCell euiDataGridRowCell--customFormatName euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn",
             "euiDataGridRowCell--firstColumn",
-            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--firstColumn",
             "euiDataGridRowCell--lastColumn",
-            "euiDataGridRowCell euiDataGridRowCell--customFormatName euiDataGridRowCell__truncate euiDataGridRowCell--lastColumn",
+            "euiDataGridRowCell euiDataGridRowCell--customFormatName euiDataGridRowCell--lastColumn",
           ]
         `);
       });
@@ -828,12 +828,12 @@ describe('EuiDataGrid', () => {
           .map((x) => x.props().className);
         expect(gridCellClassNames).toMatchInlineSnapshot(`
           Array [
-            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn",
-            "euiDataGridRowCell euiDataGridRowCell--boolean euiDataGridRowCell__truncate",
-            "euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--lastColumn",
-            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn",
-            "euiDataGridRowCell euiDataGridRowCell--boolean euiDataGridRowCell__truncate euiDataGridRowCell--stripe",
-            "euiDataGridRowCell euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--boolean",
+            "euiDataGridRowCell euiDataGridRowCell--lastColumn",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--boolean euiDataGridRowCell--stripe",
+            "euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn",
           ]
         `);
       });
@@ -860,10 +860,10 @@ describe('EuiDataGrid', () => {
           .map((x) => x.props().className);
         expect(gridCellClassNames).toMatchInlineSnapshot(`
           Array [
-            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn",
-            "euiDataGridRowCell euiDataGridRowCell--alphanumeric euiDataGridRowCell__truncate euiDataGridRowCell--lastColumn",
-            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn",
-            "euiDataGridRowCell euiDataGridRowCell--alphanumeric euiDataGridRowCell__truncate euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--alphanumeric euiDataGridRowCell--lastColumn",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--alphanumeric euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn",
           ]
         `);
       });
@@ -897,12 +897,12 @@ describe('EuiDataGrid', () => {
           .map((x) => x.props().className);
         expect(gridCellClassNames).toMatchInlineSnapshot(`
           Array [
-            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn",
-            "euiDataGridRowCell euiDataGridRowCell--boolean euiDataGridRowCell__truncate",
-            "euiDataGridRowCell euiDataGridRowCell--currency euiDataGridRowCell__truncate",
-            "euiDataGridRowCell euiDataGridRowCell--datetime euiDataGridRowCell__truncate",
-            "euiDataGridRowCell euiDataGridRowCell--datetime euiDataGridRowCell__truncate",
-            "euiDataGridRowCell euiDataGridRowCell--datetime euiDataGridRowCell__truncate",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--boolean",
+            "euiDataGridRowCell euiDataGridRowCell--currency",
+            "euiDataGridRowCell euiDataGridRowCell--datetime",
+            "euiDataGridRowCell euiDataGridRowCell--datetime",
+            "euiDataGridRowCell euiDataGridRowCell--datetime",
           ]
         `);
       });
@@ -945,8 +945,8 @@ describe('EuiDataGrid', () => {
           .map((x) => x.props().className);
         expect(gridCellClassNames).toMatchInlineSnapshot(`
           Array [
-            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell__truncate euiDataGridRowCell--firstColumn",
-            "euiDataGridRowCell euiDataGridRowCell--ipaddress euiDataGridRowCell__truncate euiDataGridRowCell--lastColumn",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--ipaddress euiDataGridRowCell--lastColumn",
           ]
         `);
       });
diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index 494d77d77aa..c29f8c78796 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -353,9 +353,9 @@ export class EuiDataGridCell extends Component<
       'euiDataGridRowCell',
       {
         [`euiDataGridRowCell--${columnType}`]: columnType,
-        euiDataGridRowCell__truncate: (isExpandable || (column && column.cellActions)) && !showCellButtons,
+        [`euiDataGridRowCell--hovered`]: this.state.isHovered,
       },
-      className,
+      className
     );
 
     const cellProps = {
@@ -512,10 +512,12 @@ export class EuiDataGridCell extends Component<
         );
       } else {
         anchorContent = (
-          <>
+          <div
+            ref={this.setCellContentsRef}
+            className="euiDataGridRowCell__truncate">
             <EuiDataGridCellContent {...cellContentProps} />
             {screenReaderPosition}
-          </>
+          </div>
         );
       }
     }
@@ -550,12 +552,7 @@ export class EuiDataGridCell extends Component<
         tabIndex={
           this.state.isFocused && !this.state.disableCellTabIndex ? 0 : -1
         }
-        ref={(el) => {
-          this.setCellRef(el);
-          if ((isExpandable || (column && column.cellActions)) && showCellButtons) {
-            this.setCellContentsRef(el);
-          }
-        }}
+        ref={this.setCellRef}
         {...cellProps}
         data-test-subj="dataGridRowCell"
         onKeyDown={handleCellKeyDown}

From b7e1685ffb18e1c211addb5d859b59de31ee143f Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Wed, 20 Jan 2021 11:13:41 +0100
Subject: [PATCH 43/54] resolve some issues

---
 .../datagrid/_data_grid_data_row.scss         | 11 ++++++++++-
 src/components/datagrid/data_grid.test.tsx    |  8 +++-----
 src/components/datagrid/data_grid_cell.tsx    | 19 ++++++++++++++-----
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index 705af2655ea..0b3f8caf765 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/src/components/datagrid/_data_grid_data_row.scss
@@ -66,12 +66,21 @@
     }
   }
 
-  &:not(:hover):not(.euiDataGridRowCell--hovered) {
+  &:not(:hover):not(.euiDataGridRowCell--hovered), &.euiDataGridRowCell--open {
     .euiDataGridRowCell__expandButtonIcon {
+      animation: none;
       margin-left: $euiDataGridCellPaddingM;
       width: $euiSizeM;
     }
 
+    .euiDataGridRowCell__actionButtonIcon {
+      animation: none;
+      margin-left: $euiDataGridCellPaddingM;
+      width: $euiSizeM;
+    }
+  }
+
+  &.euiDataGridRowCell--focused {
     .euiDataGridRowCell__actionButtonIcon {
       margin-left: $euiDataGridCellPaddingM;
       width: $euiSizeM;
diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx
index 65dc60e41d2..fd2823e8dec 100644
--- a/src/components/datagrid/data_grid.test.tsx
+++ b/src/components/datagrid/data_grid.test.tsx
@@ -2054,11 +2054,9 @@ describe('EuiDataGrid', () => {
       expect(findTestSubject(component, 'alertAction').exists()).toBe(false);
       expect(findTestSubject(component, 'happyAction').exists()).toBe(false);
 
-      await act(async () => {
-        findTestSubject(component, 'dataGridRowCell')
-          .at(1)
-          .prop('onMouseEnter')!({} as React.MouseEvent);
-      });
+      findTestSubject(component, 'dataGridRowCell')
+        .at(1)
+        .prop('onMouseEnter')!({} as React.MouseEvent);
 
       component.update();
 
diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index c29f8c78796..9b320a3eb37 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -45,7 +45,6 @@ import { keys } from '../../services';
 import { EuiDataGridCellButtons } from './data_grid_cell_buttons';
 import { EuiDataGridCellPopover } from './data_grid_cell_popover';
 
-let count = 0;
 export interface EuiDataGridCellValueElementProps {
   /**
    * index of the row being rendered, 0 represents the first row. This index always includes
@@ -98,7 +97,7 @@ export interface EuiDataGridCellProps {
 interface EuiDataGridCellState {
   cellProps: CommonProps & HTMLAttributes<HTMLDivElement>;
   popoverIsOpen: boolean; // is expansion popover open
-  renderPopoverOpen: boolean; // wait one render cycle to actuall render the popover as open
+  renderPopoverOpen: boolean; // wait one render cycle to actually render the popover as open
   isFocused: boolean; // tracks if this cell has focus or not, used to enable tabIndex on the cell
   isEntered: boolean; // enables focus trap for non-expandable cells with multiple interactive elements
   isHovered: boolean;
@@ -233,7 +232,6 @@ export class EuiDataGridCell extends Component<
     nextProps: EuiDataGridCellProps,
     nextState: EuiDataGridCellState
   ) {
-    console.log(++count);
     if (nextProps.rowIndex !== this.props.rowIndex) return true;
     if (nextProps.visibleRowIndex !== this.props.visibleRowIndex) return true;
     if (nextProps.colIndex !== this.props.colIndex) return true;
@@ -249,7 +247,6 @@ export class EuiDataGridCell extends Component<
     if (nextProps.style) {
       if (!this.props.style) return true;
       if (nextProps.style.top !== this.props.style.top) {
-        console.log(`${nextProps.style.top} from ${this.props.style.top}`);
         return true;
       }
       if (nextProps.style.left !== this.props.style.left) return true;
@@ -322,6 +319,8 @@ export class EuiDataGridCell extends Component<
   };
 
   closePopover = () => {
+    // due to a bug, popovers don't close properly wenn unmounted in open state.
+    // This "double set" makes sure to unmount the component in closed state.
     this.setState({ popoverIsOpen: false }, () =>
       this.setState(() => ({
         renderPopoverOpen: false,
@@ -353,7 +352,9 @@ export class EuiDataGridCell extends Component<
       'euiDataGridRowCell',
       {
         [`euiDataGridRowCell--${columnType}`]: columnType,
-        [`euiDataGridRowCell--hovered`]: this.state.isHovered,
+        ['euiDataGridRowCell--hovered']: this.state.isHovered,
+        ['euiDataGridRowCell--focused']: this.state.isFocused,
+        ['euiDataGridRowCell--open']: this.state.popoverIsOpen,
       },
       className
     );
@@ -378,6 +379,9 @@ export class EuiDataGridCell extends Component<
           case keys.ENTER:
           case keys.F2:
             event.preventDefault();
+            // due to a bug, popovers become unclosable if they are directly rendered
+            // with isOpen set to true. This "double set" makes sure to mount the component
+            // in closed state before opening it
             this.setState({ popoverIsOpen: true }, () =>
               this.setState(({ popoverIsOpen }) => ({
                 renderPopoverOpen: popoverIsOpen,
@@ -496,6 +500,9 @@ export class EuiDataGridCell extends Component<
                 popoverIsOpen={this.state.popoverIsOpen}
                 closePopover={this.closePopover}
                 onExpandClick={() => {
+                  // due to a bug, popovers become unclosable if they are directly rendered
+                  // with isOpen set to true. This "double set" makes sure to mount the component
+                  // in closed state before opening it
                   this.setState(
                     ({ popoverIsOpen }) => ({
                       popoverIsOpen: !popoverIsOpen,
@@ -546,6 +553,8 @@ export class EuiDataGridCell extends Component<
       }
     }
 
+    console.log(`this.state.isFocused: ${this.state.isFocused}, this.state.disableCellTabIndex: ${this.state.disableCellTabIndex}`);
+
     return (
       <div
         role="gridcell"

From 39816b53f24582051c933cd7f25e4d5d3f7ac5c2 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Wed, 20 Jan 2021 11:43:14 +0100
Subject: [PATCH 44/54] resolve some issues

---
 src/components/datagrid/_data_grid_data_row.scss | 12 ++++++++++--
 src/components/datagrid/data_grid_cell.tsx       |  4 +---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index 0b3f8caf765..7405754228e 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/src/components/datagrid/_data_grid_data_row.scss
@@ -66,7 +66,7 @@
     }
   }
 
-  &:not(:hover):not(.euiDataGridRowCell--hovered), &.euiDataGridRowCell--open {
+  &:not(:hover), &.euiDataGridRowCell--open {
     .euiDataGridRowCell__expandButtonIcon {
       animation: none;
       margin-left: $euiDataGridCellPaddingM;
@@ -80,13 +80,21 @@
     }
   }
 
-  &.euiDataGridRowCell--focused {
+  // on focus, directly show action buttons (without animation), but still slide in the open popover button
+  &:focus {
     .euiDataGridRowCell__actionButtonIcon {
       margin-left: $euiDataGridCellPaddingM;
       width: $euiSizeM;
     }
   }
 
+  // if a cell is not hovered nor focused nor open via popover, don't show buttons in general
+  &:not(:hover):not(:focus):not(.euiDataGridRowCell--open) {
+    .euiDataGridRowCell__expandButtonIcon, .euiDataGridRowCell__actionButtonIcon {
+      display: none;
+    }
+  }
+
   &:focus:not(:first-of-type) {
     // Needed because the focus state adds a border, which needs to be subtracted from padding
     padding-left: $euiDataGridCellPaddingM - 1px;
diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index 9b320a3eb37..ddda4aa92c9 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -294,7 +294,7 @@ export class EuiDataGridCell extends Component<
   };
 
   onBlur = () => {
-    this.setState({ disableCellTabIndex: false, isFocused: false });
+    this.setState({ disableCellTabIndex: false });
   };
 
   preventTabbing = () => {
@@ -352,8 +352,6 @@ export class EuiDataGridCell extends Component<
       'euiDataGridRowCell',
       {
         [`euiDataGridRowCell--${columnType}`]: columnType,
-        ['euiDataGridRowCell--hovered']: this.state.isHovered,
-        ['euiDataGridRowCell--focused']: this.state.isFocused,
         ['euiDataGridRowCell--open']: this.state.popoverIsOpen,
       },
       className

From 8e3f6e16b1d02528ef3419b2bce6ca4bb3f2ab21 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Wed, 20 Jan 2021 11:46:50 +0100
Subject: [PATCH 45/54] resolve some issues

---
 src/components/datagrid/data_grid_cell.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index ddda4aa92c9..6ee3da68a88 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -536,7 +536,15 @@ export class EuiDataGridCell extends Component<
               anchorContent={anchorContent}
               cellContentProps={cellContentProps}
               cellContentsRef={this.cellContentsRef}
-              closePopover={() => this.setState({ popoverIsOpen: false })}
+              closePopover={() => {
+                // due to a bug, popovers don't close properly wenn unmounted in open state.
+                // This "double set" makes sure to unmount the component in closed state.
+                this.setState({ popoverIsOpen: false }, () =>
+                  this.setState(() => ({
+                    renderPopoverOpen: false,
+                  }))
+                );
+              }}
               column={column}
               panelRefFn={(ref) => (this.popoverPanelRef.current = ref)}
               popoverIsOpen={this.state.renderPopoverOpen}
@@ -551,7 +559,9 @@ export class EuiDataGridCell extends Component<
       }
     }
 
-    console.log(`this.state.isFocused: ${this.state.isFocused}, this.state.disableCellTabIndex: ${this.state.disableCellTabIndex}`);
+    console.log(
+      `this.state.isFocused: ${this.state.isFocused}, this.state.disableCellTabIndex: ${this.state.disableCellTabIndex}`
+    );
 
     return (
       <div

From 10e2ac44e96793c1e5f348ce3baf907e1614b2ab Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Wed, 20 Jan 2021 18:18:45 +0100
Subject: [PATCH 46/54] fix leftover problems

---
 src/components/datagrid/data_grid.test.tsx | 11 +++--------
 src/components/datagrid/data_grid_cell.tsx | 17 +++++------------
 2 files changed, 8 insertions(+), 20 deletions(-)

diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx
index fd2823e8dec..7a55333fd8a 100644
--- a/src/components/datagrid/data_grid.test.tsx
+++ b/src/components/datagrid/data_grid.test.tsx
@@ -28,7 +28,6 @@ import {
 import { EuiDataGridColumnResizer } from './data_grid_column_resizer';
 import { keys } from '../../services';
 import { act } from 'react-dom/test-utils';
-import { EuiDataGridCellButtons } from './data_grid_cell_buttons';
 
 function getFocusableCell(component: ReactWrapper) {
   return findTestSubject(component, 'dataGridRowCell').find('[tabIndex=0]');
@@ -523,7 +522,6 @@ describe('EuiDataGrid', () => {
             "onFocus": [Function],
             "onKeyDown": [Function],
             "onMouseEnter": [Function],
-            "onMouseLeave": [Function],
             "role": "gridcell",
             "style": Object {
               "color": "red",
@@ -542,7 +540,6 @@ describe('EuiDataGrid', () => {
             "onFocus": [Function],
             "onKeyDown": [Function],
             "onMouseEnter": [Function],
-            "onMouseLeave": [Function],
             "role": "gridcell",
             "style": Object {
               "color": "blue",
@@ -561,7 +558,6 @@ describe('EuiDataGrid', () => {
             "onFocus": [Function],
             "onKeyDown": [Function],
             "onMouseEnter": [Function],
-            "onMouseLeave": [Function],
             "role": "gridcell",
             "style": Object {
               "color": "red",
@@ -580,7 +576,6 @@ describe('EuiDataGrid', () => {
             "onFocus": [Function],
             "onKeyDown": [Function],
             "onMouseEnter": [Function],
-            "onMouseLeave": [Function],
             "role": "gridcell",
             "style": Object {
               "color": "blue",
@@ -2054,9 +2049,9 @@ describe('EuiDataGrid', () => {
       expect(findTestSubject(component, 'alertAction').exists()).toBe(false);
       expect(findTestSubject(component, 'happyAction').exists()).toBe(false);
 
-      findTestSubject(component, 'dataGridRowCell')
-        .at(1)
-        .prop('onMouseEnter')!({} as React.MouseEvent);
+      findTestSubject(component, 'dataGridRowCell').at(1).prop('onMouseEnter')!(
+        {} as React.MouseEvent
+      );
 
       component.update();
 
diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index 6ee3da68a88..09f45e3ee48 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -100,7 +100,7 @@ interface EuiDataGridCellState {
   renderPopoverOpen: boolean; // wait one render cycle to actually render the popover as open
   isFocused: boolean; // tracks if this cell has focus or not, used to enable tabIndex on the cell
   isEntered: boolean; // enables focus trap for non-expandable cells with multiple interactive elements
-  isHovered: boolean;
+  enableInteractions: boolean; // cell got hovered at least once, so cell button and popover interactions are rendered
   disableCellTabIndex: boolean; // disables tabIndex on the wrapping cell, used for focus management of a single interactive child
 }
 
@@ -144,7 +144,7 @@ export class EuiDataGridCell extends Component<
     renderPopoverOpen: false,
     isFocused: false,
     isEntered: false,
-    isHovered: false,
+    enableInteractions: false,
     disableCellTabIndex: false,
   };
   unsubscribeCell?: Function = () => {};
@@ -258,7 +258,7 @@ export class EuiDataGridCell extends Component<
       return true;
     if (nextState.isEntered !== this.state.isEntered) return true;
     if (nextState.isFocused !== this.state.isFocused) return true;
-    if (nextState.isHovered !== this.state.isHovered) return true;
+    if (nextState.enableInteractions !== this.state.enableInteractions) return true;
     if (nextState.disableCellTabIndex !== this.state.disableCellTabIndex)
       return true;
 
@@ -345,7 +345,7 @@ export class EuiDataGridCell extends Component<
     const showCellButtons =
       this.state.isFocused ||
       this.state.isEntered ||
-      this.state.isHovered ||
+      this.state.enableInteractions ||
       this.state.popoverIsOpen;
 
     const cellClasses = classNames(
@@ -559,10 +559,6 @@ export class EuiDataGridCell extends Component<
       }
     }
 
-    console.log(
-      `this.state.isFocused: ${this.state.isFocused}, this.state.disableCellTabIndex: ${this.state.disableCellTabIndex}`
-    );
-
     return (
       <div
         role="gridcell"
@@ -575,10 +571,7 @@ export class EuiDataGridCell extends Component<
         onKeyDown={handleCellKeyDown}
         onFocus={this.onFocus}
         onMouseEnter={() => {
-          this.setState({ isHovered: true });
-        }}
-        onMouseLeave={() => {
-          this.setState({ isHovered: false });
+          this.setState({ enableInteractions: true });
         }}
         onBlur={this.onBlur}>
         {innerContent}

From 60f9bd15a8822da2766dbef40df1f75f766b94ec Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Wed, 20 Jan 2021 11:19:54 -0800
Subject: [PATCH 47/54] fix prettier / ts issues

---
 .../datagrid/_data_grid_data_row.scss         | 42 ++++++++++---------
 src/components/datagrid/data_grid.tsx         |  1 -
 src/components/datagrid/data_grid_body.tsx    |  2 +-
 src/components/datagrid/data_grid_cell.tsx    |  3 +-
 4 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index 7405754228e..6c3164716c6 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/src/components/datagrid/_data_grid_data_row.scss
@@ -3,18 +3,6 @@
   min-width: 100%; // Needed to prevent wraps. Inline flex is tricky
 }
 
-@keyframes euiDataGridCellButtonSlideIn {
-  from {
-    margin-left: 0;
-    width: 0;
-  }
-
-  to {
-    margin-left: $euiDataGridCellPaddingM;
-    width: $euiSizeM;
-  }
-}
-
 @include euiDataGridRowCell {
   @include euiFontSizeS;
 
@@ -50,23 +38,24 @@
   // Long delays on hover to mitigate the accordion effect
   &:hover {
     .euiDataGridRowCell__expandButtonIcon {
-      animation-duration: $euiAnimSpeedFast;
+      animation-duration: $euiAnimSpeedExtraFast;
       animation-name: euiDataGridCellButtonSlideIn;
       animation-iteration-count: 1;
-      animation-delay: 1000ms;
-      animation-fill-mode: forwards;  
+      animation-delay: $euiAnimSpeedNormal;
+      animation-fill-mode: forwards;
     }
 
     .euiDataGridRowCell__actionButtonIcon {
-      animation-duration: $euiAnimSpeedFast;
+      animation-duration: $euiAnimSpeedExtraFast;
       animation-name: euiDataGridCellButtonSlideIn;
       animation-iteration-count: 1;
-      animation-delay: 1000ms;
-      animation-fill-mode: forwards;  
+      animation-delay: $euiAnimSpeedNormal;
+      animation-fill-mode: forwards;
     }
   }
 
-  &:not(:hover), &.euiDataGridRowCell--open {
+  &:not(:hover),
+  &.euiDataGridRowCell--open {
     .euiDataGridRowCell__expandButtonIcon {
       animation: none;
       margin-left: $euiDataGridCellPaddingM;
@@ -90,7 +79,8 @@
 
   // if a cell is not hovered nor focused nor open via popover, don't show buttons in general
   &:not(:hover):not(:focus):not(.euiDataGridRowCell--open) {
-    .euiDataGridRowCell__expandButtonIcon, .euiDataGridRowCell__actionButtonIcon {
+    .euiDataGridRowCell__expandButtonIcon,
+    .euiDataGridRowCell__actionButtonIcon {
       display: none;
     }
   }
@@ -257,3 +247,15 @@
     }
   }
 }
+
+@keyframes euiDataGridCellButtonSlideIn {
+  from {
+    margin-left: 0;
+    width: 0;
+  }
+
+  to {
+    margin-left: $euiDataGridCellPaddingM;
+    width: $euiSizeM;
+  }
+}
diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index 0b74d19a25a..89261e070e3 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -650,7 +650,6 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
   const [interactiveCellId] = useState(htmlIdGenerator()());
   const [headerIsInteractive, setHeaderIsInteractive] = useState(false);
 
-
   const cellsUpdateFocus = useRef<Map<string, Function>>(new Map());
 
   const [wrappingDivFocusProps, focusedCell, setFocusedCell] = useFocus(
diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index 9ae3d9a975b..3111f41287f 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -546,7 +546,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     ) {
       setWidth(boundingRect.width);
     }
-  }, [unconstrainedHeight, wrapperDimensions]);
+  }, [unconstrainedHeight, wrapperDimensions, height, width]);
 
   const preventTabbing = useCallback(() => {
     if (wrapperRef.current) {
diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index 09f45e3ee48..e5de27e8aa2 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -258,7 +258,8 @@ export class EuiDataGridCell extends Component<
       return true;
     if (nextState.isEntered !== this.state.isEntered) return true;
     if (nextState.isFocused !== this.state.isFocused) return true;
-    if (nextState.enableInteractions !== this.state.enableInteractions) return true;
+    if (nextState.enableInteractions !== this.state.enableInteractions)
+      return true;
     if (nextState.disableCellTabIndex !== this.state.disableCellTabIndex)
       return true;
 

From 2b99526ca75515b712edb6b357e521d2aaed2a57 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Thu, 21 Jan 2021 10:09:26 +0100
Subject: [PATCH 48/54] remove unnecessary checks

---
 src/components/datagrid/data_grid_body.tsx | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index 3111f41287f..54e6ad8af28 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -534,19 +534,13 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
   useEffect(() => {
     const boundingRect = wrapperRef.current!.getBoundingClientRect();
 
-    if (
-      boundingRect.height !== unconstrainedHeight &&
-      height !== boundingRect.height
-    ) {
+    if (boundingRect.height !== unconstrainedHeight) {
       setHeight(boundingRect.height);
     }
-    if (
-      boundingRect.width !== unconstrainedWidth &&
-      width !== boundingRect.width
-    ) {
+    if (boundingRect.width !== unconstrainedWidth) {
       setWidth(boundingRect.width);
     }
-  }, [unconstrainedHeight, wrapperDimensions, height, width]);
+  }, [unconstrainedHeight, wrapperDimensions]);
 
   const preventTabbing = useCallback(() => {
     if (wrapperRef.current) {

From b30faf14393ed22aa0cfff3f3464ae2c6b00cbba Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Thu, 21 Jan 2021 10:11:51 +0100
Subject: [PATCH 49/54] remove unnecessary parameter

---
 src/components/datagrid/data_grid_body.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index 54e6ad8af28..d8af75bf6a4 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -529,7 +529,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
   }, [rowCount]);
 
   const wrapperRef = useRef<HTMLDivElement | null>(null);
-  const wrapperDimensions = useResizeObserver(wrapperRef.current, undefined);
+  const wrapperDimensions = useResizeObserver(wrapperRef.current);
 
   useEffect(() => {
     const boundingRect = wrapperRef.current!.getBoundingClientRect();

From 624446f643a22488f184a2375469d695b0cf5b69 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Thu, 21 Jan 2021 10:33:09 -0700
Subject: [PATCH 50/54] Move datagrid's InnerElement to a stand alone component

---
 src/components/datagrid/data_grid_body.tsx | 53 +++++++++++-----------
 1 file changed, 26 insertions(+), 27 deletions(-)

diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx
index 277fbb6f108..f2e4c5275c7 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -31,6 +31,7 @@ import classNames from 'classnames';
 import {
   GridChildComponentProps,
   VariableSizeGrid as Grid,
+  VariableSizeGridProps,
 } from 'react-window';
 import { EuiCodeBlock } from '../code';
 import {
@@ -258,6 +259,31 @@ const Cell: FunctionComponent<GridChildComponentProps> = ({
   return cellContent;
 };
 
+const InnerElement: VariableSizeGridProps['innerElementType'] = forwardRef<
+  HTMLDivElement,
+  { style: { height: number } }
+>(({ children, style, ...rest }, ref) => {
+  const { headerRowHeight, headerRow, footerRow } = useContext(
+    DataGridWrapperRowsContext
+  );
+  return (
+    <>
+      <div
+        ref={ref}
+        style={{
+          ...style,
+          height: style.height + headerRowHeight,
+        }}
+        {...rest}>
+        {headerRow}
+        {children}
+      </div>
+      {footerRow}
+    </>
+  );
+});
+InnerElement.displayName = 'EuiDataGridInnerElement';
+
 const INITIAL_ROW_HEIGHT = 34;
 const SCROLLBAR_HEIGHT = 15;
 const IS_JEST_ENVIRONMENT = global.hasOwnProperty('_isJest');
@@ -440,33 +466,6 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     visibleRowIndices.length,
   ]);
 
-  const InnerElement = useMemo(
-    () =>
-      forwardRef<HTMLDivElement, { style: { height: number } }>(
-        ({ children, style, ...rest }, ref) => {
-          const { headerRowHeight, headerRow, footerRow } = useContext(
-            DataGridWrapperRowsContext
-          );
-          return (
-            <>
-              <div
-                ref={ref}
-                style={{
-                  ...style,
-                  height: style.height + headerRowHeight,
-                }}
-                {...rest}>
-                {headerRow}
-                {children}
-              </div>
-              {footerRow}
-            </>
-          );
-        }
-      ),
-    []
-  );
-
   const gridRef = useRef<Grid>(null);
   useEffect(() => {
     gridRef.current!.resetAfterColumnIndex(0);

From bd0e2c675d6fc0cbc42511deb74c62d8384ca6f1 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Thu, 21 Jan 2021 12:12:09 -0700
Subject: [PATCH 51/54] Removed devDep on @types/resize-observer-browser in
 anticipation of TS adding ResizeObserver

---
 package.json                                         |  1 -
 src/components/datagrid/data_grid_cell.tsx           | 12 +++++++++---
 .../observer/resize_observer/resize_observer.tsx     | 11 ++++++-----
 yarn.lock                                            |  5 -----
 4 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 6f1c3cc1a4e..afe6d23fb0e 100644
--- a/package.json
+++ b/package.json
@@ -107,7 +107,6 @@
     "@types/react-dom": "^16.9.6",
     "@types/react-is": "^16.7.1",
     "@types/react-router-dom": "^5.1.5",
-    "@types/resize-observer-browser": "^0.1.3",
     "@types/tabbable": "^3.1.0",
     "@types/url-parse": "^1.4.3",
     "@types/uuid": "^8.3.0",
diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index 6e63ed448ed..d96e3aec41c 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -126,15 +126,21 @@ const EuiDataGridCellContent: FunctionComponent<
   );
 });
 
+// TODO: TypeScript has added types for ResizeObserver but not yet released
+// https://github.com/microsoft/TypeScript-DOM-lib-generator/pull/948
+// for now, marking ResizeObserver usage as `any`
+// and when EUI upgrades to a version of TS with ResizeObserver
+// the anys can be removed
 const hasResizeObserver =
-  typeof window !== 'undefined' && typeof window.ResizeObserver !== 'undefined';
+  typeof window !== 'undefined' &&
+  typeof (window as any).ResizeObserver !== 'undefined';
 
 export class EuiDataGridCell extends Component<
   EuiDataGridCellProps,
   EuiDataGridCellState
 > {
   cellRef = createRef() as MutableRefObject<HTMLDivElement | null>;
-  observer!: ResizeObserver;
+  observer!: any; // ResizeObserver
   popoverPanelRef: MutableRefObject<HTMLElement | null> = createRef();
   cellContentsRef: HTMLDivElement | null = null;
   state: EuiDataGridCellState = {
@@ -153,7 +159,7 @@ export class EuiDataGridCell extends Component<
     // watch the first cell for size changes and use that to re-compute row heights
     if (this.props.colIndex === 0 && this.props.visibleRowIndex === 0) {
       if (ref && hasResizeObserver) {
-        this.observer = new window.ResizeObserver(() => {
+        this.observer = new (window as any).ResizeObserver(() => {
           const rowHeight = this.cellRef.current!.getBoundingClientRect()
             .height;
           if (this.props.setRowHeight) {
diff --git a/src/components/observer/resize_observer/resize_observer.tsx b/src/components/observer/resize_observer/resize_observer.tsx
index d3b598ecf86..f5ca3696d0c 100644
--- a/src/components/observer/resize_observer/resize_observer.tsx
+++ b/src/components/observer/resize_observer/resize_observer.tsx
@@ -30,7 +30,8 @@ interface Props {
 
 // IE11 and Safari don't support the `ResizeObserver` API at the time of writing
 const hasResizeObserver =
-  typeof window !== 'undefined' && typeof window.ResizeObserver !== 'undefined';
+  typeof window !== 'undefined' &&
+  typeof (window as any).ResizeObserver !== 'undefined';
 
 const mutationObserverOptions = {
   // [MutationObserverInit](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit)
@@ -69,7 +70,7 @@ export class EuiResizeObserver extends EuiObserver<Props> {
     // The superclass checks that childNode is not null before invoking
     // beginObserve()
     const childNode = this.childNode!;
-    this.observer = makeResizeObserver(childNode, this.onResize);
+    this.observer = makeResizeObserver(childNode, this.onResize)!;
   };
 }
 
@@ -91,8 +92,8 @@ const makeCompatibleObserver = (node: Element, callback: () => void) => {
 const makeResizeObserver = (node: Element, callback: () => void) => {
   let observer: Observer | undefined;
   if (hasResizeObserver) {
-    observer = new window.ResizeObserver(callback);
-    observer.observe(node);
+    observer = new (window as any).ResizeObserver(callback);
+    observer!.observe(node);
   } else {
     observer = makeCompatibleObserver(node, callback);
     requestAnimationFrame(callback); // Mimic ResizeObserver behavior of triggering a resize event on init
@@ -142,7 +143,7 @@ export const useResizeObserver = (
           width: boundingRect.width,
           height: boundingRect.height,
         });
-      });
+      })!;
 
       return () => observer.disconnect();
     } else {
diff --git a/yarn.lock b/yarn.lock
index d41ce280d89..41aa3302e32 100755
--- a/yarn.lock
+++ b/yarn.lock
@@ -1802,11 +1802,6 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
-"@types/resize-observer-browser@^0.1.3":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.3.tgz#5cca2445e6fc34a380760bd6ef8c492863469c47"
-  integrity sha512-3tGjLIDH8L57fWOfC7NVn/BbGQD7pXwbkk2+8Z4hK/S7kOIv1MUN4nkKjfx0qg4ctkukjzp3Bgr/Z+Hq5ZQZTQ==
-
 "@types/responselike@*":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/responselike/-/responselike-1.0.0.tgz#251f4fe7d154d2bad125abe1b429b23afd262e29"

From fa04eb11d0582d054a9fb0f9d74553a775d5c9f8 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Wed, 27 Jan 2021 13:50:48 -0700
Subject: [PATCH 52/54] Documentation

---
 .../datagrid_virtualization_example.js        | 41 +++++++++++++++----
 .../datagrid/virtualization_constrained.js    |  6 ++-
 2 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/src-docs/src/views/datagrid/datagrid_virtualization_example.js b/src-docs/src/views/datagrid/datagrid_virtualization_example.js
index 4afb855368d..a5ef17e53d1 100644
--- a/src-docs/src/views/datagrid/datagrid_virtualization_example.js
+++ b/src-docs/src/views/datagrid/datagrid_virtualization_example.js
@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 
 import { renderToHtml } from '../../services';
-
+import { EuiCallOut, EuiCode } from '../../../../src/components';
 import { GuideSectionTypes } from '../../components';
 
 import DataGridVirtualization from './virtualization';
@@ -30,7 +30,39 @@ export const DataGridVirtualizationExample = {
       ],
       text: (
         <Fragment>
-          <p>Virtualization description</p>
+          <p>
+            Creating a lot of DOM nodes is computationally expensive, and{' '}
+            <strong>EuiDataGrid</strong> uses a couple wrapping divs to build
+            each cell. To help offset the cost of larger tables, cell
+            virtualization can be opted into by constraining the grid&apos;s
+            height and/or width. There are two ways to enable this
+            functionality. First, <EuiCode>height</EuiCode> and/or{' '}
+            <EuiCode>width</EuiCode> can be passed as props, which are applied
+            to the grid&apos;s container style. Alternatively, if{' '}
+            <strong>EuiDataGrid</strong> is unable to render at the full
+            dimensions it needs due to screen real estate or other DOM
+            constraints, it will overflow within a scrollable container and only
+            render the visible cells.
+          </p>
+
+          <EuiCallOut
+            title={
+              <>
+                Never toggle the height between a value and{' '}
+                <EuiCode>undefined</EuiCode>.
+              </>
+            }
+            color="warning">
+            <p>
+              Similar to React&apos;s rule of not switching between a controlled
+              and uncontrolled input, <EuiCode>EuiDataGrid</EuiCode> does not
+              accommodate for its height switching to or from{' '}
+              <EuiCode>undefined</EuiCode>. For demonstration purposes, the
+              example below uses a <EuiCode>key</EuiCode> to force{' '}
+              <strong>EuiDataGrid</strong> to completely remount when its height
+              changes between constrained & constrained heights.
+            </p>
+          </EuiCallOut>
         </Fragment>
       ),
       components: { DataGridVirtualization },
@@ -48,11 +80,6 @@ export const DataGridVirtualizationExample = {
           code: dataGridVirtualizationConstrainedHtml,
         },
       ],
-      text: (
-        <Fragment>
-          <p>Virtualization description</p>
-        </Fragment>
-      ),
       demo: <DataGridVirtualizationConstrained />,
     },
   ],
diff --git a/src-docs/src/views/datagrid/virtualization_constrained.js b/src-docs/src/views/datagrid/virtualization_constrained.js
index a459cc6a784..7ca7644bd04 100644
--- a/src-docs/src/views/datagrid/virtualization_constrained.js
+++ b/src-docs/src/views/datagrid/virtualization_constrained.js
@@ -157,7 +157,11 @@ export default () => {
 
             <EuiResizablePanel initialSize={50} minSize="200px">
               <EuiText>
-                <p>This is a side panel with more information.</p>
+                <p>
+                  This panel is constraining the datagrid. You can resize it
+                  using the drag handle and <strong>EuiDataGrid</strong>{' '}
+                  automatically detects the changes to its container size.
+                </p>
               </EuiText>
             </EuiResizablePanel>
           </>

From 1e345a1e54d54fa13f3c0e83bcdc404a49a665e5 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Thu, 28 Jan 2021 09:41:33 -0700
Subject: [PATCH 53/54] Fix a unit test setup

---
 src/components/datagrid/data_grid.test.tsx             | 10 ++++++++++
 .../observer/resize_observer/resize_observer.tsx       |  7 +------
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx
index 7a55333fd8a..601bfce5b8a 100644
--- a/src/components/datagrid/data_grid.test.tsx
+++ b/src/components/datagrid/data_grid.test.tsx
@@ -442,6 +442,16 @@ function moveColumnToIndex(
 
 describe('EuiDataGrid', () => {
   describe('rendering', () => {
+    const getBoundingClientRect =
+      window.Element.prototype.getBoundingClientRect;
+    beforeAll(() => {
+      window.Element.prototype.getBoundingClientRect = () =>
+        ({ width: 100, height: 100 } as DOMRect);
+    });
+    afterAll(() => {
+      window.Element.prototype.getBoundingClientRect = getBoundingClientRect;
+    });
+
     it('renders with common and div attributes', () => {
       const component = render(
         <EuiDataGrid
diff --git a/src/components/observer/resize_observer/resize_observer.tsx b/src/components/observer/resize_observer/resize_observer.tsx
index 40bd57e018d..f5ca3696d0c 100644
--- a/src/components/observer/resize_observer/resize_observer.tsx
+++ b/src/components/observer/resize_observer/resize_observer.tsx
@@ -20,9 +20,6 @@
 import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { EuiObserver, Observer } from '../observer';
 
-// Used to short-circuit some async browser behaviour that is difficult to account for in tests
-const IS_JEST_ENVIRONMENT = global.hasOwnProperty('_isJest');
-
 interface Props {
   /**
    * ReactNode to render as this component's content
@@ -131,9 +128,7 @@ export const useResizeObserver = (
   );
 
   useEffect(() => {
-    if (IS_JEST_ENVIRONMENT) {
-      setSize({ width: 100, height: 100 });
-    } else if (container != null) {
+    if (container != null) {
       // ResizeObserver's first call to the observation callback is scheduled in the future
       // so find the container's initial dimensions now
       const boundingRect = container.getBoundingClientRect();

From ca0196670273f4cf7236e2406ced477f3865352e Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Thu, 28 Jan 2021 12:10:35 -0700
Subject: [PATCH 54/54] chanagelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 641a2cdd293..6b20b56d5b0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `getDefaultEuiMarkdownProcessingPlugins` method for better control over `EuiMarkdownEditor`'s toolbar UI ([#4383](https://github.com/elastic/eui/pull/4383))
+- Added virtualized cell rendering to `EuiDataGrid` ([#4170](https://github.com/elastic/eui/pull/4170))
 
 **Bug fixes**