diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3b348a6ca65..1fcfd406d02 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 - Added `getDefaultEuiMarkdownProcessingPlugins` method for better control over `EuiMarkdownEditor`'s toolbar UI ([#4383](https://github.com/elastic/eui/pull/4383))
 - Changed `EuiOutsideClickDetector` events to be standard event types ([#4434](https://github.com/elastic/eui/pull/4434))
 - Added `EuiFieldTextProps` in type definitions for `EuiSuggestInput` ([#4452](https://github.com/elastic/eui/pull/4452))
+- Added virtualized cell rendering to `EuiDataGrid` ([#4170](https://github.com/elastic/eui/pull/4170))
 
 **Bug fixes**
 
diff --git a/package.json b/package.json
index 192eb3cdde7..cdd2abee70c 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/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/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.js b/src-docs/src/views/datagrid/datagrid.js
index c4acd4628c5..f496a176b42 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';
 
@@ -191,7 +192,7 @@ const trailingControlColumns = [
             ownFocus={true}>
             <EuiPopoverTitle>Actions</EuiPopoverTitle>
             <div style={{ width: 150 }}>
-              <button onClick={() => {}} component="span">
+              <button onClick={() => {}}>
                 <EuiFlexGroup
                   alignItems="center"
                   component="span"
@@ -293,6 +294,10 @@ export default () => {
     };
   }, []);
 
+  const onColumnResize = useRef((eventData) => {
+    console.log(eventData);
+  });
+
   return (
     <DataContext.Provider value={raw_data}>
       <EuiDataGrid
@@ -310,9 +315,7 @@ export default () => {
           onChangeItemsPerPage: onChangeItemsPerPage,
           onChangePage: onChangePage,
         }}
-        onColumnResize={(eventData) => {
-          console.log(eventData);
-        }}
+        onColumnResize={onColumnResize.current}
       />
     </DataContext.Provider>
   );
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..a5ef17e53d1
--- /dev/null
+++ b/src-docs/src/views/datagrid/datagrid_virtualization_example.js
@@ -0,0 +1,86 @@
+import React, { Fragment } from 'react';
+
+import { renderToHtml } from '../../services';
+import { EuiCallOut, EuiCode } from '../../../../src/components';
+import { GuideSectionTypes } from '../../components';
+
+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: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: dataGridVirtualizationSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: dataGridVirtualizationHtml,
+        },
+      ],
+      text: (
+        <Fragment>
+          <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 },
+      demo: <DataGridVirtualization />,
+    },
+    {
+      title: 'Constrained by DOM',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: dataGridVirtualizationConstrainedSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: dataGridVirtualizationConstrainedHtml,
+        },
+      ],
+      demo: <DataGridVirtualizationConstrained />,
+    },
+  ],
+};
diff --git a/src-docs/src/views/datagrid/virtualization.js b/src-docs/src/views/datagrid/virtualization.js
new file mode 100644
index 00000000000..0fab30860ea
--- /dev/null
+++ b/src-docs/src/views/datagrid/virtualization.js
@@ -0,0 +1,200 @@
+import React, {
+  Fragment,
+  useCallback,
+  useState,
+  createContext,
+  useContext,
+  useMemo,
+  useEffect,
+} from 'react';
+import { fake } from 'faker';
+
+import {
+  EuiDataGrid,
+  EuiLink,
+  EuiText,
+  EuiSpacer,
+  EuiButtonGroup,
+} from '../../../../src/components/';
+import { EuiFormRow } from '../../../../src/components/form/form_row';
+
+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;
+}
+
+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: 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 [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} rendered cells</p>
+      </EuiText>
+
+      <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]}
+          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-docs/src/views/datagrid/virtualization_constrained.js b/src-docs/src/views/datagrid/virtualization_constrained.js
new file mode 100644
index 00000000000..7ca7644bd04
--- /dev/null
+++ b/src-docs/src/views/datagrid/virtualization_constrained.js
@@ -0,0 +1,172 @@
+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 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>
+          </>
+        )}
+      </EuiResizableContainer>
+    </DataContext.Provider>
+  );
+};
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index e2ea77c9ddf..a89cd309577 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,438 +1047,199 @@ Array [
             tabindex="0"
           >
             <div
-              class="euiDataGridHeader"
-              data-test-subj="dataGridHeader"
-              role="row"
+              style="width:100%;height:100%;overflow:hidden"
             >
               <div
-                class="euiDataGridHeaderCell"
-                data-test-subj="dataGridHeaderCell-A"
-                role="columnheader"
-                style="width:100px"
-                tabindex="-1"
+                class="euiDataGrid__virtualized"
+                style="position:relative;height:500px;width:500px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
               >
                 <div
-                  class="euiDataGridColumnResizer"
-                  data-test-subj="dataGridColumnResizer"
-                  style="margin-right:0px"
-                />
-                <button
-                  class="euiDataGridHeaderCell__button"
-                >
-                  <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="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"
-                  >
-                    <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
-              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="height:102px;width:200px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridHeader"
+                    data-test-subj="dataGridHeader"
+                    role="row"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridHeaderCell"
+                      data-test-subj="dataGridHeaderCell-A"
+                      role="columnheader"
+                      style="width:100px"
+                      tabindex="-1"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiDataGridColumnResizer"
+                        data-test-subj="dataGridColumnResizer"
+                        style="margin-right:0px"
+                      />
+                      <button
+                        class="euiDataGridHeaderCell__button"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiDataGridHeaderCell__content"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 1, Column: 1:
-                            </span>
-                          </p>
-                          <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            0, A
-                          </div>
+                          A
                         </div>
                         <div
-                          class="euiDataGridRowCell__expandButton"
+                          class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
                         >
-                          <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="euiPopover__anchor"
                           >
                             <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
+                              aria-label="Header actions"
+                              color="text"
+                              data-euiicon-type="arrowDown"
+                              data-test-subj="dataGridHeaderCellActionButton-A"
                             />
-                          </button>
+                          </div>
                         </div>
-                      </div>
+                      </button>
                     </div>
-                  </div>
-                </div>
-              </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"
-                  >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridHeaderCell"
+                      data-test-subj="dataGridHeaderCell-B"
+                      role="columnheader"
+                      style="width:100px"
+                      tabindex="-1"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiDataGridColumnResizer"
+                        data-test-subj="dataGridColumnResizer"
+                        style="margin-right:0px"
+                      />
+                      <button
+                        class="euiDataGridHeaderCell__button"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiDataGridHeaderCell__content"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 1, Column: 2:
-                            </span>
-                          </p>
-                          <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            0, B
-                          </div>
+                          B
                         </div>
                         <div
-                          class="euiDataGridRowCell__expandButton"
+                          class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
                         >
-                          <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="euiPopover__anchor"
                           >
                             <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
+                              aria-label="Header actions"
+                              color="text"
+                              data-euiicon-type="arrowDown"
+                              data-test-subj="dataGridHeaderCellActionButton-B"
                             />
-                          </button>
+                          </div>
                         </div>
-                      </div>
+                      </button>
                     </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"
-                >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    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__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__truncate"
                     >
-                      <div
-                        class="euiDataGridRowCell__expandFlex"
+                      0, A
+                      <p
+                        class="euiScreenReaderOnly"
                       >
-                        <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>
+                        Row: 1, Column: 1:
+                      </p>
                     </div>
                   </div>
-                </div>
-              </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="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__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__truncate"
                     >
-                      <div
-                        class="euiDataGridRowCell__expandFlex"
+                      0, B
+                      <p
+                        class="euiScreenReaderOnly"
                       >
-                        <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>
+                        Row: 1, Column: 2:
+                      </p>
                     </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"
-                >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    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__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__truncate"
                     >
-                      <div
-                        class="euiDataGridRowCell__expandFlex"
+                      1, A
+                      <p
+                        class="euiScreenReaderOnly"
                       >
-                        <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>
+                        Row: 2, Column: 1:
+                      </p>
                     </div>
                   </div>
-                </div>
-              </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="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__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__truncate"
                     >
-                      <div
-                        class="euiDataGridRowCell__expandFlex"
+                      1, B
+                      <p
+                        class="euiScreenReaderOnly"
                       >
-                        <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>
+                        Row: 2, Column: 2:
+                      </p>
+                    </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__truncate"
+                    >
+                      2, A
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 3, Column: 1:
+                      </p>
+                    </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__truncate"
+                    >
+                      2, B
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 3, Column: 2:
+                      </p>
                     </div>
                   </div>
                 </div>
@@ -1521,6 +1282,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 +1369,6 @@ Array [
       </div>
       <div
         class="euiDataGrid__verticalScroll"
-        data-test-subj="test subject string"
       >
         <div
           class="euiDataGrid__overflow"
@@ -1621,237 +1382,142 @@ Array [
             tabindex="0"
           >
             <div
-              class="euiDataGridHeader"
-              data-test-subj="dataGridHeader"
-              role="row"
+              style="width:100%;height:100%;overflow:hidden"
             >
               <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="euiDataGrid__virtualized"
+                style="position:relative;height:500px;width:500px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
               >
                 <div
-                  class="euiDataGridColumnResizer"
-                  data-test-subj="dataGridColumnResizer"
-                  style="margin-right:0px"
-                />
-                <button
-                  class="euiDataGridHeaderCell__button"
+                  style="height:102px;width:300px"
                 >
                   <div
-                    class="euiDataGridHeaderCell__content"
-                  >
-                    A
-                  </div>
-                  <div
-                    class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
+                    class="euiDataGridHeader"
+                    data-test-subj="dataGridHeader"
+                    role="row"
                   >
                     <div
-                      class="euiPopover__anchor"
+                      class="euiDataGridHeaderCell euiDataGridHeaderCell--controlColumn"
+                      data-test-subj="dataGridHeaderCell-leading"
+                      role="columnheader"
+                      style="width:50px"
+                      tabindex="-1"
                     >
-                      <span
-                        aria-label="Header actions"
-                        color="text"
-                        data-euiicon-type="arrowDown"
-                        data-test-subj="dataGridHeaderCellActionButton-A"
-                      />
+                      <div
+                        class="euiDataGridHeaderCell__content"
+                      >
+                        <span>
+                          leading heading
+                        </span>
+                      </div>
                     </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"
-                  >
                     <div
-                      class="euiPopover__anchor"
+                      class="euiDataGridHeaderCell"
+                      data-test-subj="dataGridHeaderCell-A"
+                      role="columnheader"
+                      style="width:100px"
+                      tabindex="-1"
                     >
-                      <span
-                        aria-label="Header actions"
-                        color="text"
-                        data-euiicon-type="arrowDown"
-                        data-test-subj="dataGridHeaderCellActionButton-B"
+                      <div
+                        class="euiDataGridColumnResizer"
+                        data-test-subj="dataGridColumnResizer"
+                        style="margin-right:0px"
                       />
-                    </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"
-                      >
-                        <span>
-                          Row: 1, Column: 1:
-                        </span>
-                      </p>
-                      <div
-                        class="euiDataGridRowCell__truncate"
+                      <button
+                        class="euiDataGridHeaderCell__button"
                       >
-                        0
-                      </div>
+                        <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>
-                </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"
-                  >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridHeaderCell"
+                      data-test-subj="dataGridHeaderCell-B"
+                      role="columnheader"
+                      style="width:100px"
+                      tabindex="-1"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiDataGridColumnResizer"
+                        data-test-subj="dataGridColumnResizer"
+                        style="margin-right:0px"
+                      />
+                      <button
+                        class="euiDataGridHeaderCell__button"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiDataGridHeaderCell__content"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 1, Column: 2:
-                            </span>
-                          </p>
-                          <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            0, A
-                          </div>
+                          B
                         </div>
                         <div
-                          class="euiDataGridRowCell__expandButton"
+                          class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
                         >
-                          <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="euiPopover__anchor"
                           >
                             <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
+                              aria-label="Header actions"
+                              color="text"
+                              data-euiicon-type="arrowDown"
+                              data-test-subj="dataGridHeaderCellActionButton-B"
                             />
-                          </button>
+                          </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>
-              <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="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="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"
@@ -1862,153 +1528,77 @@ Array [
                           <p
                             class="euiScreenReaderOnly"
                           >
-                            <span>
-                              Row: 1, Column: 3:
-                            </span>
+                            Row: 1, Column: 1:
                           </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"
-                >
                   <div
-                    class="euiDataGridRowCell__expandFlex"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:50px;top:0px;height:34px;width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiDataGridRowCell__expandContent"
+                      class="euiDataGridRowCell__truncate"
                     >
+                      0, A
                       <p
                         class="euiScreenReaderOnly"
                       >
-                        <span>
-                          Row: 1, Column: 4:
-                        </span>
+                        Row: 1, Column: 2:
                       </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>
-            <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"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:150px;top:0px;height:34px;width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiDataGridRowCell__expandContent"
+                      class="euiDataGridRowCell__truncate"
                     >
+                      0, B
                       <p
                         class="euiScreenReaderOnly"
                       >
-                        <span>
-                          Row: 2, Column: 1:
-                        </span>
+                        Row: 1, Column: 3:
                       </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
-                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="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="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"
@@ -2019,53 +1609,41 @@ Array [
                           <p
                             class="euiScreenReaderOnly"
                           >
-                            <span>
-                              Row: 2, Column: 2:
-                            </span>
+                            Row: 1, Column: 4:
                           </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"
-                >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    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="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"
@@ -2076,153 +1654,77 @@ Array [
                           <p
                             class="euiScreenReaderOnly"
                           >
-                            <span>
-                              Row: 2, Column: 3:
-                            </span>
+                            Row: 2, Column: 1:
                           </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"
-                >
                   <div
-                    class="euiDataGridRowCell__expandFlex"
+                    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__expandContent"
+                      class="euiDataGridRowCell__truncate"
                     >
+                      1, A
                       <p
                         class="euiScreenReaderOnly"
                       >
-                        <span>
-                          Row: 2, Column: 4:
-                        </span>
+                        Row: 2, Column: 2:
                       </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>
-            <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"
+                    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__expandContent"
+                      class="euiDataGridRowCell__truncate"
                     >
+                      1, B
                       <p
                         class="euiScreenReaderOnly"
                       >
-                        <span>
-                          Row: 3, Column: 1:
-                        </span>
+                        Row: 2, Column: 3:
                       </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
-                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="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="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"
@@ -2233,53 +1735,41 @@ Array [
                           <p
                             class="euiScreenReaderOnly"
                           >
-                            <span>
-                              Row: 3, Column: 2:
-                            </span>
+                            Row: 2, Column: 4:
                           </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"
-                >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    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="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"
@@ -2290,84 +1780,104 @@ Array [
                           <p
                             class="euiScreenReaderOnly"
                           >
-                            <span>
-                              Row: 3, Column: 3:
-                            </span>
+                            Row: 3, Column: 1:
                           </p>
                           <div
                             class="euiDataGridRowCell__truncate"
                           >
-                            2, B
+                            2
                           </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"
-                >
                   <div
-                    class="euiDataGridRowCell__expandFlex"
+                    class="euiDataGridRowCell"
+                    data-test-subj="dataGridRowCell"
+                    role="gridcell"
+                    style="position:absolute;left:50px;top:68px;height:34px;width:100px"
+                    tabindex="-1"
                   >
                     <div
-                      class="euiDataGridRowCell__expandContent"
+                      class="euiDataGridRowCell__truncate"
                     >
+                      2, A
                       <p
                         class="euiScreenReaderOnly"
                       >
-                        <span>
-                          Row: 3, Column: 4:
-                        </span>
+                        Row: 3, Column: 2:
+                      </p>
+                    </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__truncate"
+                    >
+                      2, B
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 3, Column: 3:
                       </p>
+                    </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"
+                      tabindex="-1"
+                    />
+                    <div
+                      data-focus-lock-disabled="disabled"
+                    >
                       <div
-                        class="euiDataGridRowCell__truncate"
+                        class="euiDataGridRowCell__expandFlex"
                       >
-                        2
+                        <div
+                          class="euiDataGridRowCell__expandContent"
+                        >
+                          <p
+                            class="euiScreenReaderOnly"
+                          >
+                            Row: 3, Column: 4:
+                          </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
-                  data-focus-guard="true"
-                  style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                  tabindex="-1"
-                />
               </div>
             </div>
           </div>
@@ -2407,6 +1917,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 +2001,6 @@ Array [
       </div>
       <div
         class="euiDataGrid__verticalScroll"
-        data-test-subj="test subject string"
       >
         <div
           class="euiDataGrid__overflow"
@@ -2504,440 +2014,201 @@ Array [
             tabindex="0"
           >
             <div
-              class="euiDataGridHeader"
-              data-test-subj="dataGridHeader"
-              role="row"
-            >
-              <div
-                class="euiDataGridHeaderCell"
-                data-test-subj="dataGridHeaderCell-A"
-                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"
-                  >
-                    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="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>
-                  <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
-              class="euiDataGridRow"
-              data-test-subj="dataGridRow"
-              role="row"
+              style="width:100%;height:100%;overflow:hidden"
             >
               <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
+                class="euiDataGrid__virtualized"
+                style="position:relative;height:500px;width:500px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
               >
                 <div
-                  class="euiDataGridRowCell__content"
+                  style="height:102px;width:200px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridHeader"
+                    data-test-subj="dataGridHeader"
+                    role="row"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridHeaderCell"
+                      data-test-subj="dataGridHeaderCell-A"
+                      role="columnheader"
+                      style="width:100px"
+                      tabindex="-1"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiDataGridColumnResizer"
+                        data-test-subj="dataGridColumnResizer"
+                        style="margin-right:0px"
+                      />
+                      <button
+                        class="euiDataGridHeaderCell__button"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiDataGridHeaderCell__content"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 1, Column: 1:
-                            </span>
-                          </p>
-                          <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            0, A
-                          </div>
+                          Column A
                         </div>
                         <div
-                          class="euiDataGridRowCell__expandButton"
+                          class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
                         >
-                          <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="euiPopover__anchor"
                           >
                             <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
+                              aria-label="Header actions"
+                              color="text"
+                              data-euiicon-type="arrowDown"
+                              data-test-subj="dataGridHeaderCellActionButton-A"
                             />
-                          </button>
+                          </div>
                         </div>
-                      </div>
+                      </button>
                     </div>
-                  </div>
-                </div>
-              </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"
-                  >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridHeaderCell"
+                      data-test-subj="dataGridHeaderCell-B"
+                      role="columnheader"
+                      style="width:100px"
+                      tabindex="-1"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiDataGridColumnResizer"
+                        data-test-subj="dataGridColumnResizer"
+                        style="margin-right:0px"
+                      />
+                      <button
+                        class="euiDataGridHeaderCell__button"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiDataGridHeaderCell__content"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 1, Column: 2:
-                            </span>
-                          </p>
-                          <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            0, B
+                          <div>
+                            More Elements
                           </div>
                         </div>
                         <div
-                          class="euiDataGridRowCell__expandButton"
+                          class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
                         >
-                          <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="euiPopover__anchor"
                           >
                             <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
+                              aria-label="Header actions"
+                              color="text"
+                              data-euiicon-type="arrowDown"
+                              data-test-subj="dataGridHeaderCellActionButton-B"
                             />
-                          </button>
+                          </div>
                         </div>
-                      </div>
+                      </button>
                     </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"
-                >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    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__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__truncate"
                     >
-                      <div
-                        class="euiDataGridRowCell__expandFlex"
+                      0, A
+                      <p
+                        class="euiScreenReaderOnly"
                       >
-                        <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>
+                        Row: 1, Column: 1:
+                      </p>
                     </div>
                   </div>
-                </div>
-              </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="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__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__truncate"
                     >
-                      <div
-                        class="euiDataGridRowCell__expandFlex"
+                      0, B
+                      <p
+                        class="euiScreenReaderOnly"
                       >
-                        <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>
+                        Row: 1, Column: 2:
+                      </p>
                     </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"
-                >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    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__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__truncate"
                     >
-                      <div
-                        class="euiDataGridRowCell__expandFlex"
+                      1, A
+                      <p
+                        class="euiScreenReaderOnly"
                       >
-                        <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>
+                        Row: 2, Column: 1:
+                      </p>
+                    </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__truncate"
+                    >
+                      1, B
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 2, Column: 2:
+                      </p>
+                    </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__truncate"
+                    >
+                      2, A
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 3, Column: 1:
+                      </p>
                     </div>
                   </div>
-                </div>
-              </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="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__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__truncate"
                     >
-                      <div
-                        class="euiDataGridRowCell__expandFlex"
+                      2, B
+                      <p
+                        class="euiScreenReaderOnly"
                       >
-                        <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>
+                        Row: 3, Column: 2:
+                      </p>
                     </div>
                   </div>
                 </div>
@@ -2980,6 +2251,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 +2335,6 @@ Array [
       </div>
       <div
         class="euiDataGrid__verticalScroll"
-        data-test-subj="test subject string"
       >
         <div
           class="euiDataGrid__overflow"
@@ -3077,438 +2348,199 @@ Array [
             tabindex="0"
           >
             <div
-              class="euiDataGridHeader"
-              data-test-subj="dataGridHeader"
-              role="row"
-            >
-              <div
-                class="euiDataGridHeaderCell"
-                data-test-subj="dataGridHeaderCell-A"
-                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"
-                  >
-                    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="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"
-                  >
-                    <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
-              class="euiDataGridRow"
-              data-test-subj="dataGridRow"
-              role="row"
+              style="width:100%;height:100%;overflow:hidden"
             >
               <div
-                class="euiDataGridRowCell"
-                data-test-subj="dataGridRowCell"
-                role="gridcell"
-                style="width:100px"
-                tabindex="-1"
+                class="euiDataGrid__virtualized"
+                style="position:relative;height:500px;width:500px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
               >
                 <div
-                  class="euiDataGridRowCell__content"
+                  style="height:102px;width:200px"
                 >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    class="euiDataGridHeader"
+                    data-test-subj="dataGridHeader"
+                    role="row"
                   >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridHeaderCell"
+                      data-test-subj="dataGridHeaderCell-A"
+                      role="columnheader"
+                      style="width:100px"
+                      tabindex="-1"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiDataGridColumnResizer"
+                        data-test-subj="dataGridColumnResizer"
+                        style="margin-right:0px"
+                      />
+                      <button
+                        class="euiDataGridHeaderCell__button"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiDataGridHeaderCell__content"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 1, Column: 1:
-                            </span>
-                          </p>
-                          <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            0, A
-                          </div>
+                          A
                         </div>
                         <div
-                          class="euiDataGridRowCell__expandButton"
+                          class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
                         >
-                          <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="euiPopover__anchor"
                           >
                             <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
+                              aria-label="Header actions"
+                              color="text"
+                              data-euiicon-type="arrowDown"
+                              data-test-subj="dataGridHeaderCellActionButton-A"
                             />
-                          </button>
+                          </div>
                         </div>
-                      </div>
+                      </button>
                     </div>
-                  </div>
-                </div>
-              </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"
-                  >
                     <div
-                      class="euiPopover__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridHeaderCell"
+                      data-test-subj="dataGridHeaderCell-B"
+                      role="columnheader"
+                      style="width:100px"
+                      tabindex="-1"
                     >
                       <div
-                        class="euiDataGridRowCell__expandFlex"
+                        class="euiDataGridColumnResizer"
+                        data-test-subj="dataGridColumnResizer"
+                        style="margin-right:0px"
+                      />
+                      <button
+                        class="euiDataGridHeaderCell__button"
                       >
                         <div
-                          class="euiDataGridRowCell__expandContent"
+                          class="euiDataGridHeaderCell__content"
                         >
-                          <p
-                            class="euiScreenReaderOnly"
-                          >
-                            <span>
-                              Row: 1, Column: 2:
-                            </span>
-                          </p>
-                          <div
-                            class="euiDataGridRowCell__truncate"
-                          >
-                            0, B
-                          </div>
+                          B
                         </div>
                         <div
-                          class="euiDataGridRowCell__expandButton"
+                          class="euiPopover euiPopover--anchorDownRight euiDataGridHeaderCell__popover"
                         >
-                          <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="euiPopover__anchor"
                           >
                             <span
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="expandMini"
+                              aria-label="Header actions"
+                              color="text"
+                              data-euiicon-type="arrowDown"
+                              data-test-subj="dataGridHeaderCellActionButton-B"
                             />
-                          </button>
+                          </div>
                         </div>
-                      </div>
+                      </button>
                     </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"
-                >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    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__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__truncate"
                     >
-                      <div
-                        class="euiDataGridRowCell__expandFlex"
+                      0, A
+                      <p
+                        class="euiScreenReaderOnly"
                       >
-                        <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>
+                        Row: 1, Column: 1:
+                      </p>
                     </div>
                   </div>
-                </div>
-              </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="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__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__truncate"
                     >
-                      <div
-                        class="euiDataGridRowCell__expandFlex"
+                      0, B
+                      <p
+                        class="euiScreenReaderOnly"
                       >
-                        <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>
+                        Row: 1, Column: 2:
+                      </p>
                     </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"
-                >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
+                    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__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__truncate"
                     >
-                      <div
-                        class="euiDataGridRowCell__expandFlex"
+                      1, A
+                      <p
+                        class="euiScreenReaderOnly"
                       >
-                        <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>
+                        Row: 2, Column: 1:
+                      </p>
                     </div>
                   </div>
-                </div>
-              </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="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__anchor euiDataGridRowCell__expand"
+                      class="euiDataGridRowCell__truncate"
                     >
-                      <div
-                        class="euiDataGridRowCell__expandFlex"
+                      1, B
+                      <p
+                        class="euiScreenReaderOnly"
                       >
-                        <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>
+                        Row: 2, Column: 2:
+                      </p>
+                    </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__truncate"
+                    >
+                      2, A
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 3, Column: 1:
+                      </p>
+                    </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__truncate"
+                    >
+                      2, B
+                      <p
+                        class="euiScreenReaderOnly"
+                      >
+                        Row: 3, Column: 2:
+                      </p>
                     </div>
                   </div>
                 </div>
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_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index a30c1d904f3..6c3164716c6 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;
   }
 
@@ -34,30 +34,54 @@
     margin-top: -1px;
   }
 
-  &:focus,
+  // 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 {
+      animation-duration: $euiAnimSpeedExtraFast;
+      animation-name: euiDataGridCellButtonSlideIn;
+      animation-iteration-count: 1;
+      animation-delay: $euiAnimSpeedNormal;
+      animation-fill-mode: forwards;
+    }
+
+    .euiDataGridRowCell__actionButtonIcon {
+      animation-duration: $euiAnimSpeedExtraFast;
+      animation-name: euiDataGridCellButtonSlideIn;
+      animation-iteration-count: 1;
+      animation-delay: $euiAnimSpeedNormal;
+      animation-fill-mode: forwards;
+    }
+  }
 
+  &:not(:hover),
+  &.euiDataGridRowCell--open {
     .euiDataGridRowCell__expandButtonIcon {
+      animation: none;
       margin-left: $euiDataGridCellPaddingM;
       width: $euiSizeM;
-      background: $euiColorPrimary; // Needed to prevent the bg-color of .euiButtonIcon--text:focus
     }
 
     .euiDataGridRowCell__actionButtonIcon {
+      animation: none;
       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;
+  // 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 {
-      transition: margin $euiAnimSpeedFast 1000ms, width $euiAnimSpeedFast 1000ms;
+      display: none;
     }
   }
 
@@ -83,12 +107,14 @@
   &:not(.euiDataGridRowCell--controlColumn) {
     .euiDataGridRowCell__content,
     .euiDataGridRowCell__truncate,
+    &.euiDataGridRowCell__truncate,
     .euiDataGridRowCell__expandContent {
       @include euiTextTruncate;
       overflow: hidden;
       white-space: nowrap;
     }
   }
+
 }
 
 .euiDataGridRowCell__popover {
@@ -116,8 +142,13 @@
 .euiDataGridRowCell__expandButton {
   display: flex;
   flex-grow: 0;
+
+  .euiDataGridRowCell__expandButtonIcon {
+    background: $euiColorPrimary; // Needed to prevent the bg-color of .euiButtonIcon--text:focus
+  }
 }
 
+
 .euiDataGridRowCell__expandButtonIcon {
   height: $euiSizeM;
   min-height: $euiSizeM;
@@ -159,8 +190,8 @@
 
 // Stripes
 @include euiDataGridStyles(stripes) {
-  .euiDataGridRow:nth-child(odd) {
-    @include euiDataGridRowCell {
+  @include euiDataGridRowCell {
+    &.euiDataGridRowCell--stripe {
       background: $euiColorLightestShade;
     }
   }
@@ -216,3 +247,15 @@
     }
   }
 }
+
+@keyframes euiDataGridCellButtonSlideIn {
+  from {
+    margin-left: 0;
+    width: 0;
+  }
+
+  to {
+    margin-left: $euiDataGridCellPaddingM;
+    width: $euiSizeM;
+  }
+}
diff --git a/src/components/datagrid/column_selector.tsx b/src/components/datagrid/column_selector.tsx
index 4b1f0a2c80e..f67d06197bc 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 useDataGridColumnSelector = (
   );
 
   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 },
@@ -296,17 +302,20 @@ export const useDataGridColumnSelector = (
   /**
    * 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.test.tsx b/src/components/datagrid/data_grid.test.tsx
index c75ecd7fd52..601bfce5b8a 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
 ) {
@@ -440,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
@@ -481,38 +493,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
@@ -544,61 +524,81 @@ 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 euiDataGridRowCell--firstColumn customClass",
+            "data-test-subj": "dataGridRowCell",
+            "onBlur": [Function],
+            "onFocus": [Function],
+            "onKeyDown": [Function],
+            "onMouseEnter": [Function],
+            "role": "gridcell",
+            "style": Object {
+              "color": "red",
+              "height": 34,
+              "left": 0,
+              "position": "absolute",
+              "top": "100px",
+              "width": 100,
+            },
+            "tabIndex": -1,
+          },
+          Object {
+            "className": "euiDataGridRowCell euiDataGridRowCell--lastColumn customClass",
+            "data-test-subj": "dataGridRowCell",
+            "onBlur": [Function],
+            "onFocus": [Function],
+            "onKeyDown": [Function],
+            "onMouseEnter": [Function],
+            "role": "gridcell",
+            "style": Object {
+              "color": "blue",
+              "height": 34,
+              "left": 100,
+              "position": "absolute",
+              "top": "100px",
+              "width": 100,
+            },
+            "tabIndex": -1,
+          },
+          Object {
+            "className": "euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn customClass",
+            "data-test-subj": "dataGridRowCell",
+            "onBlur": [Function],
+            "onFocus": [Function],
+            "onKeyDown": [Function],
+            "onMouseEnter": [Function],
+            "role": "gridcell",
+            "style": Object {
+              "color": "red",
+              "height": 34,
+              "left": 0,
+              "position": "absolute",
+              "top": "134px",
+              "width": 100,
+            },
+            "tabIndex": -1,
+          },
+          Object {
+            "className": "euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn customClass",
+            "data-test-subj": "dataGridRowCell",
+            "onBlur": [Function],
+            "onFocus": [Function],
+            "onKeyDown": [Function],
+            "onMouseEnter": [Function],
+            "role": "gridcell",
+            "style": Object {
+              "color": "blue",
+              "height": 34,
+              "left": 100,
+              "position": "absolute",
+              "top": "134px",
+              "width": 100,
+            },
+            "tabIndex": -1,
+          },
+        ]
+      `);
     });
 
     it('renders correct aria attributes on column headers', () => {
@@ -753,6 +753,7 @@ Array [
       ).toBe(0);
 
       // style selector
+      component.debug();
       expect(
         findTestSubject(component, 'dataGridStyleSelectorButton').length
       ).toBe(1);
@@ -763,7 +764,7 @@ Array [
       ).toBe(1);
     });
 
-    describe('schema schema classnames', () => {
+    describe('schema classnames', () => {
       it('applies classnames from explicit schemas', () => {
         const component = mount(
           <EuiDataGrid
@@ -787,15 +788,21 @@ 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--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",
+          ]
+        `);
       });
 
       it('automatically detects column types and applies classnames', () => {
@@ -825,15 +832,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--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--boolean",
+            "euiDataGridRowCell euiDataGridRowCell--lastColumn",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--boolean euiDataGridRowCell--stripe",
+            "euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn",
+          ]
+        `);
       });
 
       it('overrides automatically detected column types with supplied schema', () => {
@@ -857,13 +864,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--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--alphanumeric euiDataGridRowCell--lastColumn",
+            "euiDataGridRowCell euiDataGridRowCell--numeric euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--alphanumeric euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn",
+          ]
+        `);
       });
 
       it('detects all of the supported types', () => {
@@ -894,16 +901,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--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--boolean",
+            "euiDataGridRowCell euiDataGridRowCell--currency",
+            "euiDataGridRowCell euiDataGridRowCell--datetime",
+            "euiDataGridRowCell euiDataGridRowCell--datetime",
+            "euiDataGridRowCell euiDataGridRowCell--datetime",
+          ]
+        `);
       });
 
       it('accepts extra detectors', () => {
@@ -943,11 +949,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--firstColumn",
+            "euiDataGridRowCell euiDataGridRowCell--ipaddress euiDataGridRowCell--lastColumn",
+          ]
+        `);
       });
     });
   });
@@ -970,21 +976,21 @@ 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",
+          ],
+          Array [
+            "Hello, Row 0-Column 1!",
+            "Hello, Row 0-Column 2!",
+          ],
+          Array [
+            "Hello, Row 1-Column 1!",
+            "Hello, Row 1-Column 2!",
+          ],
+        ]
+      `);
     });
   });
 
@@ -1994,7 +2000,7 @@ Array [
   });
 
   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(
@@ -2049,9 +2055,19 @@ Array [
         />
       );
 
-      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);
+
+      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();
@@ -2069,7 +2085,7 @@ Array [
   });
 
   describe('keyboard controls', () => {
-    it('supports simple arrow navigation', () => {
+    it('supports simple arrow navigation', async () => {
       let pagination = {
         pageIndex: 0,
         pageSize: 3,
@@ -2163,9 +2179,9 @@ Array [
       ).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 11f533b916b..89261e070e3 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -28,13 +28,12 @@ import React, {
   ReactChild,
   useMemo,
   useRef,
-  Dispatch,
-  SetStateAction,
+  MutableRefObject,
+  CSSProperties,
 } from '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,
@@ -65,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,
@@ -76,9 +72,12 @@ import {
   useDetectSchema,
   schemaDetectors as providedSchemaDetectors,
 } from './data_grid_schema';
+import {
+  DataGridFocusContext,
+  DataGridFocusContextShape,
+  DataGridSortingContext,
+} from './data_grid_context';
 import { useDataGridColumnSorting } from './column_sorting';
-import { EuiMutationObserver } from '../observer/mutation_observer';
-import { DataGridContext } 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');
@@ -156,6 +155,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?: CSSProperties['height'];
+    /**
+     * Sets the grid's width, forcing it to overflow in a scrollable container with cell virtualization
+     */
+    width?: CSSProperties['width'];
   };
 
 // Force either aria-label or aria-labelledby to be defined
@@ -291,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
@@ -379,28 +383,18 @@ 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 });
-    }
-  };
-
-  return [columnWidths, setColumnWidth];
-}
-
-function useOnResize(
-  setHasRoomForGridControls: (hasRoomForGridControls: boolean) => void,
-  isFullScreen: boolean,
-  minSizeForControls: number
-) {
-  return useCallback(
-    ({ width }: { width: number }) => {
-      setHasRoomForGridControls(width > minSizeForControls || isFullScreen);
+      if (onColumnResize) {
+        onColumnResize({ columnId, width });
+      }
     },
-    [setHasRoomForGridControls, isFullScreen, minSizeForControls]
+    [columnWidths, onColumnResize]
   );
+
+  return [columnWidths, setColumnWidth];
 }
 
 function useInMemoryValues(
@@ -460,8 +454,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;
@@ -507,7 +500,6 @@ function createKeyDownHandler(
           props.pagination.onChangePage(pageIndex + 1);
         }
         setFocusedCell([focusedCell[0], 0]);
-        updateFocus();
       }
     } else if (key === keys.PAGE_UP) {
       if (props.pagination) {
@@ -517,7 +509,6 @@ function createKeyDownHandler(
           props.pagination.onChangePage(pageIndex - 1);
         }
         setFocusedCell([focusedCell[0], props.pagination.pageSize - 1]);
-        updateFocus();
       }
     } else if (key === (ctrlKey && keys.END)) {
       event.preventDefault();
@@ -535,44 +526,35 @@ 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<
     EuiDataGridFocusedCell | undefined
   >(undefined);
 
+  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]);
 
   const focusProps = useMemo<FocusProps>(
@@ -625,22 +607,65 @@ 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 {
+    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 [hasRoomForGridControls, setHasRoomForGridControls] = useState(true);
-  const [containerRef, _setContainerRef] = useState<HTMLDivElement | null>(
-    null
-  );
+  const [gridWidth, setGridWidth] = useState(0);
+
   const [interactiveCellId] = useState(htmlIdGenerator()());
   const [headerIsInteractive, setHeaderIsInteractive] = useState(false);
 
-  const setContainerRef = useCallback((ref) => _setContainerRef(ref), []);
+  const cellsUpdateFocus = useRef<Map<string, Function>>(new Map());
 
   const [wrappingDivFocusProps, focusedCell, setFocusedCell] = useFocus(
-    headerIsInteractive
+    headerIsInteractive,
+    cellsUpdateFocus
   );
 
+  // 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);
@@ -651,13 +676,15 @@ 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
+        const focusedCell = focusedCellReference.current;
         if (hasInteractives === false && focusedCell && focusedCell[1] === -1) {
           setFocusedCell([focusedCell[0], 0]);
         }
       }
     },
-    [headerIsInteractive, setHeaderIsInteractive, focusedCell, setFocusedCell]
+    [headerIsInteractive, setHeaderIsInteractive, setFocusedCell]
   );
