diff --git a/src/components/datagrid/body/cell/data_grid_cell.tsx b/src/components/datagrid/body/cell/data_grid_cell.tsx
index 9e1fdcd32e3..e1ead508adf 100644
--- a/src/components/datagrid/body/cell/data_grid_cell.tsx
+++ b/src/components/datagrid/body/cell/data_grid_cell.tsx
@@ -47,7 +47,123 @@ import {
 import { DefaultCellPopover } from './data_grid_cell_popover';
 import { HandleInteractiveChildren } from './focus_utils';
 
-const Cell: React.FunctionComponent<{
+const EuiDataGridCellContent: FunctionComponent<
+  EuiDataGridCellValueProps & {
+    setCellProps: EuiDataGridCellValueElementProps['setCellProps'];
+    setCellContentsRef: EuiDataGridCell['setCellContentsRef'];
+    isExpanded: boolean;
+    isControlColumn: boolean;
+    isFocused: boolean;
+    ariaRowIndex: number;
+    rowHeight?: EuiDataGridRowHeightOption;
+    cellActions?: ReactNode;
+  }
+> = memo(
+  ({
+    renderCellValue,
+    renderCellContext,
+    column,
+    setCellContentsRef,
+    rowIndex,
+    colIndex,
+    ariaRowIndex,
+    rowHeight,
+    rowHeightUtils,
+    isControlColumn,
+    isFocused,
+    cellActions,
+    ...rest
+  }) => {
+    // React is more permissible than the TS types indicate
+    const CellElement =
+      renderCellValue as JSXElementConstructor<EuiDataGridCellValueElementProps>;
+
+    const cellHeightType =
+      rowHeightUtils?.getHeightType(rowHeight) || 'default';
+
+    const classes = classNames(
+      'euiDataGridRowCell__content',
+      `euiDataGridRowCell__content--${cellHeightType}Height`,
+      !isControlColumn && {
+        'eui-textBreakWord': cellHeightType !== 'default',
+        'eui-textTruncate': cellHeightType === 'default',
+      }
+    );
+
+    const mergedProps = useMemo(() => {
+      if (renderCellContext) {
+        return {
+          ...renderCellContext(),
+          ...rest,
+        };
+      } else {
+        return rest;
+      }
+    }, [rest, renderCellContext]);
+
+    let cellContent = (
+      <div
+        ref={setCellContentsRef}
+        data-datagrid-cellcontent
+        className={classes}
+      >
+        <CellElement
+          isDetails={false}
+          data-test-subj="cell-content"
+          rowIndex={rowIndex}
+          colIndex={colIndex}
+          schema={column?.schema || rest.columnType}
+          {...mergedProps}
+        />
+      </div>
+    );
+    if (cellHeightType === 'lineCount' && !isControlColumn) {
+      const lines = rowHeightUtils!.getLineCount(rowHeight)!;
+      cellContent = (
+        <EuiTextBlockTruncate lines={lines} cloneElement>
+          {cellContent}
+        </EuiTextBlockTruncate>
+      );
+    }
+
+    const screenReaderText = (
+      <EuiScreenReaderOnly>
+        <p hidden={!isFocused}>
+          {'- '}
+          <EuiI18n
+            token="euiDataGridCell.position"
+            default="{columnId}, column {col}, row {row}"
+            values={{
+              columnId: column?.displayAsText || rest.columnId,
+              col: colIndex + 1,
+              row: ariaRowIndex,
+            }}
+          />
+          {cellActions && (
+            <>
+              {'. '}
+              <EuiI18n
+                token="euiDataGridCell.expansionEnterPrompt"
+                default="Press the Enter key to expand this cell."
+              />
+            </>
+          )}
+        </p>
+      </EuiScreenReaderOnly>
+    );
+
+    return (
+      <>
+        {cellContent}
+        {screenReaderText}
+        {cellActions}
+      </>
+    );
+  }
+);
+EuiDataGridCellContent.displayName = 'EuiDataGridCellContent';
+
+export const Cell: React.FunctionComponent<{
   ariaRowIndex: number;
   isFocused: boolean;
   cellRef: React.MutableRefObject<HTMLDivElement | null>;
@@ -143,132 +259,7 @@ const Cell: React.FunctionComponent<{
     );
   }
 );
-
-const EuiDataGridCellContent: FunctionComponent<
-  EuiDataGridCellValueProps & {
-    setCellProps: EuiDataGridCellValueElementProps['setCellProps'];
-    setCellContentsRef: EuiDataGridCell['setCellContentsRef'];
-    isExpanded: boolean;
-    isControlColumn: boolean;
-    isFocused: boolean;
-    ariaRowIndex: number;
-    rowHeight?: EuiDataGridRowHeightOption;
-    cellActions?: ReactNode;
-  }
-> = memo(
-  ({
-    renderCellValue,
-    renderCellContext,
-    column,
-    setCellContentsRef,
-    rowIndex,
-    colIndex,
-    ariaRowIndex,
-    rowHeight,
-    rowHeightUtils,
-    isControlColumn,
-    isFocused,
-    cellActions,
-    ...rest
-  }) => {
-    // React is more permissible than the TS types indicate
-    const CellElement =
-      renderCellValue as JSXElementConstructor<EuiDataGridCellValueElementProps>;
-
-    const cellHeightType =
-      rowHeightUtils?.getHeightType(rowHeight) || 'default';
-
-    const classes = classNames(
-      'euiDataGridRowCell__content',
-      `euiDataGridRowCell__content--${cellHeightType}Height`,
-      !isControlColumn && {
-        'eui-textBreakWord': cellHeightType !== 'default',
-        'eui-textTruncate': cellHeightType === 'default',
-      }
-    );
-
-    const mergedProps = useMemo(() => {
-      if (renderCellContext) {
-        return {
-          ...rest,
-          ...renderCellContext(),
-        };
-      } else {
-        return {
-          ...rest,
-        };
-      }
-    }, [rest, renderCellContext]);
-
-    const cellContent = useMemo(() => {
-      return (
-        <div
-          ref={setCellContentsRef}
-          data-datagrid-cellcontent
-          className={classes}
-        >
-          <CellElement
-            isDetails={false}
-            data-test-subj="cell-content"
-            rowIndex={rowIndex}
-            colIndex={colIndex}
-            schema={column?.schema || rest.columnType}
-            {...mergedProps}
-          />
-        </div>
-      );
-    }, [
-      CellElement,
-      classes,
-      column,
-      colIndex,
-      mergedProps,
-      rowIndex,
-      setCellContentsRef,
-      rest.columnType,
-    ]);
-
-    const truncatedCellContent = useMemo(() => {
-      if (cellHeightType === 'lineCount' && !isControlColumn) {
-        const lines = rowHeightUtils!.getLineCount(rowHeight)!;
-        return (
-          <EuiTextBlockTruncate lines={lines} cloneElement>
-            {cellContent}
-          </EuiTextBlockTruncate>
-        );
-      } else {
-        return cellContent;
-      }
-    }, [
-      cellContent,
-      cellHeightType,
-      isControlColumn,
-      rowHeightUtils,
-      rowHeight,
-    ]);
-
-    return (
-      <>
-        {truncatedCellContent}
-        <EuiScreenReaderOnly>
-          <p hidden={!isFocused}>
-            {'- '}
-            <EuiI18n
-              token="euiDataGridCell.position"
-              default="{columnId}, column {col}, row {row}"
-              values={{
-                columnId: column?.displayAsText || rest.columnId,
-                col: colIndex + 1,
-                row: ariaRowIndex,
-              }}
-            />
-          </p>
-        </EuiScreenReaderOnly>
-      </>
-    );
-  }
-);
-EuiDataGridCellContent.displayName = 'EuiDataGridCellContent';
+Cell.displayName = 'Cell';
 
 export class EuiDataGridCell extends Component<
   EuiDataGridCellProps,
@@ -647,7 +638,6 @@ export class EuiDataGridCell extends Component<
   };
 
   handleCellExpansionClick = () => {
-    console.log('fire');
     const {
       popoverContext: { openCellPopover, closeCellPopover },
       visibleRowIndex,
@@ -661,8 +651,12 @@ export class EuiDataGridCell extends Component<
     }
   };
 
