From a11501ddde716c35e1816dbff8417821c0e0d1af Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Thu, 9 Mar 2023 09:19:46 -0800
Subject: [PATCH] [EuiDataGrid] Add `renderCustomGridBody` API (#6624)

* [Setup] Split up `RowHeightUtils` into virtualized/non-virtualized classes

- base class has no virtualization dependencies and will be used by the custom renderer

- The extended `RowHeightVirtualizationUtils` class will be used by the virtualized body renderer[Setup] Split up `RowHeightUtils` into virtualized/non-virtualized classes

* Add `RowHeightUtilsType` + update downstream type references

* Update `RowHeightUtils` test mocks

* [optional tech debt] Convert row heights tests to RTL `renderHook`

* [Setup] Add `renderCustomGridBody` API to top-level data grid

* Add documentation example

* [EuiDataGridBody] Split up into custom and virtualized body renderers

Split up parent body into a basic ternary, and move tests accordingly

Custom renderer logic will be in a separate commit (to hopefully make DRYing things out easier to follow)

* Set up header & footer render

* DRY out shared `Cell` wrapper component
- between custom & virtualized data grid bodies

they each still need another curried _Cell wrapper on top of that to handle individual style or prop transmogs, but this DRYes out a significant amount of reused logic (and allows for clearer unit testing)

* Write tests for custom renderer

* Fix incredibly bizarre rerender/unmount bug

- the empty control columns array fallbacks were otherwise causing unnecessary rerenders in the custom renderer's memoized `visibleColumns`, which was causing cell popovers to break due to cells unmounting

* Fix various row/cell-related CSS

- the current CSS takes for granted that the virtualization library is setting position+widths which is no longer always the case - our CSS should now provide sane fallbacks for custom rendering

* [misc] Remove unnecessary `top: 0` from non-virtualized cells

* changelog

* Improve copy on props docs

* Fix failing Cypress test

- forgot to run locally with new compiled CSS, which was causing a different outer vs scroll height computation

* [PR feedback] Add new `setCustomGridBodyProps` callback param to `renderCustomGridBody`

+ improve docs slightly

- note: I skipped adding documentation for `setCustomGridBodyProps` to snippets as this is technically an optional prop to use (unlike the others) - hopefully demo+prop table documentation are sufficient

* Add explicit ref typing + tests
---
 src-docs/src/views/datagrid/_snippets.tsx     |   5 +
 .../datagrid/advanced/custom_renderer.tsx     | 302 ++++++++++
 .../advanced/datagrid_advanced_example.js     |  70 ++-
 src-docs/src/views/datagrid/basics/_props.tsx |   3 +
 src/components/datagrid/_data_grid.scss       |   7 +
 .../datagrid/_data_grid_data_row.scss         |   1 +
 .../data_grid_body_custom.test.tsx.snap       | 262 +++++++++
 ... data_grid_body_virtualized.test.tsx.snap} |   2 +-
 .../data_grid_cell.test.tsx.snap              |   1 -
 .../datagrid/body/data_grid_body.test.tsx     | 183 ++-----
 .../datagrid/body/data_grid_body.tsx          | 461 +---------------
 .../body/data_grid_body_custom.spec.tsx       | 247 +++++++++
 .../body/data_grid_body_custom.test.tsx       | 119 ++++
 .../datagrid/body/data_grid_body_custom.tsx   | 182 ++++++
 .../body/data_grid_body_virtualized.test.tsx  |  81 +++
 .../body/data_grid_body_virtualized.tsx       | 337 ++++++++++++
 .../datagrid/body/data_grid_cell.test.tsx     |   7 +-
 .../datagrid/body/data_grid_cell.tsx          |  11 +-
 .../body/data_grid_cell_wrapper.test.tsx      | 115 ++++
 .../datagrid/body/data_grid_cell_wrapper.tsx  | 181 ++++++
 .../body/footer/_data_grid_footer_row.scss    |   1 +
 .../body/header/_data_grid_header_row.scss    |   1 +
 .../body/header/data_grid_header_row.tsx      |   9 +-
 src/components/datagrid/data_grid.tsx         |   7 +-
 src/components/datagrid/data_grid_types.ts    |  63 ++-
 .../datagrid/utils/__mocks__/row_heights.ts   |  65 +--
 .../datagrid/utils/grid_height_width.ts       |   4 +-
 .../datagrid/utils/row_heights.test.ts        | 518 ++++++++++--------
 src/components/datagrid/utils/row_heights.ts  | 123 +++--
 upcoming_changelogs/6624.md                   |   1 +
 30 files changed, 2469 insertions(+), 900 deletions(-)
 create mode 100644 src-docs/src/views/datagrid/advanced/custom_renderer.tsx
 create mode 100644 src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap
 rename src/components/datagrid/body/__snapshots__/{data_grid_body.test.tsx.snap => data_grid_body_virtualized.test.tsx.snap} (99%)
 create mode 100644 src/components/datagrid/body/data_grid_body_custom.spec.tsx
 create mode 100644 src/components/datagrid/body/data_grid_body_custom.test.tsx
 create mode 100644 src/components/datagrid/body/data_grid_body_custom.tsx
 create mode 100644 src/components/datagrid/body/data_grid_body_virtualized.test.tsx
 create mode 100644 src/components/datagrid/body/data_grid_body_virtualized.tsx
 create mode 100644 src/components/datagrid/body/data_grid_cell_wrapper.test.tsx
 create mode 100644 src/components/datagrid/body/data_grid_cell_wrapper.tsx
 create mode 100644 upcoming_changelogs/6624.md

diff --git a/src-docs/src/views/datagrid/_snippets.tsx b/src-docs/src/views/datagrid/_snippets.tsx
index 672e1417364..85a620d83c2 100644
--- a/src-docs/src/views/datagrid/_snippets.tsx
+++ b/src-docs/src/views/datagrid/_snippets.tsx
@@ -62,6 +62,11 @@ inMemory={{ level: 'sorting' }}`,
 )}`,
   renderFooterCellValue:
     'renderFooterCellValue={({ rowIndex, columnId }) => {}}',
+  renderCustomGridBody: `// Optional; advanced usage only. This render function is an escape hatch for consumers who need to opt out of virtualization or otherwise need total custom control over how data grid cells are rendered.
+
+renderCustomDataGridBody={({ visibleColumns, visibleRowData, Cell }) => (
+  <Cell colIndex={mappedFromVisibleColumns} visibleRowIndex={mappedFromVisibleRowData} />
+)}`,
   pagination: `pagination={{
   pageIndex: 1,
   pageSize: 100,
diff --git a/src-docs/src/views/datagrid/advanced/custom_renderer.tsx b/src-docs/src/views/datagrid/advanced/custom_renderer.tsx
new file mode 100644
index 00000000000..64a04678e73
--- /dev/null
+++ b/src-docs/src/views/datagrid/advanced/custom_renderer.tsx
@@ -0,0 +1,302 @@
+import React, { useEffect, useCallback, useState, useRef } from 'react';
+import { css } from '@emotion/react';
+import { faker } from '@faker-js/faker';
+
+import {
+  EuiDataGrid,
+  EuiDataGridProps,
+  EuiDataGridCustomBodyProps,
+  EuiDataGridColumnCellActionProps,
+  EuiScreenReaderOnly,
+  EuiCheckbox,
+  EuiButtonIcon,
+  EuiIcon,
+  EuiFlexGroup,
+  EuiSwitch,
+  EuiSpacer,
+  useEuiTheme,
+  logicalCSS,
+} from '../../../../../src';
+
+const raw_data: Array<{ [key: string]: string }> = [];
+for (let i = 1; i < 100; i++) {
+  raw_data.push({
+    name: `${faker.name.lastName()}, ${faker.name.firstName()}`,
+    email: faker.internet.email(),
+    location: `${faker.address.city()}, ${faker.address.country()}`,
+    date: `${faker.date.past()}`,
+    amount: faker.commerce.price(1, 1000, 2, '$'),
+  });
+}
+
+const columns = [
+  {
+    id: 'name',
+    displayAsText: 'Name',
+    cellActions: [
+      ({ Component }: EuiDataGridColumnCellActionProps) => (
+        <Component
+          onClick={() => alert('action')}
+          iconType="faceHappy"
+          aria-label="Some action"
+        >
+          Some action
+        </Component>
+      ),
+    ],
+  },
+  {
+    id: 'email',
+    displayAsText: 'Email address',
+    initialWidth: 130,
+  },
+  {
+    id: 'location',
+    displayAsText: 'Location',
+  },
+  {
+    id: 'date',
+    displayAsText: 'Date',
+  },
+  {
+    id: 'amount',
+    displayAsText: 'Amount',
+  },
+];
+
+const leadingControlColumns: EuiDataGridProps['leadingControlColumns'] = [
+  {
+    id: 'selection',
+    width: 32,
+    headerCellRender: () => (
+      <EuiCheckbox
+        id="select-all-rows"
+        aria-label="Select all rows"
+        onChange={() => {}}
+      />
+    ),
+    rowCellRender: ({ rowIndex }) => (
+      <EuiCheckbox
+        id={`select-row-${rowIndex}`}
+        aria-label="Select row"
+        onChange={() => {}}
+      />
+    ),
+  },
+];
+
+const trailingControlColumns: EuiDataGridProps['trailingControlColumns'] = [
+  {
+    id: 'actions',
+    width: 40,
+    headerCellRender: () => (
+      <EuiScreenReaderOnly>
+        <span>Actions</span>
+      </EuiScreenReaderOnly>
+    ),
+    rowCellRender: () => (
+      <EuiButtonIcon iconType="boxesHorizontal" aria-label="See row actions" />
+    ),
+  },
+];
+
+// The custom row details is actually a trailing control column cell with
+// a hidden header. This is important for accessibility and markup reasons
+// @see https://fuschia-stretch.glitch.me/ for more
+const rowDetails: EuiDataGridProps['trailingControlColumns'] = [
+  {
+    id: 'row-details',
+
+    // The header cell should be visually hidden, but available to screen readers
+    width: 0,
+    headerCellRender: () => <>Row details</>,
+    headerCellProps: { className: 'euiScreenReaderOnly' },
+
+    // The footer cell can be hidden to both visual & SR users, as it does not contain meaningful information
+    footerCellProps: { style: { display: 'none' } },
+
+    // When rendering this custom cell, we'll want to override
+    // the automatic width/heights calculated by EuiDataGrid
+    rowCellRender: ({ setCellProps, rowIndex }) => {
+      setCellProps({ style: { width: '100%', height: 'auto' } });
+
+      const firstName = raw_data[rowIndex].name.split(', ')[1];
+      const isGood = faker.datatype.boolean();
+      return (
+        <>
+          {firstName}&apos;s account has {isGood ? 'no' : ''} outstanding fees.{' '}
+          <EuiIcon
+            type={isGood ? 'checkInCircleFilled' : 'error'}
+            color={isGood ? 'success' : 'danger'}
+          />
+        </>
+      );
+    },
+  },
+];
+
+const footerCellValues: { [key: string]: string } = {
+  amount: `Total: ${raw_data
+    .reduce((acc, { amount }) => acc + Number(amount.split('$')[1]), 0)
+    .toLocaleString('en-US', { style: 'currency', currency: 'USD' })}`,
+};
+
+const RenderFooterCellValue: EuiDataGridProps['renderFooterCellValue'] = ({
+  columnId,
+  setCellProps,
+}) => {
+  const value = footerCellValues[columnId];
+
+  useEffect(() => {
+    // Turn off the cell expansion button if the footer cell is empty
+    if (!value) setCellProps({ isExpandable: false });
+  }, [value, setCellProps, columnId]);
+
+  return value || null;
+};
+
+export default () => {
+  const [autoHeight, setAutoHeight] = useState(true);
+  const [showRowDetails, setShowRowDetails] = useState(false);
+
+  // Column visibility
+  const [visibleColumns, setVisibleColumns] = useState(() =>
+    columns.map(({ id }) => id)
+  );
+
+  // Pagination
+  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+  const onChangePage = useCallback((pageIndex) => {
+    setPagination((pagination) => ({ ...pagination, pageIndex }));
+  }, []);
+  const onChangePageSize = useCallback((pageSize) => {
+    setPagination((pagination) => ({ ...pagination, pageSize }));
+  }, []);
+
+  // Sorting
+  const [sortingColumns, setSortingColumns] = useState([]);
+  const onSort = useCallback((sortingColumns) => {
+    setSortingColumns(sortingColumns);
+  }, []);
+
+  const { euiTheme } = useEuiTheme();
+
+  // Custom grid body renderer
+  const RenderCustomGridBody = useCallback(
+    ({
+      Cell,
+      visibleColumns,
+      visibleRowData,
+      setCustomGridBodyProps,
+    }: EuiDataGridCustomBodyProps) => {
+      // Ensure we're displaying correctly-paginated rows
+      const visibleRows = raw_data.slice(
+        visibleRowData.startRow,
+        visibleRowData.endRow
+      );
+
+      // Add styling needed for custom grid body rows
+      const styles = {
+        row: css`
+          ${logicalCSS('width', 'fit-content')};
+          ${logicalCSS('border-bottom', euiTheme.border.thin)};
+          background-color: ${euiTheme.colors.emptyShade};
+        `,
+        rowCellsWrapper: css`
+          display: flex;
+        `,
+        rowDetailsWrapper: css`
+          text-align: center;
+          background-color: ${euiTheme.colors.body};
+        `,
+      };
+
+      // Set custom props onto the grid body wrapper
+      const bodyRef = useRef<HTMLDivElement | null>(null);
+      useEffect(() => {
+        setCustomGridBodyProps({
+          ref: bodyRef,
+          onScroll: () =>
+            console.debug('scrollTop:', bodyRef.current?.scrollTop),
+        });
+      }, [setCustomGridBodyProps]);
+
+      return (
+        <>
+          {visibleRows.map((row, rowIndex) => (
+            <div role="row" css={styles.row} key={rowIndex}>
+              <div css={styles.rowCellsWrapper}>
+                {visibleColumns.map((column, colIndex) => {
+                  // Skip the row details cell - we'll render it manually outside of the flex wrapper
+                  if (column.id !== 'row-details') {
+                    return (
+                      <Cell
+                        colIndex={colIndex}
+                        visibleRowIndex={rowIndex}
+                        key={`${rowIndex},${colIndex}`}
+                      />
+                    );
+                  }
+                })}
+              </div>
+              {showRowDetails && (
+                <div css={styles.rowDetailsWrapper}>
+                  <Cell
+                    colIndex={visibleColumns.length - 1} // If the row is being shown, it should always be the last index
+                    visibleRowIndex={rowIndex}
+                  />
+                </div>
+              )}
+            </div>
+          ))}
+        </>
+      );
+    },
+    [showRowDetails, euiTheme]
+  );
+
+  return (
+    <>
+      <EuiFlexGroup alignItems="center">
+        <EuiSwitch
+          label="Set static grid height"
+          checked={!autoHeight}
+          onChange={() => setAutoHeight(!autoHeight)}
+        />
+        <EuiSwitch
+          label="Toggle custom row details"
+          checked={showRowDetails}
+          onChange={() => setShowRowDetails(!showRowDetails)}
+        />
+      </EuiFlexGroup>
+      <EuiSpacer />
+      <EuiDataGrid
+        aria-label="Data grid custom body renderer demo"
+        columns={columns}
+        leadingControlColumns={leadingControlColumns}
+        trailingControlColumns={
+          showRowDetails
+            ? [...trailingControlColumns, ...rowDetails]
+            : trailingControlColumns
+        }
+        columnVisibility={{ visibleColumns, setVisibleColumns }}
+        sorting={{ columns: sortingColumns, onSort }}
+        inMemory={{ level: 'sorting' }}
+        pagination={{
+          ...pagination,
+          pageSizeOptions: [10, 25, 50],
+          onChangePage: onChangePage,
+          onChangeItemsPerPage: onChangePageSize,
+        }}
+        rowCount={raw_data.length}
+        renderCellValue={({ rowIndex, columnId }) =>
+          raw_data[rowIndex][columnId]
+        }
+        renderFooterCellValue={RenderFooterCellValue}
+        renderCustomGridBody={RenderCustomGridBody}
+        height={autoHeight ? undefined : 400}
+        gridStyle={{ border: 'none', header: 'underline' }}
+      />
+    </>
+  );
+};
diff --git a/src-docs/src/views/datagrid/advanced/datagrid_advanced_example.js b/src-docs/src/views/datagrid/advanced/datagrid_advanced_example.js
index adf9825c347..ce49e6dda5a 100644
--- a/src-docs/src/views/datagrid/advanced/datagrid_advanced_example.js
+++ b/src-docs/src/views/datagrid/advanced/datagrid_advanced_example.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import { GuideSectionTypes } from '../../../components';
 import {
@@ -9,7 +10,10 @@ import {
   EuiLink,
 } from '../../../../../src/components';
 
-import { EuiDataGridRefProps } from '!!prop-loader!../../../../../src/components/datagrid/data_grid_types';
+import {
+  EuiDataGridRefProps,
+  EuiDataGridCustomBodyProps,
+} from '!!prop-loader!../../../../../src/components/datagrid/data_grid_types';
 
 import { DataGridMemoryExample } from './datagrid_memory_example';
 
@@ -31,6 +35,28 @@ dataGridRef.current.openCellPopover({ rowIndex, colIndex });
 dataGridRef.current.closeCellPopover();
 `;
 