+
   const handleHeaderMutation = useCallback<MutationCallback>(
     (records) => {
       const [{ target }] = records;
@@ -689,37 +716,21 @@ 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(
-    (nextHasRoomForGridControls) => {
-      if (nextHasRoomForGridControls !== hasRoomForGridControls) {
-        setHasRoomForGridControls(nextHasRoomForGridControls);
-      }
-    },
-    isFullScreen,
-    minSizeForControls
-  );
+  const [resizeRef, setResizeRef] = useState<HTMLDivElement | null>(null);
+  const gridDimensions = useResizeObserver(resizeRef, 'width');
+  useEffect(() => {
+    if (resizeRef) {
+      const { width } = gridDimensions;
+      setGridWidth(width);
+    } else {
+      setGridWidth(0);
+    }
+  }, [resizeRef, gridDimensions]);
+
+  const hasRoomForGridControls = IS_JEST_ENVIRONMENT
+    ? true
+    : gridWidth > minSizeForControls || isFullScreen;
 
   const [columnWidths, setColumnWidth] = useColumnWidths(
     columns,
@@ -788,7 +799,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
@@ -907,48 +918,27 @@ 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 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>(() => {
+    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"
@@ -991,128 +981,118 @@ 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}
+                        style={isFullScreen ? undefined : { width, height }}
+                        ref={setResizeRef}
+                        {...rest}>
+                        {(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}
-                                          schemaDetectors={allSchemaDetectors}
-                                          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}
-                                    />
-                                  </div>
+                                className="euiDataGrid__controls"
+                                data-test-sub="dataGridControls">
+                                {hasRoomForGridControls ? gridControls : null}
+                                {checkOrDefaultToolBarDiplayOptions(
+                                  toolbarVisibility,
+                                  'showFullScreenSelector'
+                                )
+                                  ? fullScreenSelector
+                                  : null}
+                              </div>
+                            ) : null}
+                            <div
+                              onKeyDown={createKeyDownHandler(
+                                props,
+                                orderedVisibleColumns,
+                                leadingControlColumns,
+                                trailingControlColumns,
+                                focusedCell,
+                                headerIsInteractive,
+                                setFocusedCell
+                              )}
+                              className="euiDataGrid__verticalScroll">
+                              <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
+                                    isFullScreen={isFullScreen}
+                                    columns={orderedVisibleColumns}
+                                    columnWidths={columnWidths}
+                                    defaultColumnWidth={defaultColumnWidth}
+                                    leadingControlColumns={
+                                      leadingControlColumns
+                                    }
+                                    schema={mergedSchema}
+                                    trailingControlColumns={
+                                      trailingControlColumns
+                                    }
+                                    setVisibleColumns={setVisibleColumns}
+                                    switchColumnPos={switchColumnPos}
+                                    setColumnWidth={setColumnWidth}
+                                    headerIsInteractive={headerIsInteractive}
+                                    handleHeaderMutation={handleHeaderMutation}
+                                    inMemoryValues={inMemoryValues}
+                                    inMemory={inMemory}
+                                    schemaDetectors={allSchemaDetectors}
+                                    popoverContents={popoverContents}
+                                    pagination={pagination}
+                                    renderCellValue={renderCellValue}
+                                    renderFooterCellValue={
+                                      renderFooterCellValue
+                                    }
+                                    rowCount={rowCount}
+                                    interactiveCellId={interactiveCellId}
+                                  />
                                 </div>
                               </div>
+                            </div>
+                            {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..1d1da6da5b5 100644
--- a/src/components/datagrid/data_grid_body.tsx
+++ b/src/components/datagrid/data_grid_body.tsx
@@ -17,7 +17,23 @@
  * under the License.
  */
 
-import React, { Fragment, FunctionComponent, useMemo } from 'react';
+import React, {
+  forwardRef,
+  FunctionComponent,
+  useEffect,
+  useMemo,
+  useRef,
+  useCallback,
+  useContext,
+  useState,
+} from 'react';
+import classNames from 'classnames';
+import tabbable from 'tabbable';
+import {
+  GridChildComponentProps,
+  VariableSizeGrid as Grid,
+  VariableSizeGridProps,
+} from 'react-window';
 import { EuiCodeBlock } from '../code';
 import {
   EuiDataGridControlColumn,
@@ -27,21 +43,31 @@ import {
   EuiDataGridInMemory,
   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,
+  useMutationObserver,
+} from '../observer/mutation_observer';
+import { EuiText } from '../text';
+import {
+  DataGridSortingContext,
+  DataGridWrapperRowsContext,
+} from './data_grid_context';
+import { useResizeObserver } from '../observer/resize_observer';
 
 export interface EuiDataGridBodyProps {
+  isFullScreen: boolean;
   columnWidths: EuiDataGridColumnWidths;
   defaultColumnWidth?: number | null;
   leadingControlColumns?: EuiDataGridControlColumn[];
@@ -50,8 +76,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 +83,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 +119,184 @@ const providedPopoverContents: EuiDataGridPopoverContents = {
   },
 };
 
+const DefaultColumnFormatter: EuiDataGridPopoverContent = ({ children }) => {
+  return <EuiText>{children}</EuiText>;
+};
+
+const Cell: FunctionComponent<GridChildComponentProps> = ({
+  columnIndex,
+  rowIndex: visibleRowIndex,
+  style,
+  data,
+}) => {
+  const {
+    rowMap,
+    rowOffset,
+    leadingControlColumns,
+    trailingControlColumns,
+    columns,
+    schema,
+    popoverContents,
+    columnWidths,
+    defaultColumnWidth,
+    renderCellValue,
+    interactiveCellId,
+    setRowHeight,
+  } = data;
+
+  const { headerRowHeight } = useContext(DataGridWrapperRowsContext);
+
+  const offsetRowIndex = visibleRowIndex + rowOffset;
+  const rowIndex = rowMap.hasOwnProperty(offsetRowIndex)
+    ? rowMap[offsetRowIndex]
+    : offsetRowIndex;
+
+  let cellContent;
+
+  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;
+
+  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;
+
+    cellContent = (
+      <EuiDataGridCell
+        rowIndex={rowIndex}
+        visibleRowIndex={visibleRowIndex}
+        colIndex={columnIndex}
+        columnId={id}
+        popoverContent={DefaultColumnFormatter}
+        width={leadingColumn.width}
+        renderCellValue={rowCellRender}
+        interactiveCellId={interactiveCellId}
+        isExpandable={false}
+        className={classes}
+        setRowHeight={setRowHeight}
+        style={{
+          ...style,
+          top: `${parseFloat(style.top as string) + headerRowHeight}px`,
+        }}
+      />
+    );
+  } else if (isTrailingControlColumn) {
+    const columnOffset = columns.length + leadingControlColumns.length;
+    const trailingColumnIndex = columnIndex - columnOffset;
+    const trailingColumn = trailingControlColumns[trailingColumnIndex];
+    const { id, rowCellRender } = trailingColumn;
+
+    cellContent = (
+      <EuiDataGridCell
+        rowIndex={rowIndex}
+        visibleRowIndex={visibleRowIndex}
+        colIndex={columnIndex}
+        columnId={id}
+        popoverContent={DefaultColumnFormatter}
+        width={trailingColumn.width}
+        renderCellValue={rowCellRender}
+        interactiveCellId={interactiveCellId}
+        isExpandable={false}
+        className={classes}
+        style={{
+          ...style,
+          top: `${parseFloat(style.top as string) + headerRowHeight}px`,
+        }}
+      />
+    );
+  } else {
+    // this is a normal data cell
+
+    // offset the column index by the leading control columns
+    const dataColumnIndex = columnIndex - leadingControlColumns.length;
+    const column = columns[dataColumnIndex];
+    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={visibleRowIndex}
+        colIndex={columnIndex}
+        columnId={columnId}
+        column={column}
+        columnType={columnType}
+        popoverContent={popoverContent}
+        width={width || undefined}
+        renderCellValue={renderCellValue}
+        interactiveCellId={interactiveCellId}
+        isExpandable={isExpandable}
+        className={classes}
+        style={{
+          ...style,
+          top: `${parseFloat(style.top as string) + headerRowHeight}px`,
+        }}
+      />
+    );
+  }
+
+  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');
+
 export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
   props
 ) => {
   const {
+    isFullScreen,
     columnWidths,
     defaultColumnWidth,
     leadingControlColumns = [],
@@ -103,8 +305,6 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     schema,
     schemaDetectors,
     popoverContents,
-    focusedCell,
-    onCellFocus,
     rowCount,
     renderCellValue,
     renderFooterCellValue,
@@ -112,9 +312,23 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     inMemoryValues,
     interactiveCellId,
     pagination,
-    sorting,
+    setColumnWidth,
+    headerIsInteractive,
+    handleHeaderMutation,
+    setVisibleColumns,
+    switchColumnPos,
   } = props;
 
+  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');
+
   const startRow = pagination ? pagination.pageIndex * pagination.pageSize : 0;
   let endRow = pagination
     ? (pagination.pageIndex + 1) * pagination.pageSize
@@ -129,6 +343,8 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     return visibleRowIndices;
   }, [startRow, endRow]);
 
+  const sorting = useContext(DataGridSortingContext);
+
   const rowMap = useMemo(() => {
     const rowMap: { [key: number]: number } = {};
 
@@ -182,7 +398,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     }
 
     return rowMap;
-  }, [sorting, inMemory, inMemoryValues, schema, schemaDetectors]);
+  }, [sorting, inMemoryValues, schema, schemaDetectors, inMemory?.level]);
 
   const mergedPopoverContents = useMemo(
     () => ({
@@ -192,73 +408,216 @@ 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 (
+      <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}
+      />
+    );
   }, [
-    visibleRowIndices,
-    rowMap,
+    switchColumnPos,
+    setVisibleColumns,
     leadingControlColumns,
     trailingControlColumns,
     columns,
+    columnWidths,
+    defaultColumnWidth,
+    setColumnWidth,
     schema,
-    mergedPopoverContents,
+    schemaDetectors,
+    headerIsInteractive,
+  ]);
+
+  const footerRow = useMemo(() => {
+    if (renderFooterCellValue == null) return null;
+    return (
+      <EuiDataGridFooterRow
+        ref={setFooterRowRef}
+        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 gridRef = useRef<Grid>(null);
+  useEffect(() => {
+    if (gridRef.current) {
+      gridRef.current.resetAfterColumnIndex(0);
+    }
+  }, [columns, columnWidths, defaultColumnWidth]);
+
+  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 [rowHeight, setRowHeight] = useState(INITIAL_ROW_HEIGHT);
+  const getRowHeight = useCallback(() => rowHeight, [rowHeight]);
+  useEffect(() => {
+    if (gridRef.current) gridRef.current.resetAfterRowIndex(0);
+  }, [getRowHeight]);
+
+  const unconstrainedHeight =
+    rowHeight * visibleRowIndices.length +
+    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) {
+      setHeight(boundingRect.height);
+    }
+    if (boundingRect.width !== unconstrainedWidth) {
+      setWidth(boundingRect.width);
+    }
+  }, [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]);
+
+  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 (
+    <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 || finalWidth > 0) && (
+            <DataGridWrapperRowsContext.Provider
+              value={{ headerRowHeight, headerRow, footerRow }}>
+              <Grid
+                ref={gridRef}
+                innerElementType={InnerElement}
+                className="euiDataGrid__virtualized"
+                columnCount={
+                  leadingControlColumns.length +
+                  columns.length +
+                  trailingControlColumns.length
+                }
+                width={finalWidth}
+                columnWidth={getWidth}
+                height={finalHeight}
+                rowHeight={getRowHeight}
+                itemData={{
+                  setRowHeight,
+                  rowMap,
+                  rowOffset: pagination
+                    ? pagination.pageIndex * pagination.pageSize
+                    : 0,
+                  leadingControlColumns,
+                  trailingControlColumns,
+                  columns,
+                  schema,
+                  popoverContents: mergedPopoverContents,
+                  columnWidths,
+                  defaultColumnWidth,
+                  renderCellValue,
+                  interactiveCellId,
+                }}
+                rowCount={
+                  IS_JEST_ENVIRONMENT || headerRowHeight > 0
+                    ? visibleRowIndices.length
+                    : 0
+                }>
+                {Cell}
+              </Grid>
+            </DataGridWrapperRowsContext.Provider>
+          )}
+        </div>
+      )}
+    </EuiMutationObserver>
+  );
 };
diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
index aaf3a41a50f..6376d60784e 100644
--- a/src/components/datagrid/data_grid_cell.tsx
+++ b/src/components/datagrid/data_grid_cell.tsx
@@ -39,8 +39,7 @@ import {
   EuiDataGridColumn,
   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 +83,6 @@ export interface EuiDataGridCellProps {
   columnId: string;
   columnType?: string | null;
   width?: number;
-  isFocused: boolean;
-  onCellFocus: Function;
   interactiveCellId: string;
   isExpandable: boolean;
   className?: string;
@@ -93,18 +90,23 @@ export interface EuiDataGridCellProps {
   renderCellValue:
     | JSXElementConstructor<EuiDataGridCellValueElementProps>
     | ((props: EuiDataGridCellValueElementProps) => ReactNode);
+  setRowHeight?: (height: number) => void;
+  style?: React.CSSProperties;
 }
 
 interface EuiDataGridCellState {
   cellProps: CommonProps & HTMLAttributes<HTMLDivElement>;
   popoverIsOpen: boolean; // is expansion popover 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
+  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
 }
 
 export type EuiDataGridCellValueProps = Omit<
   EuiDataGridCellProps,
-  'width' | 'isFocused' | 'interactiveCellId' | 'onCellFocus' | 'popoverContent'
+  'width' | 'interactiveCellId' | 'popoverContent'
 >;
 
 const EuiDataGridCellContent: FunctionComponent<
@@ -125,22 +127,56 @@ 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 as any).ResizeObserver !== 'undefined';
+
 export class EuiDataGridCell extends Component<
   EuiDataGridCellProps,
   EuiDataGridCellState
 > {
-  cellRef = createRef<HTMLDivElement>();
+  cellRef = createRef() as MutableRefObject<HTMLDivElement | null>;
+  observer!: any; // ResizeObserver
   popoverPanelRef: MutableRefObject<HTMLElement | null> = createRef();
   cellContentsRef: HTMLDivElement | null = null;
   state: EuiDataGridCellState = {
     cellProps: {},
     popoverIsOpen: false,
+    renderPopoverOpen: false,
+    isFocused: false,
     isEntered: false,
+    enableInteractions: false,
     disableCellTabIndex: false,
   };
   unsubscribeCell?: Function = () => {};
+  style = null;
+
+  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 && hasResizeObserver) {
+        this.observer = new (window as any).ResizeObserver(() => {
+          const rowHeight = this.cellRef.current!.getBoundingClientRect()
+            .height;
+          if (this.props.setRowHeight) {
+            this.props.setRowHeight(rowHeight);
+          }
+        });
+        this.observer.observe(ref);
+      } else if (this.observer) {
+        this.observer.disconnect();
+      }
+    }
+  };
 