-  onMouseEnter = () => this.setState({ isHovered: true });
-  onMouseLeave = () => this.setState({ isHovered: false });
+  onMouseEnter = () => {
+    this.setState({ isHovered: true });
+  };
+  onMouseLeave = () => {
+    this.setState({ isHovered: false });
+  };
 
   render() {
     const {
diff --git a/src/components/datagrid/body/cell/data_grid_cell_actions.test.tsx b/src/components/datagrid/body/cell/data_grid_cell_actions.test.tsx
index ac88bd41bb3..fe16e085dd9 100644
--- a/src/components/datagrid/body/cell/data_grid_cell_actions.test.tsx
+++ b/src/components/datagrid/body/cell/data_grid_cell_actions.test.tsx
@@ -34,15 +34,17 @@ describe('EuiDataGridCellActions', () => {
       <div
         className="euiDataGridRowCell__actions"
       >
-        <ExpandButton
-          onExpandClick={[MockFunction]}
-        />
+        <EuiI18n
+          default="Click or hit enter to interact with cell content"
+          key="expand"
+          token="euiDataGridCellActions.expandButtonTitle"
+        >
+          <Component />
+        </EuiI18n>
       </div>
     `);
 
-    const button: Function = component
-      .find('ExpandButton')
-      .renderProp('children');
+    const button: Function = component.find('EuiI18n').renderProp('children');
     expect(button('expandButtonTitle')).toMatchInlineSnapshot(`
       <EuiButtonIcon
         aria-hidden={true}
@@ -100,9 +102,13 @@ describe('EuiDataGridCellActions', () => {
           key="0"
           rowIndex={0}
         />
-        <ExpandButton
-          onExpandClick={[MockFunction]}
-        />
+        <EuiI18n
+          default="Click or hit enter to interact with cell content"
+          key="expand"
+          token="euiDataGridCellActions.expandButtonTitle"
+        >
+          <Component />
+        </EuiI18n>
       </div>
     `);
   });
diff --git a/src/components/datagrid/body/cell/data_grid_cell_actions.tsx b/src/components/datagrid/body/cell/data_grid_cell_actions.tsx
index 26602b79902..701b25655f2 100644
--- a/src/components/datagrid/body/cell/data_grid_cell_actions.tsx
+++ b/src/components/datagrid/body/cell/data_grid_cell_actions.tsx
@@ -6,13 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, {
-  JSXElementConstructor,
-  useMemo,
-  useCallback,
-  type FunctionComponent,
-  type MouseEventHandler,
-} from 'react';
+import React, { JSXElementConstructor, useMemo, useCallback } from 'react';
 import {
   EuiDataGridColumn,
   EuiDataGridColumnCellAction,
@@ -28,23 +22,22 @@ import {
 import { EuiFlexGroup, EuiFlexItem } from '../../../flex';
 import { EuiPopoverFooter } from '../../../popover';
 
-const ButtonComponent = (props: EuiButtonIconProps) => (
-  <EuiButtonIcon
-    {...props}
-    aria-hidden
-    className="euiDataGridRowCell__actionButtonIcon"
-    // Don't allow consumers to override sizes or colors for cell actions on hover/focus
-    size="xs"
-    iconSize="s"
-    display="fill"
-    color="primary"
-  />
-);
-
-const ExpandButton: FunctionComponent<{ onExpandClick: MouseEventHandler }> = ({
+export const EuiDataGridCellActions = ({
   onExpandClick,
+  column,
+  rowIndex,
+  colIndex,
+}: {
+  onExpandClick: () => void;
+  column?: EuiDataGridColumn;
+  rowIndex: number;
+  colIndex: number;
 }) => {
-  return (
+  // Note: The cell expand button/expansion popover is *always* rendered if
+  // column.cellActions is present (regardless of column.isExpandable).
+  // This is because cell actions are not otherwise accessible to keyboard
+  // or screen reader users
+  const expandButton = (
     <EuiI18n
       key={'expand'}
       token="euiDataGridCellActions.expandButtonTitle"
@@ -65,27 +58,23 @@ const ExpandButton: FunctionComponent<{ onExpandClick: MouseEventHandler }> = ({
       )}
     </EuiI18n>
   );
-};
-
-export const EuiDataGridCellActions = ({
-  onExpandClick,
-  column,
-  rowIndex,
-  colIndex,
-}: {
-  onExpandClick: () => void;
-  column?: EuiDataGridColumn;
-  rowIndex: number;
-  colIndex: number;
-}) => {
-  // Note: The cell expand button/expansion popover is *always* rendered if
-  // column.cellActions is present (regardless of column.isExpandable).
-  // This is because cell actions are not otherwise accessible to keyboard
-  // or screen reader users
 
   const additionalButtons = useMemo(() => {
     if (!column || !Array.isArray(column?.cellActions)) return [];
 
+    const ButtonComponent = (props: EuiButtonIconProps) => (
+      <EuiButtonIcon
+        {...props}
+        aria-hidden
+        className="euiDataGridRowCell__actionButtonIcon"
+        // Don't allow consumers to override sizes or colors for cell actions on hover/focus
+        size="xs"
+        iconSize="s"
+        display="fill"
+        color="primary"
+      />
+    );
+
     const [visibleCellActions] = getVisibleCellActions(
       column?.cellActions,
       column?.visibleCellActions
@@ -111,8 +100,7 @@ export const EuiDataGridCellActions = ({
 
   return (
     <div className="euiDataGridRowCell__actions">
-      {[...additionalButtons]}
-      <ExpandButton onExpandClick={onExpandClick} />
+      {[...additionalButtons, expandButton]}
     </div>
   );
 };
diff --git a/src/components/datagrid/body/cell/data_grid_cell_popover.tsx b/src/components/datagrid/body/cell/data_grid_cell_popover.tsx
index a5d294399b1..13c1785656f 100644
--- a/src/components/datagrid/body/cell/data_grid_cell_popover.tsx
+++ b/src/components/datagrid/body/cell/data_grid_cell_popover.tsx
@@ -78,19 +78,6 @@ export const useCellPopover = (): {
     [popoverIsOpen, cellLocation]
   );
 
-  const cellPopoverContext = useMemo(() => {
-    return {
-      popoverIsOpen,
-      closeCellPopover,
-      openCellPopover,
-      cellLocation,
-      setPopoverAnchorPosition,
-      setPopoverAnchor,
-      setPopoverContent,
-      setCellPopoverProps,
-    };
-  }, [popoverIsOpen, closeCellPopover, openCellPopover, cellLocation]);
-
   // Override the default EuiPopover `onClickOutside` behavior, since the toggling
   // popover button isn't actually the DOM node we pass to `button`. Otherwise,
   // clicking the expansion cell action triggers an outside click
@@ -126,6 +113,16 @@ export const useCellPopover = (): {
   );
 
   return useMemo(() => {
+    const cellPopoverContext = {
+      popoverIsOpen,
+      closeCellPopover,
+      openCellPopover,
+      cellLocation,
+      setPopoverAnchorPosition,
+      setPopoverAnchor,
+      setPopoverContent,
+      setCellPopoverProps,
+    };
     // Note that this popover is rendered once at the top grid level, rather than one popover per cell
     const cellPopover = popoverIsOpen && popoverAnchor && (
       <EuiWrappingPopover
@@ -161,14 +158,15 @@ export const useCellPopover = (): {
     );
     return { cellPopoverContext, cellPopover };
   }, [
-    cellPopoverProps,
-    cellPopoverContext,
-    closeCellPopover,
-    onKeyDown,
+    cellLocation,
+    popoverIsOpen,
     popoverAnchor,
     popoverContent,
-    popoverIsOpen,
+    cellPopoverProps,
+    closeCellPopover,
     onClickOutside,
+    onKeyDown,
+    openCellPopover,
     popoverAnchorPosition,
   ]);
 };
diff --git a/src/components/datagrid/body/cell/data_grid_cell_wrapper.test.tsx b/src/components/datagrid/body/cell/data_grid_cell_wrapper.test.tsx
index 6b822ab55a8..2311456987c 100644
--- a/src/components/datagrid/body/cell/data_grid_cell_wrapper.test.tsx
+++ b/src/components/datagrid/body/cell/data_grid_cell_wrapper.test.tsx
@@ -12,7 +12,7 @@ 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';
+import { CellWrapper } from './data_grid_cell_wrapper';
 
 describe('Cell', () => {
   const requiredProps = {
@@ -33,13 +33,13 @@ describe('Cell', () => {
   };
 
   it('is a light wrapper around EuiDataGridCell', () => {
-    const component = shallow(<Cell {...requiredProps} />);
+    const component = shallow(<CellWrapper {...requiredProps} />);
     expect(component.find('EuiDataGridCell').exists()).toBe(true);
   });
 
   it('renders leading control column cells', () => {
     const component = shallow(
-      <Cell
+      <CellWrapper
         {...requiredProps}
         leadingControlColumns={[
           {
@@ -60,7 +60,7 @@ describe('Cell', () => {
 
   it('renders trailing control column cells', () => {
     const component = shallow(
-      <Cell
+      <CellWrapper
         {...requiredProps}
         colIndex={1}
         visibleColCount={2}
@@ -83,7 +83,7 @@ describe('Cell', () => {
 
   it('renders text transform classes based on schema', () => {
     const component = shallow(
-      <Cell
+      <CellWrapper
         {...requiredProps}
         columns={[{ id: 'b', schema: 'SHOUTING' }]}
         schema={{ b: { columnType: 'SHOUTING' } } as any}
@@ -104,7 +104,7 @@ describe('Cell', () => {
 
   it('allows passing optional EuiDataGridCellProps overrides', () => {
     const component = shallow(
-      <Cell
+      <CellWrapper
         {...requiredProps}
         columns={[{ id: 'a', isExpandable: true }]}
         isExpandable={false}
diff --git a/src/components/datagrid/body/cell/data_grid_cell_wrapper.tsx b/src/components/datagrid/body/cell/data_grid_cell_wrapper.tsx
index 4506b98780c..2c62e13cfe2 100644
--- a/src/components/datagrid/body/cell/data_grid_cell_wrapper.tsx
+++ b/src/components/datagrid/body/cell/data_grid_cell_wrapper.tsx
@@ -20,7 +20,7 @@ import { DataGridCellPopoverContext } from './data_grid_cell_popover';
 
 import { EuiDataGridCell } from './data_grid_cell';
 
-type CellProps = Pick<
+export type CellProps = Pick<
   EuiDataGridCellProps,
   | 'colIndex'
   | 'visibleRowIndex'
@@ -33,6 +33,7 @@ type CellProps = Pick<
   | 'rowHeightUtils'
   | 'rowManager'
   | 'setRowHeight'
+  | 'column'
 > &
   Pick<
     EuiDataGridBodyProps,
@@ -52,7 +53,7 @@ type CellProps = Pick<
  * 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> = memo(
+export const CellWrapper: FunctionComponent<CellProps> = memo(
   ({
     colIndex,
     visibleRowIndex,
@@ -143,81 +144,61 @@ export const Cell: FunctionComponent<CellProps> = memo(
       textTransform,
     ]);
 
-    const cellContent = useMemo(() => {
-      if (isLeadingControlColumn) {
-        const leadingColumn = leadingControlColumns[colIndex];
-        const { id, rowCellRender } = leadingColumn;
-
-        return (
-          <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;
-
-        return (
-          <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;
-
-        return (
-          <EuiDataGridCell
-            {...sharedCellProps}
-            columnId={columnId}
-            column={column}
-            columnType={columnType}
-            width={width || undefined}
-            renderCellValue={renderCellValue}
-            renderCellPopover={renderCellPopover}
-            interactiveCellId={interactiveCellId}
-            isExpandable={isExpandable}
-            {...rest}
-          />
-        );
-      }
-    }, [
-      colIndex,
-      isLeadingControlColumn,
-      isTrailingControlColumn,
-      rest,
-      columnId,
-      column,
-      columnWidths,
-      defaultColumnWidth,
-      renderCellValue,
-      renderCellPopover,
-      interactiveCellId,
-      sharedCellProps,
-      schema,
-      columns,
-      leadingControlColumns,
-      trailingControlColumns,
-    ]);
-    return cellContent;
+    if (isLeadingControlColumn) {
+      const leadingColumn = leadingControlColumns[colIndex];
+      const { id, rowCellRender } = leadingColumn;
+
+      return (
+        <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;
+
+      return (
+        <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;
+
+      return (
+        <EuiDataGridCell
+          {...sharedCellProps}
+          columnId={columnId}
+          column={column}
+          columnType={columnType}
+          width={width || undefined}
+          renderCellValue={renderCellValue}
+          renderCellPopover={renderCellPopover}
+          interactiveCellId={interactiveCellId}
+          isExpandable={isExpandable}
+          {...rest}
+        />
+      );
+    }
   }
 );
+
+CellWrapper.displayName = 'CellWrapper';
diff --git a/src/components/datagrid/body/cell/index.ts b/src/components/datagrid/body/cell/index.ts
index ed2338e8de2..97cbb9d8106 100644
--- a/src/components/datagrid/body/cell/index.ts
+++ b/src/components/datagrid/body/cell/index.ts
@@ -8,7 +8,7 @@
 
 export { EuiDataGridCell } from './data_grid_cell';
 
-export { Cell } from './data_grid_cell_wrapper';
+export { CellWrapper } from './data_grid_cell_wrapper';
 
 export {
   DataGridCellPopoverContext,
diff --git a/src/components/datagrid/body/data_grid_body_custom.tsx b/src/components/datagrid/body/data_grid_body_custom.tsx
index f2819d0a557..062449f1bfb 100644
--- a/src/components/datagrid/body/data_grid_body_custom.tsx
+++ b/src/components/datagrid/body/data_grid_body_custom.tsx
@@ -24,7 +24,7 @@ import {
 } from '../data_grid_types';
 import { useDataGridHeader } from './header';
 import { useDataGridFooter } from './footer';
-import { Cell } from './cell';
+import { CellWrapper } from './cell';
 
 export const EuiDataGridBodyCustomRender: FunctionComponent<
   EuiDataGridBodyProps
@@ -171,7 +171,7 @@ export const EuiDataGridBodyCustomRender: FunctionComponent<
         style,
         ...cellProps,
       };
-      return <Cell {...props} {...rest} />;
+      return <CellWrapper {...props} {...rest} />;
     },
     [cellProps, getRowHeight, rowHeightUtils, rowHeightsOptions]
   );
diff --git a/src/components/datagrid/body/data_grid_body_virtualized.test.tsx b/src/components/datagrid/body/data_grid_body_virtualized.test.tsx
index 8359f01414b..4e90776b7a4 100644
--- a/src/components/datagrid/body/data_grid_body_virtualized.test.tsx
+++ b/src/components/datagrid/body/data_grid_body_virtualized.test.tsx
@@ -56,7 +56,7 @@ describe('EuiDataGridBodyVirtualized', () => {
         renderFooterCellValue={() => <footer data-test-subj="footer" />}
       />
     );
-    expect(component.find('Cell')).toHaveLength(4);
+    expect(component.find('Cell')).toHaveLength(8);
     expect(component.find('[data-test-subj="footer"]')).toHaveLength(2);
   });
 
diff --git a/src/components/datagrid/body/data_grid_body_virtualized.tsx b/src/components/datagrid/body/data_grid_body_virtualized.tsx
index 3a1b50d11e8..3f35d3a45fb 100644
--- a/src/components/datagrid/body/data_grid_body_virtualized.tsx
+++ b/src/components/datagrid/body/data_grid_body_virtualized.tsx
@@ -28,12 +28,13 @@ import {
 import { useResizeObserver } from '../../observer/resize_observer';
 import { useDataGridHeader } from './header';
 import { useDataGridFooter } from './footer';
-import { Cell } from './cell';
+import { CellWrapper } from './cell';
 import {
   EuiDataGridBodyProps,
   DataGridWrapperRowsContentsShape,
 } from '../data_grid_types';
 import { useRowManager } from './data_grid_row_manager';
+import type { CellProps } from './cell/data_grid_cell_wrapper';
 import {
   useFinalGridDimensions,
   useUnconstrainedHeight,
@@ -44,27 +45,31 @@ import { useRowHeightUtils, useDefaultRowHeight } from '../utils/row_heights';
 import { useScrollBars, useScroll } from '../utils/scrolling';
 import { IS_JEST_ENVIRONMENT } from '../../../utils';
 
-export const _Cell: FunctionComponent<GridChildComponentProps> = memo(
-  ({ columnIndex, rowIndex, style, data }) => {
-    const cellStyles = useMemo(() => {
-      const { headerRowHeight } = data;
-      return {
-        ...style,
-        top: `${parseFloat(style.top as string) + headerRowHeight}px`,
-      };
-    }, [style, data]);
-    return (
-      <Cell
-        colIndex={columnIndex}
-        visibleRowIndex={rowIndex}
-        style={cellStyles}
-        {...data}
-      />
-    );
-  }
-);
+export const _Cell: FunctionComponent<
+  GridChildComponentProps<
+    Omit<CellProps, 'colIndex' | 'visibleRowIndex'> & {
+      headerRowHeight: number;
+    }
+  >
+> = memo(({ columnIndex, rowIndex, style, data }) => {
+  const cellStyles = useMemo(() => {
+    const { headerRowHeight } = data;
+    return {
+      ...style,
+      top: `${parseFloat(style.top as string) + headerRowHeight}px`,
+    };
+  }, [style, data]);
+  return (
+    <CellWrapper
+      style={cellStyles}
+      colIndex={columnIndex}
+      visibleRowIndex={rowIndex}
+      {...data}
+    />
+  );
+});
 
-_Cell.displayName = 'Cell';
+_Cell.displayName = '_Cell';
 
 // Context is required to pass props to react-window's innerElementType
 // @see https://github.com/bvaughn/react-window/issues/404
@@ -387,3 +392,5 @@ export const EuiDataGridBodyVirtualized: FunctionComponent<EuiDataGridBodyProps>
       ) : null;
     }
   );
+
+EuiDataGridBodyVirtualized.displayName = 'EuiDataGridBodyVirtualized';
diff --git a/src/components/datagrid/controls/column_sorting.tsx b/src/components/datagrid/controls/column_sorting.tsx
index dd27404fc21..e2beb1845cb 100644
--- a/src/components/datagrid/controls/column_sorting.tsx
+++ b/src/components/datagrid/controls/column_sorting.tsx
@@ -6,13 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, {
-  ReactNode,
-  useEffect,
-  useState,
-  useMemo,
-  useCallback,
-} from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 import { DropResult } from '@hello-pangea/dnd';
 import { EuiButtonEmpty } from '../../button';
 import {
@@ -69,277 +63,241 @@ export const useDataGridColumnSorting = (
     'Sort fields'
   );
 
-  const onDragEnd = useCallback(() => {
-    return ({ source: { index: sourceIndex }, destination }: DropResult) => {
-      if (destination) {
-        const destinationIndex = destination.index;
-        const nextColumns = euiDragDropReorder(
-          sorting!.columns,
-          sourceIndex,
-          destinationIndex
-        );
-        sorting!.onSort(nextColumns);
-      }
-    };
-  }, [sorting]);
-
-  const onSort = useCallback(() => sorting && sorting.onSort([]), [sorting]);
+  if (sorting == null) return null;
 
-  const schemaDetails = useCallback(
-    (id: string | number) => {
-      if (sorting) {
-        return schema.hasOwnProperty(id) && schema[id].columnType != null
-          ? getDetailsForSchema(schemaDetectors, schema[id].columnType)
-          : null;
+  const activeColumnIds = new Set(sorting.columns.map(({ id }) => id));
+  const { inactiveColumns } = columns.reduce<{
+    activeColumns: EuiDataGridColumn[];
+    inactiveColumns: EuiDataGridColumn[];
+  }>(
+    (acc, column) => {
+      if (activeColumnIds.has(column.id)) {
+        acc.activeColumns.push(column);
+      } else {
+        acc.inactiveColumns.push(column);
       }
+      return acc;
     },
-    [schema, schemaDetectors, sorting]
+    {
+      activeColumns: [],
+      inactiveColumns: [],
+    }
   );
 
-  const onInactiveClick = useCallback(
-    (id: string, defaultSortDirection?: 'asc' | 'desc') => {
-      if (sorting) {
-        const schemaDetails = (id: string | number) =>
-          schema.hasOwnProperty(id) && schema[id].columnType != null
-            ? getDetailsForSchema(schemaDetectors, schema[id].columnType)
-            : null;
-        const nextColumns = [...sorting.columns];
-        nextColumns.push({
-          id,
-          direction:
-            defaultSortDirection ||
-            schemaDetails(id)?.defaultSortDirection ||
-            'asc',
-        });
-        sorting.onSort(nextColumns);
+  const onDragEnd = ({
+    source: { index: sourceIndex },
+    destination,
+  }: DropResult) => {
+    if (destination) {
+      const destinationIndex = destination.index;
+      const nextColumns = euiDragDropReorder(
+        sorting!.columns,
+        sourceIndex,
+        destinationIndex
+      );
+      sorting!.onSort(nextColumns);
+    }
+  };
+
+  const schemaDetails = (id: string | number) =>
+    schema.hasOwnProperty(id) && schema[id].columnType != null
+      ? getDetailsForSchema(schemaDetectors, schema[id].columnType)
+      : null;
+
+  const inactiveSortableColumns = inactiveColumns.filter(
+    ({ id, isSortable }) => {
+      const schemaDetail = schemaDetails(id);
+      let sortable = true;
+      if (isSortable != null) {
+        sortable = isSortable;
+      } else if (schemaDetail != null) {
+        sortable = schemaDetail.hasOwnProperty('isSortable')
+          ? schemaDetail.isSortable!
+          : true;
       }
-    },
-    [sorting, schema, schemaDetectors]
+      return sortable;
+    }
   );
 
-  const columnSorting = useMemo(() => {
-    if (sorting == null) {
-      return null;
-    } else {
-      const activeColumnIds = new Set(sorting.columns.map(({ id }) => id));
-      const { inactiveColumns } = columns.reduce<{
-        activeColumns: EuiDataGridColumn[];
-        inactiveColumns: EuiDataGridColumn[];
-      }>(
-        (acc, column) => {
-          if (activeColumnIds.has(column.id)) {
-            acc.activeColumns.push(column);
-          } else {
-            acc.inactiveColumns.push(column);
-          }
-          return acc;
-        },
-        {
-          activeColumns: [],
-          inactiveColumns: [],
-        }
-      );
-      const inactiveSortableColumns = inactiveColumns.filter(
-        ({ id, isSortable }) => {
-          const schemaDetail = schemaDetails(id);
-          let sortable = true;
-          if (isSortable != null) {
-            sortable = isSortable;
-          } else if (schemaDetail != null) {
-            sortable = schemaDetail.hasOwnProperty('isSortable')
-              ? schemaDetail.isSortable!
-              : true;
-          }
-          return sortable;
-        }
-      );
-      return (
-        <EuiPopover
-          data-test-subj="dataGridColumnSortingPopover"
-          isOpen={isOpen}
-          closePopover={() => setIsOpen(false)}
-          anchorPosition="downLeft"
-          panelPaddingSize="s"
-          hasDragDrop
-          button={
-            <EuiDataGridToolbarControl
-              badgeContent={sorting.columns.length}
-              iconType="sortable"
-              data-test-subj="dataGridColumnSortingButton"
-              onClick={() => setIsOpen(!isOpen)}
-            >
-              {sortingButtonText}
-            </EuiDataGridToolbarControl>
-          }
+  const columnSorting = (
+    <EuiPopover
+      data-test-subj="dataGridColumnSortingPopover"
+      isOpen={isOpen}
+      closePopover={() => setIsOpen(false)}
+      anchorPosition="downLeft"
+      panelPaddingSize="s"
+      hasDragDrop
+      button={
+        <EuiDataGridToolbarControl
+          badgeContent={sorting.columns.length}
+          iconType="sortable"
+          data-test-subj="dataGridColumnSortingButton"
+          onClick={() => setIsOpen(!isOpen)}
         >
-          {sorting.columns.length > 0 ? (
-            <EuiDragDropContext onDragEnd={onDragEnd}>
-              <EuiDroppable
-                droppableId="columnSorting"
-                className="euiDataGrid__controlScroll"
-              >
-                <>
-                  {sorting.columns.map(({ id, direction }, index) => {
-                    return (
-                      <EuiDataGridColumnSortingDraggable
-                        key={id}
-                        id={id}
-                        display={displayValues[id]}
-                        direction={direction}
-                        index={index}
-                        sorting={sorting}
-                        schema={schema}
-                        schemaDetectors={schemaDetectors}
-                      />
-                    );
-                  })}
-                </>
-              </EuiDroppable>
-            </EuiDragDropContext>
-          ) : (
-            <EuiText size="s" color="subdued">
-              <p role="alert">
-                <EuiI18n
-                  token="euiColumnSorting.emptySorting"
-                  default="Currently no fields are sorted"
-                />
-              </p>
-            </EuiText>
-          )}
-          {(inactiveSortableColumns.length > 0 ||
-            sorting.columns.length > 0) && (
-            <EuiPopoverFooter>
-              <EuiFlexGroup
-                gutterSize="m"
-                justifyContent="spaceBetween"
-                responsive={false}
-              >
-                <EuiFlexItem grow={false}>
-                  {inactiveSortableColumns.length > 0 && (
-                    <EuiPopover
-                      data-test-subj="dataGridColumnSortingPopoverColumnSelection"
-                      isOpen={availableColumnsIsOpen}
-                      closePopover={() => setAvailableColumnsIsOpen(false)}
-                      anchorPosition="downLeft"
-                      panelPaddingSize="none"
-                      button={
-                        <EuiButtonEmpty
-                          size="xs"
-                          flush="left"
-                          iconType="arrowDown"
-                          iconSide="right"
-                          data-test-subj="dataGridColumnSortingSelectionButton"
-                          onClick={() =>
-                            setAvailableColumnsIsOpen(!availableColumnsIsOpen)
-                          }
-                        >
-                          <EuiI18n
-                            token="euiColumnSorting.pickFields"
-                            default="Pick fields to sort by"
-                          />
-                        </EuiButtonEmpty>
-                      }
-                    >
-                      <EuiI18n
-                        token="euiColumnSorting.sortFieldAriaLabel"
-                        default="Sort by: "
-                      >
-                        {(sortFieldAriaLabel: string) => (
-                          <div
-                            className="euiDataGridColumnSorting__fieldList"
-                            role="listbox"
-                          >
-                            {inactiveSortableColumns.map(
-                              ({ id, defaultSortDirection }) => {
-                                return (
-                                  <button
-                                    key={id}
-                                    className="euiDataGridColumnSorting__field"
-                                    aria-label={`${sortFieldAriaLabel} ${id}`}
-                                    role="option"
-                                    aria-selected="false"
-                                    data-test-subj={`dataGridColumnSortingPopoverColumnSelection-${id}`}
-                                    onClick={() =>
-                                      onInactiveClick(id, defaultSortDirection)
-                                    }
-                                  >
-                                    <EuiFlexGroup
-                                      alignItems="center"
-                                      gutterSize="s"
-                                      component="span"
-                                      responsive={false}
-                                    >
-                                      <EuiFlexItem grow={false}>
-                                        <EuiToken
-                                          iconType={
-                                            schemaDetails(id) != null
-                                              ? getDetailsForSchema(
-                                                  schemaDetectors,
-                                                  schema[id].columnType
-                                                ).icon
-                                              : 'tokenString'
-                                          }
-                                          color={
-                                            schemaDetails(id) != null
-                                              ? getDetailsForSchema(
-                                                  schemaDetectors,
-                                                  schema[id].columnType
-                                                ).color
-                                              : undefined
-                                          }
-                                        />
-                                      </EuiFlexItem>
-                                      <EuiFlexItem grow={false}>
-                                        <EuiText size="xs">
-                                          {displayValues[id]}
-                                        </EuiText>
-                                      </EuiFlexItem>
-                                    </EuiFlexGroup>
-                                  </button>
-                                );
-                              }
-                            )}
-                          </div>
-                        )}
-                      </EuiI18n>
-                    </EuiPopover>
-                  )}
-                </EuiFlexItem>
-                {sorting.columns.length > 0 ? (
-                  <EuiFlexItem grow={false}>
+          {sortingButtonText}
+        </EuiDataGridToolbarControl>
+      }
+    >
+      {sorting.columns.length > 0 ? (
+        <EuiDragDropContext onDragEnd={onDragEnd}>
+          <EuiDroppable
+            droppableId="columnSorting"
+            className="euiDataGrid__controlScroll"
+          >
+            <>
+              {sorting.columns.map(({ id, direction }, index) => {
+                return (
+                  <EuiDataGridColumnSortingDraggable
+                    key={id}
+                    id={id}
+                    display={displayValues[id]}
+                    direction={direction}
+                    index={index}
+                    sorting={sorting}
+                    schema={schema}
+                    schemaDetectors={schemaDetectors}
+                  />
+                );
+              })}
+            </>
+          </EuiDroppable>
+        </EuiDragDropContext>
+      ) : (
+        <EuiText size="s" color="subdued">
+          <p role="alert">
+            <EuiI18n
+              token="euiColumnSorting.emptySorting"
+              default="Currently no fields are sorted"
+            />
+          </p>
+        </EuiText>
+      )}
+      {(inactiveSortableColumns.length > 0 || sorting.columns.length > 0) && (
+        <EuiPopoverFooter>
+          <EuiFlexGroup
+            gutterSize="m"
+            justifyContent="spaceBetween"
+            responsive={false}
+          >
+            <EuiFlexItem grow={false}>
+              {inactiveSortableColumns.length > 0 && (
+                <EuiPopover
+                  data-test-subj="dataGridColumnSortingPopoverColumnSelection"
+                  isOpen={availableColumnsIsOpen}
+                  closePopover={() => setAvailableColumnsIsOpen(false)}
+                  anchorPosition="downLeft"
+                  panelPaddingSize="none"
+                  button={
                     <EuiButtonEmpty
                       size="xs"
-                      flush="right"
-                      onClick={onSort}
-                      data-test-subj="dataGridColumnSortingClearButton"
+                      flush="left"
+                      iconType="arrowDown"
+                      iconSide="right"
+                      data-test-subj="dataGridColumnSortingSelectionButton"
+                      onClick={() =>
+                        setAvailableColumnsIsOpen(!availableColumnsIsOpen)
+                      }
                     >
                       <EuiI18n
-                        token="euiColumnSorting.clearAll"
-                        default="Clear sorting"
+                        token="euiColumnSorting.pickFields"
+                        default="Pick fields to sort by"
                       />
                     </EuiButtonEmpty>
-                  </EuiFlexItem>
-                ) : null}
-              </EuiFlexGroup>
-            </EuiPopoverFooter>
-          )}
-        </EuiPopover>
-      );
-    }
-  }, [
-    availableColumnsIsOpen,
-    displayValues,
-    isOpen,
-    onSort,
-    onDragEnd,
-    schema,
-    schemaDetectors,
-    sorting,
-    sortingButtonText,
-    columns,
-    onInactiveClick,
-    schemaDetails,
-  ]);
+                  }
+                >
+                  <EuiI18n
+                    token="euiColumnSorting.sortFieldAriaLabel"
+                    default="Sort by: "
+                  >
+                    {(sortFieldAriaLabel: string) => (
+                      <div
+                        className="euiDataGridColumnSorting__fieldList"
+                        role="listbox"
+                      >
+                        {inactiveSortableColumns.map(
+                          ({ id, defaultSortDirection }) => {
+                            return (
+                              <button
+                                key={id}
+                                className="euiDataGridColumnSorting__field"
+                                aria-label={`${sortFieldAriaLabel} ${id}`}
+                                role="option"
+                                aria-selected="false"
+                                data-test-subj={`dataGridColumnSortingPopoverColumnSelection-${id}`}
+                                onClick={() => {
+                                  const nextColumns = [...sorting.columns];
+                                  nextColumns.push({
+                                    id,
+                                    direction:
+                                      defaultSortDirection ||
+                                      schemaDetails(id)?.defaultSortDirection ||
+                                      'asc',
+                                  });
+                                  sorting.onSort(nextColumns);
+                                }}
+                              >
+                                <EuiFlexGroup
+                                  alignItems="center"
+                                  gutterSize="s"
+                                  component="span"
+                                  responsive={false}
+                                >
+                                  <EuiFlexItem grow={false}>
+                                    <EuiToken
+                                      iconType={
+                                        schemaDetails(id) != null
+                                          ? getDetailsForSchema(
+                                              schemaDetectors,
+                                              schema[id].columnType
+                                            ).icon
+                                          : 'tokenString'
+                                      }
+                                      color={
+                                        schemaDetails(id) != null
+                                          ? getDetailsForSchema(
+                                              schemaDetectors,
+                                              schema[id].columnType
+                                            ).color
+                                          : undefined
+                                      }
+                                    />
+                                  </EuiFlexItem>
+                                  <EuiFlexItem grow={false}>
+                                    <EuiText size="xs">
+                                      {displayValues[id]}
+                                    </EuiText>
+                                  </EuiFlexItem>
+                                </EuiFlexGroup>
+                              </button>
+                            );
+                          }
+                        )}
+                      </div>
+                    )}
+                  </EuiI18n>
+                </EuiPopover>
+              )}
+            </EuiFlexItem>
+            {sorting.columns.length > 0 ? (
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty
+                  size="xs"
+                  flush="right"
+                  onClick={() => sorting.onSort([])}
+                  data-test-subj="dataGridColumnSortingClearButton"
+                >
+                  <EuiI18n
+                    token="euiColumnSorting.clearAll"
+                    default="Clear sorting"
+                  />
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+            ) : null}
+          </EuiFlexGroup>
+        </EuiPopoverFooter>
+      )}
+    </EuiPopover>
+  );
 
   return columnSorting;
 };