+import CustomRenderer from './custom_renderer';
+const customRendererSource = require('!!raw-loader!./custom_renderer');
+const customRendererSnippet = `const CustomGridBody = ({ visibleColumns, visibleRowData, Cell }) => {
+  const visibleRows = raw_data.slice(
+    visibleRowData.startRow,
+    visibleRowData.endRow
+  );
+  return (
+    <>
+      {visibleRows.map((row, rowIndex) => (
+        <div role="row" style={{ display: 'flex' }} key={rowIndex}>
+          {visibleColumns.map((column, colIndex) => (
+            <Cell colIndex={colIndex} visibleRowIndex={rowIndex} key={\`\${rowIndex},\${colIndex}\`} />
+          ))}
+        </div>
+      ))}
+    </>
+  );
+};
+
+<EuiDataGridBody renderCustomGridBody={CustomGridBody} {...props} />`;
+
 export const DataGridAdvancedExample = {
   title: 'Data grid advanced',
   sections: [
@@ -185,5 +211,47 @@ export const DataGridAdvancedExample = {
       props: { EuiDataGridRefProps },
     },
     ...DataGridMemoryExample.sections,
+    {
+      title: 'Custom body renderer',
+      source: [
+        {
+          type: GuideSectionTypes.TSX,
+          code: customRendererSource,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            For <strong>extremely</strong> advanced use cases, the{' '}
+            <EuiCode>renderCustomGridBody</EuiCode> prop may be used to take
+            complete control over rendering the grid body. This may be useful
+            for scenarios where the default{' '}
+            <Link to="/tabular-content/data-grid#virtualization">
+              virtualized
+            </Link>{' '}
+            rendering is not desired, or where custom row layouts (e.g., the
+            conditional row details cell below) are required.
+          </p>
+          <p>
+            Please note that this prop is meant to be an{' '}
+            <strong>escape hatch</strong>, and should only be used if you know
+            exactly what you are doing. Once a custom renderer is used, you are
+            in charge of ensuring the grid has all the correct semantic and aria
+            labels required by the{' '}
+            <EuiLink
+              href="https://www.w3.org/WAI/ARIA/apg/patterns/grid"
+              target="_blank"
+            >
+              data grid spec
+            </EuiLink>
+            , and that keyboard focus and navigation still work in an accessible
+            manner.
+          </p>
+        </>
+      ),
+      demo: <CustomRenderer />,
+      snippet: customRendererSnippet,
+      props: { EuiDataGridCustomBodyProps },
+    },
   ],
 };
diff --git a/src-docs/src/views/datagrid/basics/_props.tsx b/src-docs/src/views/datagrid/basics/_props.tsx
index e2791a649ea..33d578b0ca6 100644
--- a/src-docs/src/views/datagrid/basics/_props.tsx
+++ b/src-docs/src/views/datagrid/basics/_props.tsx
@@ -19,6 +19,8 @@ const gridLinks = {
   schemaDetectors: '/tabular-content/data-grid-schema-columns#schemas',
   toolbarVisibility: '/tabular-content/data-grid-toolbar#toolbar-visibility',
   ref: '/tabular-content/data-grid-advanced#ref-methods',
+  renderCustomGridBody:
+    '/tabular-content/data-grid-advanced#custom-body-renderer',
 };
 
 export const DataGridTopProps = () => {
@@ -27,6 +29,7 @@ export const DataGridTopProps = () => {
       component={EuiDataGrid}
       exclude={[
         'className',
+        'css',
         'data-test-subj',
         'aria-label',
         'width',
diff --git a/src/components/datagrid/_data_grid.scss b/src/components/datagrid/_data_grid.scss
index 3f341ae27ad..1f5406b08d3 100644
--- a/src/components/datagrid/_data_grid.scss
+++ b/src/components/datagrid/_data_grid.scss
@@ -35,6 +35,13 @@
   font-feature-settings: 'tnum' 1; // Tabular numbers
 }
 
+.euiDataGrid__customRenderBody {
+  @include euiScrollBar($euiColorDarkShade, $euiColorEmptyShade);
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+
 .euiDataGrid__pagination {
   z-index: 2; // Sits above the content above it
   padding-top: $euiSizeXS;
diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index 68e363ca041..833e5efbab8 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/src/components/datagrid/_data_grid_data_row.scss
@@ -24,6 +24,7 @@
   }
 
   &:focus {
+    position: relative;
     @include euiDataGridCellFocus;
   }
 
diff --git a/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap
new file mode 100644
index 00000000000..b000e5a671e
--- /dev/null
+++ b/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap
@@ -0,0 +1,262 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render prop 1`] = `
+<div
+  class="euiDataGrid__customRenderBody"
+>
+  <div
+    class="euiDataGridHeader"
+    data-test-subj="dataGridHeader"
+    role="row"
+  >
+    <div
+      class="euiDataGridHeaderCell euiDataGridHeaderCell--boolean"
+      data-gridcell-column-id="columnA"
+      data-gridcell-column-index="0"
+      data-gridcell-row-index="-1"
+      data-gridcell-visible-row-index="-1"
+      data-test-subj="dataGridHeaderCell-columnA"
+      role="columnheader"
+      style="width: 100px;"
+      tabindex="-1"
+    >
+      <div
+        class="euiDataGridColumnResizer"
+        data-test-subj="dataGridColumnResizer"
+        style="margin-right: 0px;"
+      />
+      <div
+        class="euiPopover eui-fullWidth emotion-euiPopover"
+      >
+        <div
+          class="euiPopover__anchor eui-fullWidth css-16vtueo-render"
+        >
+          <button
+            aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
+            class="euiDataGridHeaderCell__button"
+            data-euigrid-tab-managed="true"
+            tabindex="-1"
+          >
+            <div
+              class="euiDataGridHeaderCell__content"
+              title="columnA"
+            >
+              columnA
+            </div>
+            <span
+              class="euiDataGridHeaderCell__icon"
+              color="text"
+              data-euiicon-type="arrowDown"
+              data-test-subj="dataGridHeaderCellActionButton-columnA"
+            />
+          </button>
+        </div>
+      </div>
+      <p
+        hidden=""
+        id="euiDataGridCellHeader_generated-id_sorting"
+      />
+      <p
+        hidden=""
+        id="euiDataGridCellHeader_generated-id_actions"
+      >
+        Click to view column header actions
+      </p>
+    </div>
+    <div
+      class="euiDataGridHeaderCell euiDataGridHeaderCell--string"
+      data-gridcell-column-id="columnB"
+      data-gridcell-column-index="1"
+      data-gridcell-row-index="-1"
+      data-gridcell-visible-row-index="-1"
+      data-test-subj="dataGridHeaderCell-columnB"
+      role="columnheader"
+      style="width: 100px;"
+      tabindex="-1"
+    >
+      <div
+        class="euiDataGridColumnResizer"
+        data-test-subj="dataGridColumnResizer"
+        style="margin-right: 0px;"
+      />
+      <div
+        class="euiPopover eui-fullWidth emotion-euiPopover"
+      >
+        <div
+          class="euiPopover__anchor eui-fullWidth css-16vtueo-render"
+        >
+          <button
+            aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
+            class="euiDataGridHeaderCell__button"
+            data-euigrid-tab-managed="true"
+            tabindex="-1"
+          >
+            <div
+              class="euiDataGridHeaderCell__content"
+              title="columnB"
+            >
+              columnB
+            </div>
+            <span
+              class="euiDataGridHeaderCell__icon"
+              color="text"
+              data-euiicon-type="arrowDown"
+              data-test-subj="dataGridHeaderCellActionButton-columnB"
+            />
+          </button>
+        </div>
+      </div>
+      <p
+        hidden=""
+        id="euiDataGridCellHeader_generated-id_sorting"
+      />
+      <p
+        hidden=""
+        id="euiDataGridCellHeader_generated-id_actions"
+      >
+        Click to view column header actions
+      </p>
+    </div>
+  </div>
+  <div
+    role="row"
+  >
+    <div
+      aria-rowindex="1"
+      class="euiDataGridRowCell euiDataGridRowCell--boolean euiDataGridRowCell--firstColumn"
+      data-gridcell-column-id="columnA"
+      data-gridcell-column-index="0"
+      data-gridcell-row-index="0"
+      data-gridcell-visible-row-index="0"
+      data-test-subj="dataGridRowCell"
+      role="gridcell"
+      style="height: 34px; width: 100px;"
+      tabindex="-1"
+    >
+      <div
+        class="euiDataGridRowCell__expandFlex"
+      >
+        <div
+          class="euiDataGridRowCell__expandContent"
+        >
+          <div
+            class="euiDataGridRowCell__truncate"
+            data-datagrid-cellcontent="true"
+          >
+            hello
+          </div>
+          <p
+            class="emotion-euiScreenReaderOnly"
+          >
+            - 
+            columnA, column 1, row 1
+          </p>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-rowindex="1"
+      class="euiDataGridRowCell euiDataGridRowCell--string euiDataGridRowCell--lastColumn"
+      data-gridcell-column-id="columnB"
+      data-gridcell-column-index="1"
+      data-gridcell-row-index="0"
+      data-gridcell-visible-row-index="0"
+      data-test-subj="dataGridRowCell"
+      role="gridcell"
+      style="height: 34px; width: 100px;"
+      tabindex="-1"
+    >
+      <div
+        class="euiDataGridRowCell__expandFlex"
+      >
+        <div
+          class="euiDataGridRowCell__expandContent"
+        >
+          <div
+            class="euiDataGridRowCell__truncate"
+            data-datagrid-cellcontent="true"
+          >
+            world
+          </div>
+          <p
+            class="emotion-euiScreenReaderOnly"
+          >
+            - 
+            columnB, column 2, row 1
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    role="row"
+  >
+    <div
+      aria-rowindex="2"
+      class="euiDataGridRowCell euiDataGridRowCell--boolean euiDataGridRowCell--firstColumn"
+      data-gridcell-column-id="columnA"
+      data-gridcell-column-index="0"
+      data-gridcell-row-index="1"
+      data-gridcell-visible-row-index="1"
+      data-test-subj="dataGridRowCell"
+      role="gridcell"
+      style="height: 34px; width: 100px;"
+      tabindex="-1"
+    >
+      <div
+        class="euiDataGridRowCell__expandFlex"
+      >
+        <div
+          class="euiDataGridRowCell__expandContent"
+        >
+          <div
+            class="euiDataGridRowCell__truncate"
+            data-datagrid-cellcontent="true"
+          >
+            lorem
+          </div>
+          <p
+            class="emotion-euiScreenReaderOnly"
+          >
+            - 
+            columnA, column 1, row 2
+          </p>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-rowindex="2"
+      class="euiDataGridRowCell euiDataGridRowCell--string euiDataGridRowCell--lastColumn"
+      data-gridcell-column-id="columnB"
+      data-gridcell-column-index="1"
+      data-gridcell-row-index="1"
+      data-gridcell-visible-row-index="1"
+      data-test-subj="dataGridRowCell"
+      role="gridcell"
+      style="height: 34px; width: 100px;"
+      tabindex="-1"
+    >
+      <div
+        class="euiDataGridRowCell__expandFlex"
+      >
+        <div
+          class="euiDataGridRowCell__expandContent"
+        >
+          <div
+            class="euiDataGridRowCell__truncate"
+            data-datagrid-cellcontent="true"
+          >
+            ipsum
+          </div>
+          <p
+            class="emotion-euiScreenReaderOnly"
+          >
+            - 
+            columnB, column 2, row 2
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap
similarity index 99%
rename from src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap
rename to src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap
index 647f32b7d4a..3cea24da5b7 100644
--- a/src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap
+++ b/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiDataGridBody renders 1`] = `
+exports[`EuiDataGridBodyVirtualized renders 1`] = `
 <div
   class="euiDataGrid__virtualized"
   style="position:relative;height:9007199254740991px;width:9007199254740991px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
diff --git a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap
index 31506860e0d..6dd4f321d50 100644
--- a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap
+++ b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap
@@ -46,7 +46,6 @@ exports[`EuiDataGridCell renders 1`] = `
   data-gridcell-visible-row-index="0"
   data-test-subj="dataGridRowCell"
   role="gridcell"
-  style="top:0"
   tabindex="-1"
 >
   <div
diff --git a/src/components/datagrid/body/data_grid_body.test.tsx b/src/components/datagrid/body/data_grid_body.test.tsx
index f0a551d2201..9680ee12c89 100644
--- a/src/components/datagrid/body/data_grid_body.test.tsx
+++ b/src/components/datagrid/body/data_grid_body.test.tsx
@@ -7,153 +7,62 @@
  */
 
 import React from 'react';
-import { mount, render, shallow } from 'enzyme';
+import { render } from '../../../test/rtl';
 
 import { RowHeightUtils } from '../utils/__mocks__/row_heights';
 import { schemaDetectors } from '../utils/data_grid_schema';
 
-import { EuiDataGridBody, Cell } from './data_grid_body';
+import { EuiDataGridBody } from './data_grid_body';
 
-describe('EuiDataGridBody', () => {
-  const gridRef = {
-    current: {
-      resetAfterColumnIndex: jest.fn(),
-      resetAfterRowIndex: jest.fn(),
-    } as any,
-  };
-  const outerGridElementRef = { current: null };
-  const gridItemsRendered = { current: null };
-  const rerenderGridBodyRef = { current: null };
-  const rowHeightUtils = new RowHeightUtils(
-    gridRef,
-    outerGridElementRef,
-    gridItemsRendered,
-    rerenderGridBodyRef
-  );
-
-  const requiredProps = {
-    headerIsInteractive: true,
-    rowCount: 1,
-    visibleRows: { startRow: 0, endRow: 1, visibleRowCount: 1 },
-    columnWidths: { columnA: 20 },
-    columns: [
-      { id: 'columnA', schema: 'boolean' },
-      { id: 'columnB', isExpandable: true },
-    ],
-    leadingControlColumns: [],
-    trailingControlColumns: [],
-    visibleColCount: 2,
-    schema: {
-      columnA: { columnType: 'boolean' },
-      columnB: { columnType: 'string' },
-    },
-    renderCellValue: () => <span>cell content</span>,
-    interactiveCellId: 'someId',
-    inMemory: { level: 'enhancements' as any },
-    inMemoryValues: {},
-    handleHeaderMutation: jest.fn(),
-    setVisibleColumns: jest.fn(),
-    switchColumnPos: jest.fn(),
-    schemaDetectors,
-    rowHeightUtils,
-    isFullScreen: false,
-    gridStyles: {},
-    gridWidth: 300,
-    gridRef,
-    gridItemsRendered,
-    wrapperRef: { current: document.createElement('div') },
-  };
+// Body props, reused by other body unit tests
+export const dataGridBodyProps = {
+  headerIsInteractive: true,
+  rowCount: 1,
+  visibleRows: { startRow: 0, endRow: 1, visibleRowCount: 1 },
+  columnWidths: { columnA: 100 },
+  columns: [
+    { id: 'columnA', schema: 'boolean' },
+    { id: 'columnB', isExpandable: true },
+  ],
+  leadingControlColumns: [],
+  trailingControlColumns: [],
+  visibleColCount: 2,
+  schema: {
+    columnA: { columnType: 'boolean' },
+    columnB: { columnType: 'string' },
+  },
+  renderCellValue: () => <span>cell content</span>,
+  interactiveCellId: 'someId',
+  inMemory: { level: 'enhancements' as any },
+  inMemoryValues: {},
+  handleHeaderMutation: jest.fn(),
+  setVisibleColumns: jest.fn(),
+  switchColumnPos: jest.fn(),
+  schemaDetectors,
+  rowHeightUtils: new RowHeightUtils(),
+  isFullScreen: false,
+  gridStyles: {},
+  gridWidth: 300,
+  gridRef: { current: null },
+  gridItemsRendered: { current: null },
+  wrapperRef: { current: document.createElement('div') },
+};
 
-  beforeAll(() => {
-    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
-      configurable: true,
-      value: 34,
-    });
-  });
-
-  it('renders', () => {
-    // EuiDataGridBody should be `render`ed here over `mount` due to large
-    // snapshot memory issues
-    const component = render(<EuiDataGridBody {...requiredProps} />);
-    expect(component).toMatchSnapshot();
-    expect(component.find('[data-test-subj="dataGridRowCell"]')).toHaveLength(
-      2
-    );
-  });
-
-  it('renders leading columns, trailing columns, and footer rows', () => {
-    const component = mount(
-      <EuiDataGridBody
-        {...requiredProps}
-        leadingControlColumns={[
-          {
-            id: 'someLeadingColumn',
-            headerCellRender: () => <div />,
-            rowCellRender: () => <div />,
-            width: 30,
-          },
-        ]}
-        trailingControlColumns={[
-          {
-            id: 'someTrailingColumn',
-            headerCellRender: () => <div />,
-            rowCellRender: () => <div />,
-            width: 40,
-          },
-        ]}
-        visibleColCount={4}
-        renderFooterCellValue={() => <footer data-test-subj="footer" />}
-      />
-    );
-    expect(component.find('Cell')).toHaveLength(4);
-    expect(component.find('[data-test-subj="footer"]')).toHaveLength(2);
+describe('EuiDataGridBody', () => {
+  it('renders a virtualized data grid body by default', () => {
+    const { container } = render(<EuiDataGridBody {...dataGridBodyProps} />);
+    expect(container.querySelector('.euiDataGrid__virtualized')).toBeTruthy();
   });
 
-  it('passes some virtualization options to the underlying react-window grid', () => {
-    const onItemsRendered = jest.fn();
-    const component = mount(
+  it('renders a custom rendered data grid body if `renderCustomGridBody` is passed', () => {
+    const { container } = render(
       <EuiDataGridBody
-        {...requiredProps}
-        virtualizationOptions={{
-          initialScrollTop: 50,
-          className: 'test',
-          onItemsRendered,
-        }}
+        {...dataGridBodyProps}
+        renderCustomGridBody={() => null}
       />
     );
-    expect(component.find('.test').exists()).toBe(true);
-    expect(onItemsRendered).toHaveBeenCalled();
-  });
-
-  // TODO: Test final height/weights in Cypress
-
-  // TODO: Test tabbing in Cypress
-
-  // TODO: Test column resizing in Cypress
-});
-
-describe('Cell', () => {
-  const requiredProps = {
-    columnIndex: 0,
-    rowIndex: 0,
-    style: {},
-    data: {
-      rowMap: {},
-      rowOffset: 0,
-      leadingControlColumns: [],
-      trailingControlColumns: [],
-      columns: [{ id: 'C' }],
-      columnWidths: {},
-      defaultColumnWidth: 30,
-      schema: {},
-      schemaDetectors,
-      interactiveCellId: '',
-      renderCellValue: jest.fn(),
-    },
-  };
-
-  it('is a light wrapper around EuiDataGridCell', () => {
-    const component = shallow(<Cell {...requiredProps} />);
-    expect(component.find('EuiDataGridCell').exists()).toBe(true);
+    expect(
+      container.querySelector('.euiDataGrid__customRenderBody')
+    ).toBeTruthy();
   });
 });
diff --git a/src/components/datagrid/body/data_grid_body.tsx b/src/components/datagrid/body/data_grid_body.tsx
index be8080e4851..c71f8745a94 100644
--- a/src/components/datagrid/body/data_grid_body.tsx
+++ b/src/components/datagrid/body/data_grid_body.tsx
@@ -6,448 +6,27 @@
  * Side Public License, v 1.
  */
 
-import classNames from 'classnames';
-import React, {
-  forwardRef,
-  FunctionComponent,
-  createContext,
-  useContext,
-  useEffect,
-  useRef,
-} from 'react';
-import {
-  GridChildComponentProps,
-  VariableSizeGrid as Grid,
-  VariableSizeGridProps,
-} from 'react-window';
-import { useResizeObserver } from '../../observer/resize_observer';
-import { EuiDataGridCell } from './data_grid_cell';
-import { useDataGridHeader } from './header';
-import { useDataGridFooter } from './footer';
-import { DataGridCellPopoverContext } from './data_grid_cell_popover';
-import {
-  EuiDataGridBodyProps,
-  DataGridWrapperRowsContentsShape,
-  EuiDataGridSchemaDetector,
-} from '../data_grid_types';
-import { useRowManager } from './data_grid_row_manager';
-import {
-  useFinalGridDimensions,
-  useUnconstrainedHeight,
-  useVirtualizeContainerWidth,
-} from '../utils/grid_height_width';
-import { useDefaultColumnWidth, useColumnWidths } from '../utils/col_widths';
-import { useRowHeightUtils, useDefaultRowHeight } from '../utils/row_heights';
-import { useScrollBars, useScroll } from '../utils/scrolling';
-import { DataGridSortingContext } from '../utils/sorting';
-import { IS_JEST_ENVIRONMENT } from '../../../utils';
+import React, { FunctionComponent } from 'react';
 
-export const Cell: FunctionComponent<GridChildComponentProps> = ({
-  columnIndex,
-  rowIndex: visibleRowIndex,
-  style,
-  data,
-}) => {
-  const {
-    leadingControlColumns,
-    trailingControlColumns,
-    columns,
-    visibleColCount,
-    schema,
-    columnWidths,
-    defaultColumnWidth,
-    renderCellValue,
-    renderCellPopover,
-    interactiveCellId,
-    setRowHeight,
-    schemaDetectors,
-    rowHeightsOptions,
-    rowHeightUtils,
-    rowManager,
-    pagination,
-  } = data;
-  const popoverContext = useContext(DataGridCellPopoverContext);
-  const { headerRowHeight } = useContext(DataGridWrapperRowsContext);
-  const { getCorrectRowIndex } = useContext(DataGridSortingContext);
-
-  let cellContent;
-
-  const isFirstColumn = columnIndex === 0;
-  const isLastColumn = columnIndex === visibleColCount - 1;
-
-  const isLeadingControlColumn = columnIndex < leadingControlColumns.length;
-  const isTrailingControlColumn =
-    columnIndex >= leadingControlColumns.length + columns.length;
-
-  const dataColumnIndex = columnIndex - leadingControlColumns.length;
-  const column = columns[dataColumnIndex];
-  const columnId = column?.id;
-
-  const transformClass = schemaDetectors.filter(
-    (row: EuiDataGridSchemaDetector) => {
-      return column?.schema
-        ? column?.schema === row.type
-        : columnId === row.type;
-    }
-  )[0];
-  const textTransform = transformClass?.textTransform;
-
-  const classes = classNames({
-    'euiDataGridRowCell--firstColumn': isFirstColumn,
-    'euiDataGridRowCell--lastColumn': isLastColumn,
-    'euiDataGridRowCell--controlColumn':
-      isLeadingControlColumn || isTrailingControlColumn,
-    [`euiDataGridRowCell--${textTransform}`]: textTransform,
-  });
-
-  const sharedCellProps = {
-    rowIndex: getCorrectRowIndex(visibleRowIndex),
-    visibleRowIndex,
-    colIndex: columnIndex,
-    interactiveCellId,
-    className: classes,
-    style: {
-      ...style,
-      top: `${parseFloat(style.top as string) + headerRowHeight}px`,
-    },
-    rowHeightsOptions,
-    rowHeightUtils,
-    setRowHeight: isFirstColumn ? setRowHeight : undefined,
-    rowManager,
-    popoverContext,
-    pagination,
-  };
-
-  if (isLeadingControlColumn) {
-    const leadingColumn = leadingControlColumns[columnIndex];
-    const { id, rowCellRender } = leadingColumn;
-
-    cellContent = (
-      <EuiDataGridCell
-        {...sharedCellProps}
-        columnId={id}
-        width={leadingColumn.width}
-        renderCellValue={rowCellRender}
-        isExpandable={false}
-      />
-    );
-  } else if (isTrailingControlColumn) {
-    const columnOffset = columns.length + leadingControlColumns.length;
-    const trailingColumnIndex = columnIndex - columnOffset;
-    const trailingColumn = trailingControlColumns[trailingColumnIndex];
-    const { id, rowCellRender } = trailingColumn;
-
-    cellContent = (
-      <EuiDataGridCell
-        {...sharedCellProps}
-        columnId={id}
-        width={trailingColumn.width}
-        renderCellValue={rowCellRender}
-        isExpandable={false}
-      />
-    );
-  } else {
-    // this is a normal data cell
-    const columnType = schema[columnId] ? schema[columnId].columnType : null;
-
-    const isExpandable =
-      column.isExpandable !== undefined ? column.isExpandable : true;
-
-    const width = columnWidths[columnId] || defaultColumnWidth;
-
-    cellContent = (
-      <EuiDataGridCell
-        {...sharedCellProps}
-        columnId={columnId}
-        column={column}
-        columnType={columnType}
-        width={width || undefined}
-        renderCellValue={renderCellValue}
-        renderCellPopover={renderCellPopover}
-        interactiveCellId={interactiveCellId}
-        isExpandable={isExpandable}
-      />
-    );
-  }
-
-  return cellContent;
-};
-
-// Context is required to pass props to react-window's innerElementType
-// @see https://github.com/bvaughn/react-window/issues/404
-export const DataGridWrapperRowsContext = createContext<
-  DataGridWrapperRowsContentsShape
->({ headerRow: <div />, headerRowHeight: 0, footerRow: null });
-
-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';
-
-export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
-  props
-) => {
-  const {
-    leadingControlColumns,
-    trailingControlColumns,
-    columns,
-    visibleColCount,
-    schema,
-    schemaDetectors,
-    rowCount,
-    visibleRows: { startRow, endRow, visibleRowCount },
-    renderCellValue,
-    renderCellPopover,
-    renderFooterCellValue,
-    interactiveCellId,
-    pagination,
-    headerIsInteractive,
-    handleHeaderMutation,
-    setVisibleColumns,
-    switchColumnPos,
-    onColumnResize,
-    rowHeightsOptions,
-    virtualizationOptions,
-    isFullScreen,
-    gridStyles,
-    gridWidth,
-    gridRef,
-    gridItemsRendered,
-    wrapperRef,
-  } = props;
-
-  /**
-   * Grid refs & observers
-   */
-  const wrapperDimensions = useResizeObserver(wrapperRef.current);
-  const outerGridRef = useRef<HTMLDivElement | null>(null); // container that becomes scrollable
-  const innerGridRef = useRef<HTMLDivElement | null>(null); // container sized to fit all content
-
-  /**
-   * Scroll bars
-   */
-  const {
-    scrollBarHeight,
-    hasVerticalScroll,
-    hasHorizontalScroll,
-    scrollBorderOverlay,
-  } = useScrollBars(outerGridRef, gridStyles.border);
-
-  /**
-   * Widths
-   */
-  const virtualizeContainerWidth = useVirtualizeContainerWidth(
-    outerGridRef.current,
-    gridWidth,
-    pagination?.pageSize
-  );
+import { EuiDataGridBodyProps } from '../data_grid_types';
+import { EuiDataGridBodyVirtualized } from './data_grid_body_virtualized';
+import { EuiDataGridBodyCustomRender } from './data_grid_body_custom';
 
-  // compute the default column width from the container's width and count of visible columns
-  const defaultColumnWidth = useDefaultColumnWidth(
-    virtualizeContainerWidth,
-    leadingControlColumns,
-    trailingControlColumns,
-    columns
+export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = ({
+  renderCustomGridBody,
+  ...props
+}) => {
+  /*
+   * Determine whether we should use the default EuiDataGridBody
+   * + virtualization library for rendering content, or if consumers have
+   * passed their own custom renderer
+   */
+  return renderCustomGridBody ? (
+    <EuiDataGridBodyCustomRender
+      renderCustomGridBody={renderCustomGridBody}
+      {...props}
+    />
+  ) : (
+    <EuiDataGridBodyVirtualized {...props} />
   );
-
-  const { columnWidths, setColumnWidth, getColumnWidth } = useColumnWidths({
-    columns,
-    leadingControlColumns,
-    trailingControlColumns,
-    defaultColumnWidth,
-    onColumnResize,
-  });
-
-  /**
-   * Header & footer
-   */
-  const { headerRow, headerRowHeight } = useDataGridHeader({
-    headerIsInteractive,
-    handleHeaderMutation,
-    switchColumnPos,
-    setVisibleColumns,
-    leadingControlColumns,
-    trailingControlColumns,
-    columns,
-    columnWidths,
-    defaultColumnWidth,
-    setColumnWidth,
-    schema,
-    schemaDetectors,
-  });
-
-  const { footerRow, footerRowHeight } = useDataGridFooter({
-    renderFooterCellValue,
-    renderCellPopover,
-    rowIndex: visibleRowCount,
-    visibleRowIndex: visibleRowCount,
-    interactiveCellId,
-    leadingControlColumns,
-    trailingControlColumns,
-    columns,
-    columnWidths,
-    defaultColumnWidth,
-    schema,
-  });
-
-  /**
-   * Handle scrolling cells fully into view
-   */
-  useScroll({
-    gridRef,
-    outerGridRef,
-    hasGridScrolling: hasVerticalScroll || hasHorizontalScroll,
-    headerRowHeight,
-    footerRowHeight,
-    visibleRowCount,
-    hasStickyFooter: !!(renderFooterCellValue && gridStyles.stickyFooter),
-  });
-
-  /**
-   * Row manager
-   */
-  const rowManager = useRowManager({
-    innerGridRef,
-    rowClasses: gridStyles.rowClasses,
-  });
-
-  /**
-   * Heights
-   */
-  const rowHeightUtils = useRowHeightUtils({
-    gridRef,
-    outerGridElementRef: outerGridRef,
-    gridItemsRenderedRef: gridItemsRendered,
-    gridStyles,
-    columns,
-    rowHeightsOptions,
-  });
-
-  const { defaultRowHeight, setRowHeight, getRowHeight } = useDefaultRowHeight({
-    rowHeightsOptions,
-    rowHeightUtils,
-  });
-
-  const unconstrainedHeight = useUnconstrainedHeight({
-    rowHeightUtils,
-    startRow,
-    endRow,
-    rowHeightsOptions,
-    defaultRowHeight,
-    headerRowHeight,
-    footerRowHeight,
-    scrollBarHeight,
-    innerGridRef,
-  });
-
-  /**
-   * Final grid height & width
-   */
-  const { finalWidth, finalHeight } = useFinalGridDimensions({
-    unconstrainedHeight,
-    unconstrainedWidth: 0, // unable to determine this until the container's size is known
-    wrapperDimensions,
-    wrapperRef,
-    isFullScreen,
-    rowCount,
-  });
-
-  /**
-   * Grid resets
-   */
-  useEffect(() => {
-    if (gridRef.current) {
-      gridRef.current.resetAfterColumnIndex(0);
-    }
-  }, [gridRef, columns, columnWidths, defaultColumnWidth]);
-
-  useEffect(() => {
-    if (gridRef.current && rowHeightsOptions) {
-      gridRef.current.resetAfterRowIndex(0);
-    }
-  }, [
-    gridRef,
-    pagination?.pageIndex,
-    rowHeightsOptions,
-    gridStyles?.cellPadding,
-    gridStyles?.fontSize,
-  ]);
-
-  useEffect(() => {
-    if (gridRef.current) {
-      gridRef.current.resetAfterRowIndex(0);
-    }
-  }, [gridRef, getRowHeight]);
-
-  return IS_JEST_ENVIRONMENT || finalWidth > 0 ? (
-    <DataGridWrapperRowsContext.Provider
-      value={{ headerRowHeight, headerRow, footerRow }}
-    >
-      <Grid
-        {...(virtualizationOptions ? virtualizationOptions : {})}
-        ref={gridRef}
-        className={classNames(
-          'euiDataGrid__virtualized',
-          virtualizationOptions?.className
-        )}
-        onItemsRendered={(itemsRendered) => {
-          gridItemsRendered.current = itemsRendered;
-          virtualizationOptions?.onItemsRendered?.(itemsRendered);
-        }}
-        innerElementType={InnerElement}
-        outerRef={outerGridRef}
-        innerRef={innerGridRef}
-        columnCount={visibleColCount}
-        width={finalWidth}
-        columnWidth={getColumnWidth}
-        height={finalHeight}
-        rowHeight={getRowHeight}
-        itemData={{
-          schemaDetectors,
-          setRowHeight,
-          leadingControlColumns,
-          trailingControlColumns,
-          columns,
-          visibleColCount,
-          schema,
-          columnWidths,
-          defaultColumnWidth,
-          renderCellValue,
-          renderCellPopover,
-          interactiveCellId,
-          rowHeightsOptions,
-          rowHeightUtils,
-          rowManager,
-          pagination,
-        }}
-        rowCount={
-          IS_JEST_ENVIRONMENT || headerRowHeight > 0 ? visibleRowCount : 0
-        }
-      >
-        {Cell}
-      </Grid>
-      {scrollBorderOverlay}
-    </DataGridWrapperRowsContext.Provider>
-  ) : null;
 };
diff --git a/src/components/datagrid/body/data_grid_body_custom.spec.tsx b/src/components/datagrid/body/data_grid_body_custom.spec.tsx
new file mode 100644
index 00000000000..304d4366519
--- /dev/null
+++ b/src/components/datagrid/body/data_grid_body_custom.spec.tsx
@@ -0,0 +1,247 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/// <reference types="../../../../cypress/support"/>
+
+import React, { useState, useCallback } from 'react';
+
+import { EuiDataGrid, EuiDataGridProps } from '../';
+
+describe('EuiDataGridBodyCustomRender', () => {
+  const raw_data = [...Array(100)].map((_, index) => ({ A: index, B: index }));
+  const columns = [{ id: 'A' }, { id: 'B' }];
+
+  const CustomGridBody: EuiDataGridProps['renderCustomGridBody'] = ({
+    visibleColumns,
+    visibleRowData,
+    Cell,
+  }) => {
+    const visibleRows = raw_data.slice(
+      visibleRowData.startRow,
+      visibleRowData.endRow
+    );
+    return (
+      <>
+        {visibleRows.map((row, rowIndex) => (
+          <div role="row" key={rowIndex} style={{ display: 'flex' }}>
+            {visibleColumns.map((column, colIndex) => (
+              // @ts-ignore it's not clear why Typescript has an issue with Cell in Cypress but not Jest or our docs
+              <Cell
+                colIndex={colIndex}
+                visibleRowIndex={rowIndex}
+                key={`${rowIndex},${colIndex}`}
+              />
+            ))}
+          </div>
+        ))}
+      </>
+    );
+  };
+
+  const DataGridTest = (
+    props: Partial<Omit<EuiDataGridProps, 'aria-labelledby'>>
+  ) => {
+    // Column visibility
+    const [visibleColumns, setVisibleColumns] = useState(
+      columns.map(({ id }) => id)
+    );
+
+    // Sorting
+    const [sortingColumns, setSortingColumns] = useState([]);
+    const onSort = useCallback((sortingColumns) => {
+      setSortingColumns(sortingColumns);
+    }, []);
+
+    // Pagination
+    const [pagination, setPagination] = useState({
+      pageIndex: 0,
+      pageSize: 10,
+    });
+    const onChangePage = useCallback((pageIndex) => {
+      setPagination((pagination) => ({ ...pagination, pageIndex }));
+    }, []);
+    const onChangePageSize = useCallback((pageSize) => {
+      setPagination((pagination) => ({ ...pagination, pageSize }));
+    }, []);
+
+    return (
+      <EuiDataGrid
+        aria-label="Custom grid body renderer"
+        rowCount={raw_data.length}
+        columns={columns}
+        renderCellValue={({ rowIndex, columnId }) =>
+          `${columnId},${raw_data[rowIndex][columnId]}`
+        }
+        renderCustomGridBody={CustomGridBody}
+        columnVisibility={{ visibleColumns, setVisibleColumns }}
+        sorting={{ columns: sortingColumns, onSort }}
+        inMemory={{ level: 'sorting' }}
+        pagination={{
+          ...pagination,
+          pageSizeOptions: [10, 20, 0],
+          onChangePage: onChangePage,
+          onChangeItemsPerPage: onChangePageSize,
+        }}
+        {...props}
+      />
+    );
+  };
+
+  it('inherits cell focus and popover behavior correctly', () => {
+    cy.realMount(<DataGridTest />);
+    cy.repeatRealPress('Tab', 6);
+    cy.realPress('ArrowDown');
+    cy.focused()
+      .should('have.attr', 'data-gridcell-row-index', '0')
+      .should('have.attr', 'data-gridcell-column-index', '0')
+      .should('have.attr', 'tabindex', '0');
+    cy.wait(500);
+    cy.realPress('Enter');
+    cy.focused().should('have.attr', 'data-popover-open', 'true');
+    cy.realPress('Escape');
+    cy.realPress('ArrowRight');
+    cy.focused()
+      .should('have.attr', 'data-gridcell-row-index', '0')
+      .should('have.attr', 'data-gridcell-column-index', '1')
+      .should('have.attr', 'tabindex', '0');
+  });
+
+  it('handles pagination correctly when consumers slice their data based on visibleRowData', () => {
+    cy.realMount(<DataGridTest />);
+    cy.get('[data-test-subj="pagination-button-last"]').click();
+    cy.get('.euiPagination > [role="status"]').contains('Page 10 of 10');
+
+    cy.get(
+      '[data-gridcell-row-index="99"][data-gridcell-column-index="0"]'
+    ).contains('A,99');
+    cy.get(
+      '[data-gridcell-row-index="99"][data-gridcell-column-index="1"]'
+    ).contains('B,99');
+  });
+
+  it('handles re-ordering and hiding columns correctly', () => {
+    cy.realMount(<DataGridTest />);
+    cy.get(
+      '[data-gridcell-row-index="0"][data-gridcell-column-index="0"]'
+    ).contains('A,0');
+    cy.get(
+      '[data-gridcell-row-index="0"][data-gridcell-column-index="1"]'
+    ).contains('B,0');
+
+    cy.get('[data-test-subj="dataGridHeaderCell-A"] button').click();
+    cy.contains('Move right').click();
+
+    cy.get(
+      '[data-gridcell-row-index="0"][data-gridcell-column-index="0"]'
+    ).contains('B,0');
+    cy.get(
+      '[data-gridcell-row-index="0"][data-gridcell-column-index="1"]'
+    ).contains('A,0');
+
+    cy.get('[data-test-subj="dataGridHeaderCell-B"] button').click();
+    cy.contains('Hide column').click();
+
+    cy.get(
+      '[data-gridcell-row-index="0"][data-gridcell-column-index="0"]'
+    ).contains('A,0');
+    cy.get(
+      '[data-gridcell-row-index="0"][data-gridcell-column-index="1"]'
+    ).should('not.exist');
+  });
+
+  it('handles sorting columns correctly', () => {
+    cy.realMount(<DataGridTest />);
+    cy.get('[role="gridcell"]').first().contains('A,0');
+
+    cy.get('[data-test-subj="dataGridHeaderCell-A"] button').click();
+    cy.contains('Sort High-Low').click();
+
+    cy.get('[role="gridcell"]').first().contains('A,99');
+  });
+
+  it('handles height/width constrained grids correctly', () => {
+    cy.realMount(<DataGridTest height={300} width={300} />);
+
+    // Increase page size
+    cy.get('[data-test-subj="tablePaginationPopoverButton"]').click();
+    cy.contains('Show all rows').click();
+
+    // Check heights
+    cy.get('.euiDataGrid').invoke('outerHeight').should('eq', 300);
+    cy.get('.euiDataGrid').invoke('outerWidth').should('eq', 300);
+    cy.get('.euiDataGrid__customRenderBody')
+      .invoke('prop', 'scrollHeight')
+      .should('be.gt', 300);
+
+    // Virtualization isn't a thing, so check that the last row is present on the page
+    cy.get('[role="gridcell"]').last().contains('B,99');
+  });
+
+  it('handles auto height rows correctly', () => {
+    cy.realMount(
+      <DataGridTest
+        renderCellValue={({ columnId }) =>
+          columnId === 'A'
+            ? 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+            : 'Nunc eleifend velit enim, eget placerat lorem dignissim sed. Donec laoreet tincidunt convallis. Ut eget ornare tellus.'
+        }
+      />
+    );
+    cy.get('[role="gridcell"]').first().invoke('outerHeight').should('eq', 36);
+
+    cy.get('[data-test-subj="dataGridDisplaySelectorButton"]').click();
+    cy.contains('Auto fit').click();
+
+    cy.get('[role="gridcell"]')
+      .first()
+      .invoke('outerHeight')
+      .should('be.gt', 36);
+
+    // TODO: a screenshot/visual diff test would be useful here
+  });
+
+  it('renders header and footer rows correctly', () => {
+    cy.realMount(
+      <DataGridTest renderFooterCellValue={({ columnId }) => columnId} />
+    );
+    cy.get('.euiDataGridHeader').contains('A');
+    cy.get('.euiDataGridHeader').contains('B');
+    cy.get('.euiDataGridFooter').contains('A');
+    cy.get('.euiDataGridFooter').contains('B');
+  });
+
+  it('renders control columns correctly', () => {
+    cy.realMount(
+      <DataGridTest
+        leadingControlColumns={[
+          {
+            id: 'leading',
+            width: 20,
+            rowCellRender: () => '_',
+            headerCellRender: () => null,
+          },
+        ]}
+        trailingControlColumns={[
+          {
+            id: 'trailing',
+            width: 20,
+            rowCellRender: () => '*',
+            headerCellRender: () => null,
+          },
+        ]}
+      />
+    );
+
+    cy.get('[role="gridcell"][data-gridcell-column-id="leading"]')
+      .first()
+      .contains('_');
+    cy.get('[role="gridcell"][data-gridcell-column-id="trailing"]')
+      .last()
+      .contains('*');
+  });
+});
diff --git a/src/components/datagrid/body/data_grid_body_custom.test.tsx b/src/components/datagrid/body/data_grid_body_custom.test.tsx
new file mode 100644
index 00000000000..53e6a66d0d1
--- /dev/null
+++ b/src/components/datagrid/body/data_grid_body_custom.test.tsx
@@ -0,0 +1,119 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useEffect } from 'react';
+import { fireEvent } from '@testing-library/dom';
+import { render } from '../../../test/rtl';
+
+import { EuiDataGridProps } from '../data_grid_types';
+import { dataGridBodyProps } from './data_grid_body.test';
+
+import { EuiDataGridBodyCustomRender } from './data_grid_body_custom';
+
+describe('EuiDataGridBodyCustomRender', () => {
+  type DataType = { columnA: string; columnB: string };
+  const raw_data: DataType[] = [
+    { columnA: 'hello', columnB: 'world' },
+    { columnA: 'lorem', columnB: 'ipsum' },
+  ];
+  const RenderCellValue: EuiDataGridProps['renderCellValue'] = ({
+    rowIndex,
+    columnId,
+  }) => raw_data[rowIndex][columnId as keyof DataType];
+
+  const bodyProps = {
+    ...dataGridBodyProps,
+    rowCount: 2,
+    visibleRows: { startRow: 0, endRow: 2, visibleRowCount: 2 },
+    renderCellValue: RenderCellValue,
+  };
+
+  it('treats `renderCustomGridBody` as a render prop', () => {
+    const CustomGridBody: EuiDataGridProps['renderCustomGridBody'] = ({
+      visibleColumns,
+      visibleRowData,
+      Cell,
+    }) => {
+      const visibleRows = raw_data.slice(
+        visibleRowData.startRow,
+        visibleRowData.endRow
+      );
+      return (
+        <>
+          {visibleRows.map((row, rowIndex) => (
+            <div role="row" key={rowIndex}>
+              {visibleColumns.map((column, colIndex) => (
+                <Cell
+                  colIndex={colIndex}
+                  visibleRowIndex={rowIndex}
+                  key={`${rowIndex},${colIndex}`}
+                />
+              ))}
+            </div>
+          ))}
+        </>
+      );
+    };
+
+    const { container, getByText } = render(
+      <EuiDataGridBodyCustomRender
+        {...bodyProps}
+        renderCustomGridBody={CustomGridBody}
+      />
+    );
+    expect(container.firstChild).toMatchSnapshot();
+    expect(getByText('hello')).toBeTruthy();
+    expect(getByText('world')).toBeTruthy();
+    expect(getByText('lorem')).toBeTruthy();
+    expect(getByText('ipsum')).toBeTruthy();
+  });
+
+  it('allows passing props to the wrapping div via `setCustomGridBodyProps`', () => {
+    const onScroll = jest.fn();
+
+    let bodyRef: HTMLDivElement | null = null;
+    const setBodyRef = (el: HTMLDivElement) => {
+      bodyRef = el;
+    };
+
+    const CustomGridBody: EuiDataGridProps['renderCustomGridBody'] = ({
+      setCustomGridBodyProps,
+    }) => {
+      useEffect(() => {
+        setCustomGridBodyProps({
+          className: 'hello-world',
+          onScroll,
+          ref: setBodyRef,
+        });
+      }, [setCustomGridBodyProps]);
+
+      return <>hello world</>;
+    };
+
+    const { container, getByText } = render(
+      <EuiDataGridBodyCustomRender
+        {...bodyProps}
+        renderCustomGridBody={CustomGridBody}
+      />
+    );
+    expect(getByText('hello world')).toBeTruthy();
+
+    const gridBody = container.querySelector(
+      '.euiDataGrid__customRenderBody.hello-world'
+    );
+    expect(gridBody).toBeTruthy();
+
+    fireEvent.scroll(gridBody!);
+    expect(onScroll).toHaveBeenCalledTimes(1);
+
+    bodyRef!.setAttribute('style', 'pointer-events: none;');
+    expect(gridBody!.getAttribute('style')).toEqual('pointer-events: none;');
+  });
+
+  // More complex test cases involving pagination, auto height, etc can be found in Cypress .spec tests
+});
diff --git a/src/components/datagrid/body/data_grid_body_custom.tsx b/src/components/datagrid/body/data_grid_body_custom.tsx
new file mode 100644
index 00000000000..38139f40a39
--- /dev/null
+++ b/src/components/datagrid/body/data_grid_body_custom.tsx
@@ -0,0 +1,182 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, {
+  FunctionComponent,
+  useState,
+  useMemo,
+  useCallback,
+} from 'react';
+import classNames from 'classnames';
+
+import { useDefaultColumnWidth, useColumnWidths } from '../utils/col_widths';
+import { useRowHeightUtils, useDefaultRowHeight } from '../utils/row_heights';
+
+import {
+  EuiDataGridBodyProps,
+  EuiDataGridSetCustomGridBodyProps,
+} from '../data_grid_types';
+import { useDataGridHeader } from './header';
+import { useDataGridFooter } from './footer';
+import { Cell } from './data_grid_cell_wrapper';
+
+export const EuiDataGridBodyCustomRender: FunctionComponent<EuiDataGridBodyProps> = ({
+  renderCustomGridBody,
+  leadingControlColumns,
+  trailingControlColumns,
+  columns,
+  visibleColCount,
+  schema,
+  schemaDetectors,
+  visibleRows,
+  renderCellValue,
+  renderCellPopover,
+  renderFooterCellValue,
+  interactiveCellId,
+  headerIsInteractive,
+  handleHeaderMutation,
+  setVisibleColumns,
+  switchColumnPos,
+  onColumnResize,
+  gridWidth,
+  gridStyles,
+  pagination,
+  rowHeightsOptions,
+}) => {
+  /**
+   * Columns & widths
+   */
+  const visibleColumns = useMemo(() => {
+    return [...leadingControlColumns, ...columns, ...trailingControlColumns];
+  }, [columns, leadingControlColumns, trailingControlColumns]);
+
+  // compute the default column width from the container's width and count of visible columns
+  const defaultColumnWidth = useDefaultColumnWidth(
+    gridWidth,
+    leadingControlColumns,
+    trailingControlColumns,
+    columns
+  );
+
+  const { columnWidths, setColumnWidth } = useColumnWidths({
+    columns,
+    leadingControlColumns,
+    trailingControlColumns,
+    defaultColumnWidth,
+    onColumnResize,
+  });
+
+  /**
+   * Row heights
+   */
+  const rowHeightUtils = useRowHeightUtils({
+    rowHeightsOptions,
+    gridStyles,
+    columns,
+  });
+
+  const { setRowHeight, getRowHeight } = useDefaultRowHeight({
+    rowHeightsOptions,
+    rowHeightUtils,
+  });
+
+  /**
+   * Header & footer
+   */
+  const { headerRow } = useDataGridHeader({
+    headerIsInteractive,
+    handleHeaderMutation,
+    switchColumnPos,
+    setVisibleColumns,
+    leadingControlColumns,
+    trailingControlColumns,
+    columns,
+    columnWidths,
+    defaultColumnWidth,
+    setColumnWidth,
+    schema,
+    schemaDetectors,
+  });
+
+  const { footerRow } = useDataGridFooter({
+    renderFooterCellValue,
+    renderCellPopover,
+    rowIndex: visibleRows.visibleRowCount,
+    visibleRowIndex: visibleRows.visibleRowCount,
+    interactiveCellId,
+    leadingControlColumns,
+    trailingControlColumns,
+    columns,
+    columnWidths,
+    defaultColumnWidth,
+    schema,
+  });
+
+  /**
+   * Cell render fn
+   */
+  const cellProps = {
+    schema,
+    schemaDetectors,
+    pagination,
+    columns,
+    leadingControlColumns,
+    trailingControlColumns,
+    visibleColCount,
+    columnWidths,
+    defaultColumnWidth,
+    renderCellValue,
+    renderCellPopover,
+    interactiveCellId,
+    setRowHeight,
+    rowHeightsOptions,
+    rowHeightUtils,
+  };
+
+  const _Cell = useCallback(
+    ({ colIndex, visibleRowIndex, ...rest }) => {
+      const style = {
+        height: rowHeightUtils.isAutoHeight(visibleRowIndex, rowHeightsOptions)
+          ? 'auto'
+          : getRowHeight(visibleRowIndex),
+      };
+      const props = {
+        colIndex,
+        visibleRowIndex,
+        style,
+        ...cellProps,
+      };
+      return <Cell {...props} {...rest} />;
+    },
+    [...Object.values(cellProps), getRowHeight] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  // Allow consumers to pass custom props/attributes/listeners etc. to the wrapping div
+  const [customGridBodyProps, setCustomGridBodyProps] = useState<
+    EuiDataGridSetCustomGridBodyProps
+  >({});
+
+  return (
+    <div
+      {...customGridBodyProps}
+      className={classNames(
+        'euiDataGrid__customRenderBody',
+        customGridBodyProps?.className
+      )}
+    >
+      {headerRow}
+      {renderCustomGridBody!({
+        visibleColumns,
+        visibleRowData: visibleRows,
+        Cell: _Cell,
+        setCustomGridBodyProps,
+      })}
+      {footerRow}
+    </div>
+  );
+};
diff --git a/src/components/datagrid/body/data_grid_body_virtualized.test.tsx b/src/components/datagrid/body/data_grid_body_virtualized.test.tsx
new file mode 100644
index 00000000000..5da12d8c9ee
--- /dev/null
+++ b/src/components/datagrid/body/data_grid_body_virtualized.test.tsx
@@ -0,0 +1,81 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { mount, render } from 'enzyme';
+
+import { dataGridBodyProps } from './data_grid_body.test';
+
+import { EuiDataGridBodyVirtualized } from './data_grid_body_virtualized';
+
+describe('EuiDataGridBodyVirtualized', () => {
+  beforeAll(() => {
+    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
+      configurable: true,
+      value: 34,
+    });
+  });
+
+  it('renders', () => {
+    // EuiDataGridBody should be `render`ed here over `mount` due to large
+    // snapshot memory issues
+    const component = render(
+      <EuiDataGridBodyVirtualized {...dataGridBodyProps} />
+    );
+    expect(component).toMatchSnapshot();
+    expect(component.find('[data-test-subj="dataGridRowCell"]')).toHaveLength(
+      2
+    );
+  });
+
+  it('renders leading columns, trailing columns, and footer rows', () => {
+    const component = mount(
+      <EuiDataGridBodyVirtualized
+        {...dataGridBodyProps}
+        leadingControlColumns={[
+          {
+            id: 'someLeadingColumn',
+            headerCellRender: () => <div />,
+            rowCellRender: () => <div />,
+            width: 30,
+          },
+        ]}
+        trailingControlColumns={[
+          {
+            id: 'someTrailingColumn',
+            headerCellRender: () => <div />,
+            rowCellRender: () => <div />,
+            width: 40,
+          },
+        ]}
+        visibleColCount={4}
+        renderFooterCellValue={() => <footer data-test-subj="footer" />}
+      />
+    );
+    expect(component.find('Cell')).toHaveLength(4);
+    expect(component.find('[data-test-subj="footer"]')).toHaveLength(2);
+  });
+
+  it('passes some virtualization options to the underlying react-window grid', () => {
+    const onItemsRendered = jest.fn();
+    const component = mount(
+      <EuiDataGridBodyVirtualized
+        {...dataGridBodyProps}
+        virtualizationOptions={{
+          initialScrollTop: 50,
+          className: 'test',
+          onItemsRendered,
+        }}
+      />
+    );
+    expect(component.find('.test').exists()).toBe(true);
+    expect(onItemsRendered).toHaveBeenCalled();
+  });
+
+  // TODO: Test final height/widths
+});
diff --git a/src/components/datagrid/body/data_grid_body_virtualized.tsx b/src/components/datagrid/body/data_grid_body_virtualized.tsx
new file mode 100644
index 00000000000..bf06168c6af
--- /dev/null
+++ b/src/components/datagrid/body/data_grid_body_virtualized.tsx
@@ -0,0 +1,337 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import classNames from 'classnames';
+import React, {
+  forwardRef,
+  FunctionComponent,
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+} from 'react';
+import {
+  GridChildComponentProps,
+  VariableSizeGrid as Grid,
+  VariableSizeGridProps,
+} from 'react-window';
+import { useResizeObserver } from '../../observer/resize_observer';
+import { useDataGridHeader } from './header';
+import { useDataGridFooter } from './footer';
+import { Cell } from './data_grid_cell_wrapper';
+import {
+  EuiDataGridBodyProps,
+  DataGridWrapperRowsContentsShape,
+} from '../data_grid_types';
+import { useRowManager } from './data_grid_row_manager';
+import {
+  useFinalGridDimensions,
+  useUnconstrainedHeight,
+  useVirtualizeContainerWidth,
+} from '../utils/grid_height_width';
+import { useDefaultColumnWidth, useColumnWidths } from '../utils/col_widths';
+import { useRowHeightUtils, useDefaultRowHeight } from '../utils/row_heights';
+import { useScrollBars, useScroll } from '../utils/scrolling';
+import { IS_JEST_ENVIRONMENT } from '../../../utils';
+
+export const _Cell: FunctionComponent<GridChildComponentProps> = ({
+  columnIndex,
+  rowIndex,
+  style,
+  data,
+}) => {
+  const { headerRowHeight } = useContext(DataGridWrapperRowsContext);
+  return (
+    <Cell
+      colIndex={columnIndex}
+      visibleRowIndex={rowIndex}
+      style={{
+        ...style,
+        top: `${parseFloat(style.top as string) + headerRowHeight}px`,
+      }}
+      {...data}
+    />
+  );
+};
+
+// Context is required to pass props to react-window's innerElementType
+// @see https://github.com/bvaughn/react-window/issues/404
+export const DataGridWrapperRowsContext = createContext<
+  DataGridWrapperRowsContentsShape
+>({ headerRow: <div />, headerRowHeight: 0, footerRow: null });
+
+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';
+
+export const EuiDataGridBodyVirtualized: FunctionComponent<EuiDataGridBodyProps> = ({
+  leadingControlColumns,
+  trailingControlColumns,
+  columns,
+  visibleColCount,
+  schema,
+  schemaDetectors,
+  rowCount,
+  visibleRows: { startRow, endRow, visibleRowCount },
+  renderCellValue,
+  renderCellPopover,
+  renderFooterCellValue,
+  interactiveCellId,
+  pagination,
+  headerIsInteractive,
+  handleHeaderMutation,
+  setVisibleColumns,
+  switchColumnPos,
+  onColumnResize,
+  rowHeightsOptions,
+  virtualizationOptions,
+  isFullScreen,
+  gridStyles,
+  gridWidth,
+  gridRef,
+  gridItemsRendered,
+  wrapperRef,
+}) => {
+  /**
+   * Grid refs & observers
+   */
+  const wrapperDimensions = useResizeObserver(wrapperRef.current);
+  const outerGridRef = useRef<HTMLDivElement | null>(null); // container that becomes scrollable
+  const innerGridRef = useRef<HTMLDivElement | null>(null); // container sized to fit all content
+
+  /**
+   * Scroll bars
+   */
+  const {
+    scrollBarHeight,
+    hasVerticalScroll,
+    hasHorizontalScroll,
+    scrollBorderOverlay,
+  } = useScrollBars(outerGridRef, gridStyles.border);
+
+  /**
+   * Widths
+   */
+  const virtualizeContainerWidth = useVirtualizeContainerWidth(
+    outerGridRef.current,
+    gridWidth,
+    pagination?.pageSize
+  );
+
+  // compute the default column width from the container's width and count of visible columns
+  const defaultColumnWidth = useDefaultColumnWidth(
+    virtualizeContainerWidth,
+    leadingControlColumns,
+    trailingControlColumns,
+    columns
+  );
+
+  const { columnWidths, setColumnWidth, getColumnWidth } = useColumnWidths({
+    columns,
+    leadingControlColumns,
+    trailingControlColumns,
+    defaultColumnWidth,
+    onColumnResize,
+  });
+
+  /**
+   * Header & footer
+   */
+  const { headerRow, headerRowHeight } = useDataGridHeader({
+    headerIsInteractive,
+    handleHeaderMutation,
+    switchColumnPos,
+    setVisibleColumns,
+    leadingControlColumns,
+    trailingControlColumns,
+    columns,
+    columnWidths,
+    defaultColumnWidth,
+    setColumnWidth,
+    schema,
+    schemaDetectors,
+  });
+
+  const { footerRow, footerRowHeight } = useDataGridFooter({
+    renderFooterCellValue,
+    renderCellPopover,
+    rowIndex: visibleRowCount,
+    visibleRowIndex: visibleRowCount,
+    interactiveCellId,
+    leadingControlColumns,
+    trailingControlColumns,
+    columns,
+    columnWidths,
+    defaultColumnWidth,
+    schema,
+  });
+
+  /**
+   * Handle scrolling cells fully into view
+   */
+  useScroll({
+    gridRef,
+    outerGridRef,
+    hasGridScrolling: hasVerticalScroll || hasHorizontalScroll,
+    headerRowHeight,
+    footerRowHeight,
+    visibleRowCount,
+    hasStickyFooter: !!(renderFooterCellValue && gridStyles.stickyFooter),
+  });
+
+  /**
+   * Row manager
+   */
+  const rowManager = useRowManager({
+    innerGridRef,
+    rowClasses: gridStyles.rowClasses,
+  });
+
+  /**
+   * Heights
+   */
+  const rowHeightUtils = useRowHeightUtils({
+    virtualization: {
+      gridRef,
+      outerGridElementRef: outerGridRef,
+      gridItemsRenderedRef: gridItemsRendered,
+    },
+    rowHeightsOptions,
+    gridStyles,
+    columns,
+  });
+
+  const { defaultRowHeight, setRowHeight, getRowHeight } = useDefaultRowHeight({
+    rowHeightsOptions,
+    rowHeightUtils,
+  });
+
+  const unconstrainedHeight = useUnconstrainedHeight({
+    rowHeightUtils,
+    startRow,
+    endRow,
+    rowHeightsOptions,
+    defaultRowHeight,
+    headerRowHeight,
+    footerRowHeight,
+    scrollBarHeight,
+    innerGridRef,
+  });
+
+  /**
+   * Final grid height & width
+   */
+  const { finalWidth, finalHeight } = useFinalGridDimensions({
+    unconstrainedHeight,
+    unconstrainedWidth: 0, // unable to determine this until the container's size is known
+    wrapperDimensions,
+    wrapperRef,
+    isFullScreen,
+    rowCount,
+  });
+
+  /**
+   * Grid resets
+   */
+  useEffect(() => {
+    if (gridRef.current) {
+      gridRef.current.resetAfterColumnIndex(0);
+    }
+  }, [gridRef, columns, columnWidths, defaultColumnWidth]);
+
+  useEffect(() => {
+    if (gridRef.current && rowHeightsOptions) {
+      gridRef.current.resetAfterRowIndex(0);
+    }
+  }, [
+    gridRef,
+    pagination?.pageIndex,
+    rowHeightsOptions,
+    gridStyles?.cellPadding,
+    gridStyles?.fontSize,
+  ]);
+
+  useEffect(() => {
+    if (gridRef.current) {
+      gridRef.current.resetAfterRowIndex(0);
+    }
+  }, [gridRef, getRowHeight]);
+
+  return IS_JEST_ENVIRONMENT || finalWidth > 0 ? (
+    <DataGridWrapperRowsContext.Provider
+      value={{ headerRowHeight, headerRow, footerRow }}
+    >
+      <Grid
+        {...(virtualizationOptions ? virtualizationOptions : {})}
+        ref={gridRef}
+        className={classNames(
+          'euiDataGrid__virtualized',
+          virtualizationOptions?.className
+        )}
+        onItemsRendered={(itemsRendered) => {
+          gridItemsRendered.current = itemsRendered;
+          virtualizationOptions?.onItemsRendered?.(itemsRendered);
+        }}
+        innerElementType={InnerElement}
+        outerRef={outerGridRef}
+        innerRef={innerGridRef}
+        columnCount={visibleColCount}
+        width={finalWidth}
+        columnWidth={getColumnWidth}
+        height={finalHeight}
+        rowHeight={getRowHeight}
+        itemData={{
+          schemaDetectors,
+          setRowHeight,
+          leadingControlColumns,
+          trailingControlColumns,
+          columns,
+          visibleColCount,
+          schema,
+          columnWidths,
+          defaultColumnWidth,
+          renderCellValue,
+          renderCellPopover,
+          interactiveCellId,
+          rowHeightsOptions,
+          rowHeightUtils,
+          rowManager,
+          pagination,
+        }}
+        rowCount={
+          IS_JEST_ENVIRONMENT || headerRowHeight > 0 ? visibleRowCount : 0
+        }
+      >
+        {_Cell}
+      </Grid>
+      {scrollBorderOverlay}
+    </DataGridWrapperRowsContext.Provider>
+  ) : null;
+};
diff --git a/src/components/datagrid/body/data_grid_cell.test.tsx b/src/components/datagrid/body/data_grid_cell.test.tsx
index 4e2da6b78bd..e04fc992b39 100644
--- a/src/components/datagrid/body/data_grid_cell.test.tsx
+++ b/src/components/datagrid/body/data_grid_cell.test.tsx
@@ -16,12 +16,7 @@ import { DataGridFocusContext } from '../utils/focus';
 import { EuiDataGridCell } from './data_grid_cell';
 
 describe('EuiDataGridCell', () => {
-  const mockRowHeightUtils = new RowHeightUtils(
-    { current: null },
-    { current: null },
-    { current: null },
-    { current: null }
-  );
+  const mockRowHeightUtils = new RowHeightUtils();
 
   const mockPopoverContext = {
     popoverIsOpen: false,
diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx
index e90328415b2..e603d2bf8c4 100644
--- a/src/components/datagrid/body/data_grid_cell.tsx
+++ b/src/components/datagrid/body/data_grid_cell.tsx
@@ -25,6 +25,7 @@ import { EuiFocusTrap } from '../../focus_trap';
 import { EuiI18n } from '../../i18n';
 import { hasResizeObserver } from '../../observer/resize_observer/resize_observer';
 import { DataGridFocusContext } from '../utils/focus';
+import { RowHeightVirtualizationUtils } from '../utils/row_heights';
 import {
   EuiDataGridCellProps,
   EuiDataGridCellState,
@@ -299,6 +300,8 @@ export class EuiDataGridCell extends Component<
     }
 
     if (
+      (this.props.rowHeightUtils as RowHeightVirtualizationUtils)
+        ?.compensateForLayoutShift &&
       this.props.rowHeightsOptions?.scrollAnchorRow &&
       this.props.colIndex === 0 && // once per row
       this.props.columnId === prevProps.columnId && // if this is still the same column
@@ -307,7 +310,9 @@ export class EuiDataGridCell extends Component<
     ) {
       const previousTop = parseFloat(prevProps.style?.top as string);
       const currentTop = parseFloat(this.props.style?.top as string);
-      this.props.rowHeightUtils?.compensateForLayoutShift(
+
+      // @ts-ignore We've already checked that this virtualization util is available above
+      this.props.rowHeightUtils.compensateForLayoutShift(
         this.props.rowIndex,
         currentTop - previousTop,
         this.props.rowHeightsOptions?.scrollAnchorRow
@@ -587,8 +592,8 @@ export class EuiDataGridCell extends Component<
     };
 
     cellProps.style = {
-      ...style, // from react-window
-      top: 0, // The cell's row will handle top positioning
+      ...style, // set by react-window or the custom renderer
+      top: style?.top ? 0 : undefined, // The cell's row will handle top positioning
       width, // column width, can be undefined
       lineHeight: rowHeightsOptions?.lineHeight ?? undefined, // lineHeight configuration
       ...cellPropsStyle, // apply anything from setCellProps({ style })
diff --git a/src/components/datagrid/body/data_grid_cell_wrapper.test.tsx b/src/components/datagrid/body/data_grid_cell_wrapper.test.tsx
new file mode 100644
index 00000000000..59ef9d70bf4
--- /dev/null
+++ b/src/components/datagrid/body/data_grid_cell_wrapper.test.tsx
@@ -0,0 +1,115 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { RowHeightUtils } from '../utils/__mocks__/row_heights';
+import { schemaDetectors } from '../utils/data_grid_schema';
+
+import { Cell } from './data_grid_cell_wrapper';
+
+describe('Cell', () => {
+  const requiredProps = {
+    colIndex: 0,
+    visibleRowIndex: 0,
+    style: { top: '30px' },
+    renderCellValue: () => null,
+    interactiveCellId: '',
+    rowHeightUtils: new RowHeightUtils(),
+    schema: {},
+    schemaDetectors,
+    columns: [{ id: 'C' }],
+    leadingControlColumns: [],
+    trailingControlColumns: [],
+    columnWidths: {},
+    defaultColumnWidth: 30,
+    visibleColCount: 1,
+  };
+
+  it('is a light wrapper around EuiDataGridCell', () => {
+    const component = shallow(<Cell {...requiredProps} />);
+    expect(component.find('EuiDataGridCell').exists()).toBe(true);
+  });
+
+  it('renders leading control column cells', () => {
+    const component = shallow(
+      <Cell
+        {...requiredProps}
+        leadingControlColumns={[
+          {
+            id: 'leading',
+            width: 20,
+            rowCellRender: () => null,
+            headerCellRender: () => null,
+          },
+        ]}
+      />
+    );
+    expect(
+      component
+        .find('.euiDataGridRowCell--controlColumn')
+        .hasClass('euiDataGridRowCell--firstColumn')
+    ).toBeTruthy();
+  });
+
+  it('renders trailing control column cells', () => {
+    const component = shallow(
+      <Cell
+        {...requiredProps}
+        colIndex={1}
+        visibleColCount={2}
+        trailingControlColumns={[
+          {
+            id: 'trailing',
+            width: 20,
+            rowCellRender: () => null,
+            headerCellRender: () => null,
+          },
+        ]}
+      />
+    );
+    expect(
+      component
+        .find('.euiDataGridRowCell--controlColumn')
+        .hasClass('euiDataGridRowCell--lastColumn')
+    ).toBeTruthy();
+  });
+
+  it('renders text transform classes based on schema', () => {
+    const component = shallow(
+      <Cell
+        {...requiredProps}
+        columns={[{ id: 'b', schema: 'SHOUTING' }]}
+        schema={{ b: { columnType: 'SHOUTING' } } as any}
+        schemaDetectors={[
+          {
+            type: 'SHOUTING',
+            textTransform: 'uppercase',
+            detector: () => 1,
+            sortTextAsc: '',
+            sortTextDesc: '',
+            icon: 'starFilled',
+          },
+        ]}
+      />
+    );
+    expect(component.find('.euiDataGridRowCell--uppercase')).toHaveLength(1);
+  });
+
+  it('allows passing optional EuiDataGridCellProps overrides', () => {
+    const component = shallow(
+      <Cell
+        {...requiredProps}
+        columns={[{ id: 'a', isExpandable: true }]}
+        isExpandable={false}
+      />
+    );
+    expect(component.find('EuiDataGridCell').prop('isExpandable')).toBe(false);
+  });
+});
diff --git a/src/components/datagrid/body/data_grid_cell_wrapper.tsx b/src/components/datagrid/body/data_grid_cell_wrapper.tsx
new file mode 100644
index 00000000000..4100e98fc97
--- /dev/null
+++ b/src/components/datagrid/body/data_grid_cell_wrapper.tsx
@@ -0,0 +1,181 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { FunctionComponent, useContext, useMemo } from 'react';
+import classNames from 'classnames';
+
+import {
+  EuiDataGridCellProps,
+  EuiDataGridBodyProps,
+  EuiDataGridHeaderRowProps,
+  EuiDataGridSchemaDetector,
+} from '../data_grid_types';
+import { DataGridSortingContext } from '../utils/sorting';
+import { DataGridCellPopoverContext } from './data_grid_cell_popover';
+
+import { EuiDataGridCell } from './data_grid_cell';
+
+type CellProps = Pick<
+  EuiDataGridCellProps,
+  | 'colIndex'
+  | 'visibleRowIndex'
+  | 'style'
+  | 'renderCellValue'
+  | 'renderCellPopover'
+  | 'interactiveCellId'
+  | 'rowHeightsOptions'
+  | 'rowHeightUtils'
+  | 'rowManager'
+  | 'setRowHeight'
+> &
+  Pick<
+    EuiDataGridBodyProps,
+    | 'schema'
+    | 'schemaDetectors'
+    | 'pagination'
+    | 'columns'
+    | 'leadingControlColumns'
+    | 'trailingControlColumns'
+    | 'visibleColCount'
+  > &
+  Pick<EuiDataGridHeaderRowProps, 'columnWidths' | 'defaultColumnWidth'> &
+  Partial<EuiDataGridCellProps>;
+
+/**
+ * A DRY wrapper used by both custom and virtualized grid cells.
+ * It grabs context,  determines the type of cell being rendered
+ * (e.g. control vs data cell), & sets shared props between all cells
+ */
+export const Cell: FunctionComponent<CellProps> = ({
+  colIndex,
+  visibleRowIndex,
+  style,
+  schema,
+  schemaDetectors,
+  pagination,
+  columns,
+  leadingControlColumns,
+  trailingControlColumns,
+  visibleColCount,
+  columnWidths,
+  defaultColumnWidth,
+  renderCellValue,
+  renderCellPopover,
+  interactiveCellId,
+  setRowHeight,
+  rowHeightsOptions,
+  rowHeightUtils,
+  rowManager,
+  ...rest
+}) => {
+  const popoverContext = useContext(DataGridCellPopoverContext);
+  const { getCorrectRowIndex } = useContext(DataGridSortingContext);
+
+  let cellContent;
+
+  const isFirstColumn = colIndex === 0;
+  const isLastColumn = colIndex === visibleColCount - 1;
+
+  const isLeadingControlColumn = colIndex < leadingControlColumns.length;
+  const isTrailingControlColumn =
+    colIndex >= leadingControlColumns.length + columns.length;
+
+  const datacolIndex = colIndex - leadingControlColumns.length;
+  const column = columns[datacolIndex];
+  const columnId = column?.id;
+
+  const textTransform = useMemo(
+    () =>
+      schemaDetectors.filter((row: EuiDataGridSchemaDetector) => {
+        return column?.schema
+          ? column?.schema === row.type
+          : columnId === row.type;
+      })[0]?.textTransform,
+    [columnId, column?.schema, schemaDetectors]
+  );
+
+  const classes = classNames({
+    'euiDataGridRowCell--firstColumn': isFirstColumn,
+    'euiDataGridRowCell--lastColumn': isLastColumn,
+    'euiDataGridRowCell--controlColumn':
+      isLeadingControlColumn || isTrailingControlColumn,
+    [`euiDataGridRowCell--${textTransform}`]: textTransform,
+  });
+
+  const sharedCellProps = {
+    rowIndex: getCorrectRowIndex(visibleRowIndex),
+    visibleRowIndex,
+    colIndex,
+    interactiveCellId,
+    className: classes,
+    style,
+    rowHeightsOptions,
+    rowHeightUtils,
+    setRowHeight: isFirstColumn ? setRowHeight : undefined,
+    rowManager,
+    popoverContext,
+    pagination,
+  };
+
+  if (isLeadingControlColumn) {
+    const leadingColumn = leadingControlColumns[colIndex];
+    const { id, rowCellRender } = leadingColumn;
+
+    cellContent = (
+      <EuiDataGridCell
+        {...sharedCellProps}
+        columnId={id}
+        width={leadingColumn.width}
+        renderCellValue={rowCellRender}
+        isExpandable={false}
+        {...rest}
+      />
+    );
+  } else if (isTrailingControlColumn) {
+    const columnOffset = columns.length + leadingControlColumns.length;
+    const trailingcolIndex = colIndex - columnOffset;
+    const trailingColumn = trailingControlColumns[trailingcolIndex];
+    const { id, rowCellRender } = trailingColumn;
+
+    cellContent = (
+      <EuiDataGridCell
+        {...sharedCellProps}
+        columnId={id}
+        width={trailingColumn.width}
+        renderCellValue={rowCellRender}
+        isExpandable={false}
+        {...rest}
+      />
+    );
+  } else {
+    // this is a normal data cell
+    const columnType = schema[columnId] ? schema[columnId].columnType : null;
+
+    const isExpandable =
+      column.isExpandable !== undefined ? column.isExpandable : true;
+
+    const width = columnWidths[columnId] || defaultColumnWidth;
+
+    cellContent = (
+      <EuiDataGridCell
+        {...sharedCellProps}
+        columnId={columnId}
+        column={column}
+        columnType={columnType}
+        width={width || undefined}
+        renderCellValue={renderCellValue}
+        renderCellPopover={renderCellPopover}
+        interactiveCellId={interactiveCellId}
+        isExpandable={isExpandable}
+        {...rest}
+      />
+    );
+  }
+
+  return cellContent;
+};
diff --git a/src/components/datagrid/body/footer/_data_grid_footer_row.scss b/src/components/datagrid/body/footer/_data_grid_footer_row.scss
index 227e8b818b2..5eddd8647f3 100644
--- a/src/components/datagrid/body/footer/_data_grid_footer_row.scss
+++ b/src/components/datagrid/body/footer/_data_grid_footer_row.scss
@@ -1,5 +1,6 @@
 .euiDataGridFooter {
   display: flex;
+  width: fit-content;
 }
 
 @include euiDataGridFooterCell {
diff --git a/src/components/datagrid/body/header/_data_grid_header_row.scss b/src/components/datagrid/body/header/_data_grid_header_row.scss
index f8561ad60af..8adaf9c4289 100644
--- a/src/components/datagrid/body/header/_data_grid_header_row.scss
+++ b/src/components/datagrid/body/header/_data_grid_header_row.scss
@@ -4,6 +4,7 @@
   background: $euiColorEmptyShade;
   position: sticky;
   top: 0;
+  width: fit-content;
 }
 
 @include euiDataGridHeaderCell {
diff --git a/src/components/datagrid/body/header/data_grid_header_row.tsx b/src/components/datagrid/body/header/data_grid_header_row.tsx
index 6e9f7d3a28f..9b5fe058909 100644
--- a/src/components/datagrid/body/header/data_grid_header_row.tsx
+++ b/src/components/datagrid/body/header/data_grid_header_row.tsx
@@ -10,15 +10,18 @@ import classnames from 'classnames';
 import React, { forwardRef } from 'react';
 import { EuiDataGridControlHeaderCell } from './data_grid_control_header_cell';
 import { EuiDataGridHeaderCell } from './data_grid_header_cell';
-import { EuiDataGridHeaderRowProps } from '../../data_grid_types';
+import {
+  emptyControlColumns,
+  EuiDataGridHeaderRowProps,
+} from '../../data_grid_types';
 
 const EuiDataGridHeaderRow = forwardRef<
   HTMLDivElement,
   EuiDataGridHeaderRowProps
 >((props, ref) => {
   const {
-    leadingControlColumns = [],
-    trailingControlColumns = [],
+    leadingControlColumns = emptyControlColumns,
+    trailingControlColumns = emptyControlColumns,
     columns,
     schema,
     schemaDetectors,
diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index e15135cd541..912eee7223f 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -52,6 +52,7 @@ import {
 } from './utils/data_grid_schema';
 import { useImperativeGridRef } from './utils/ref';
 import {
+  emptyControlColumns,
   EuiDataGridColumn,
   EuiDataGridProps,
   EuiDataGridRefProps,
@@ -105,8 +106,8 @@ const cellPaddingsToClassMap: {
 export const EuiDataGrid = forwardRef<EuiDataGridRefProps, EuiDataGridProps>(
   (props, ref) => {
     const {
-      leadingControlColumns = [],
-      trailingControlColumns = [],
+      leadingControlColumns = emptyControlColumns,
+      trailingControlColumns = emptyControlColumns,
       columns,
       columnVisibility,
       schemaDetectors,
@@ -126,6 +127,7 @@ export const EuiDataGrid = forwardRef<EuiDataGridRefProps, EuiDataGridProps>(
       width,
       rowHeightsOptions: _rowHeightsOptions,
       virtualizationOptions,
+      renderCustomGridBody,
       ...rest
     } = props;
 
@@ -457,6 +459,7 @@ export const EuiDataGrid = forwardRef<EuiDataGridRefProps, EuiDataGridProps>(
                     gridRef={gridRef}
                     gridItemsRendered={gridItemsRendered}
                     wrapperRef={contentRef}
+                    renderCustomGridBody={renderCustomGridBody}
                   />
                 </div>
                 {pagination && props['aria-labelledby'] && (
diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts
index 0ae7fb714f7..0d36769c2b1 100644
--- a/src/components/datagrid/data_grid_types.ts
+++ b/src/components/datagrid/data_grid_types.ts
@@ -15,6 +15,7 @@ import {
   ReactElement,
   AriaAttributes,
   MutableRefObject,
+  Ref,
   Component,
 } from 'react';
 import {
@@ -25,7 +26,7 @@ import {
 import { EuiListGroupItemProps } from '../list_group';
 import { EuiButtonEmpty, EuiButtonIcon } from '../button';
 import { ExclusiveUnion, CommonProps, OneOf } from '../common';
-import { RowHeightUtils } from './utils/row_heights';
+import { RowHeightUtilsType } from './utils/row_heights';
 import { IconType } from '../icon';
 import { EuiTokenProps } from '../token';
 import { EuiPopoverProps } from '../popover';
@@ -265,6 +266,18 @@ export type CommonGridProps = CommonProps &
      * as its only argument.
      */
     renderFooterCellValue?: EuiDataGridCellProps['renderCellValue'];
+    /**
+     * An optional function called to completely customize and control the rendering of
+     * EuiDataGrid's body and cell placement.  This can be used to, e.g. remove EuiDataGrid's
+     * virtualization library, or roll your own.
+     *
+     * This component is **only** meant as an escape hatch for extremely custom use cases.
+     *
+     * Behind the scenes, this function is treated as a React component,
+     * allowing hooks, context, and other React concepts to be used.
+     * It receives #EuiDataGridCustomBodyProps as its only argument.
+     */
+    renderCustomGridBody?: (args: EuiDataGridCustomBodyProps) => ReactNode;
     /**
      * Defines the initial style of the grid. Accepts a partial #EuiDataGridStyle object.
      * Settings provided may be overwritten or merged with user defined preferences if `toolbarVisibility.showDisplaySelector.allowDensity = true` (which is the default).
@@ -412,6 +425,7 @@ export interface EuiDataGridBodyProps {
   renderCellValue: EuiDataGridCellProps['renderCellValue'];
   renderCellPopover?: EuiDataGridCellProps['renderCellPopover'];
   renderFooterCellValue?: EuiDataGridCellProps['renderCellValue'];
+  renderCustomGridBody?: EuiDataGridProps['renderCustomGridBody'];
   interactiveCellId: EuiDataGridCellProps['interactiveCellId'];
   pagination?: EuiDataGridPaginationProps;
   headerIsInteractive: boolean;
@@ -429,6 +443,47 @@ export interface EuiDataGridBodyProps {
   wrapperRef: MutableRefObject<HTMLDivElement | null>;
 }
 
+export interface EuiDataGridCustomBodyProps {
+  /**
+   * When taking control of data grid rendering, the underlying `EuiDataGridCell`
+   * is passed as a prop for usage. You **must** pass in a valid `colIndex`
+   * and `visibleRowIndex` to this cell component.
+   *
+   * You may also pass in any other optional cell prop overrides
+   * that `EuiDataGridCell` accepts, such as `isExpandable` or `renderCellValue`.
+   */
+  Cell: JSXElementConstructor<
+    { colIndex: number; visibleRowIndex: number } & Partial<
+      EuiDataGridCellProps
+    >
+  >;
+  /**
+   * The currently visible columns are passed to your data grid renderer so that your
+   * custom grid can automatically adjust to column hiding & reordering.
+   */
+  visibleColumns: EuiDataGridColumn[];
+  /**
+   * The currently visible rows are passed to your data grid renderer so that your
+   * custom grid can automatically adjust to sorting and pagination.
+   *
+   * You will need  to manually slice your data with `startRow` and `endRow` in order to simulate pagination.
+   */
+  visibleRowData: {
+    startRow: number;
+    endRow: number;
+    visibleRowCount: number;
+  };
+  /**
+   * Callback function to set custom props & attributes on the custom grid body's wrapping `div` element.
+   * It's best to wrap calls to `setCustomGridBodyProps` in a `useEffect` hook
+   */
+  setCustomGridBodyProps: (props: EuiDataGridSetCustomGridBodyProps) => void;
+}
+export type EuiDataGridSetCustomGridBodyProps = CommonProps &
+  HTMLAttributes<HTMLDivElement> & {
+    ref?: MutableRefObject<HTMLDivElement> | Ref<HTMLDivElement>;
+  };
+
 /**
  * Props shared between renderCellValue and renderCellPopover
  */
@@ -534,7 +589,7 @@ export interface EuiDataGridCellProps {
   getRowHeight?: (rowIndex: number) => number;
   style?: React.CSSProperties;
   rowHeightsOptions?: EuiDataGridRowHeightsOptions;
-  rowHeightUtils?: RowHeightUtils;
+  rowHeightUtils?: RowHeightUtilsType;
   rowManager?: EuiDataGridRowManager;
   pagination?: EuiDataGridPaginationProps;
 }
@@ -551,6 +606,7 @@ export type EuiDataGridCellValueProps = Omit<
   EuiDataGridCellProps,
   'width' | 'interactiveCellId' | 'popoverContext' | 'rowManager'
 >;
+
 export interface EuiDataGridControlColumn {
   /**
    * Used as the React `key` when rendering content
@@ -581,6 +637,9 @@ export interface EuiDataGridControlColumn {
    */
   footerCellProps?: HTMLAttributes<HTMLDivElement>;
 }
+// The empty control column array fallbacks need to be cached, or
+// they'll cause rerendering/remount issues in memoized dependencies
+export const emptyControlColumns: EuiDataGridControlColumn[] = [];
 
 export interface EuiDataGridColumn {
   /**
diff --git a/src/components/datagrid/utils/__mocks__/row_heights.ts b/src/components/datagrid/utils/__mocks__/row_heights.ts
index 79d93d2af4b..7b19672dcf5 100644
--- a/src/components/datagrid/utils/__mocks__/row_heights.ts
+++ b/src/components/datagrid/utils/__mocks__/row_heights.ts
@@ -6,41 +6,42 @@
  * Side Public License, v 1.
  */
 
-import { RowHeightUtils as ActualRowHeightUtils } from '../row_heights';
+import {
+  RowHeightUtilsType,
+  RowHeightUtils as ActualRowHeightUtils,
+  RowHeightVirtualizationUtils as ActualRowHeightVirtualizationUtils,
+} from '../row_heights';
 
+// Note: for test expedience purposes, this mock always returns the
+// full virtualization height utils w/ all APIs
 type RowHeightUtilsPublicAPI = Pick<
-  ActualRowHeightUtils,
-  keyof ActualRowHeightUtils
+  ActualRowHeightVirtualizationUtils,
+  keyof ActualRowHeightVirtualizationUtils
 >;
 
-export const RowHeightUtils = jest
-  .fn<
-    ActualRowHeightUtils,
-    ConstructorParameters<typeof ActualRowHeightUtils>
-  >()
-  .mockImplementation((...args) => {
-    const rowHeightUtils = new ActualRowHeightUtils(...args);
+export const RowHeightUtils = jest.fn().mockImplementation(() => {
+  const rowHeightUtils = new ActualRowHeightUtils();
 
-    const rowHeightUtilsMock: RowHeightUtilsPublicAPI = {
-      cacheStyles: jest.fn(),
-      getStylesForCell: jest.fn(() => ({
-        wordWrap: 'break-word',
-        wordBreak: 'break-word',
-        flexGrow: 1,
-      })),
-      isAutoHeight: jest.fn(() => false),
-      setRowHeight: jest.fn(),
-      pruneHiddenColumnHeights: jest.fn(),
-      getRowHeight: jest.fn(() => 32),
-      getRowHeightOption: jest.fn(rowHeightUtils.getRowHeightOption),
-      getCalculatedHeight: jest.fn(rowHeightUtils.getCalculatedHeight),
-      getLineCount: jest.fn(rowHeightUtils.getLineCount),
-      calculateHeightForLineCount: jest.fn(() => 50),
-      isRowHeightOverride: jest.fn(rowHeightUtils.isRowHeightOverride),
-      resetRow: jest.fn(),
-      resetGrid: jest.fn(),
-      compensateForLayoutShift: jest.fn(),
-    };
+  const rowHeightUtilsMock: RowHeightUtilsPublicAPI = {
+    cacheStyles: jest.fn(),
+    getStylesForCell: jest.fn(() => ({
+      wordWrap: 'break-word',
+      wordBreak: 'break-word',
+      flexGrow: 1,
+    })),
+    isAutoHeight: jest.fn(() => false),
+    setRowHeight: jest.fn(),
+    pruneHiddenColumnHeights: jest.fn(),
+    getRowHeight: jest.fn(() => 32),
+    getRowHeightOption: jest.fn(rowHeightUtils.getRowHeightOption),
+    getCalculatedHeight: jest.fn(rowHeightUtils.getCalculatedHeight),
+    getLineCount: jest.fn(rowHeightUtils.getLineCount),
+    calculateHeightForLineCount: jest.fn(() => 50),
+    isRowHeightOverride: jest.fn(rowHeightUtils.isRowHeightOverride),
+    resetRow: jest.fn(),
+    resetGrid: jest.fn(),
+    compensateForLayoutShift: jest.fn(),
+  };
 
-    return (rowHeightUtilsMock as any) as ActualRowHeightUtils;
-  });
+  return (rowHeightUtilsMock as unknown) as RowHeightUtilsType;
+});
diff --git a/src/components/datagrid/utils/grid_height_width.ts b/src/components/datagrid/utils/grid_height_width.ts
index db87f45e5a7..5fdc73a3db5 100644
--- a/src/components/datagrid/utils/grid_height_width.ts
+++ b/src/components/datagrid/utils/grid_height_width.ts
@@ -11,7 +11,7 @@ import { IS_JEST_ENVIRONMENT } from '../../../utils';
 import { useUpdateEffect, useForceRender } from '../../../services';
 import { useResizeObserver } from '../../observer/resize_observer';
 import { EuiDataGridRowHeightsOptions } from '../data_grid_types';
-import { RowHeightUtils } from './row_heights';
+import { RowHeightUtilsType } from './row_heights';
 import { DataGridSortingContext } from './sorting';
 
 export const useFinalGridDimensions = ({
@@ -87,7 +87,7 @@ export const useUnconstrainedHeight = ({
   scrollBarHeight,
   innerGridRef,
 }: {
-  rowHeightUtils: RowHeightUtils;
+  rowHeightUtils: RowHeightUtilsType;
   startRow: number;
   endRow: number;
   rowHeightsOptions?: EuiDataGridRowHeightsOptions;
diff --git a/src/components/datagrid/utils/row_heights.test.ts b/src/components/datagrid/utils/row_heights.test.ts
index 34f0d259cbf..bbfd2becc2c 100644
--- a/src/components/datagrid/utils/row_heights.test.ts
+++ b/src/components/datagrid/utils/row_heights.test.ts
@@ -8,34 +8,18 @@
 
 import type { MutableRefObject } from 'react';
 import { act } from 'react-dom/test-utils';
-import { testCustomHook } from '../../../test/internal';
+import { renderHook } from '@testing-library/react-hooks';
 import { startingStyles } from '../controls';
 import type { ImperativeGridApi } from '../data_grid_types';
 import {
   cellPaddingsMap,
   RowHeightUtils,
+  RowHeightVirtualizationUtils,
   useRowHeightUtils,
 } from './row_heights';
 
 describe('RowHeightUtils', () => {
-  const gridRef: MutableRefObject<ImperativeGridApi | null> = {
-    current: {
-      resetAfterIndices: jest.fn(),
-      resetAfterColumnIndex: jest.fn(),
-      resetAfterRowIndex: jest.fn(),
-      scrollTo: jest.fn(),
-      scrollToItem: jest.fn(),
-    },
-  };
-  const outerGridElementRef = { current: null };
-  const gridItemsRenderedRef = { current: null };
-  const rerenderGridBodyRef = { current: jest.fn() };
-  const rowHeightUtils = new RowHeightUtils(
-    gridRef,
-    outerGridElementRef,
-    gridItemsRenderedRef,
-    rerenderGridBodyRef
-  );
+  const rowHeightUtils = new RowHeightUtils();
 
   beforeEach(() => {
     jest.useFakeTimers();
@@ -313,258 +297,313 @@ describe('RowHeightUtils', () => {
         ).toEqual(false);
       });
     });
+  });
 
-    describe('row height cache', () => {
-      let resetRowSpy: jest.SpyInstance;
+  describe('row height cache', () => {
+    describe('setRowHeight', () => {
+      it('setRowHeight', () => {
+        rowHeightUtils.setRowHeight(5, 'a', 50, 0);
+        rowHeightUtils.setRowHeight(5, 'b', 34, 0);
+        rowHeightUtils.setRowHeight(5, 'c', 100, 0);
+        rowHeightUtils.setRowHeight(5, 'd', undefined, 0);
 
-      beforeEach(() => {
-        resetRowSpy = jest.spyOn(rowHeightUtils, 'resetRow');
+        // @ts-ignore this var is private, but we're inspecting it for the sake of the unit test
+        expect(rowHeightUtils.heightsCache.get(5)?.get('a')).toEqual(62); // @ts-ignore-line
+        expect(rowHeightUtils.heightsCache.get(5)?.get('b')).toEqual(46); // @ts-ignore-line
+        expect(rowHeightUtils.heightsCache.get(5)?.get('c')).toEqual(112); // @ts-ignore-line
+        expect(rowHeightUtils.heightsCache.get(5)?.get('d')).toEqual(46); // Falls back default row height
+        // NB: The cached heights have padding added to them
       });
+    });
 
-      afterEach(() => {
-        resetRowSpy.mockRestore();
+    describe('getRowHeight', () => {
+      it('returns the highest height value stored for the specificed row', () => {
+        expect(rowHeightUtils.getRowHeight(5)).toEqual(112); // 100 + cell padding
       });
 
-      describe('setRowHeight', () => {
-        it('setRowHeight', () => {
-          rowHeightUtils.setRowHeight(5, 'a', 50, 0);
-          rowHeightUtils.setRowHeight(5, 'b', 34, 0);
-          rowHeightUtils.setRowHeight(5, 'c', 100, 0);
-          rowHeightUtils.setRowHeight(5, 'd', undefined, 0);
+      it('returns 0 if the passed row does not have any existing heights', () => {
+        expect(rowHeightUtils.getRowHeight(99)).toEqual(0);
+      });
+    });
 
-          // @ts-ignore this var is private, but we're inspecting it for the sake of the unit test
-          expect(rowHeightUtils.heightsCache.get(5)?.get('a')).toEqual(62); // @ts-ignore-line
-          expect(rowHeightUtils.heightsCache.get(5)?.get('b')).toEqual(46); // @ts-ignore-line
-          expect(rowHeightUtils.heightsCache.get(5)?.get('c')).toEqual(112); // @ts-ignore-line
-          expect(rowHeightUtils.heightsCache.get(5)?.get('d')).toEqual(46); // Falls back default row height
-          // NB: The cached heights have padding added to them
+    describe('pruneHiddenColumnHeights', () => {
+      it('checks each row height map and deletes column IDs that are no longer visible', () => {
+        const didModify = rowHeightUtils.pruneHiddenColumnHeights([
+          { id: 'a' },
+          { id: 'b' },
+        ]);
+        expect(rowHeightUtils.getRowHeight(5)).toEqual(62);
+        expect(didModify).toEqual(true);
+      });
 
-          expect(resetRowSpy).toHaveBeenCalledTimes(4);
-        });
+      it('returns false/does nothing if all cached columns IDs are currently visible', () => {
+        const didModify = rowHeightUtils.pruneHiddenColumnHeights([
+          { id: 'a' },
+          { id: 'b' },
+        ]);
+        expect(didModify).toEqual(false);
+      });
 
-        it('does not continue if the passed height is the same as the cached height', () => {
-          rowHeightUtils.setRowHeight(5, 'a', 50, 0);
+      test('extra getRowHeight branch coverage', () => {
+        rowHeightUtils.pruneHiddenColumnHeights([]);
+        expect(rowHeightUtils.getRowHeight(5)).toEqual(0);
+      });
+    });
+  });
+});
 
-          expect(resetRowSpy).not.toHaveBeenCalled();
-        });
+describe('RowHeightVirtualizationUtils', () => {
+  const gridRef: MutableRefObject<ImperativeGridApi | null> = {
+    current: {
+      resetAfterIndices: jest.fn(),
+      resetAfterColumnIndex: jest.fn(),
+      resetAfterRowIndex: jest.fn(),
+      scrollTo: jest.fn(),
+      scrollToItem: jest.fn(),
+    },
+  };
+  const outerGridElementRef = { current: null };
+  const gridItemsRenderedRef = { current: null };
+  const rerenderGridBodyRef = { current: jest.fn() };
+  const rowHeightUtils = new RowHeightVirtualizationUtils(
+    gridRef,
+    outerGridElementRef,
+    gridItemsRenderedRef,
+    rerenderGridBodyRef
+  );
 
-        it('calls rerenderGridBody', () => {
-          expect(rerenderGridBodyRef.current).toHaveBeenCalledTimes(0);
-          rowHeightUtils.setRowHeight(1, 'a', 34, 1);
-          expect(rerenderGridBodyRef.current).toHaveBeenCalledTimes(1);
-        });
-      });
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
 
-      describe('getRowHeight', () => {
-        it('returns the highest height value stored for the specificed row', () => {
-          expect(rowHeightUtils.getRowHeight(5)).toEqual(112); // 100 + cell padding
-        });
+  afterEach(() => {
+    jest.useRealTimers();
+    jest.resetAllMocks();
+  });
 
-        it('returns 0 if the passed row does not have any existing heights', () => {
-          expect(rowHeightUtils.getRowHeight(99)).toEqual(0);
-        });
+  describe('row resetting', () => {
+    let resetRowSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      resetRowSpy = jest.spyOn(rowHeightUtils, 'resetRow');
+    });
+
+    afterEach(() => {
+      resetRowSpy.mockRestore();
+    });
+
+    describe('setRowHeight', () => {
+      it('calls resetRow', () => {
+        rowHeightUtils.setRowHeight(5, 'a', 50, 0);
+        expect(resetRowSpy).toHaveBeenCalledTimes(1);
       });
 
-      describe('pruneHiddenColumnHeights', () => {
-        it('checks each row height map and deletes column IDs that are no longer visible', () => {
-          rowHeightUtils.pruneHiddenColumnHeights([{ id: 'a' }, { id: 'b' }]);
-          expect(rowHeightUtils.getRowHeight(5)).toEqual(62);
-          expect(resetRowSpy).toHaveBeenCalled();
-        });
+      it('does not continue if the passed height is the same as the cached height', () => {
+        rowHeightUtils.setRowHeight(5, 'a', 50, 0);
+        expect(resetRowSpy).not.toHaveBeenCalled();
+      });
 
-        it('does nothing if all cached columns IDs are currently visible', () => {
-          rowHeightUtils.pruneHiddenColumnHeights([{ id: 'a' }, { id: 'b' }]);
-          expect(resetRowSpy).not.toHaveBeenCalled();
-        });
+      it('calls rerenderGridBody', () => {
+        expect(rerenderGridBodyRef.current).toHaveBeenCalledTimes(0);
+        rowHeightUtils.setRowHeight(1, 'a', 34, 1);
+        expect(rerenderGridBodyRef.current).toHaveBeenCalledTimes(1);
+      });
+    });
 
-        test('extra getRowHeight branch coverage', () => {
-          rowHeightUtils.pruneHiddenColumnHeights([]);
-          expect(rowHeightUtils.getRowHeight(5)).toEqual(0);
-        });
+    describe('pruneHiddenColumnHeights', () => {
+      it('does nothing if all cached columns IDs are currently visible', () => {
+        rowHeightUtils.pruneHiddenColumnHeights([{ id: 'a' }]);
+        expect(resetRowSpy).not.toHaveBeenCalled();
+      });
+
+      it('checks each row height map and deletes column IDs that are no longer visible', () => {
+        rowHeightUtils.pruneHiddenColumnHeights([{ id: 'b' }]);
+        expect(resetRowSpy).toHaveBeenCalled();
       });
     });
+  });
 
-    describe('grid resetting', () => {
-      describe('resetRow', () => {
-        let resetGridSpy: jest.SpyInstance;
+  describe('grid resetting', () => {
+    describe('resetRow', () => {
+      let resetGridSpy: jest.SpyInstance;
 
-        beforeEach(() => {
-          resetGridSpy = jest.spyOn(rowHeightUtils, 'resetGrid');
-        });
+      beforeEach(() => {
+        resetGridSpy = jest.spyOn(rowHeightUtils, 'resetGrid');
+      });
 
-        afterEach(() => {
-          resetGridSpy.mockRestore();
-        });
+      afterEach(() => {
+        resetGridSpy.mockRestore();
+      });
 
-        it('sets this.lastUpdatedRow and resets the grid', () => {
-          rowHeightUtils.resetRow(0);
-          // @ts-ignore this var is private, but we're inspecting it for the sake of the unit test
-          expect(rowHeightUtils.lastUpdatedRow).toEqual(0);
+      it('sets this.lastUpdatedRow and resets the grid', () => {
+        rowHeightUtils.resetRow(0);
+        // @ts-ignore this var is private, but we're inspecting it for the sake of the unit test
+        expect(rowHeightUtils.lastUpdatedRow).toEqual(0);
 
-          jest.runAllTimers();
+        jest.runAllTimers();
 
-          expect(resetGridSpy).toHaveBeenCalled();
-          // @ts-ignore this var is private, but we're inspecting it for the sake of the unit test
-          expect(rowHeightUtils.lastUpdatedRow).toEqual(Infinity);
-        });
+        expect(resetGridSpy).toHaveBeenCalled();
+        // @ts-ignore this var is private, but we're inspecting it for the sake of the unit test
+        expect(rowHeightUtils.lastUpdatedRow).toEqual(Infinity);
       });
+    });
 
-      describe('resetGrid', () => {
-        it('invokes grid.resetAfterRowIndex with the last visible row', () => {
-          rowHeightUtils.setRowHeight(99, 'a', 34, 99);
+    describe('resetGrid', () => {
+      it('invokes grid.resetAfterRowIndex with the last visible row', () => {
+        rowHeightUtils.setRowHeight(99, 'a', 34, 99);
 
-          jest.runAllTimers();
+        jest.runAllTimers();
 
-          expect(gridRef.current?.resetAfterRowIndex).toHaveBeenCalledWith(99);
-        });
+        expect(gridRef.current?.resetAfterRowIndex).toHaveBeenCalledWith(99);
+      });
 
-        it('invokes resetAfterRowIndex only once with the smallest cached row index', () => {
-          rowHeightUtils.setRowHeight(97, 'a', 35, 97);
-          rowHeightUtils.setRowHeight(99, 'a', 36, 99);
+      it('invokes resetAfterRowIndex only once with the smallest cached row index', () => {
+        rowHeightUtils.setRowHeight(97, 'a', 35, 97);
+        rowHeightUtils.setRowHeight(99, 'a', 36, 99);
 
-          jest.runAllTimers();
+        jest.runAllTimers();
 
-          expect(gridRef.current?.resetAfterRowIndex).toHaveBeenCalledTimes(1);
-          expect(gridRef.current?.resetAfterRowIndex).toHaveBeenCalledWith(97);
-        });
+        expect(gridRef.current?.resetAfterRowIndex).toHaveBeenCalledTimes(1);
+        expect(gridRef.current?.resetAfterRowIndex).toHaveBeenCalledWith(97);
       });
     });
+  });
 
-    describe('layout shift compensation', () => {
-      it('can compensate vertical shifts of the start anchor row', () => {
-        const rowHeightUtils = new RowHeightUtils(
-          gridRef,
-          {
-            current: {
-              scrollTop: 100,
-            } as any,
-          },
-          {
-            current: {
-              overscanRowStartIndex: 1,
-              overscanRowStopIndex: 12,
-              overscanColumnStartIndex: 0,
-              overscanColumnStopIndex: 1,
-              visibleRowStartIndex: 2,
-              visibleRowStopIndex: 11,
-              visibleColumnStartIndex: 0,
-              visibleColumnStopIndex: 1,
-            },
+  describe('layout shift compensation', () => {
+    it('can compensate vertical shifts of the start anchor row', () => {
+      const rowHeightUtils = new RowHeightVirtualizationUtils(
+        gridRef,
+        {
+          current: {
+            scrollTop: 100,
+          } as any,
+        },
+        {
+          current: {
+            overscanRowStartIndex: 1,
+            overscanRowStopIndex: 12,
+            overscanColumnStartIndex: 0,
+            overscanColumnStopIndex: 1,
+            visibleRowStartIndex: 2,
+            visibleRowStopIndex: 11,
+            visibleColumnStartIndex: 0,
+            visibleColumnStopIndex: 1,
           },
-          rerenderGridBodyRef
-        );
+        },
+        rerenderGridBodyRef
+      );
 
-        // the center row shifted by 10 pixels
-        rowHeightUtils.compensateForLayoutShift(4, 10, 'start');
+      // the center row shifted by 10 pixels
+      rowHeightUtils.compensateForLayoutShift(4, 10, 'start');
 
-        // no scrolling should have taken place
-        expect(gridRef.current?.scrollTo).toHaveBeenCalledTimes(0);
+      // no scrolling should have taken place
+      expect(gridRef.current?.scrollTo).toHaveBeenCalledTimes(0);
 
-        // the anchor row shifted by 23 pixels
-        rowHeightUtils.compensateForLayoutShift(2, 23, 'start');
+      // the anchor row shifted by 23 pixels
+      rowHeightUtils.compensateForLayoutShift(2, 23, 'start');
 
-        // the grid should have scrolled accordingly
-        expect(gridRef.current?.scrollTo).toHaveBeenCalledWith(
-          expect.objectContaining({
-            scrollTop: 123,
-          })
-        );
-      });
+      // the grid should have scrolled accordingly
+      expect(gridRef.current?.scrollTo).toHaveBeenCalledWith(
+        expect.objectContaining({
+          scrollTop: 123,
+        })
+      );
+    });
 
-      it('can compensate vertical shifts of the center anchor row', () => {
-        const rowHeightUtils = new RowHeightUtils(
-          gridRef,
-          {
-            current: {
-              scrollTop: 100,
-            } as any,
-          },
-          {
-            current: {
-              overscanRowStartIndex: 1,
-              overscanRowStopIndex: 12,
-              overscanColumnStartIndex: 0,
-              overscanColumnStopIndex: 1,
-              visibleRowStartIndex: 2,
-              visibleRowStopIndex: 11,
-              visibleColumnStartIndex: 0,
-              visibleColumnStopIndex: 1,
-            },
+    it('can compensate vertical shifts of the center anchor row', () => {
+      const rowHeightUtils = new RowHeightVirtualizationUtils(
+        gridRef,
+        {
+          current: {
+            scrollTop: 100,
+          } as any,
+        },
+        {
+          current: {
+            overscanRowStartIndex: 1,
+            overscanRowStopIndex: 12,
+            overscanColumnStartIndex: 0,
+            overscanColumnStopIndex: 1,
+            visibleRowStartIndex: 2,
+            visibleRowStopIndex: 11,
+            visibleColumnStartIndex: 0,
+            visibleColumnStopIndex: 1,
           },
-          rerenderGridBodyRef
-        );
+        },
+        rerenderGridBodyRef
+      );
 
-        // the topmost visible row shifted by 10 pixels
-        rowHeightUtils.compensateForLayoutShift(2, 10, 'center');
+      // the topmost visible row shifted by 10 pixels
+      rowHeightUtils.compensateForLayoutShift(2, 10, 'center');
 
-        // no scrolling should have taken place
-        expect(gridRef.current?.scrollTo).toHaveBeenCalledTimes(0);
+      // no scrolling should have taken place
+      expect(gridRef.current?.scrollTo).toHaveBeenCalledTimes(0);
 
-        // the anchor row shifted by 23 pixels
-        rowHeightUtils.compensateForLayoutShift(4, 23, 'center');
+      // the anchor row shifted by 23 pixels
+      rowHeightUtils.compensateForLayoutShift(4, 23, 'center');
 
-        // the grid should have scrolled accordingly
-        expect(gridRef.current?.scrollTo).toHaveBeenCalledWith(
-          expect.objectContaining({
-            scrollTop: 123,
-          })
-        );
-      });
+      // the grid should have scrolled accordingly
+      expect(gridRef.current?.scrollTo).toHaveBeenCalledWith(
+        expect.objectContaining({
+          scrollTop: 123,
+        })
+      );
+    });
 
-      it("doesn't compensate vertical shifts when no anchor row is specified", () => {
-        const rowHeightUtils = new RowHeightUtils(
-          gridRef,
-          {
-            current: {
-              scrollTop: 100,
-            } as any,
-          },
-          {
-            current: {
-              overscanRowStartIndex: 1,
-              overscanRowStopIndex: 12,
-              overscanColumnStartIndex: 0,
-              overscanColumnStopIndex: 1,
-              visibleRowStartIndex: 2,
-              visibleRowStopIndex: 11,
-              visibleColumnStartIndex: 0,
-              visibleColumnStopIndex: 1,
-            },
+    it("doesn't compensate vertical shifts when no anchor row is specified", () => {
+      const rowHeightUtils = new RowHeightVirtualizationUtils(
+        gridRef,
+        {
+          current: {
+            scrollTop: 100,
+          } as any,
+        },
+        {
+          current: {
+            overscanRowStartIndex: 1,
+            overscanRowStopIndex: 12,
+            overscanColumnStartIndex: 0,
+            overscanColumnStopIndex: 1,
+            visibleRowStartIndex: 2,
+            visibleRowStopIndex: 11,
+            visibleColumnStartIndex: 0,
+            visibleColumnStopIndex: 1,
           },
-          rerenderGridBodyRef
-        );
+        },
+        rerenderGridBodyRef
+      );
 
-        // the topmost visible row shifted by 23 pixels, but no anchor has been specified
-        rowHeightUtils.compensateForLayoutShift(2, 23, undefined);
+      // the topmost visible row shifted by 23 pixels, but no anchor has been specified
+      rowHeightUtils.compensateForLayoutShift(2, 23, undefined);
 
-        // no scrolling should have taken place
-        expect(gridRef.current?.scrollTo).toHaveBeenCalledTimes(0);
-      });
+      // no scrolling should have taken place
+      expect(gridRef.current?.scrollTo).toHaveBeenCalledTimes(0);
     });
   });
 });
 
 describe('useRowHeightUtils', () => {
-  const gridRef: MutableRefObject<ImperativeGridApi | null> = {
-    current: {
-      resetAfterIndices: jest.fn(),
-      resetAfterColumnIndex: jest.fn(),
-      resetAfterRowIndex: jest.fn(),
-      scrollTo: jest.fn(),
-      scrollToItem: jest.fn(),
-    },
-  };
-  const outerGridElementRef = { current: null };
-  const gridItemsRenderedRef = { current: null };
-
   const mockArgs = {
-    gridRef,
-    outerGridElementRef,
-    gridItemsRenderedRef,
     gridStyles: startingStyles,
     columns: [{ id: 'A' }, { id: 'B' }],
     rowHeightOptions: undefined,
   };
+  const mockVirtualizationArgs = {
+    ...mockArgs,
+    virtualization: {
+      gridRef: {
+        current: {
+          resetAfterIndices: jest.fn(),
+          resetAfterColumnIndex: jest.fn(),
+          resetAfterRowIndex: jest.fn(),
+          scrollTo: jest.fn(),
+          scrollToItem: jest.fn(),
+        },
+      } as MutableRefObject<ImperativeGridApi | null>,
+      outerGridElementRef: { current: null },
+      gridItemsRenderedRef: { current: null },
+    },
+  };
 
   let requestAnimationFrameSpy: jest.SpyInstance;
 
@@ -579,52 +618,63 @@ describe('useRowHeightUtils', () => {
   });
 
   it('instantiates and returns an instance of RowHeightUtils', () => {
-    const { return: rowHeightUtils } = testCustomHook<RowHeightUtils>(() =>
-      useRowHeightUtils(mockArgs)
-    );
-    expect(rowHeightUtils).toBeInstanceOf(RowHeightUtils);
+    const { result } = renderHook(useRowHeightUtils, {
+      initialProps: mockArgs,
+    });
+    expect(result.current).toBeInstanceOf(RowHeightUtils);
+  });
+
+  it('instantiates and returns an instance of RowHeightVirtualizationUtils if a `virtualization` obj is passed', () => {
+    const { result } = renderHook(useRowHeightUtils, {
+      initialProps: mockVirtualizationArgs,
+    });
+    expect(result.current).toBeInstanceOf(RowHeightVirtualizationUtils);
   });
 
   it('forces a rerender every time rowHeightsOptions changes', () => {
-    const { updateHookArgs } = testCustomHook<RowHeightUtils>(
-      useRowHeightUtils,
-      mockArgs
-    );
+    const { rerender } = renderHook(useRowHeightUtils, {
+      initialProps: mockArgs,
+    });
     expect(requestAnimationFrameSpy).toHaveBeenCalledTimes(1);
 
-    updateHookArgs({ rowHeightsOptions: { defaultHeight: 300 } });
+    rerender({ ...mockArgs, rowHeightsOptions: { defaultHeight: 300 } });
     expect(requestAnimationFrameSpy).toHaveBeenCalledTimes(2);
 
-    updateHookArgs({
+    rerender({
+      ...mockArgs,
       rowHeightsOptions: { defaultHeight: 300, rowHeights: { 0: 200 } },
     });
     expect(requestAnimationFrameSpy).toHaveBeenCalledTimes(3);
   });
 
   it('updates internal cached styles whenever gridStyle.cellPadding changes', () => {
-    const { return: rowHeightUtils, updateHookArgs } = testCustomHook<
-      RowHeightUtils
-    >(useRowHeightUtils, mockArgs);
+    const { result, rerender } = renderHook(useRowHeightUtils, {
+      initialProps: mockArgs,
+    });
+
+    rerender({
+      ...mockArgs,
+      gridStyles: { ...startingStyles, cellPadding: 's' },
+    });
 
-    updateHookArgs({ gridStyles: { ...startingStyles, cellPadding: 's' } });
     // @ts-ignore - intentionally inspecting private var for test
-    expect(rowHeightUtils.styles).toEqual({
+    expect(result.current.styles).toEqual({
       paddingTop: 4,
       paddingBottom: 4,
     });
   });
 
   it('prunes columns from the row heights cache if a column is hidden', () => {
-    const { return: rowHeightUtils, updateHookArgs } = testCustomHook<
-      RowHeightUtils
-    >(useRowHeightUtils, mockArgs);
+    const { result, rerender } = renderHook(useRowHeightUtils, {
+      initialProps: mockArgs,
+    });
 
     act(() => {
-      rowHeightUtils.setRowHeight(0, 'A', 30, 0);
-      rowHeightUtils.setRowHeight(0, 'B', 50, 0);
+      result.current.setRowHeight(0, 'A', 30, 0);
+      result.current.setRowHeight(0, 'B', 50, 0);
     });
     // @ts-ignore - intentionally inspecting private var for test
-    expect(rowHeightUtils.heightsCache).toMatchInlineSnapshot(`
+    expect(result.current.heightsCache).toMatchInlineSnapshot(`
       Map {
         0 => Map {
           "A" => 42,
@@ -633,10 +683,10 @@ describe('useRowHeightUtils', () => {
       }
     `);
 
-    updateHookArgs({ columns: [{ id: 'A' }] }); // Hiding column B
+    rerender({ ...mockArgs, columns: [{ id: 'A' }] }); // Hiding column B
 
     // @ts-ignore - intentionally inspecting private var for test
-    expect(rowHeightUtils.heightsCache).toMatchInlineSnapshot(`
+    expect(result.current.heightsCache).toMatchInlineSnapshot(`
       Map {
         0 => Map {
           "A" => 42,
diff --git a/src/components/datagrid/utils/row_heights.ts b/src/components/datagrid/utils/row_heights.ts
index e4b3eb181e1..8a4271cf077 100644
--- a/src/components/datagrid/utils/row_heights.ts
+++ b/src/components/datagrid/utils/row_heights.ts
@@ -39,14 +39,9 @@ export const cellPaddingsMap: Record<EuiDataGridStyleCellPaddings, number> = {
 export const AUTO_HEIGHT = 'auto';
 export const DEFAULT_ROW_HEIGHT = 34;
 
-export class RowHeightUtils {
-  constructor(
-    private gridRef: MutableRefObject<ImperativeGridApi | null>,
-    private outerGridElementRef: MutableRefObject<HTMLDivElement | null>,
-    private gridItemsRenderedRef: MutableRefObject<GridOnItemsRenderedProps | null>,
-    private rerenderGridBodyRef: MutableRefObject<(() => void) | null>
-  ) {}
+export type RowHeightUtilsType = RowHeightUtils | RowHeightVirtualizationUtils;
 
+export class RowHeightUtils {
   getRowHeightOption(
     rowIndex: number,
     rowHeightsOptions?: EuiDataGridRowHeightsOptions
@@ -165,10 +160,6 @@ export class RowHeightUtils {
    * Auto height utils
    */
 
-  private heightsCache = new Map<number, Map<string, number>>();
-  private timerId?: number;
-  private lastUpdatedRow: number = Infinity;
-
   isAutoHeight(
     rowIndex: number,
     rowHeightsOptions?: EuiDataGridRowHeightsOptions
@@ -181,6 +172,13 @@ export class RowHeightUtils {
     return false;
   }
 
+  /**
+   * Heights cache utils
+   * This cache is primarily used by auto heights & secondarily used by lineCount row overrides
+   */
+
+  private heightsCache = new Map<number, Map<string, number>>();
+
   getRowHeight(rowIndex: number) {
     const rowHeights = this.heightsCache.get(rowIndex);
     if (rowHeights == null) return 0;
@@ -195,7 +193,7 @@ export class RowHeightUtils {
     rowIndex: number,
     colId: string,
     height: number = DEFAULT_ROW_HEIGHT,
-    visibleRowIndex: number
+    _visibleRowIndex: number // Used by virtualization utils - mostly just here for typing
   ) {
     const rowHeights =
       this.heightsCache.get(rowIndex) || new Map<string, number>();
@@ -204,16 +202,12 @@ export class RowHeightUtils {
     );
 
     if (rowHeights.get(colId) === adaptedHeight) {
-      return;
+      return false;
+    } else {
+      rowHeights.set(colId, adaptedHeight);
+      this.heightsCache.set(rowIndex, rowHeights);
+      return true;
     }
-
-    rowHeights.set(colId, adaptedHeight);
-    this.heightsCache.set(rowIndex, rowHeights);
-    this.resetRow(visibleRowIndex);
-
-    // When an auto row height is updated, force a re-render
-    // of the grid body to update the unconstrained height
-    this.rerenderGridBodyRef.current?.();
   }
 
   pruneHiddenColumnHeights(visibleColumns: EuiDataGridColumn[]) {
@@ -230,9 +224,58 @@ export class RowHeightUtils {
       });
     });
 
+    return didModify;
+  }
+}
+
+/**
+ * Row height utils with virtualization library-specific APIs
+ */
+export class RowHeightVirtualizationUtils extends RowHeightUtils {
+  constructor(
+    private gridRef: MutableRefObject<ImperativeGridApi | null>,
+    private outerGridElementRef: MutableRefObject<HTMLDivElement | null>,
+    private gridItemsRenderedRef: MutableRefObject<GridOnItemsRenderedProps | null>,
+    private rerenderGridBodyRef: MutableRefObject<(() => void) | null>
+  ) {
+    super();
+  }
+
+  /**
+   * Virtualization workarounds for auto height rows
+   */
+
+  private timerId?: number;
+  private lastUpdatedRow: number = Infinity;
+
+  setRowHeight(
+    rowIndex: number,
+    colId: string,
+    height: number = DEFAULT_ROW_HEIGHT,
+    visibleRowIndex: number
+  ) {
+    const didModify = super.setRowHeight(
+      rowIndex,
+      colId,
+      height,
+      visibleRowIndex
+    );
+
+    // When an auto row height is updated, force a re-render
+    // of the grid body to update the unconstrained height
+    if (didModify) {
+      this.rerenderGridBodyRef.current?.();
+      this.resetRow(visibleRowIndex);
+    }
+    return didModify; // Mostly just here for typing
+  }
+
+  pruneHiddenColumnHeights(visibleColumns: EuiDataGridColumn[]) {
+    const didModify = super.pruneHiddenColumnHeights(visibleColumns);
     if (didModify) {
       this.resetRow(0);
     }
+    return didModify; // Mostly just here for typing
   }
 
   resetRow(visibleRowIndex: number) {
@@ -298,30 +341,40 @@ export class RowHeightUtils {
  * and setting up various row-height-related side effects
  */
 export const useRowHeightUtils = ({
-  gridRef,
-  outerGridElementRef,
-  gridItemsRenderedRef,
+  virtualization,
+  rowHeightsOptions,
   gridStyles,
   columns,
-  rowHeightsOptions,
 }: {
-  gridRef: MutableRefObject<ImperativeGridApi | null>;
-  outerGridElementRef: MutableRefObject<HTMLDivElement | null>;
-  gridItemsRenderedRef: MutableRefObject<GridOnItemsRenderedProps | null>;
+  virtualization?:
+    | false
+    | {
+        gridRef: MutableRefObject<ImperativeGridApi | null>;
+        outerGridElementRef: MutableRefObject<HTMLDivElement | null>;
+        gridItemsRenderedRef: MutableRefObject<GridOnItemsRenderedProps | null>;
+      };
+  rowHeightsOptions?: EuiDataGridRowHeightsOptions;
   gridStyles: EuiDataGridStyle;
   columns: EuiDataGridColumn[];
-  rowHeightsOptions?: EuiDataGridRowHeightsOptions;
 }) => {
   const forceRenderRef = useLatest(useForceRender());
-  const [rowHeightUtils] = useState(
-    () =>
-      new RowHeightUtils(
+  const [rowHeightUtils] = useState(() => {
+    if (virtualization) {
+      const {
+        gridRef,
+        outerGridElementRef,
+        gridItemsRenderedRef,
+      } = virtualization;
+      return new RowHeightVirtualizationUtils(
         gridRef,
         outerGridElementRef,
         gridItemsRenderedRef,
         forceRenderRef
-      )
-  );
+      );
+    } else {
+      return new RowHeightUtils();
+    }
+  });
 
   // Forces a rerender whenever the row heights change, as this can cause the
   // grid to change height/have scrollbars. Without this, grid rerendering is stale
@@ -360,7 +413,7 @@ export const useDefaultRowHeight = ({
   rowHeightUtils,
 }: {
   rowHeightsOptions?: EuiDataGridRowHeightsOptions;
-  rowHeightUtils: RowHeightUtils;
+  rowHeightUtils: RowHeightUtilsType;
 }) => {
   const { getCorrectRowIndex } = useContext(DataGridSortingContext);
 
diff --git a/upcoming_changelogs/6624.md b/upcoming_changelogs/6624.md
new file mode 100644
index 00000000000..628434a97da
--- /dev/null
+++ b/upcoming_changelogs/6624.md
@@ -0,0 +1 @@
+- Added new `renderCustomGridBody` escape hatch rendering prop to `EuiDataGrid`