-  static contextType = DataGridContext;
+  static contextType = DataGridFocusContext;
 
   getInteractables = () => {
     const tabbingRef = this.cellContentsRef;
@@ -154,11 +190,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) {
@@ -181,24 +216,24 @@ export class EuiDataGridCell extends Component<
   componentDidMount() {
     this.unsubscribeCell = this.context.onFocusUpdate(
       [this.props.colIndex, this.props.visibleRowIndex],
-      this.updateFocus
+      this.onFocusUpdate
     );
   }
 
+  onFocusUpdate = (isFocused: boolean) => {
+    this.setState({ isFocused }, () => {
+      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,15 +245,27 @@ 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;
 
+    // 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.renderPopoverOpen !== this.state.renderPopoverOpen)
+      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.disableCellTabIndex !== this.state.disableCellTabIndex)
       return true;
 
@@ -242,13 +289,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) {
@@ -283,25 +325,41 @@ 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,
+      }))
+    );
+  };
+
   render() {
     const {
       width,
-      isFocused,
       isExpandable,
       popoverContent: PopoverContent,
       interactiveCellId,
       columnType,
-      onCellFocus,
       className,
       column,
+      style,
       ...rest
     } = this.props;
     const { colIndex, rowIndex } = rest;
 
+    const showCellButtons =
+      this.state.isFocused ||
+      this.state.isEntered ||
+      this.state.enableInteractions ||
+      this.state.popoverIsOpen;
+
     const cellClasses = classNames(
       'euiDataGridRowCell',
       {
         [`euiDataGridRowCell--${columnType}`]: columnType,
+        ['euiDataGridRowCell--open']: this.state.popoverIsOpen,
       },
       className
     );
@@ -315,12 +373,7 @@ export class EuiDataGridCell extends Component<
       className: classNames(cellClasses, this.state.cellProps.className),
     };
 
