From c02dbf013c00535cf21412348c756cda3dffee80 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Thu, 22 Oct 2020 09:36:39 -0600
Subject: [PATCH] in-progress virtualizatin

---
 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 7024a855e752..4fcb28da6b73 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 1c8b61223ac3..194f4ee1c61a 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 505bd4070dfc..69d4a058e9a6 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('MAKING A CONTEXT YOU JERK');
+    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 36321d11e368..76c46fa24ad8 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 c3d83290a9d3..3966b335b2e0 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 288ae7dce8f8..41c69da19390 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 f1cd28f3f6db..1d24e8251748 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 d8af548fda84..758648fbc8fd 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 299d3c93d836..3ebc36a49bba 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 4eb6a2fe561b..f12592928186 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 1c51dc99bb15..1a3fc97a4312 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 beec874e110b..6ede9cd2c396 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,
   ]);