-    const widthStyle = width != null ? { width: `${width}px` } : {};
-    if (cellProps.hasOwnProperty('style')) {
-      cellProps.style = { ...cellProps.style, ...widthStyle };
-    } else {
-      cellProps.style = widthStyle;
-    }
+    cellProps.style = { ...style, width, ...cellProps.style };
 
     const handleCellKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
       if (isExpandable) {
@@ -331,7 +384,14 @@ export class EuiDataGridCell extends Component<
           case keys.ENTER:
           case keys.F2:
             event.preventDefault();
-            this.setState({ popoverIsOpen: true });
+            // 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,
+              }))
+            );
             break;
         }
       } else {
@@ -396,9 +456,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>
@@ -414,94 +474,112 @@ 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>
     );
 
     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>
-          <EuiDataGridCellButtons
-            rowIndex={rowIndex}
-            column={column}
-            popoverIsOpen={this.state.popoverIsOpen}
-            closePopover={() => this.setState({ popoverIsOpen: false })}
-            onExpandClick={() => {
-              this.setState(({ popoverIsOpen }) => ({
-                popoverIsOpen: !popoverIsOpen,
-              }));
-            }}
-          />
-        </div>
-      );
+      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={() => {
+                  // 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,
+                    }),
+                    () =>
+                      this.setState(({ popoverIsOpen }) => ({
+                        renderPopoverOpen: popoverIsOpen,
+                      }))
+                  );
+                }}
+              />
+            )}
+          </div>
+        );
+      } else {
+        anchorContent = (
+          <div
+            ref={this.setCellContentsRef}
+            className="euiDataGridRowCell__truncate">
+            <EuiDataGridCellContent {...cellContentProps} />
+            {screenReaderPosition}
+          </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}
-            updateFocus={this.updateFocus}
-            renderCellValue={rest.renderCellValue}
-            popoverContent={PopoverContent}
-          />
-        </div>
-      );
+      if (this.state.popoverIsOpen) {
+        innerContent = (
+          <div className="euiDataGridRowCell__content">
+            <EuiDataGridCellPopover
+              anchorContent={anchorContent}
+              cellContentProps={cellContentProps}
+              cellContentsRef={this.cellContentsRef}
+              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}
+              rowIndex={rowIndex}
+              renderCellValue={rest.renderCellValue}
+              popoverContent={PopoverContent}
+            />
+          </div>
+        );
+      } else {
+        innerContent = anchorContent;
+      }
     }
 
     return (
       <div
         role="gridcell"
-        tabIndex={isFocused && !this.state.disableCellTabIndex ? 0 : -1}
-        ref={this.cellRef}
+        tabIndex={
+          this.state.isFocused && !this.state.disableCellTabIndex ? 0 : -1
+        }
+        ref={this.setCellRef}
         {...cellProps}
         data-test-subj="dataGridRowCell"
         onKeyDown={handleCellKeyDown}
         onFocus={this.onFocus}
+        onMouseEnter={() => {
+          this.setState({ enableInteractions: true });
+        }}
         onBlur={this.onBlur}>
         {innerContent}
       </div>
diff --git a/src/components/datagrid/data_grid_cell_buttons.tsx b/src/components/datagrid/data_grid_cell_buttons.tsx
index ee01e8fe6a9..5e3d69844d4 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,
@@ -63,16 +63,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 +92,8 @@ export const EuiDataGridCellButtons = ({
           }
         )
       : [];
+  }, [column, rowIndex, closePopover]);
+
   return (
     <div className={buttonClasses}>{[...additionalButtons, expandButton]}</div>
   );
diff --git a/src/components/datagrid/data_grid_cell_popover.tsx b/src/components/datagrid/data_grid_cell_popover.tsx
index 5f421a5e08b..60724d4627e 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
@@ -80,8 +78,7 @@ export function EuiDataGridCellPopover({
           event.stopPropagation();
           closePopover();
         }
-      }}
-      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..07f91351286 100644
--- a/src/components/datagrid/data_grid_context.tsx
+++ b/src/components/datagrid/data_grid_context.tsx
@@ -17,9 +17,33 @@
  * under the License.
  */
 
-import React from 'react';
-import { EuiDataGridFocusedCell } from './data_grid_types';
+import React, { ReactElement } from 'react';
+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);
+
+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 d8af548fda8..f469cb702f9 100644
--- a/src/components/datagrid/data_grid_control_header_cell.tsx
+++ b/src/components/datagrid/data_grid_control_header_cell.tsx
@@ -17,21 +17,22 @@
  * 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,
-  EuiDataGridFocusedCell,
-} from './data_grid_types';
-import { EuiDataGridDataRowProps } from './data_grid_data_row';
+import { EuiDataGridControlColumn } from './data_grid_types';
+import { DataGridFocusContext } from './data_grid_context';
 
 export interface EuiDataGridControlHeaderRowProps {
   index: number;
   controlColumn: EuiDataGridControlColumn;
-  focusedCell?: EuiDataGridFocusedCell;
-  setFocusedCell: EuiDataGridDataRowProps['onCellFocus'];
   headerIsInteractive: boolean;
   className?: string;
 }
@@ -39,22 +40,22 @@ export interface EuiDataGridControlHeaderRowProps {
 export const EuiDataGridControlHeaderCell: FunctionComponent<EuiDataGridControlHeaderRowProps> = (
   props
 ) => {
-  const {
-    controlColumn,
-    index,
-    focusedCell,
-    setFocusedCell,
-    headerIsInteractive,
-    className,
-  } = 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);
-  const isFocused =
-    focusedCell != null && focusedCell[0] === index && focusedCell[1] === -1;
   const [isCellEntered, setIsCellEntered] = useState(false);
 
   useEffect(() => {
@@ -175,7 +176,7 @@ export const EuiDataGridControlHeaderCell: FunctionComponent<EuiDataGridControlH
         headerNode.removeEventListener('keyup', onKeyUp);
       };
     }
-  }, [headerIsInteractive, isFocused, setIsCellEntered, setFocusedCell, index]);
+  }, [setFocusedCell, headerIsInteractive, isFocused, setIsCellEntered, index]);
 
   return (
     <div
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/data_grid_footer_row.tsx b/src/components/datagrid/data_grid_footer_row.tsx
index 299d3c93d83..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,
@@ -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;
   };
@@ -53,107 +51,107 @@ const DefaultColumnFormatter: EuiDataGridPopoverContent = ({ children }) => {
   return <EuiText>{children}</EuiText>;
 };
 
-const EuiDataGridFooterRow: FunctionComponent<EuiDataGridFooterRowProps> = memo(
-  ({
-    leadingControlColumns,
-    trailingControlColumns,
-    columns,
-    schema,
-    popoverContents,
-    columnWidths,
-    defaultColumnWidth,
-    className,
-    renderCellValue,
-    rowIndex,
-    focusedCellPositionInTheRow,
-    onCellFocus,
-    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}
-            onCellFocus={onCellFocus}
-            isFocused={focusedCellPositionInTheRow === i}
-            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}
-              onCellFocus={onCellFocus}
-              isFocused={focusedCellPositionInTheRow === columnPosition}
-              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}
               renderCellValue={() => null}
-              onCellFocus={onCellFocus}
-              isFocused={focusedCellPositionInTheRow === colIndex}
               interactiveCellId={interactiveCellId}
               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 };
diff --git a/src/components/datagrid/data_grid_header_cell.tsx b/src/components/datagrid/data_grid_header_cell.tsx
index 608d7f4cbe4..35aec8b1d8c 100644
--- a/src/components/datagrid/data_grid_header_cell.tsx
+++ b/src/components/datagrid/data_grid_header_cell.tsx
@@ -22,6 +22,7 @@ import React, {
   FunctionComponent,
   HTMLAttributes,
   useCallback,
+  useContext,
   useEffect,
   useRef,
   useState,
@@ -39,6 +40,10 @@ import { EuiDataGridColumn } from './data_grid_types';
 import { getColumnActions } from './column_actions';
 import { useEuiI18n } from '../i18n';
 import { EuiIcon } from '../icon';
+import {
+  DataGridFocusContext,
+  DataGridSortingContext,
+} from './data_grid_context';
 
 export interface EuiDataGridHeaderCellProps
   extends Omit<
@@ -64,9 +69,6 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
     setColumnWidth,
     setVisibleColumns,
     switchColumnPos,
-    sorting,
-    focusedCell,
-    onCellFocus: setFocusedCell,
     headerIsInteractive,
     className,
   } = props;
@@ -86,6 +88,9 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
     'Header actions'
   );
 
+  const sorting = useContext(DataGridSortingContext);
+  const { setFocusedCell, onFocusUpdate } = useContext(DataGridFocusContext);
+
   if (sorting) {
     const sortedColumnIds = new Set(sorting.columns.map(({ id }) => id));
 
@@ -118,9 +123,14 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
     className
   );
 
+  const [isFocused, setIsFocused] = useState(false);
+  useEffect(() => {
+    return onFocusUpdate([index, -1], (isFocused: boolean) => {
+      setIsFocused(isFocused);
+    });
+  }, [index, onFocusUpdate]);
+
   const headerRef = useRef<HTMLDivElement>(null);
-  const isFocused =
-    focusedCell != null && focusedCell[0] === index && focusedCell[1] === -1;
   const [isCellEntered, setIsCellEntered] = useState(false);
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
@@ -189,11 +199,7 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
           return false;
         } else {
           // take the focus
-          if (
-            focusedCell == null ||
-            focusedCell[0] !== index ||
-            focusedCell[1] !== -1
-          ) {
+          if (isFocused === false) {
             setFocusedCell([index, -1]);
           } else if (headerRef.current) {
             // this cell already had the grid's focus, so re-enable interactives
@@ -267,9 +273,8 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
     headerIsInteractive,
     isFocused,
     setIsCellEntered,
-    focusedCell,
-    setFocusedCell,
     index,
+    setFocusedCell,
   ]);
 
   const columnActions = getColumnActions(
@@ -326,7 +331,7 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
       ) : (
         <button
           className="euiDataGridHeaderCell__button"
-          onClick={() => setIsPopoverOpen(true)}>
+          onClick={() => setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen)}>
           {sortingArrow}
           <div className="euiDataGridHeaderCell__content">
             {display || displayAsText || id}
@@ -335,6 +340,7 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
             className="euiDataGridHeaderCell__popover"
             panelPaddingSize="none"
             anchorPosition="downRight"
+            ownFocus
             button={
               <EuiIcon
                 type="arrowDown"
@@ -345,8 +351,7 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
               />
             }
             isOpen={isPopoverOpen}
-            closePopover={() => setIsPopoverOpen(false)}
-            ownFocus={isFocused}>
+            closePopover={() => setIsPopoverOpen(false)}>
             <div>
               <EuiListGroup
                 listItems={columnActions}
diff --git a/src/components/datagrid/data_grid_header_row.tsx b/src/components/datagrid/data_grid_header_row.tsx
index 9516fcbdf6f..0bb2d387213 100644
--- a/src/components/datagrid/data_grid_header_row.tsx
+++ b/src/components/datagrid/data_grid_header_row.tsx
@@ -22,8 +22,6 @@ import classnames from 'classnames';
 import {
   EuiDataGridColumnWidths,
   EuiDataGridColumn,
-  EuiDataGridSorting,
-  EuiDataGridFocusedCell,
   EuiDataGridControlColumn,
 } from './data_grid_types';
 import { CommonProps } from '../common';
@@ -31,7 +29,6 @@ import {
   EuiDataGridSchema,
   EuiDataGridSchemaDetector,
 } 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';
 
@@ -46,9 +43,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;
 }
 
@@ -72,9 +66,6 @@ const EuiDataGridHeaderRow = forwardRef<
     setColumnWidth,
     setVisibleColumns,
     switchColumnPos,
-    sorting,
-    focusedCell,
-    onCellFocus: setFocusedCell,
     headerIsInteractive,
     'data-test-subj': _dataTestSubj,
     ...rest
@@ -95,8 +86,6 @@ const EuiDataGridHeaderRow = forwardRef<
           key={controlColumn.id}
           index={index}
           controlColumn={controlColumn}
-          focusedCell={focusedCell}
-          setFocusedCell={setFocusedCell}
           headerIsInteractive={headerIsInteractive}
           className="euiDataGridHeaderCell--controlColumn"
         />
@@ -108,15 +97,12 @@ const EuiDataGridHeaderRow = forwardRef<
           columns={columns}
           index={index + leadingControlColumns.length}
           columnWidths={columnWidths}
-          focusedCell={focusedCell}
-          onCellFocus={setFocusedCell}
           schema={schema}
           schemaDetectors={schemaDetectors}
           setColumnWidth={setColumnWidth}
           setVisibleColumns={setVisibleColumns}
           switchColumnPos={switchColumnPos}
           defaultColumnWidth={defaultColumnWidth}
-          sorting={sorting}
           headerIsInteractive={headerIsInteractive}
         />
       ))}
@@ -125,8 +111,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..c25e232d879 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,10 @@ export function useDetectSchema(
   definedColumnSchemas: { [key: string]: string },
   autoDetectSchema: boolean
 ) {
+  const inMemorySkipColumns =
+    inMemory?.skipColumns ??
+    (emptyArray as NonNullable<EuiDataGridInMemory['skipColumns']>);
+
   const schema = useMemo(() => {
     const schema: EuiDataGridSchema = {};
     if (autoDetectSchema === false) {
@@ -309,7 +314,7 @@ export function useDetectSchema(
     const rowIndices = Object.keys(inMemoryValues);
 
     const columnIdsWithDefinedSchemas = new Set<string>([
-      ...((inMemory && inMemory.skipColumns) || []),
+      ...inMemorySkipColumns,
       ...Object.keys(definedColumnSchemas),
     ]);
 
@@ -404,7 +409,7 @@ export function useDetectSchema(
   }, [
     autoDetectSchema,
     definedColumnSchemas,
-    inMemory,
+    inMemorySkipColumns,
     inMemoryValues,
     schemaDetectors,
   ]);
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';
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..71f55788bb3 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,36 @@ 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..458fd8ea6e9 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,59 @@ 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,
+          callback
+        );
+        return () => observer.disconnect();
+      }
+    },
+    // ignore changing observerOptions
+    // eslint-disable-next-line
+    [container, callback]
+  );
+};
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"