From 339379e9e884fc51aa1b790d46e388b90ac9f52f Mon Sep 17 00:00:00 2001
From: Davis McPhee <davis.mcphee@elastic.co>
Date: Wed, 10 Apr 2024 16:49:49 -0300
Subject: [PATCH] [Discover] [Unified Data Table] Add document comparison mode
 (#166577)

## Summary

This PR adds a new document comparison mode to Discover and Unified Data
Table:

![diff](https://github.com/elastic/kibana/assets/25592674/40edf401-9514-4388-87a2-c528dbdd6f90)

Flaky test runner x50:
https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/5590.

Resolves #93567.

### Checklist

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
---
 .../src/__mocks__/es_hits.ts                  |  37 ++
 packages/kbn-unified-data-table/index.ts      |  15 +-
 .../compare_documents.test.tsx                | 173 +++++++
 .../compare_documents/compare_documents.tsx   | 215 ++++++++
 .../comparison_controls.test.tsx              | 196 ++++++++
 .../compare_documents/comparison_controls.tsx | 442 ++++++++++++++++
 .../comparison_toolbar.test.tsx               |  77 +++
 .../compare_documents/comparison_toolbar.tsx  |  44 ++
 .../use_comparison_cell_value.test.tsx.snap   | 449 +++++++++++++++++
 .../use_comparison_css.test.ts.snap           | 473 ++++++++++++++++++
 .../hooks/calculate_diff.test.ts              | 298 +++++++++++
 .../compare_documents/hooks/calculate_diff.ts |  60 +++
 .../hooks/use_comparison_cell_value.test.tsx  | 446 +++++++++++++++++
 .../hooks/use_comparison_cell_value.tsx       | 251 ++++++++++
 .../hooks/use_comparison_columns.test.tsx     | 230 +++++++++
 .../hooks/use_comparison_columns.tsx          | 173 +++++++
 .../hooks/use_comparison_css.test.ts          |  65 +++
 .../hooks/use_comparison_css.ts               | 128 +++++
 .../hooks/use_comparison_fields.test.ts       | 151 ++++++
 .../hooks/use_comparison_fields.ts            |  83 +++
 .../components/compare_documents/index.tsx    |  12 +
 .../src/components/compare_documents/types.ts |   9 +
 .../render_custom_toolbar.test.tsx.snap       |  52 +-
 .../render_custom_toolbar.scss                |  12 +-
 .../render_custom_toolbar.test.tsx            |   0
 .../custom_toolbar}/render_custom_toolbar.tsx |  57 ++-
 .../src/components/data_table.scss            |   4 -
 .../src/components/data_table.test.tsx        | 122 ++++-
 .../src/components/data_table.tsx             | 151 ++++--
 .../data_table_document_selection.test.tsx    |  46 +-
 .../data_table_document_selection.tsx         | 107 +++-
 .../src/hooks/use_full_screen_watcher.ts      |   2 +-
 .../src/utils/get_render_cell_value.tsx       |   2 +-
 packages/kbn-unified-data-table/tsconfig.json |   2 +
 .../context/context_app_content.test.tsx      |   4 +-
 .../layout/discover_documents.test.tsx        |   4 +-
 .../components/layout/discover_documents.tsx  |   6 +-
 .../discover_grid/discover_grid.tsx           |  16 +-
 .../discover_grid_flyout.test.tsx             |   2 +-
 .../discover_grid_flyout.tsx                  |   2 +-
 .../doc_table/components/table_row.test.tsx   |   2 +-
 .../components/table_row_details.tsx          |   2 +-
 .../public/embeddable/saved_search_grid.tsx   |   7 +-
 .../embeddable/_saved_search_embeddable.ts    |   2 +-
 .../apps/discover/group2/_data_grid.ts        |   2 +-
 .../discover/group2/_data_grid_context.ts     |   2 +-
 .../apps/discover/group3/_view_mode_toggle.ts |   4 +-
 .../discover/group4/_document_comparison.ts   | 262 ++++++++++
 test/functional/apps/discover/group4/index.ts |   1 +
 test/functional/services/data_grid.ts         | 140 +++++-
 .../embeddable/_saved_search_embeddable.ts    |   2 +-
 51 files changed, 4855 insertions(+), 189 deletions(-)
 create mode 100644 packages/kbn-unified-data-table/src/components/compare_documents/compare_documents.test.tsx
 create mode 100644 packages/kbn-unified-data-table/src/components/compare_documents/compare_documents.tsx
 create mode 100644 packages/kbn-unified-data-table/src/components/compare_documents/comparison_controls.test.tsx
 create mode 100644 packages/kbn-unified-data-table/src/components/compare_documents/comparison_controls.tsx
 create mode 100644 packages/kbn-unified-data-table/src/components/compare_documents/comparison_toolbar.test.tsx
 create mode 100644 packages/kbn-unified-data-table/src/components/compare_documents/comparison_toolbar.tsx
 create mode 100644 packages/kbn-unified-data-table/src/components/compare_documents/hooks/__snapshots__/use_comparison_cell_value.test.tsx.snap
 create mode 100644 packages/kbn-unified-data-table/src/components/compare_documents/hooks/__snapshots__/use_comparison_css.test.ts.snap
 create mode 100644 packages/kbn-unified-data-table/src/components/compare_documents/hooks/calculate_diff.test.ts
 create mode 100644 packages/kbn-unified-data-table/src/components/compare_documents/hooks/calculate_diff.ts
 create mode 100644 packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_cell_value.test.tsx
 create mode 100644 packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_cell_value.tsx
 create mode 100644 packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_columns.test.tsx
 create mode 100644 packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_columns.tsx
 create mode 100644 packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_css.test.ts
 create mode 100644 packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_css.ts
 create mode 100644 packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_fields.test.ts
 create mode 100644 packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_fields.ts
 create mode 100644 packages/kbn-unified-data-table/src/components/compare_documents/index.tsx
 create mode 100644 packages/kbn-unified-data-table/src/components/compare_documents/types.ts
 rename {src/plugins/discover/public/components/discover_grid => packages/kbn-unified-data-table/src/components/custom_toolbar}/__snapshots__/render_custom_toolbar.test.tsx.snap (72%)
 rename {src/plugins/discover/public/components/discover_grid => packages/kbn-unified-data-table/src/components/custom_toolbar}/render_custom_toolbar.scss (79%)
 rename {src/plugins/discover/public/components/discover_grid => packages/kbn-unified-data-table/src/components/custom_toolbar}/render_custom_toolbar.test.tsx (100%)
 rename {src/plugins/discover/public/components/discover_grid => packages/kbn-unified-data-table/src/components/custom_toolbar}/render_custom_toolbar.tsx (63%)
 create mode 100644 test/functional/apps/discover/group4/_document_comparison.ts

diff --git a/packages/kbn-discover-utils/src/__mocks__/es_hits.ts b/packages/kbn-discover-utils/src/__mocks__/es_hits.ts
index 84891fec5ab107..0cde2c6a00d193 100644
--- a/packages/kbn-discover-utils/src/__mocks__/es_hits.ts
+++ b/packages/kbn-discover-utils/src/__mocks__/es_hits.ts
@@ -6,6 +6,10 @@
  * Side Public License, v 1.
  */
 
+import type { DataView, DataViewField } from '@kbn/data-views-plugin/common';
+import { KBN_FIELD_TYPES } from '@kbn/field-types';
+import type { EsHitRecord } from '../types';
+
 export const esHitsMock = [
   {
     _index: 'i',
@@ -54,3 +58,36 @@ export const esHitsMockWithSort = esHitsMock.map((hit) => ({
   ...hit,
   sort: [hit._source.date], // some `sort` param should be specified for "fetch more" to work
 }));
+
+const baseDate = new Date('2024-01-1').getTime();
+const dateInc = 100_000_000;
+
+const generateFieldValue = (field: DataViewField, index: number) => {
+  switch (field.type) {
+    case KBN_FIELD_TYPES.BOOLEAN:
+      return index % 2 === 0;
+    case KBN_FIELD_TYPES.DATE:
+      return new Date(baseDate + index * dateInc).toISOString();
+    case KBN_FIELD_TYPES.NUMBER:
+      return Array.from(field.name).reduce((sum, char) => sum + char.charCodeAt(0) + index, 0);
+    case KBN_FIELD_TYPES.STRING:
+      return `${field.name}_${index}`;
+    default:
+      throw new Error(`Unsupported type ${field.type}`);
+  }
+};
+
+export const generateEsHits = (dataView: DataView, count: number): EsHitRecord[] => {
+  return Array.from({ length: count }, (_, i) => ({
+    _index: 'i',
+    _id: i.toString(),
+    _score: 1,
+    fields: dataView.fields.reduce<Record<string, any>>(
+      (source, field) => ({
+        ...source,
+        [field.name]: [generateFieldValue(field, i)],
+      }),
+      {}
+    ),
+  }));
+};
diff --git a/packages/kbn-unified-data-table/index.ts b/packages/kbn-unified-data-table/index.ts
index f59b98cda99d92..26095d948cb8ae 100644
--- a/packages/kbn-unified-data-table/index.ts
+++ b/packages/kbn-unified-data-table/index.ts
@@ -7,11 +7,7 @@
  */
 
 export { UnifiedDataTable, DataLoadingState } from './src/components/data_table';
-export type {
-  UnifiedDataTableProps,
-  UnifiedDataTableRenderCustomToolbar,
-  UnifiedDataTableRenderCustomToolbarProps,
-} from './src/components/data_table';
+export type { UnifiedDataTableProps } from './src/components/data_table';
 export {
   RowHeightSettings,
   type RowHeightSettingsProps,
@@ -31,3 +27,12 @@ export { popularizeField } from './src/utils/popularize_field';
 export { useColumns } from './src/hooks/use_data_grid_columns';
 export { OPEN_DETAILS, SELECT_ROW } from './src/components/data_table_columns';
 export { DataTableRowControl } from './src/components/data_table_row_control';
+
+export type {
+  UnifiedDataTableRenderCustomToolbar,
+  UnifiedDataTableRenderCustomToolbarProps,
+} from './src/components/custom_toolbar/render_custom_toolbar';
+export {
+  getRenderCustomToolbarWithElements,
+  renderCustomToolbar,
+} from './src/components/custom_toolbar/render_custom_toolbar';
diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/compare_documents.test.tsx b/packages/kbn-unified-data-table/src/components/compare_documents/compare_documents.test.tsx
new file mode 100644
index 00000000000000..5bf4c631cf5cfa
--- /dev/null
+++ b/packages/kbn-unified-data-table/src/components/compare_documents/compare_documents.test.tsx
@@ -0,0 +1,173 @@
+/*
+ * 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 type { EuiDataGridProps } from '@elastic/eui';
+import { buildDataTableRecord } from '@kbn/discover-utils';
+import { generateEsHits } from '@kbn/discover-utils/src/__mocks__';
+import { render } from '@testing-library/react';
+import { omit } from 'lodash';
+import React from 'react';
+import { dataViewWithTimefieldMock } from '../../../__mocks__/data_view_with_timefield';
+import CompareDocuments, { CompareDocumentsProps } from './compare_documents';
+import { useComparisonFields } from './hooks/use_comparison_fields';
+
+let mockLocalStorage: Record<string, string> = {};
+
+jest.mock('react-use/lib/useLocalStorage', () =>
+  jest.fn((key: string, value: unknown) => {
+    mockLocalStorage[key] = JSON.stringify(value);
+    return [value, jest.fn()];
+  })
+);
+
+let mockDataGridProps: EuiDataGridProps | undefined;
+
+jest.mock('@elastic/eui', () => ({
+  ...jest.requireActual('@elastic/eui'),
+  EuiDataGrid: jest.fn((props) => {
+    mockDataGridProps = props;
+    return <></>;
+  }),
+}));
+
+jest.mock('./hooks/use_comparison_fields', () => {
+  const originalModule = jest.requireActual('./hooks/use_comparison_fields');
+  return {
+    ...originalModule,
+    useComparisonFields: jest.fn(originalModule.useComparisonFields),
+  };
+});
+
+const docs = generateEsHits(dataViewWithTimefieldMock, 5).map((hit) =>
+  buildDataTableRecord(hit, dataViewWithTimefieldMock)
+);
+
+const getDocById = (id: string) => docs.find((doc) => doc.raw._id === id);
+
+const renderCompareDocuments = ({
+  forceShowAllFields = false,
+}: { forceShowAllFields?: boolean } = {}) => {
+  const setSelectedDocs = jest.fn();
+  const getCompareDocuments = (props?: Partial<CompareDocumentsProps>) => (
+    <CompareDocuments
+      id="test"
+      wrapper={document.body}
+      consumer="test"
+      ariaDescribedBy="test"
+      ariaLabelledBy="test"
+      dataView={dataViewWithTimefieldMock}
+      isPlainRecord={false}
+      selectedFieldNames={['message', 'extension', 'bytes']}
+      selectedDocs={['0', '1', '2']}
+      schemaDetectors={[]}
+      forceShowAllFields={forceShowAllFields}
+      showFullScreenButton={true}
+      fieldFormats={{} as any}
+      getDocById={getDocById}
+      setSelectedDocs={setSelectedDocs}
+      setIsCompareActive={jest.fn()}
+      {...props}
+    />
+  );
+  const { rerender } = render(getCompareDocuments());
+  return {
+    setSelectedDocs,
+    rerender: (props?: Partial<CompareDocumentsProps>) => rerender(getCompareDocuments(props)),
+  };
+};
+
+describe('CompareDocuments', () => {
+  beforeEach(() => {
+    mockLocalStorage = {};
+    mockDataGridProps = undefined;
+  });
+
+  it('should pass expected grid props', () => {
+    renderCompareDocuments();
+    expect(mockDataGridProps).toBeDefined();
+    expect(mockDataGridProps?.columns).toBeDefined();
+    expect(mockDataGridProps?.css).toBeDefined();
+    expect(omit(mockDataGridProps, 'columns', 'css')).toMatchInlineSnapshot(`
+      Object {
+        "aria-describedby": "test",
+        "aria-labelledby": "test",
+        "columnVisibility": Object {
+          "setVisibleColumns": [Function],
+          "visibleColumns": Array [
+            "fields_generated-id",
+            "0",
+            "1",
+            "2",
+          ],
+        },
+        "data-test-subj": "unifiedDataTableCompareDocuments",
+        "gridStyle": Object {
+          "border": "horizontal",
+          "cellPadding": "l",
+          "fontSize": "s",
+          "header": "underline",
+          "rowHover": "highlight",
+          "stripes": undefined,
+        },
+        "id": "test",
+        "inMemory": Object {
+          "level": "sorting",
+        },
+        "renderCellValue": [Function],
+        "renderCustomToolbar": [Function],
+        "rowCount": 3,
+        "rowHeightsOptions": Object {
+          "defaultHeight": "auto",
+        },
+        "schemaDetectors": Array [],
+        "toolbarVisibility": Object {
+          "showColumnSelector": false,
+          "showDisplaySelector": false,
+          "showFullScreenSelector": true,
+        },
+      }
+    `);
+  });
+
+  it('should get values from local storage', () => {
+    renderCompareDocuments();
+    expect(mockLocalStorage).toEqual({
+      'test:dataGridComparisonDiffMode': '"basic"',
+      'test:dataGridComparisonShowAllFields': 'false',
+      'test:dataGridComparisonShowDiff': 'true',
+      'test:dataGridComparisonShowDiffDecorations': 'true',
+      'test:dataGridComparisonShowMatchingValues': 'true',
+    });
+  });
+
+  it('should set selected docs when columns change', () => {
+    const { setSelectedDocs } = renderCompareDocuments();
+    const visibleColumns = ['fields_generated-id', '0', '1', '2'];
+    mockDataGridProps?.columnVisibility.setVisibleColumns(visibleColumns);
+    expect(setSelectedDocs).toHaveBeenCalledWith(visibleColumns.slice(1));
+  });
+
+  it('should force show all fields when prop is true', () => {
+    renderCompareDocuments();
+    expect(useComparisonFields).toHaveBeenLastCalledWith(
+      expect.objectContaining({ showAllFields: false })
+    );
+    renderCompareDocuments({ forceShowAllFields: true });
+    expect(useComparisonFields).toHaveBeenLastCalledWith(
+      expect.objectContaining({ showAllFields: true })
+    );
+  });
+
+  it('should retain comparison docs when getDocById loses access to them', () => {
+    const { rerender } = renderCompareDocuments();
+    const visibleColumns = ['fields_generated-id', '0', '1', '2'];
+    expect(mockDataGridProps?.columnVisibility.visibleColumns).toEqual(visibleColumns);
+    rerender({ getDocById: () => undefined });
+    expect(mockDataGridProps?.columnVisibility.visibleColumns).toEqual(visibleColumns);
+  });
+});
diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/compare_documents.tsx b/packages/kbn-unified-data-table/src/components/compare_documents/compare_documents.tsx
new file mode 100644
index 00000000000000..b6f22b67603626
--- /dev/null
+++ b/packages/kbn-unified-data-table/src/components/compare_documents/compare_documents.tsx
@@ -0,0 +1,215 @@
+/*
+ * 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 {
+  EuiDataGrid,
+  EuiDataGridColumnVisibility,
+  EuiDataGridInMemory,
+  EuiDataGridProps,
+  EuiDataGridRowHeightsOptions,
+  EuiDataGridSchemaDetector,
+  EuiDataGridStyle,
+  EuiDataGridToolBarVisibilityOptions,
+  useGeneratedHtmlId,
+} from '@elastic/eui';
+import type { DataView } from '@kbn/data-views-plugin/common';
+import type { DataTableRecord } from '@kbn/discover-utils/types';
+import type { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
+import { memoize } from 'lodash';
+import React, { useMemo, useState } from 'react';
+import useLocalStorage from 'react-use/lib/useLocalStorage';
+import { GRID_STYLE } from '../../constants';
+import { ComparisonControls } from './comparison_controls';
+import { renderComparisonToolbar } from './comparison_toolbar';
+import { useComparisonCellValue } from './hooks/use_comparison_cell_value';
+import { useComparisonColumns } from './hooks/use_comparison_columns';
+import { useComparisonCss } from './hooks/use_comparison_css';
+import { useComparisonFields } from './hooks/use_comparison_fields';
+import type { DocumentDiffMode } from './types';
+
+export interface CompareDocumentsProps {
+  id: string;
+  wrapper: HTMLElement | null;
+  consumer: string;
+  ariaDescribedBy: string;
+  ariaLabelledBy: string;
+  dataView: DataView;
+  isPlainRecord: boolean;
+  selectedFieldNames: string[];
+  selectedDocs: string[];
+  schemaDetectors: EuiDataGridSchemaDetector[];
+  forceShowAllFields: boolean;
+  showFullScreenButton?: boolean;
+  fieldFormats: FieldFormatsStart;
+  getDocById: (id: string) => DataTableRecord | undefined;
+  setSelectedDocs: (selectedDocs: string[]) => void;
+  setIsCompareActive: (isCompareActive: boolean) => void;
+}
+
+const COMPARISON_ROW_HEIGHT: EuiDataGridRowHeightsOptions = { defaultHeight: 'auto' };
+const COMPARISON_IN_MEMORY: EuiDataGridInMemory = { level: 'sorting' };
+const COMPARISON_GRID_STYLE: EuiDataGridStyle = { ...GRID_STYLE, stripes: undefined };
+
+const getStorageKey = (consumer: string, key: string) => `${consumer}:dataGridComparison${key}`;
+
+const CompareDocuments = ({
+  id,
+  wrapper,
+  consumer,
+  ariaDescribedBy,
+  ariaLabelledBy,
+  dataView,
+  isPlainRecord,
+  selectedFieldNames,
+  selectedDocs,
+  schemaDetectors,
+  forceShowAllFields,
+  showFullScreenButton,
+  fieldFormats,
+  getDocById,
+  setSelectedDocs,
+  setIsCompareActive,
+}: CompareDocumentsProps) => {
+  // Memoize getDocById to ensure we don't lose access to the comparison docs if, for example,
+  // a time range change or auto refresh causes the previous docs to no longer be available
+  const [memoizedGetDocById] = useState(() => memoize(getDocById));
+  const [showDiff, setShowDiff] = useLocalStorage(getStorageKey(consumer, 'ShowDiff'), true);
+  const [diffMode, setDiffMode] = useLocalStorage<DocumentDiffMode>(
+    getStorageKey(consumer, 'DiffMode'),
+    'basic'
+  );
+  const [showDiffDecorations, setShowDiffDecorations] = useLocalStorage(
+    getStorageKey(consumer, 'ShowDiffDecorations'),
+    true
+  );
+  const [showAllFields, setShowAllFields] = useLocalStorage(
+    getStorageKey(consumer, 'ShowAllFields'),
+    false
+  );
+  const [showMatchingValues, setShowMatchingValues] = useLocalStorage(
+    getStorageKey(consumer, 'ShowMatchingValues'),
+    true
+  );
+
+  const fieldColumnId = useGeneratedHtmlId({ prefix: 'fields' });
+  const { comparisonFields, totalFields } = useComparisonFields({
+    dataView,
+    selectedFieldNames,
+    selectedDocs,
+    showAllFields: Boolean(forceShowAllFields || showAllFields),
+    showMatchingValues: Boolean(showMatchingValues),
+    getDocById: memoizedGetDocById,
+  });
+  const comparisonColumns = useComparisonColumns({
+    wrapper,
+    isPlainRecord,
+    fieldColumnId,
+    selectedDocs,
+    getDocById: memoizedGetDocById,
+    setSelectedDocs,
+  });
+  const comparisonColumnVisibility = useMemo<EuiDataGridColumnVisibility>(
+    () => ({
+      visibleColumns: comparisonColumns.map(({ id: columnId }) => columnId),
+      setVisibleColumns: (visibleColumns) => {
+        const [_fieldColumnId, ...newSelectedDocs] = visibleColumns;
+        setSelectedDocs(newSelectedDocs);
+      },
+    }),
+    [comparisonColumns, setSelectedDocs]
+  );
+  const additionalControls = useMemo(
+    () => (
+      <ComparisonControls
+        isPlainRecord={isPlainRecord}
+        selectedDocs={selectedDocs}
+        showDiff={showDiff}
+        diffMode={diffMode}
+        showDiffDecorations={showDiffDecorations}
+        showMatchingValues={showMatchingValues}
+        showAllFields={showAllFields}
+        forceShowAllFields={forceShowAllFields}
+        setIsCompareActive={setIsCompareActive}
+        setShowDiff={setShowDiff}
+        setDiffMode={setDiffMode}
+        setShowDiffDecorations={setShowDiffDecorations}
+        setShowMatchingValues={setShowMatchingValues}
+        setShowAllFields={setShowAllFields}
+      />
+    ),
+    [
+      diffMode,
+      forceShowAllFields,
+      isPlainRecord,
+      selectedDocs,
+      setDiffMode,
+      setIsCompareActive,
+      setShowAllFields,
+      setShowDiff,
+      setShowDiffDecorations,
+      setShowMatchingValues,
+      showAllFields,
+      showDiff,
+      showDiffDecorations,
+      showMatchingValues,
+    ]
+  );
+  const comparisonToolbarVisibility = useMemo<EuiDataGridToolBarVisibilityOptions>(
+    () => ({
+      showColumnSelector: false,
+      showDisplaySelector: false,
+      showFullScreenSelector: showFullScreenButton,
+    }),
+    [showFullScreenButton]
+  );
+  const renderCustomToolbarFn = useMemo<EuiDataGridProps['renderCustomToolbar'] | undefined>(
+    () =>
+      renderComparisonToolbar({
+        additionalControls,
+        comparisonFields,
+        totalFields,
+      }),
+    [additionalControls, comparisonFields, totalFields]
+  );
+  const renderCellValue = useComparisonCellValue({
+    dataView,
+    comparisonFields,
+    fieldColumnId,
+    selectedDocs,
+    diffMode: showDiff ? diffMode : undefined,
+    fieldFormats,
+    getDocById: memoizedGetDocById,
+  });
+  const comparisonCss = useComparisonCss({
+    diffMode: showDiff ? diffMode : undefined,
+    showDiffDecorations,
+  });
+
+  return (
+    <EuiDataGrid
+      id={id}
+      aria-describedby={ariaDescribedBy}
+      aria-labelledby={ariaLabelledBy}
+      gridStyle={COMPARISON_GRID_STYLE}
+      toolbarVisibility={comparisonToolbarVisibility}
+      columns={comparisonColumns}
+      columnVisibility={comparisonColumnVisibility}
+      rowCount={comparisonFields.length}
+      rowHeightsOptions={COMPARISON_ROW_HEIGHT}
+      inMemory={COMPARISON_IN_MEMORY}
+      schemaDetectors={schemaDetectors}
+      renderCellValue={renderCellValue}
+      renderCustomToolbar={renderCustomToolbarFn}
+      data-test-subj="unifiedDataTableCompareDocuments"
+      css={comparisonCss}
+    />
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default CompareDocuments;
diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/comparison_controls.test.tsx b/packages/kbn-unified-data-table/src/components/compare_documents/comparison_controls.test.tsx
new file mode 100644
index 00000000000000..f95c547fac0acd
--- /dev/null
+++ b/packages/kbn-unified-data-table/src/components/compare_documents/comparison_controls.test.tsx
@@ -0,0 +1,196 @@
+/*
+ * 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 { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React, { useState } from 'react';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
+import { ComparisonControls, ComparisonControlsProps } from './comparison_controls';
+import { DocumentDiffMode } from './types';
+
+const renderComparisonControls = ({
+  isPlainRecord = false,
+  forceShowAllFields = false,
+}: {
+  isPlainRecord?: ComparisonControlsProps['isPlainRecord'];
+  forceShowAllFields?: ComparisonControlsProps['forceShowAllFields'];
+} = {}) => {
+  const selectedDocs = ['0', '1', '2'];
+  const Wrapper = () => {
+    const [showDiff, setShowDiff] = useState(true);
+    const [diffMode, setDiffMode] = useState<DocumentDiffMode>('basic');
+    const [showDiffDecorations, setShowDiffDecorations] = useState(true);
+    const [showMatchingValues, setShowMatchingValues] = useState(true);
+    const [showAllFields, setShowAllFields] = useState(true);
+    const [isCompareActive, setIsCompareActive] = useState(true);
+    return (
+      <>
+        {isCompareActive && <span>Comparison active</span>}
+        <IntlProvider locale="en">
+          <ComparisonControls
+            isPlainRecord={isPlainRecord}
+            selectedDocs={selectedDocs}
+            showDiff={showDiff}
+            diffMode={diffMode}
+            showDiffDecorations={showDiffDecorations}
+            showMatchingValues={showMatchingValues}
+            showAllFields={showAllFields}
+            forceShowAllFields={forceShowAllFields}
+            setIsCompareActive={setIsCompareActive}
+            setShowDiff={setShowDiff}
+            setDiffMode={setDiffMode}
+            setShowDiffDecorations={setShowDiffDecorations}
+            setShowMatchingValues={setShowMatchingValues}
+            setShowAllFields={setShowAllFields}
+          />
+        </IntlProvider>
+      </>
+    );
+  };
+  render(<Wrapper />);
+  const getComparisonSettingsButton = () =>
+    screen.getByRole('button', { name: 'Comparison settings' });
+  const getShowDiffSwitch = () => screen.getByTestId('unifiedDataTableShowDiffSwitch');
+  const getDiffModeEntry = (mode: DocumentDiffMode) =>
+    screen.getByTestId(`unifiedDataTableDiffMode-${mode}`);
+  const getShowAllFieldsSwitch = () =>
+    screen.queryByTestId('unifiedDataTableDiffOptionSwitch-showAllFields');
+  const getShowMatchingValuesSwitch = () =>
+    screen.getByTestId('unifiedDataTableDiffOptionSwitch-showMatchingValues');
+  const getShowDiffDecorationsSwitch = () =>
+    screen.getByTestId('unifiedDataTableDiffOptionSwitch-showDiffDecorations');
+  return {
+    getComparisonCountDisplay: () =>
+      screen.getByText(
+        `Comparing ${selectedDocs.length} ${isPlainRecord ? 'results' : 'documents'}`
+      ),
+    getComparisonSettingsButton,
+    clickComparisonSettingsButton: () => userEvent.click(getComparisonSettingsButton()),
+    getShowDiffSwitch,
+    clickShowDiffSwitch: () =>
+      userEvent.click(getShowDiffSwitch(), undefined, {
+        skipPointerEventsCheck: true,
+      }),
+    clickDiffModeFullValueButton: () =>
+      userEvent.click(screen.getByRole('button', { name: 'Full value' }), undefined, {
+        skipPointerEventsCheck: true,
+      }),
+    clickDiffModeByCharacterButton: () =>
+      userEvent.click(screen.getByRole('button', { name: 'By character' }), undefined, {
+        skipPointerEventsCheck: true,
+      }),
+    clickDiffModeByWordButton: () =>
+      userEvent.click(screen.getByRole('button', { name: 'By word' }), undefined, {
+        skipPointerEventsCheck: true,
+      }),
+    clickDiffModeByLineButton: () =>
+      userEvent.click(screen.getByRole('button', { name: 'By line' }), undefined, {
+        skipPointerEventsCheck: true,
+      }),
+    getDiffModeEntry,
+    diffModeIsSelected: (mode: DocumentDiffMode) =>
+      getDiffModeEntry(mode).getAttribute('aria-current') === 'true',
+    getShowAllFieldsSwitch,
+    clickShowAllFieldsSwitch: () => {
+      const fieldSwitch = getShowAllFieldsSwitch();
+      if (fieldSwitch) {
+        userEvent.click(fieldSwitch, undefined, {
+          skipPointerEventsCheck: true,
+        });
+      }
+    },
+    getShowMatchingValuesSwitch,
+    clickShowMatchingValuesSwitch: () =>
+      userEvent.click(getShowMatchingValuesSwitch(), undefined, {
+        skipPointerEventsCheck: true,
+      }),
+    getShowDiffDecorationsSwitch,
+    clickShowDiffDecorationsSwitch: () =>
+      userEvent.click(getShowDiffDecorationsSwitch(), undefined, {
+        skipPointerEventsCheck: true,
+      }),
+    getExitComparisonButton: () => screen.getByRole('button', { name: 'Exit comparison mode' }),
+    isCompareActive: () => screen.queryByText('Comparison active') !== null,
+  };
+};
+
+describe('ComparisonControls', () => {
+  it('should render', () => {
+    const result = renderComparisonControls();
+    expect(result.getComparisonCountDisplay()).toBeInTheDocument();
+    expect(result.getComparisonSettingsButton()).toBeInTheDocument();
+    expect(result.getExitComparisonButton()).toBeInTheDocument();
+  });
+
+  it('should render with isPlainRecord = true', () => {
+    const result = renderComparisonControls({ isPlainRecord: true });
+    expect(result.getComparisonCountDisplay()).toBeInTheDocument();
+    expect(result.getComparisonSettingsButton()).toBeInTheDocument();
+    expect(result.getExitComparisonButton()).toBeInTheDocument();
+  });
+
+  it('should allow toggling show diff switch', () => {
+    const result = renderComparisonControls();
+    result.clickComparisonSettingsButton();
+    expect(result.getShowDiffSwitch()).toBeChecked();
+    expect(result.getDiffModeEntry('basic')).toBeEnabled();
+    expect(result.getDiffModeEntry('chars')).toBeEnabled();
+    expect(result.getDiffModeEntry('words')).toBeEnabled();
+    expect(result.getDiffModeEntry('lines')).toBeEnabled();
+    expect(result.getShowDiffDecorationsSwitch()).toBeEnabled();
+    result.clickShowDiffSwitch();
+    expect(result.getShowDiffSwitch()).not.toBeChecked();
+    expect(result.getDiffModeEntry('basic')).toBeDisabled();
+    expect(result.getDiffModeEntry('chars')).toBeDisabled();
+    expect(result.getDiffModeEntry('words')).toBeDisabled();
+    expect(result.getDiffModeEntry('lines')).toBeDisabled();
+    expect(result.getShowDiffDecorationsSwitch()).toBeDisabled();
+    result.clickShowDiffSwitch();
+    expect(result.getShowDiffSwitch()).toBeChecked();
+  });
+
+  it('should allow changing diff mode', () => {
+    const result = renderComparisonControls();
+    result.clickComparisonSettingsButton();
+    expect(result.diffModeIsSelected('basic')).toBe(true);
+    result.clickDiffModeByCharacterButton();
+    expect(result.diffModeIsSelected('chars')).toBe(true);
+    result.clickDiffModeByWordButton();
+    expect(result.diffModeIsSelected('words')).toBe(true);
+    result.clickDiffModeByLineButton();
+    expect(result.diffModeIsSelected('lines')).toBe(true);
+    result.clickDiffModeFullValueButton();
+    expect(result.diffModeIsSelected('basic')).toBe(true);
+  });
+
+  it('should allow toggling options', () => {
+    const result = renderComparisonControls();
+    result.clickComparisonSettingsButton();
+    expect(result.getShowAllFieldsSwitch()).toBeChecked();
+    expect(result.getShowMatchingValuesSwitch()).toBeChecked();
+    expect(result.getShowDiffDecorationsSwitch()).toBeChecked();
+    result.clickShowAllFieldsSwitch();
+    expect(result.getShowAllFieldsSwitch()).not.toBeChecked();
+    result.clickShowMatchingValuesSwitch();
+    expect(result.getShowMatchingValuesSwitch()).not.toBeChecked();
+    result.clickShowDiffDecorationsSwitch();
+    expect(result.getShowDiffDecorationsSwitch()).not.toBeChecked();
+  });
+
+  it('should hide showAllFields switch when forceShowAllFields is true', () => {
+    const result = renderComparisonControls({ forceShowAllFields: true });
+    expect(result.getShowAllFieldsSwitch()).not.toBeInTheDocument();
+  });
+
+  it('should exit comparison mode', () => {
+    const result = renderComparisonControls();
+    expect(result.isCompareActive()).toBe(true);
+    userEvent.click(result.getExitComparisonButton());
+    expect(result.isCompareActive()).toBe(false);
+  });
+});
diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/comparison_controls.tsx b/packages/kbn-unified-data-table/src/components/compare_documents/comparison_controls.tsx
new file mode 100644
index 00000000000000..6787c9e56dd05d
--- /dev/null
+++ b/packages/kbn-unified-data-table/src/components/compare_documents/comparison_controls.tsx
@@ -0,0 +1,442 @@
+/*
+ * 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 {
+  EuiContextMenuItem,
+  EuiContextMenuItemProps,
+  EuiContextMenuPanel,
+  EuiDataGridToolbarControl,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiIconTip,
+  EuiPopover,
+  EuiSwitch,
+  EuiSwitchProps,
+  EuiText,
+  EuiTitle,
+  EuiTitleSize,
+  useEuiTheme,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React, { FC, ReactNode, useState } from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
+import type { DocumentDiffMode } from './types';
+
+export interface ComparisonControlsProps {
+  isPlainRecord?: boolean;
+  selectedDocs: string[];
+  showDiff: boolean | undefined;
+  diffMode: DocumentDiffMode | undefined;
+  showDiffDecorations: boolean | undefined;
+  showMatchingValues: boolean | undefined;
+  showAllFields: boolean | undefined;
+  forceShowAllFields: boolean;
+  setIsCompareActive: (isCompareActive: boolean) => void;
+  setShowDiff: (showDiff: boolean) => void;
+  setDiffMode: (diffMode: DocumentDiffMode) => void;
+  setShowDiffDecorations: (showDiffDecorations: boolean) => void;
+  setShowMatchingValues: (showMatchingValues: boolean) => void;
+  setShowAllFields: (showAllFields: boolean) => void;
+}
+
+export const ComparisonControls = ({
+  isPlainRecord,
+  selectedDocs,
+  showDiff,
+  diffMode,
+  showDiffDecorations,
+  showMatchingValues,
+  showAllFields,
+  forceShowAllFields,
+  setIsCompareActive,
+  setShowDiff,
+  setDiffMode,
+  setShowDiffDecorations,
+  setShowMatchingValues,
+  setShowAllFields,
+}: ComparisonControlsProps) => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <EuiFlexGroup responsive={false} wrap={true} gutterSize="s" alignItems="center">
+      <EuiFlexItem grow={false} css={{ marginRight: euiTheme.size.s }}>
+        <EuiText size="s">
+          <strong data-test-subj="unifiedDataTableComparisonDisplay">
+            {isPlainRecord ? (
+              <FormattedMessage
+                id="unifiedDataTable.comparingResults"
+                defaultMessage="Comparing {documentCount} results"
+                values={{ documentCount: selectedDocs.length }}
+              />
+            ) : (
+              <FormattedMessage
+                id="unifiedDataTable.comparingDocuments"
+                defaultMessage="Comparing {documentCount} documents"
+                values={{ documentCount: selectedDocs.length }}
+              />
+            )}
+          </strong>
+        </EuiText>
+      </EuiFlexItem>
+
+      <EuiFlexItem grow={false}>
+        <ComparisonSettings
+          showDiff={showDiff}
+          diffMode={diffMode}
+          showDiffDecorations={showDiffDecorations}
+          showMatchingValues={showMatchingValues}
+          showAllFields={showAllFields}
+          forceShowAllFields={forceShowAllFields}
+          setShowDiff={setShowDiff}
+          setDiffMode={setDiffMode}
+          setShowDiffDecorations={setShowDiffDecorations}
+          setShowMatchingValues={setShowMatchingValues}
+          setShowAllFields={setShowAllFields}
+        />
+      </EuiFlexItem>
+
+      <EuiFlexItem grow={false}>
+        <div className="unifiedDataTableToolbarControlButton">
+          <EuiDataGridToolbarControl
+            iconType="exit"
+            onClick={() => {
+              setIsCompareActive(false);
+            }}
+            data-test-subj="unifiedDataTableExitDocumentComparison"
+          >
+            <FormattedMessage
+              id="unifiedDataTable.exitDocumentComparison"
+              defaultMessage="Exit comparison mode"
+            />
+          </EuiDataGridToolbarControl>
+        </div>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
+const showDiffLabel = i18n.translate('unifiedDataTable.showDiff', {
+  defaultMessage: 'Show diff',
+});
+
+const ComparisonSettings = ({
+  showDiff,
+  diffMode,
+  showDiffDecorations,
+  showMatchingValues,
+  showAllFields,
+  forceShowAllFields,
+  setShowDiff,
+  setDiffMode,
+  setShowDiffDecorations,
+  setShowMatchingValues,
+  setShowAllFields,
+}: Pick<
+  ComparisonControlsProps,
+  | 'showDiff'
+  | 'diffMode'
+  | 'showDiffDecorations'
+  | 'showMatchingValues'
+  | 'showAllFields'
+  | 'forceShowAllFields'
+  | 'setShowDiff'
+  | 'setDiffMode'
+  | 'setShowDiffDecorations'
+  | 'setShowMatchingValues'
+  | 'setShowAllFields'
+>) => {
+  const [isSettingsMenuOpen, setIsSettingsMenuOpen] = useState(false);
+
+  return (
+    <EuiPopover
+      button={
+        <div className="unifiedDataTableToolbarControlButton">
+          <EuiDataGridToolbarControl
+            iconType="gear"
+            onClick={() => {
+              setIsSettingsMenuOpen(!isSettingsMenuOpen);
+            }}
+            data-test-subj="unifiedDataTableComparisonSettings"
+          >
+            <FormattedMessage
+              id="unifiedDataTable.comparisonSettings"
+              defaultMessage="Comparison settings"
+            />
+          </EuiDataGridToolbarControl>
+        </div>
+      }
+      isOpen={isSettingsMenuOpen}
+      closePopover={() => {
+        setIsSettingsMenuOpen(false);
+      }}
+      panelPaddingSize="none"
+      anchorPosition="downCenter"
+    >
+      <EuiContextMenuPanel
+        size="s"
+        data-test-subj="unifiedDataTableComparisonSettingsMenu"
+        css={{
+          '.euiContextMenuItem__text': {
+            overflow: 'visible',
+          },
+        }}
+      >
+        <SectionHeader
+          title={showDiffLabel}
+          append={
+            <EuiSwitch
+              label={showDiffLabel}
+              showLabel={false}
+              checked={Boolean(showDiff)}
+              compressed
+              onChange={(e) => {
+                setShowDiff(e.target.checked);
+              }}
+              data-test-subj="unifiedDataTableShowDiffSwitch"
+            />
+          }
+        />
+
+        <SectionHeader
+          title={<FormattedMessage id="unifiedDataTable.diffModesBasic" defaultMessage="Basic" />}
+          type="subsection"
+        />
+
+        <DiffModeEntry
+          entryDiffMode="basic"
+          diffMode={diffMode}
+          setDiffMode={setDiffMode}
+          disabled={!showDiff}
+        >
+          <FormattedMessage id="unifiedDataTable.diffModeFullValue" defaultMessage="Full value" />
+        </DiffModeEntry>
+
+        <SectionHeader
+          title={
+            <FormattedMessage id="unifiedDataTable.diffModesAdvanced" defaultMessage="Advanced" />
+          }
+          description={
+            <FormattedMessage
+              id="unifiedDataTable.advancedDiffModesTooltip"
+              defaultMessage="Advanced modes offer enhanced diffing capabilities, but operate on raw documents and therefore do not support field formatting."
+            />
+          }
+          type="subsection"
+          noPadding
+        />
+
+        <DiffModeEntry
+          entryDiffMode="chars"
+          diffMode={diffMode}
+          setDiffMode={setDiffMode}
+          disabled={!showDiff}
+        >
+          <FormattedMessage id="unifiedDataTable.diffModeChars" defaultMessage="By character" />
+        </DiffModeEntry>
+
+        <DiffModeEntry
+          entryDiffMode="words"
+          diffMode={diffMode}
+          setDiffMode={setDiffMode}
+          disabled={!showDiff}
+        >
+          <FormattedMessage id="unifiedDataTable.diffModeWords" defaultMessage="By word" />
+        </DiffModeEntry>
+
+        <DiffModeEntry
+          entryDiffMode="lines"
+          diffMode={diffMode}
+          setDiffMode={setDiffMode}
+          disabled={!showDiff}
+        >
+          <FormattedMessage id="unifiedDataTable.diffModeLines" defaultMessage="By line" />
+        </DiffModeEntry>
+
+        <EuiHorizontalRule margin="none" />
+
+        <SectionHeader
+          title={<FormattedMessage id="unifiedDataTable.diffOptions" defaultMessage="Options" />}
+        />
+
+        {!forceShowAllFields && (
+          <DiffOptionSwitch
+            label={i18n.translate('unifiedDataTable.showAllFields', {
+              defaultMessage: 'Show full field list',
+            })}
+            description={i18n.translate('unifiedDataTable.showAllFieldsDescription', {
+              defaultMessage:
+                'Show all available fields if enabled, otherwise only fields with columns in the main table.',
+            })}
+            checked={showAllFields ?? false}
+            onChange={(e) => {
+              setShowAllFields(e.target.checked);
+            }}
+            data-test-subj="showAllFields"
+            itemCss={{ paddingBottom: 0 }}
+          />
+        )}
+
+        <DiffOptionSwitch
+          label={i18n.translate('unifiedDataTable.showMatchingValues', {
+            defaultMessage: 'Show matching fields',
+          })}
+          description={i18n.translate('unifiedDataTable.showMatchingValuesDescription', {
+            defaultMessage:
+              'Show fields where all values are equal if enabled, otherwise only fields with differences.',
+          })}
+          checked={showMatchingValues ?? true}
+          onChange={(e) => {
+            setShowMatchingValues(e.target.checked);
+          }}
+          data-test-subj="showMatchingValues"
+          itemCss={{ paddingBottom: 0 }}
+        />
+
+        <DiffOptionSwitch
+          label={i18n.translate('unifiedDataTable.showDiffDecorations', {
+            defaultMessage: 'Show diff decorations',
+          })}
+          description={i18n.translate('unifiedDataTable.showDiffDecorationsDescription', {
+            defaultMessage:
+              'Show text decorations in diffs if enabled, otherwise only use highlighting.',
+          })}
+          checked={showDiffDecorations ?? true}
+          disabled={!showDiff}
+          data-test-subj="showDiffDecorations"
+          onChange={(e) => {
+            setShowDiffDecorations(e.target.checked);
+          }}
+        />
+      </EuiContextMenuPanel>
+    </EuiPopover>
+  );
+};
+
+const SectionHeader = ({
+  title,
+  description,
+  type = 'section',
+  noPadding,
+  append,
+}: {
+  title: ReactNode;
+  description?: ReactNode;
+  type?: 'section' | 'subsection';
+  noPadding?: boolean;
+  append?: ReactNode;
+}) => {
+  const { euiTheme } = useEuiTheme();
+  const size: EuiTitleSize = type === 'section' ? 'xxs' : 'xxxs';
+  const HeadingTag = type === 'section' ? 'h3' : 'h4';
+
+  return (
+    <EuiContextMenuItem
+      size="s"
+      css={[
+        noPadding && { paddingTop: 0 },
+        { paddingBottom: 0 },
+        type === 'subsection' && { paddingLeft: `calc(${euiTheme.size.m} + ${euiTheme.size.xxs})` },
+      ]}
+    >
+      <EuiFlexGroup justifyContent="spaceBetween" alignItems="center" responsive={false}>
+        <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
+          <EuiFlexItem grow={false}>
+            <EuiTitle size={size}>
+              <HeadingTag>{title}</HeadingTag>
+            </EuiTitle>
+          </EuiFlexItem>
+          {description && (
+            <EuiFlexItem grow={false} css={{ lineHeight: 0 }}>
+              <EuiIconTip type="questionInCircle" position="right" content={description} />
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+        {append && <EuiFlexItem grow={false}>{append}</EuiFlexItem>}
+      </EuiFlexGroup>
+    </EuiContextMenuItem>
+  );
+};
+
+const enableShowDiffTooltip = i18n.translate('unifiedDataTable.enableShowDiff', {
+  defaultMessage: 'You need to enable Show diff',
+});
+
+const DiffModeEntry: FC<
+  Pick<ComparisonControlsProps, 'diffMode' | 'setDiffMode'> & {
+    entryDiffMode: DocumentDiffMode;
+    disabled?: boolean;
+  }
+> = ({ children, entryDiffMode, diffMode, disabled, setDiffMode }) => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <EuiContextMenuItem
+      key={entryDiffMode}
+      icon={diffMode === entryDiffMode ? 'check' : 'empty'}
+      size="s"
+      aria-current={diffMode === entryDiffMode}
+      disabled={disabled}
+      toolTipContent={disabled ? enableShowDiffTooltip : undefined}
+      onClick={() => {
+        setDiffMode(entryDiffMode);
+      }}
+      data-test-subj={`unifiedDataTableDiffMode-${entryDiffMode}`}
+      css={{ paddingLeft: `calc(${euiTheme.size.m} + ${euiTheme.size.xxs})` }}
+    >
+      {children}
+    </EuiContextMenuItem>
+  );
+};
+
+const DiffOptionSwitch = ({
+  label,
+  description,
+  checked,
+  disabled,
+  onChange,
+  ['data-test-subj']: dataTestSubj,
+  itemCss,
+}: Pick<EuiSwitchProps, 'label' | 'checked' | 'onChange'> & {
+  description?: string;
+  disabled?: boolean;
+  ['data-test-subj']: string;
+  itemCss?: EuiContextMenuItemProps['css'];
+}) => {
+  return (
+    <EuiContextMenuItem
+      size="s"
+      disabled={disabled}
+      toolTipContent={disabled ? enableShowDiffTooltip : undefined}
+      css={itemCss}
+    >
+      <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
+        <EuiFlexItem grow={false}>
+          <EuiSwitch
+            label={label}
+            checked={checked}
+            compressed
+            disabled={disabled}
+            onChange={onChange}
+            data-test-subj={`unifiedDataTableDiffOptionSwitch-${dataTestSubj}`}
+          />
+        </EuiFlexItem>
+        {description && (
+          <EuiFlexItem grow={false} css={{ lineHeight: 0 }}>
+            <EuiIconTip
+              type="questionInCircle"
+              position="right"
+              content={description}
+              iconProps={disabled ? { tabIndex: -1 } : undefined}
+            />
+          </EuiFlexItem>
+        )}
+      </EuiFlexGroup>
+    </EuiContextMenuItem>
+  );
+};
diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/comparison_toolbar.test.tsx b/packages/kbn-unified-data-table/src/components/compare_documents/comparison_toolbar.test.tsx
new file mode 100644
index 00000000000000..4709c8daaf29ea
--- /dev/null
+++ b/packages/kbn-unified-data-table/src/components/compare_documents/comparison_toolbar.test.tsx
@@ -0,0 +1,77 @@
+/*
+ * 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 { cleanup, render, screen } from '@testing-library/react';
+import React from 'react';
+import { renderComparisonToolbar } from './comparison_toolbar';
+
+const renderToolbar = ({
+  hasRoomForGridControls = true,
+  totalFields = 2,
+}: {
+  hasRoomForGridControls?: boolean;
+  totalFields?: number;
+} = {}) => {
+  const comparisonFields = ['field1', 'field2'];
+  const ComparisonToolbar = renderComparisonToolbar({
+    additionalControls: <div data-test-subj="additionalControls">additionalControls</div>,
+    comparisonFields,
+    totalFields,
+  });
+  render(
+    <ComparisonToolbar
+      hasRoomForGridControls={hasRoomForGridControls}
+      keyboardShortcutsControl={
+        <div data-test-subj="keyboardShortcutsControl">keyboardShortcutsControl</div>
+      }
+      fullScreenControl={<div data-test-subj="fullScreenControl">fullScreenControl</div>}
+      columnControl={<div data-test-subj="columnControl">columnControl</div>}
+      columnSortingControl={<div data-test-subj="columnSortingControl">columnSortingControl</div>}
+      displayControl={<div data-test-subj="displayControl">displayControl</div>}
+    />
+  );
+  return {
+    getAdditionalControls: () => screen.queryByTestId('additionalControls'),
+    getKeyboardShortcutsControl: () => screen.queryByTestId('keyboardShortcutsControl'),
+    getFullScreenControl: () => screen.queryByTestId('fullScreenControl'),
+    getDisplayControl: () => screen.queryByTestId('displayControl'),
+    getColumnControl: () => screen.queryByTestId('columnControl'),
+    getColumnSortingControl: () => screen.queryByTestId('columnSortingControl'),
+    getComparisonLimitCallout: () =>
+      screen.queryByText(
+        `Comparison is limited to ${comparisonFields.length} of ${totalFields} fields.`
+      ),
+  };
+};
+
+describe('renderComparisonToolbar', () => {
+  it('should render the toolbar', () => {
+    const result = renderToolbar();
+    expect(result.getAdditionalControls()).toBeInTheDocument();
+    expect(result.getKeyboardShortcutsControl()).toBeInTheDocument();
+    expect(result.getFullScreenControl()).toBeInTheDocument();
+    expect(result.getDisplayControl()).toBeInTheDocument();
+    expect(result.getColumnControl()).toBeInTheDocument();
+    expect(result.getColumnSortingControl()).toBeInTheDocument();
+    expect(result.getComparisonLimitCallout()).not.toBeInTheDocument();
+    cleanup();
+    const result2 = renderToolbar({ hasRoomForGridControls: false });
+    expect(result2.getAdditionalControls()).toBeInTheDocument();
+    expect(result2.getKeyboardShortcutsControl()).toBeInTheDocument();
+    expect(result2.getFullScreenControl()).toBeInTheDocument();
+    expect(result2.getDisplayControl()).toBeInTheDocument();
+    expect(result2.getColumnControl()).not.toBeInTheDocument();
+    expect(result2.getColumnSortingControl()).not.toBeInTheDocument();
+    expect(result.getComparisonLimitCallout()).not.toBeInTheDocument();
+  });
+
+  it('should render comparison limited callout when totalFields is greater than comparisonFields', () => {
+    const result = renderToolbar({ totalFields: 3 });
+    expect(result.getComparisonLimitCallout()).toBeInTheDocument();
+  });
+});
diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/comparison_toolbar.tsx b/packages/kbn-unified-data-table/src/components/compare_documents/comparison_toolbar.tsx
new file mode 100644
index 00000000000000..da6d591d65db0d
--- /dev/null
+++ b/packages/kbn-unified-data-table/src/components/compare_documents/comparison_toolbar.tsx
@@ -0,0 +1,44 @@
+/*
+ * 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 { EuiCallOut, EuiDataGridCustomToolbarProps } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React, { ReactElement } from 'react';
+import { internalRenderCustomToolbar } from '../custom_toolbar/render_custom_toolbar';
+
+export interface ComparisonToolbarProps {
+  additionalControls: ReactElement;
+  comparisonFields: string[];
+  totalFields: number;
+}
+
+export const renderComparisonToolbar = ({
+  additionalControls,
+  comparisonFields,
+  totalFields,
+}: ComparisonToolbarProps) => {
+  return (toolbarProps: EuiDataGridCustomToolbarProps) => {
+    return internalRenderCustomToolbar({
+      leftSide: additionalControls,
+      toolbarProps,
+      gridProps: {},
+      bottomSection:
+        totalFields > comparisonFields.length ? (
+          <EuiCallOut
+            size="s"
+            iconType="iInCircle"
+            title={i18n.translate('unifiedDataTable.comparisonMaxFieldsCallout', {
+              defaultMessage:
+                'Comparison is limited to {comparisonFields} of {totalFields} fields.',
+              values: { comparisonFields: comparisonFields.length, totalFields },
+            })}
+          />
+        ) : undefined,
+    });
+  };
+};
diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/hooks/__snapshots__/use_comparison_cell_value.test.tsx.snap b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/__snapshots__/use_comparison_cell_value.test.tsx.snap
new file mode 100644
index 00000000000000..84e37f5f515aa2
--- /dev/null
+++ b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/__snapshots__/use_comparison_cell_value.test.tsx.snap
@@ -0,0 +1,449 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`useComparisonCellValue should render cells with diff mode "Chars" 1`] = `
+<div
+  class="unifiedDataTable__comparisonBaseDocCell"
+  data-test-subj="0_1_0"
+>
+  <span
+    class="unifiedDataTable__cellValue"
+  >
+    This is a message val
+  </span>
+</div>
+`;
+
+exports[`useComparisonCellValue should render cells with diff mode "Chars" 2`] = `
+<div
+  data-test-subj="1_2_0"
+>
+  <span
+    class="unifiedDataTable__cellValue"
+  >
+    <span
+      class="unifiedDataTable__comparisonSegment"
+    >
+      This 
+    </span>
+    <span
+      class="unifiedDataTable__comparisonSegment unifiedDataTable__comparisonAddedSegment"
+    >
+      one 
+    </span>
+    <span
+      class="unifiedDataTable__comparisonSegment"
+    >
+      is a 
+    </span>
+    <span
+      class="unifiedDataTable__comparisonSegment unifiedDataTable__comparisonAddedSegment"
+    >
+      different 
+    </span>
+    <span
+      class="unifiedDataTable__comparisonSegment"
+    >
+      m
+    </span>
+    <span
+      class="unifiedDataTable__comparisonSegment unifiedDataTable__comparisonRemovedSegment"
+    >
+      e
+    </span>
+    <span
+      class="unifiedDataTable__comparisonSegment"
+    >
+      s
+    </span>
+    <span
+      class="unifiedDataTable__comparisonSegment unifiedDataTable__comparisonRemovedSegment"
+    >
+      sa
+    </span>
+    <span
+      class="unifiedDataTable__comparisonSegment"
+    >
+      g
+    </span>
+    <span
+      class="unifiedDataTable__comparisonSegment unifiedDataTable__comparisonRemovedSegment"
+    >
+      e
+    </span>
+    <span
+      class="unifiedDataTable__comparisonSegment"
+    >
+       val
+    </span>
+    <span
+      class="unifiedDataTable__comparisonSegment unifiedDataTable__comparisonAddedSegment"
+    >
+      ue
+    </span>
+  </span>
+</div>
+`;
+
+exports[`useComparisonCellValue should render cells with diff mode "Chars" 3`] = `
+<div
+  data-test-subj="2_3_0"
+>
+  <span
+    class="unifiedDataTable__cellValue"
+  >
+    <span
+      class="unifiedDataTable__comparisonSegment"
+    >
+      This is a message val
+    </span>
+  </span>
+</div>
+`;
+
+exports[`useComparisonCellValue should render cells with diff mode "Full value" 1`] = `
+<div
+  class="unifiedDataTable__comparisonBaseDocCell"
+  data-test-subj="0_1_0"
+>
+  <span
+    class="unifiedDataTable__cellValue"
+  >
+    This is a message val
+  </span>
+</div>
+`;
+
+exports[`useComparisonCellValue should render cells with diff mode "Full value" 2`] = `
+<div
+  class="unifiedDataTable__comparisonDiffCell"
+  data-test-subj="1_2_0"
+>
+  <span
+    class="unifiedDataTable__cellValue"
+  >
+    This one is a different msg value
+  </span>
+</div>
+`;
+
+exports[`useComparisonCellValue should render cells with diff mode "Full value" 3`] = `
+<div
+  class="unifiedDataTable__comparisonMatchCell"
+  data-test-subj="2_3_0"
+>
+  <span
+    class="unifiedDataTable__cellValue"
+  >
+    This is a message val
+  </span>
+</div>
+`;
+
+exports[`useComparisonCellValue should render cells with diff mode "Lines" 1`] = `
+<div
+  class="unifiedDataTable__comparisonBaseDocCell"
+  data-test-subj="0_1_1"
+>
+  <span
+    class="unifiedDataTable__cellValue"
+  >
+    [
+  "gif",
+  "png"
+]
+  </span>
+</div>
+`;
+
+exports[`useComparisonCellValue should render cells with diff mode "Lines" 2`] = `
+<div
+  data-test-subj="1_2_1"
+>
+  <span
+    class="unifiedDataTable__cellValue"
+  >
+    <div
+      class="unifiedDataTable__comparisonSegment"
+    >
+      [
+
+    </div>
+    <div
+      class="unifiedDataTable__comparisonSegment unifiedDataTable__comparisonRemovedSegment"
+    >
+        "gif",
+
+    </div>
+    <div
+      class="unifiedDataTable__comparisonSegment"
+    >
+        "png",
+
+    </div>
+    <div
+      class="unifiedDataTable__comparisonSegment unifiedDataTable__comparisonAddedSegment"
+    >
+        "jpg"
+
+    </div>
+    <div
+      class="unifiedDataTable__comparisonSegment"
+    >
+      ]
+    </div>
+  </span>
+</div>
+`;
+
+exports[`useComparisonCellValue should render cells with diff mode "Lines" 3`] = `
+<div
+  data-test-subj="2_3_1"
+>
+  <span
+    class="unifiedDataTable__cellValue"
+  >
+    <div
+      class="unifiedDataTable__comparisonSegment"
+    >
+      [
+  "gif",
+  "png"
+]
+    </div>
+  </span>
+</div>
+`;
+
+exports[`useComparisonCellValue should render cells with diff mode "Words" 1`] = `
+<div
+  class="unifiedDataTable__comparisonBaseDocCell"
+  data-test-subj="0_1_0"
+>
+  <span
+    class="unifiedDataTable__cellValue"
+  >
+    This is a message val
+  </span>
+</div>
+`;
+
+exports[`useComparisonCellValue should render cells with diff mode "Words" 2`] = `
+<div
+  data-test-subj="1_2_0"
+>
+  <span
+    class="unifiedDataTable__cellValue"
+  >
+    <span
+      class="unifiedDataTable__comparisonSegment"
+    >
+      This 
+    </span>
+    <span
+      class="unifiedDataTable__comparisonSegment unifiedDataTable__comparisonAddedSegment"
+    >
+      one 
+    </span>
+    <span
+      class="unifiedDataTable__comparisonSegment"
+    >
+      is a 
+    </span>
+    <span
+      class="unifiedDataTable__comparisonSegment unifiedDataTable__comparisonRemovedSegment"
+    >
+      message
+    </span>
+    <span
+      class="unifiedDataTable__comparisonSegment unifiedDataTable__comparisonAddedSegment"
+    >
+      different
+    </span>
+    <span
+      class="unifiedDataTable__comparisonSegment"
+    >
+       
+    </span>
+    <span
+      class="unifiedDataTable__comparisonSegment unifiedDataTable__comparisonRemovedSegment"
+    >
+      val
+    </span>
+    <span
+      class="unifiedDataTable__comparisonSegment unifiedDataTable__comparisonAddedSegment"
+    >
+      msg value
+    </span>
+  </span>
+</div>
+`;
+
+exports[`useComparisonCellValue should render cells with diff mode "Words" 3`] = `
+<div
+  data-test-subj="2_3_0"
+>
+  <span
+    class="unifiedDataTable__cellValue"
+  >
+    <span
+      class="unifiedDataTable__comparisonSegment"
+    >
+      This is a message val
+    </span>
+  </span>
+</div>
+`;
+
+exports[`useComparisonCellValue should render cells with no diff mode 1`] = `
+<div
+  class="unifiedDataTable__comparisonBaseDocCell"
+  data-test-subj="0_1_0"
+>
+  <span
+    class="unifiedDataTable__cellValue"
+  >
+    This is a message val
+  </span>
+</div>
+`;
+
+exports[`useComparisonCellValue should render cells with no diff mode 2`] = `
+<div
+  data-test-subj="1_2_0"
+>
+  <span
+    class="unifiedDataTable__cellValue"
+  >
+    This one is a different msg value
+  </span>
+</div>
+`;
+
+exports[`useComparisonCellValue should render cells with no diff mode 3`] = `
+<div
+  data-test-subj="2_3_0"
+>
+  <span
+    class="unifiedDataTable__cellValue"
+  >
+    This is a message val
+  </span>
+</div>
+`;
+
+exports[`useComparisonCellValue should render exmpty cell if doc is not found 1`] = `
+<div
+  data-test-subj="unknown_1_0"
+>
+  <span
+    class="unifiedDataTable__cellValue"
+  >
+    -
+  </span>
+</div>
+`;
+
+exports[`useComparisonCellValue should render field cells 1`] = `
+<div
+  data-test-subj="fieldColumnId_0_0"
+>
+  <div
+    class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-stretch-row"
+  >
+    <div
+      class="euiFlexItem emotion-euiFlexItem-growZero"
+    >
+      <span
+        class="euiToken kbnFieldIcon emotion-euiToken-square-light-s-euiColorVis1"
+      >
+        <span
+          data-euiicon-type="tokenString"
+          title="string"
+        >
+          string
+        </span>
+      </span>
+    </div>
+    <div
+      class="euiFlexItem emotion-euiFlexItem-grow-1"
+    >
+      <div
+        class="euiText unifiedDataTable__comparisonFieldName emotion-euiText-relative"
+        data-test-subj="unifiedDataTableComparisonFieldName"
+      >
+        message
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`useComparisonCellValue should render field cells 2`] = `
+<div
+  data-test-subj="fieldColumnId_0_1"
+>
+  <div
+    class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-stretch-row"
+  >
+    <div
+      class="euiFlexItem emotion-euiFlexItem-growZero"
+    >
+      <span
+        class="euiToken kbnFieldIcon emotion-euiToken-square-light-s-euiColorVis1"
+      >
+        <span
+          data-euiicon-type="tokenString"
+          title="string"
+        >
+          string
+        </span>
+      </span>
+    </div>
+    <div
+      class="euiFlexItem emotion-euiFlexItem-grow-1"
+    >
+      <div
+        class="euiText unifiedDataTable__comparisonFieldName emotion-euiText-relative"
+        data-test-subj="unifiedDataTableComparisonFieldName"
+      >
+        extension
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`useComparisonCellValue should render field cells 3`] = `
+<div
+  data-test-subj="fieldColumnId_0_2"
+>
+  <div
+    class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-stretch-row"
+  >
+    <div
+      class="euiFlexItem emotion-euiFlexItem-growZero"
+    >
+      <span
+        class="euiToken kbnFieldIcon emotion-euiToken-square-light-s-euiColorVis0"
+      >
+        <span
+          data-euiicon-type="tokenNumber"
+          title="number"
+        >
+          number
+        </span>
+      </span>
+    </div>
+    <div
+      class="euiFlexItem emotion-euiFlexItem-grow-1"
+    >
+      <div
+        class="euiText unifiedDataTable__comparisonFieldName emotion-euiText-relative"
+        data-test-subj="unifiedDataTableComparisonFieldName"
+      >
+        bytes
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/hooks/__snapshots__/use_comparison_css.test.ts.snap b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/__snapshots__/use_comparison_css.test.ts.snap
new file mode 100644
index 00000000000000..123b4fe7f23c83
--- /dev/null
+++ b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/__snapshots__/use_comparison_css.test.ts.snap
@@ -0,0 +1,473 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`useComparisonCss should render with basic diff mode and diff decorations 1`] = `
+Object {
+  "map": undefined,
+  "name": "1qc86qa",
+  "next": undefined,
+  "styles": "
+    .unifiedDataTable__cellValue {
+      white-space: pre-wrap;
+    }
+
+    .unifiedDataTable__comparisonFieldName {
+      font-weight: 600;
+    }
+
+    .unifiedDataTable__comparisonBaseDocCell {
+      background-color: rgba(211,218,230,0.2);
+    }
+
+    
+      .unifiedDataTable__comparisonMatchCell {
+        .unifiedDataTable__cellValue {
+          &,
+          & * {
+            color: #007871 !important;
+          }
+        }
+      }
+
+      .unifiedDataTable__comparisonDiffCell {
+        .unifiedDataTable__cellValue {
+          &,
+          & * {
+            color: #bd271e !important;
+          }
+        }
+      }
+    ;
+
+    .unifiedDataTable__comparisonSegment {
+      position: relative;
+    }
+
+    .unifiedDataTable__comparisonAddedSegment {
+      background-color: #e6f9f7;
+      color: #007871;
+    }
+
+    .unifiedDataTable__comparisonRemovedSegment {
+      background-color: #f8e9e9;
+      color: #bd271e;
+    }
+
+    
+
+    
+  ",
+  "toString": [Function],
+}
+`;
+
+exports[`useComparisonCss should render with basic diff mode and no diff decorations 1`] = `
+Object {
+  "map": undefined,
+  "name": "1qc86qa",
+  "next": undefined,
+  "styles": "
+    .unifiedDataTable__cellValue {
+      white-space: pre-wrap;
+    }
+
+    .unifiedDataTable__comparisonFieldName {
+      font-weight: 600;
+    }
+
+    .unifiedDataTable__comparisonBaseDocCell {
+      background-color: rgba(211,218,230,0.2);
+    }
+
+    
+      .unifiedDataTable__comparisonMatchCell {
+        .unifiedDataTable__cellValue {
+          &,
+          & * {
+            color: #007871 !important;
+          }
+        }
+      }
+
+      .unifiedDataTable__comparisonDiffCell {
+        .unifiedDataTable__cellValue {
+          &,
+          & * {
+            color: #bd271e !important;
+          }
+        }
+      }
+    ;
+
+    .unifiedDataTable__comparisonSegment {
+      position: relative;
+    }
+
+    .unifiedDataTable__comparisonAddedSegment {
+      background-color: #e6f9f7;
+      color: #007871;
+    }
+
+    .unifiedDataTable__comparisonRemovedSegment {
+      background-color: #f8e9e9;
+      color: #bd271e;
+    }
+
+    
+
+    
+  ",
+  "toString": [Function],
+}
+`;
+
+exports[`useComparisonCss should render with chars diff mode and diff decorations 1`] = `
+Object {
+  "map": undefined,
+  "name": "vd39me",
+  "next": undefined,
+  "styles": "
+    .unifiedDataTable__cellValue {
+      white-space: pre-wrap;
+    }
+
+    .unifiedDataTable__comparisonFieldName {
+      font-weight: 600;
+    }
+
+    .unifiedDataTable__comparisonBaseDocCell {
+      background-color: rgba(211,218,230,0.2);
+    }
+
+    
+
+    .unifiedDataTable__comparisonSegment {
+      position: relative;
+    }
+
+    .unifiedDataTable__comparisonAddedSegment {
+      background-color: #e6f9f7;
+      color: #007871;
+    }
+
+    .unifiedDataTable__comparisonRemovedSegment {
+      background-color: #f8e9e9;
+      color: #bd271e;
+    }
+
+    
+      .unifiedDataTable__comparisonAddedSegment {
+        text-decoration: underline;
+      }
+
+      .unifiedDataTable__comparisonRemovedSegment {
+        text-decoration: line-through;
+      }
+    ;
+
+    
+  ",
+  "toString": [Function],
+}
+`;
+
+exports[`useComparisonCss should render with chars diff mode and no diff decorations 1`] = `
+Object {
+  "map": undefined,
+  "name": "1ylxgdl",
+  "next": undefined,
+  "styles": "
+    .unifiedDataTable__cellValue {
+      white-space: pre-wrap;
+    }
+
+    .unifiedDataTable__comparisonFieldName {
+      font-weight: 600;
+    }
+
+    .unifiedDataTable__comparisonBaseDocCell {
+      background-color: rgba(211,218,230,0.2);
+    }
+
+    
+
+    .unifiedDataTable__comparisonSegment {
+      position: relative;
+    }
+
+    .unifiedDataTable__comparisonAddedSegment {
+      background-color: #e6f9f7;
+      color: #007871;
+    }
+
+    .unifiedDataTable__comparisonRemovedSegment {
+      background-color: #f8e9e9;
+      color: #bd271e;
+    }
+
+    
+
+    
+  ",
+  "toString": [Function],
+}
+`;
+
+exports[`useComparisonCss should render with lines diff mode and diff decorations 1`] = `
+Object {
+  "map": undefined,
+  "name": "nlhk3s",
+  "next": undefined,
+  "styles": "
+    .unifiedDataTable__cellValue {
+      white-space: pre-wrap;
+    }
+
+    .unifiedDataTable__comparisonFieldName {
+      font-weight: 600;
+    }
+
+    .unifiedDataTable__comparisonBaseDocCell {
+      background-color: rgba(211,218,230,0.2);
+    }
+
+    
+
+    .unifiedDataTable__comparisonSegment {
+      position: relative;
+    }
+
+    .unifiedDataTable__comparisonAddedSegment {
+      background-color: #e6f9f7;
+      color: #007871;
+    }
+
+    .unifiedDataTable__comparisonRemovedSegment {
+      background-color: #f8e9e9;
+      color: #bd271e;
+    }
+
+    
+
+    
+      .unifiedDataTable__comparisonSegment {
+        padding-left: calc(4px / 2);
+      }
+
+      
+        .unifiedDataTable__comparisonAddedSegment:before {
+          content: '+';
+          
+    position: absolute;
+    width: 8px;
+    height: 100%;
+    margin-left: calc(-8px - calc(4px / 2));
+    text-align: center;
+    line-height: 1;
+    font-weight: 500;
+  ;
+          background-color: #00BFB3;
+          color: #F1F4FA;
+        }
+
+        .unifiedDataTable__comparisonRemovedSegment:before {
+          content: '-';
+          
+    position: absolute;
+    width: 8px;
+    height: 100%;
+    margin-left: calc(-8px - calc(4px / 2));
+    text-align: center;
+    line-height: 1;
+    font-weight: 500;
+  ;
+          background-color: #ce5d56;
+          color: #F1F4FA;
+        }
+      ;
+    ;
+  ",
+  "toString": [Function],
+}
+`;
+
+exports[`useComparisonCss should render with lines diff mode and no diff decorations 1`] = `
+Object {
+  "map": undefined,
+  "name": "1mthx0u",
+  "next": undefined,
+  "styles": "
+    .unifiedDataTable__cellValue {
+      white-space: pre-wrap;
+    }
+
+    .unifiedDataTable__comparisonFieldName {
+      font-weight: 600;
+    }
+
+    .unifiedDataTable__comparisonBaseDocCell {
+      background-color: rgba(211,218,230,0.2);
+    }
+
+    
+
+    .unifiedDataTable__comparisonSegment {
+      position: relative;
+    }
+
+    .unifiedDataTable__comparisonAddedSegment {
+      background-color: #e6f9f7;
+      color: #007871;
+    }
+
+    .unifiedDataTable__comparisonRemovedSegment {
+      background-color: #f8e9e9;
+      color: #bd271e;
+    }
+
+    
+
+    
+      .unifiedDataTable__comparisonSegment {
+        padding-left: calc(4px / 2);
+      }
+
+      
+    ;
+  ",
+  "toString": [Function],
+}
+`;
+
+exports[`useComparisonCss should render with no diff mode and no diff decorations 1`] = `
+Object {
+  "map": undefined,
+  "name": "1ylxgdl",
+  "next": undefined,
+  "styles": "
+    .unifiedDataTable__cellValue {
+      white-space: pre-wrap;
+    }
+
+    .unifiedDataTable__comparisonFieldName {
+      font-weight: 600;
+    }
+
+    .unifiedDataTable__comparisonBaseDocCell {
+      background-color: rgba(211,218,230,0.2);
+    }
+
+    
+
+    .unifiedDataTable__comparisonSegment {
+      position: relative;
+    }
+
+    .unifiedDataTable__comparisonAddedSegment {
+      background-color: #e6f9f7;
+      color: #007871;
+    }
+
+    .unifiedDataTable__comparisonRemovedSegment {
+      background-color: #f8e9e9;
+      color: #bd271e;
+    }
+
+    
+
+    
+  ",
+  "toString": [Function],
+}
+`;
+
+exports[`useComparisonCss should render with words diff mode and diff decorations 1`] = `
+Object {
+  "map": undefined,
+  "name": "vd39me",
+  "next": undefined,
+  "styles": "
+    .unifiedDataTable__cellValue {
+      white-space: pre-wrap;
+    }
+
+    .unifiedDataTable__comparisonFieldName {
+      font-weight: 600;
+    }
+
+    .unifiedDataTable__comparisonBaseDocCell {
+      background-color: rgba(211,218,230,0.2);
+    }
+
+    
+
+    .unifiedDataTable__comparisonSegment {
+      position: relative;
+    }
+
+    .unifiedDataTable__comparisonAddedSegment {
+      background-color: #e6f9f7;
+      color: #007871;
+    }
+
+    .unifiedDataTable__comparisonRemovedSegment {
+      background-color: #f8e9e9;
+      color: #bd271e;
+    }
+
+    
+      .unifiedDataTable__comparisonAddedSegment {
+        text-decoration: underline;
+      }
+
+      .unifiedDataTable__comparisonRemovedSegment {
+        text-decoration: line-through;
+      }
+    ;
+
+    
+  ",
+  "toString": [Function],
+}
+`;
+
+exports[`useComparisonCss should render with words diff mode and no diff decorations 1`] = `
+Object {
+  "map": undefined,
+  "name": "1ylxgdl",
+  "next": undefined,
+  "styles": "
+    .unifiedDataTable__cellValue {
+      white-space: pre-wrap;
+    }
+
+    .unifiedDataTable__comparisonFieldName {
+      font-weight: 600;
+    }
+
+    .unifiedDataTable__comparisonBaseDocCell {
+      background-color: rgba(211,218,230,0.2);
+    }
+
+    
+
+    .unifiedDataTable__comparisonSegment {
+      position: relative;
+    }
+
+    .unifiedDataTable__comparisonAddedSegment {
+      background-color: #e6f9f7;
+      color: #007871;
+    }
+
+    .unifiedDataTable__comparisonRemovedSegment {
+      background-color: #f8e9e9;
+      color: #bd271e;
+    }
+
+    
+
+    
+  ",
+  "toString": [Function],
+}
+`;
diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/hooks/calculate_diff.test.ts b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/calculate_diff.test.ts
new file mode 100644
index 00000000000000..55c7437bfb6af5
--- /dev/null
+++ b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/calculate_diff.test.ts
@@ -0,0 +1,298 @@
+/*
+ * 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 { calculateDiff, formatDiffValue } from './calculate_diff';
+
+describe('calculateDiff', () => {
+  const baseValue = ['This is a message val'];
+  const comparisonValue = ['This one is a different msg value'];
+  const baseValueJson = ['gif', 'png'];
+  const comparisonValueJson = ['png', 'jpg'];
+
+  it('should return diffChars when diffMode is chars', () => {
+    const result = calculateDiff({ diffMode: 'chars', baseValue, comparisonValue });
+    expect(result).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "count": 5,
+          "value": "This ",
+        },
+        Object {
+          "added": true,
+          "count": 4,
+          "removed": undefined,
+          "value": "one ",
+        },
+        Object {
+          "count": 5,
+          "value": "is a ",
+        },
+        Object {
+          "added": true,
+          "count": 10,
+          "removed": undefined,
+          "value": "different ",
+        },
+        Object {
+          "count": 1,
+          "value": "m",
+        },
+        Object {
+          "added": undefined,
+          "count": 1,
+          "removed": true,
+          "value": "e",
+        },
+        Object {
+          "count": 1,
+          "value": "s",
+        },
+        Object {
+          "added": undefined,
+          "count": 2,
+          "removed": true,
+          "value": "sa",
+        },
+        Object {
+          "count": 1,
+          "value": "g",
+        },
+        Object {
+          "added": undefined,
+          "count": 1,
+          "removed": true,
+          "value": "e",
+        },
+        Object {
+          "count": 4,
+          "value": " val",
+        },
+        Object {
+          "added": true,
+          "count": 2,
+          "removed": undefined,
+          "value": "ue",
+        },
+      ]
+    `);
+  });
+
+  it('should return diffWords when diffMode is words', () => {
+    const result = calculateDiff({ diffMode: 'words', baseValue, comparisonValue });
+    expect(result).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "count": 2,
+          "value": "This ",
+        },
+        Object {
+          "added": true,
+          "count": 2,
+          "removed": undefined,
+          "value": "one ",
+        },
+        Object {
+          "count": 4,
+          "value": "is a ",
+        },
+        Object {
+          "added": undefined,
+          "count": 1,
+          "removed": true,
+          "value": "message",
+        },
+        Object {
+          "added": true,
+          "count": 1,
+          "removed": undefined,
+          "value": "different",
+        },
+        Object {
+          "count": 1,
+          "value": " ",
+        },
+        Object {
+          "added": undefined,
+          "count": 1,
+          "removed": true,
+          "value": "val",
+        },
+        Object {
+          "added": true,
+          "count": 3,
+          "removed": undefined,
+          "value": "msg value",
+        },
+      ]
+    `);
+  });
+
+  it('should return diffLines when diffMode is lines', () => {
+    const result = calculateDiff({ diffMode: 'lines', baseValue, comparisonValue });
+    expect(result).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "added": undefined,
+          "count": 1,
+          "removed": true,
+          "value": "This is a message val",
+        },
+        Object {
+          "added": true,
+          "count": 1,
+          "removed": undefined,
+          "value": "This one is a different msg value",
+        },
+      ]
+    `);
+  });
+
+  it('should return diffJson when diffMode is lines and values are json', () => {
+    const result = calculateDiff({
+      diffMode: 'lines',
+      baseValue: baseValueJson,
+      comparisonValue: comparisonValueJson,
+    });
+    expect(result).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "count": 1,
+          "value": "[
+      ",
+        },
+        Object {
+          "added": undefined,
+          "count": 1,
+          "removed": true,
+          "value": "  \\"gif\\",
+      ",
+        },
+        Object {
+          "count": 1,
+          "value": "  \\"png\\",
+      ",
+        },
+        Object {
+          "added": true,
+          "count": 1,
+          "removed": undefined,
+          "value": "  \\"jpg\\"
+      ",
+        },
+        Object {
+          "count": 1,
+          "value": "]",
+        },
+      ]
+    `);
+  });
+
+  it('should force json when comparing a single value to multiple values', () => {
+    const diffMode = 'lines';
+    const result = calculateDiff({
+      diffMode,
+      baseValue: ['single value'],
+      comparisonValue: ['multiple', 'values'],
+    });
+    expect(result).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "count": 1,
+          "value": "[
+      ",
+        },
+        Object {
+          "added": undefined,
+          "count": 1,
+          "removed": true,
+          "value": "  \\"single value\\"
+      ",
+        },
+        Object {
+          "added": true,
+          "count": 2,
+          "removed": undefined,
+          "value": "  \\"multiple\\",
+        \\"values\\"
+      ",
+        },
+        Object {
+          "count": 1,
+          "value": "]",
+        },
+      ]
+    `);
+    const result2 = calculateDiff({
+      diffMode,
+      baseValue: ['multiple', 'values'],
+      comparisonValue: ['single value'],
+    });
+    expect(result2).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "count": 1,
+          "value": "[
+      ",
+        },
+        Object {
+          "added": undefined,
+          "count": 2,
+          "removed": true,
+          "value": "  \\"multiple\\",
+        \\"values\\"
+      ",
+        },
+        Object {
+          "added": true,
+          "count": 1,
+          "removed": undefined,
+          "value": "  \\"single value\\"
+      ",
+        },
+        Object {
+          "count": 1,
+          "value": "]",
+        },
+      ]
+    `);
+  });
+});
+
+describe('formatDiffValue', () => {
+  it('should return a JSON stringified value when value is an object', () => {
+    const result = formatDiffValue({ key: 'value' }, false);
+    expect(result).toEqual({ value: '{\n  "key": "value"\n}', isJson: true });
+  });
+
+  it('should return a stringified value when value is not an object', () => {
+    const result = formatDiffValue(42, false);
+    expect(result).toEqual({ value: '42', isJson: false });
+  });
+
+  it('should return an empty string when value is null', () => {
+    const result = formatDiffValue(null, false);
+    expect(result).toEqual({ value: '', isJson: false });
+  });
+
+  it('should return an empty string when value is undefined', () => {
+    const result = formatDiffValue(undefined, false);
+    expect(result).toEqual({ value: '', isJson: false });
+  });
+
+  it('should extract the first entry when value is an array with a single entry', () => {
+    const value = ['gif'];
+    const result = formatDiffValue(value, false);
+    expect(result).toEqual({ value: 'gif', isJson: false });
+  });
+
+  it('should return a JSON stringified value when forceJson is true', () => {
+    const value = ['gif'];
+    const result = formatDiffValue(value, true);
+    expect(result).toEqual({ value: '[\n  "gif"\n]', isJson: true });
+  });
+});
diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/hooks/calculate_diff.ts b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/calculate_diff.ts
new file mode 100644
index 00000000000000..3c94da1e18f015
--- /dev/null
+++ b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/calculate_diff.ts
@@ -0,0 +1,60 @@
+/*
+ * 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 { diffChars, diffJson, diffLines, diffWords } from 'diff';
+import type { DocumentDiffMode } from '../types';
+
+export interface CalculateDiffProps {
+  diffMode: Exclude<DocumentDiffMode, 'basic'>;
+  baseValue: unknown;
+  comparisonValue: unknown;
+}
+
+export const calculateDiff = ({ diffMode, baseValue, comparisonValue }: CalculateDiffProps) => {
+  const forceJson =
+    baseValue != null &&
+    comparisonValue != null &&
+    ((hasLengthOne(baseValue) && !hasLengthOne(comparisonValue)) ||
+      (!hasLengthOne(baseValue) && hasLengthOne(comparisonValue)));
+
+  const { value: formattedBaseValue, isJson: baseValueIsJson } = formatDiffValue(
+    baseValue,
+    forceJson
+  );
+
+  const { value: formattedComparisonValue, isJson: comparisonValueIsJson } = formatDiffValue(
+    comparisonValue,
+    forceJson
+  );
+
+  if (diffMode === 'chars') {
+    return diffChars(formattedBaseValue, formattedComparisonValue);
+  }
+
+  if (diffMode === 'words') {
+    return diffWords(formattedBaseValue, formattedComparisonValue, { ignoreWhitespace: false });
+  }
+
+  return baseValueIsJson && comparisonValueIsJson
+    ? diffJson(formattedBaseValue, formattedComparisonValue, { ignoreWhitespace: false })
+    : diffLines(formattedBaseValue, formattedComparisonValue, { ignoreWhitespace: false });
+};
+
+export const formatDiffValue = (value: unknown, forceJson: boolean) => {
+  const extractedValue = !forceJson && hasLengthOne(value) ? value[0] : value;
+
+  if (value != null && (forceJson || typeof extractedValue === 'object')) {
+    return { value: JSON.stringify(extractedValue, null, 2), isJson: true };
+  }
+
+  return { value: String(extractedValue ?? ''), isJson: false };
+};
+
+const hasLengthOne = (value: unknown): value is unknown[] => {
+  return Array.isArray(value) && value.length === 1;
+};
diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_cell_value.test.tsx b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_cell_value.test.tsx
new file mode 100644
index 00000000000000..7ae6b705ae9fbb
--- /dev/null
+++ b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_cell_value.test.tsx
@@ -0,0 +1,446 @@
+/*
+ * 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 { EuiDataGridCellValueElementProps, EuiDataGridSetCellProps } from '@elastic/eui';
+import { buildDataTableRecord } from '@kbn/discover-utils';
+import { generateEsHits } from '@kbn/discover-utils/src/__mocks__';
+import { fieldFormatsMock } from '@kbn/field-formats-plugin/common/mocks';
+import { render, screen } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+import React from 'react';
+import { ReactNode, useState } from 'react';
+import { dataViewWithTimefieldMock } from '../../../../__mocks__/data_view_with_timefield';
+import { useComparisonCellValue, UseComparisonCellValueProps } from './use_comparison_cell_value';
+import { CELL_CLASS } from '../../../utils/get_render_cell_value';
+import {
+  ADDED_SEGMENT_CLASS,
+  BASE_CELL_CLASS,
+  DIFF_CELL_CLASS,
+  FIELD_NAME_CLASS,
+  MATCH_CELL_CLASS,
+  REMOVED_SEGMENT_CLASS,
+  SEGMENT_CLASS,
+} from './use_comparison_css';
+import * as CalculateDiff from './calculate_diff';
+
+const calculateDiff = jest.spyOn(CalculateDiff, 'calculateDiff');
+
+const docs = generateEsHits(dataViewWithTimefieldMock, 3).map((hit, i) => {
+  switch (i) {
+    case 0:
+    case 2:
+      hit.fields!.message = ['This is a message val'];
+      hit.fields!.extension = ['gif', 'png'];
+      break;
+    case 1:
+      hit.fields!.message = ['This one is a different msg value'];
+      hit.fields!.extension = ['png', 'jpg'];
+      break;
+  }
+
+  return buildDataTableRecord(hit, dataViewWithTimefieldMock);
+});
+
+const getDocById = (id: string) => docs.find((doc) => doc.raw._id === id);
+
+const fieldColumnId = 'fieldColumnId';
+
+const renderComparisonCellValue = (props: Partial<UseComparisonCellValueProps> = {}) => {
+  const defaultProps: UseComparisonCellValueProps = {
+    dataView: dataViewWithTimefieldMock,
+    comparisonFields: ['message', 'extension', 'bytes'],
+    fieldColumnId,
+    selectedDocs: ['0', '1', '2'],
+    diffMode: undefined,
+    fieldFormats: fieldFormatsMock,
+    getDocById,
+    ...props,
+  };
+  const hook = renderHook((currentProps) => useComparisonCellValue(currentProps), {
+    initialProps: defaultProps,
+  });
+  return {
+    rerender: (newProps: Partial<UseComparisonCellValueProps>) => {
+      hook.rerender({ ...defaultProps, ...newProps });
+    },
+    renderCellValue: (cellValueProps: EuiDataGridCellValueElementProps) => {
+      return hook.result.current(cellValueProps);
+    },
+  };
+};
+
+const ComparisonCell = ({
+  columnId,
+  colIndex,
+  rowIndex,
+  renderCellValue,
+}: {
+  columnId: string;
+  colIndex: number;
+  rowIndex: number;
+  renderCellValue: (innerProps: EuiDataGridCellValueElementProps) => ReactNode;
+}) => {
+  const [cellProps, setCellProps] = useState<EuiDataGridSetCellProps>();
+  return (
+    <div {...cellProps} data-test-subj={`${columnId}_${colIndex}_${rowIndex}`}>
+      {renderCellValue({
+        columnId,
+        colIndex,
+        rowIndex,
+        isExpandable: false,
+        isExpanded: false,
+        isDetails: false,
+        setCellProps,
+      })}
+    </div>
+  );
+};
+
+const renderComparisonCell = ({
+  columnId,
+  colIndex,
+  rowIndex,
+  renderCellValue,
+}: Parameters<typeof ComparisonCell>[0]) => {
+  render(
+    <ComparisonCell
+      columnId={columnId}
+      colIndex={colIndex}
+      rowIndex={rowIndex}
+      renderCellValue={renderCellValue}
+    />
+  );
+  const getCell = () => screen.getByTestId(`${columnId}_${colIndex}_${rowIndex}`);
+  return {
+    getCell,
+    getCellValue: () => getCell().querySelector(`.${CELL_CLASS}`),
+    getAllSegments: () => getCell().querySelectorAll(`.${SEGMENT_CLASS}`),
+    getAddedSegments: () => getCell().querySelectorAll(`.${ADDED_SEGMENT_CLASS}`),
+    getRemovedSegments: () => getCell().querySelectorAll(`.${REMOVED_SEGMENT_CLASS}`),
+  };
+};
+
+describe('useComparisonCellValue', () => {
+  it('should render field cells', () => {
+    const { renderCellValue } = renderComparisonCellValue();
+    const messageCell = renderComparisonCell({
+      columnId: fieldColumnId,
+      colIndex: 0,
+      rowIndex: 0,
+      renderCellValue,
+    });
+    const messageElement = screen.getByText('message');
+    expect(messageElement).toBeInTheDocument();
+    expect(messageElement).toHaveClass(FIELD_NAME_CLASS);
+    expect(messageCell.getCell()).toMatchSnapshot();
+    const extensionCell = renderComparisonCell({
+      columnId: fieldColumnId,
+      colIndex: 0,
+      rowIndex: 1,
+      renderCellValue,
+    });
+    const extensionElement = screen.getByText('extension');
+    expect(extensionElement).toBeInTheDocument();
+    expect(extensionElement).toHaveClass(FIELD_NAME_CLASS);
+    expect(extensionCell.getCell()).toMatchSnapshot();
+    const bytesCell = renderComparisonCell({
+      columnId: fieldColumnId,
+      colIndex: 0,
+      rowIndex: 2,
+      renderCellValue,
+    });
+    const bytesElement = screen.getByText('bytes');
+    expect(bytesElement).toBeInTheDocument();
+    expect(bytesElement).toHaveClass(FIELD_NAME_CLASS);
+    expect(bytesCell.getCell()).toMatchSnapshot();
+  });
+
+  it('should render exmpty cell if doc is not found', () => {
+    const { renderCellValue } = renderComparisonCellValue();
+    const emptyCell = renderComparisonCell({
+      columnId: 'unknown',
+      colIndex: 1,
+      rowIndex: 0,
+      renderCellValue,
+    });
+    expect(emptyCell.getCellValue()).toBeInTheDocument();
+    expect(emptyCell.getCell()).toMatchSnapshot();
+  });
+
+  it('should render cells with no diff mode', () => {
+    const { renderCellValue } = renderComparisonCellValue();
+    const baseCell = renderComparisonCell({
+      columnId: '0',
+      colIndex: 1,
+      rowIndex: 0,
+      renderCellValue,
+    });
+    expect(baseCell.getCellValue()).toBeInTheDocument();
+    expect(baseCell.getCell()).toHaveClass(BASE_CELL_CLASS);
+    expect(baseCell.getCell()).not.toHaveClass(MATCH_CELL_CLASS);
+    expect(baseCell.getCell()).not.toHaveClass(DIFF_CELL_CLASS);
+    expect(baseCell.getAllSegments()).toHaveLength(0);
+    expect(baseCell.getCell()).toMatchSnapshot();
+    const comparisonCell1 = renderComparisonCell({
+      columnId: '1',
+      colIndex: 2,
+      rowIndex: 0,
+      renderCellValue,
+    });
+    expect(comparisonCell1.getCellValue()).toBeInTheDocument();
+    expect(comparisonCell1.getCell()).not.toHaveClass(BASE_CELL_CLASS);
+    expect(comparisonCell1.getCell()).not.toHaveClass(MATCH_CELL_CLASS);
+    expect(comparisonCell1.getCell()).not.toHaveClass(DIFF_CELL_CLASS);
+    expect(comparisonCell1.getAllSegments()).toHaveLength(0);
+    expect(comparisonCell1.getCell()).toMatchSnapshot();
+    const comparisonCell2 = renderComparisonCell({
+      columnId: '2',
+      colIndex: 3,
+      rowIndex: 0,
+      renderCellValue,
+    });
+    expect(comparisonCell2.getCellValue()).toBeInTheDocument();
+    expect(comparisonCell2.getCell()).not.toHaveClass(BASE_CELL_CLASS);
+    expect(comparisonCell2.getCell()).not.toHaveClass(MATCH_CELL_CLASS);
+    expect(comparisonCell2.getCell()).not.toHaveClass(DIFF_CELL_CLASS);
+    expect(comparisonCell2.getAllSegments()).toHaveLength(0);
+    expect(comparisonCell2.getCell()).toMatchSnapshot();
+  });
+
+  it('should render cells with diff mode "Full value"', () => {
+    const { renderCellValue } = renderComparisonCellValue({ diffMode: 'basic' });
+    const baseCell = renderComparisonCell({
+      columnId: '0',
+      colIndex: 1,
+      rowIndex: 0,
+      renderCellValue,
+    });
+    expect(baseCell.getCellValue()).toBeInTheDocument();
+    expect(baseCell.getCell()).toHaveClass(BASE_CELL_CLASS);
+    expect(baseCell.getCell()).not.toHaveClass(MATCH_CELL_CLASS);
+    expect(baseCell.getCell()).not.toHaveClass(DIFF_CELL_CLASS);
+    expect(baseCell.getAllSegments()).toHaveLength(0);
+    expect(baseCell.getCell()).toMatchSnapshot();
+    const comparisonCell1 = renderComparisonCell({
+      columnId: '1',
+      colIndex: 2,
+      rowIndex: 0,
+      renderCellValue,
+    });
+    expect(comparisonCell1.getCellValue()).toBeInTheDocument();
+    expect(comparisonCell1.getCell()).not.toHaveClass(BASE_CELL_CLASS);
+    expect(comparisonCell1.getCell()).not.toHaveClass(MATCH_CELL_CLASS);
+    expect(comparisonCell1.getCell()).toHaveClass(DIFF_CELL_CLASS);
+    expect(comparisonCell1.getAllSegments()).toHaveLength(0);
+    expect(comparisonCell1.getCell()).toMatchSnapshot();
+    const comparisonCell2 = renderComparisonCell({
+      columnId: '2',
+      colIndex: 3,
+      rowIndex: 0,
+      renderCellValue,
+    });
+    expect(comparisonCell2.getCellValue()).toBeInTheDocument();
+    expect(comparisonCell2.getCell()).not.toHaveClass(BASE_CELL_CLASS);
+    expect(comparisonCell2.getCell()).toHaveClass(MATCH_CELL_CLASS);
+    expect(comparisonCell2.getCell()).not.toHaveClass(DIFF_CELL_CLASS);
+    expect(comparisonCell2.getAllSegments()).toHaveLength(0);
+    expect(comparisonCell2.getCell()).toMatchSnapshot();
+  });
+
+  it('should render cells with diff mode "Chars"', () => {
+    const { renderCellValue } = renderComparisonCellValue({ diffMode: 'chars' });
+    const baseCell = renderComparisonCell({
+      columnId: '0',
+      colIndex: 1,
+      rowIndex: 0,
+      renderCellValue,
+    });
+    expect(baseCell.getCellValue()).toBeInTheDocument();
+    expect(baseCell.getCell()).toHaveClass(BASE_CELL_CLASS);
+    expect(baseCell.getCell()).not.toHaveClass(MATCH_CELL_CLASS);
+    expect(baseCell.getCell()).not.toHaveClass(DIFF_CELL_CLASS);
+    expect(baseCell.getAllSegments()).toHaveLength(0);
+    expect(baseCell.getCell()).toMatchSnapshot();
+    const comparisonCell1 = renderComparisonCell({
+      columnId: '1',
+      colIndex: 2,
+      rowIndex: 0,
+      renderCellValue,
+    });
+    expect(comparisonCell1.getCellValue()).toBeInTheDocument();
+    expect(comparisonCell1.getCell()).not.toHaveClass(BASE_CELL_CLASS);
+    expect(comparisonCell1.getCell()).not.toHaveClass(MATCH_CELL_CLASS);
+    expect(comparisonCell1.getCell()).not.toHaveClass(DIFF_CELL_CLASS);
+    expect(comparisonCell1.getAllSegments()).toHaveLength(12);
+    expect(comparisonCell1.getAddedSegments()).toHaveLength(3);
+    expect(comparisonCell1.getRemovedSegments()).toHaveLength(3);
+    expect(comparisonCell1.getCell()).toMatchSnapshot();
+    const comparisonCell2 = renderComparisonCell({
+      columnId: '2',
+      colIndex: 3,
+      rowIndex: 0,
+      renderCellValue,
+    });
+    expect(comparisonCell2.getCellValue()).toBeInTheDocument();
+    expect(comparisonCell2.getCell()).not.toHaveClass(BASE_CELL_CLASS);
+    expect(comparisonCell2.getCell()).not.toHaveClass(MATCH_CELL_CLASS);
+    expect(comparisonCell2.getCell()).not.toHaveClass(DIFF_CELL_CLASS);
+    expect(comparisonCell2.getAllSegments()).toHaveLength(1);
+    expect(comparisonCell2.getAddedSegments()).toHaveLength(0);
+    expect(comparisonCell2.getRemovedSegments()).toHaveLength(0);
+    expect(comparisonCell2.getCell()).toMatchSnapshot();
+  });
+
+  it('should render cells with diff mode "Words"', () => {
+    const { renderCellValue } = renderComparisonCellValue({ diffMode: 'words' });
+    const baseCell = renderComparisonCell({
+      columnId: '0',
+      colIndex: 1,
+      rowIndex: 0,
+      renderCellValue,
+    });
+    expect(baseCell.getCellValue()).toBeInTheDocument();
+    expect(baseCell.getCell()).toHaveClass(BASE_CELL_CLASS);
+    expect(baseCell.getCell()).not.toHaveClass(MATCH_CELL_CLASS);
+    expect(baseCell.getCell()).not.toHaveClass(DIFF_CELL_CLASS);
+    expect(baseCell.getAllSegments()).toHaveLength(0);
+    expect(baseCell.getCell()).toMatchSnapshot();
+    const comparisonCell1 = renderComparisonCell({
+      columnId: '1',
+      colIndex: 2,
+      rowIndex: 0,
+      renderCellValue,
+    });
+    expect(comparisonCell1.getCellValue()).toBeInTheDocument();
+    expect(comparisonCell1.getCell()).not.toHaveClass(BASE_CELL_CLASS);
+    expect(comparisonCell1.getCell()).not.toHaveClass(MATCH_CELL_CLASS);
+    expect(comparisonCell1.getCell()).not.toHaveClass(DIFF_CELL_CLASS);
+    expect(comparisonCell1.getAllSegments()).toHaveLength(8);
+    expect(comparisonCell1.getAddedSegments()).toHaveLength(3);
+    expect(comparisonCell1.getRemovedSegments()).toHaveLength(2);
+    expect(comparisonCell1.getCell()).toMatchSnapshot();
+    const comparisonCell2 = renderComparisonCell({
+      columnId: '2',
+      colIndex: 3,
+      rowIndex: 0,
+      renderCellValue,
+    });
+    expect(comparisonCell2.getCellValue()).toBeInTheDocument();
+    expect(comparisonCell2.getCell()).not.toHaveClass(BASE_CELL_CLASS);
+    expect(comparisonCell2.getCell()).not.toHaveClass(MATCH_CELL_CLASS);
+    expect(comparisonCell2.getCell()).not.toHaveClass(DIFF_CELL_CLASS);
+    expect(comparisonCell2.getAllSegments()).toHaveLength(1);
+    expect(comparisonCell2.getAddedSegments()).toHaveLength(0);
+    expect(comparisonCell2.getRemovedSegments()).toHaveLength(0);
+    expect(comparisonCell2.getCell()).toMatchSnapshot();
+  });
+
+  it('should render cells with diff mode "Lines"', () => {
+    const { renderCellValue } = renderComparisonCellValue({ diffMode: 'lines' });
+    const baseCell = renderComparisonCell({
+      columnId: '0',
+      colIndex: 1,
+      rowIndex: 1,
+      renderCellValue,
+    });
+    expect(baseCell.getCellValue()).toBeInTheDocument();
+    expect(baseCell.getCell()).toHaveClass(BASE_CELL_CLASS);
+    expect(baseCell.getCell()).not.toHaveClass(MATCH_CELL_CLASS);
+    expect(baseCell.getCell()).not.toHaveClass(DIFF_CELL_CLASS);
+    expect(baseCell.getAllSegments()).toHaveLength(0);
+    expect(baseCell.getCell()).toMatchSnapshot();
+    const comparisonCell1 = renderComparisonCell({
+      columnId: '1',
+      colIndex: 2,
+      rowIndex: 1,
+      renderCellValue,
+    });
+    expect(comparisonCell1.getCellValue()).toBeInTheDocument();
+    expect(comparisonCell1.getCell()).not.toHaveClass(BASE_CELL_CLASS);
+    expect(comparisonCell1.getCell()).not.toHaveClass(MATCH_CELL_CLASS);
+    expect(comparisonCell1.getCell()).not.toHaveClass(DIFF_CELL_CLASS);
+    expect(comparisonCell1.getAllSegments()).toHaveLength(5);
+    expect(comparisonCell1.getAddedSegments()).toHaveLength(1);
+    expect(comparisonCell1.getRemovedSegments()).toHaveLength(1);
+    expect(comparisonCell1.getCell()).toMatchSnapshot();
+    const comparisonCell2 = renderComparisonCell({
+      columnId: '2',
+      colIndex: 3,
+      rowIndex: 1,
+      renderCellValue,
+    });
+    expect(comparisonCell2.getCellValue()).toBeInTheDocument();
+    expect(comparisonCell2.getCell()).not.toHaveClass(BASE_CELL_CLASS);
+    expect(comparisonCell2.getCell()).not.toHaveClass(MATCH_CELL_CLASS);
+    expect(comparisonCell2.getCell()).not.toHaveClass(DIFF_CELL_CLASS);
+    expect(comparisonCell2.getAllSegments()).toHaveLength(1);
+    expect(comparisonCell2.getAddedSegments()).toHaveLength(0);
+    expect(comparisonCell2.getRemovedSegments()).toHaveLength(0);
+    expect(comparisonCell2.getCell()).toMatchSnapshot();
+  });
+
+  it('should not recalculate diffs for advanced modes when remounting the same cell', () => {
+    calculateDiff.mockClear();
+    expect(calculateDiff).not.toHaveBeenCalled();
+    const { rerender, renderCellValue } = renderComparisonCellValue({ diffMode: 'chars' });
+    const cellProps1 = {
+      columnId: '1',
+      colIndex: 2,
+      rowIndex: 1,
+      renderCellValue,
+    };
+    const cellProps2 = {
+      columnId: '2',
+      colIndex: 3,
+      rowIndex: 1,
+      renderCellValue,
+    };
+    renderComparisonCell(cellProps1);
+    expect(calculateDiff).toHaveBeenCalledTimes(1);
+    renderComparisonCell(cellProps2);
+    expect(calculateDiff).toHaveBeenCalledTimes(2);
+    renderComparisonCell(cellProps1);
+    expect(calculateDiff).toHaveBeenCalledTimes(2);
+    renderComparisonCell(cellProps2);
+    expect(calculateDiff).toHaveBeenCalledTimes(2);
+    rerender({ diffMode: 'words', selectedDocs: ['1', '2', '0'] });
+    const cellProps3 = {
+      ...cellProps1,
+      columnId: '2',
+    };
+    const cellProps4 = {
+      ...cellProps2,
+      columnId: '0',
+    };
+    renderComparisonCell(cellProps3);
+    expect(calculateDiff).toHaveBeenCalledTimes(3);
+    renderComparisonCell(cellProps4);
+    expect(calculateDiff).toHaveBeenCalledTimes(4);
+    renderComparisonCell(cellProps3);
+    expect(calculateDiff).toHaveBeenCalledTimes(4);
+    renderComparisonCell(cellProps4);
+    expect(calculateDiff).toHaveBeenCalledTimes(4);
+    rerender({ diffMode: 'lines', selectedDocs: ['2', '0', '1'] });
+    const cellProps5 = {
+      ...cellProps1,
+      columnId: '0',
+    };
+    const cellProps6 = {
+      ...cellProps2,
+      columnId: '1',
+    };
+    renderComparisonCell(cellProps5);
+    expect(calculateDiff).toHaveBeenCalledTimes(5);
+    renderComparisonCell(cellProps6);
+    expect(calculateDiff).toHaveBeenCalledTimes(6);
+    renderComparisonCell(cellProps5);
+    expect(calculateDiff).toHaveBeenCalledTimes(6);
+    renderComparisonCell(cellProps6);
+    expect(calculateDiff).toHaveBeenCalledTimes(6);
+  });
+});
diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_cell_value.tsx b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_cell_value.tsx
new file mode 100644
index 00000000000000..98fae03a0ace35
--- /dev/null
+++ b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_cell_value.tsx
@@ -0,0 +1,251 @@
+/*
+ * 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 { EuiDataGridCellValueElementProps, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import type { DataView, DataViewField } from '@kbn/data-views-plugin/common';
+import { formatFieldValue } from '@kbn/discover-utils';
+import type { DataTableRecord } from '@kbn/discover-utils/types';
+import type { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
+import { getFieldIconProps } from '@kbn/field-utils';
+import { FieldIcon } from '@kbn/react-field';
+import classNames from 'classnames';
+import { isEqual, memoize } from 'lodash';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { CELL_CLASS } from '../../../utils/get_render_cell_value';
+import type { DocumentDiffMode } from '../types';
+import { calculateDiff, CalculateDiffProps, formatDiffValue } from './calculate_diff';
+import {
+  ADDED_SEGMENT_CLASS,
+  BASE_CELL_CLASS,
+  DIFF_CELL_CLASS,
+  FIELD_NAME_CLASS,
+  MATCH_CELL_CLASS,
+  REMOVED_SEGMENT_CLASS,
+  SEGMENT_CLASS,
+} from './use_comparison_css';
+
+export interface UseComparisonCellValueProps {
+  dataView: DataView;
+  comparisonFields: string[];
+  fieldColumnId: string;
+  selectedDocs: string[];
+  diffMode: DocumentDiffMode | undefined;
+  fieldFormats: FieldFormatsStart;
+  getDocById: (id: string) => DataTableRecord | undefined;
+}
+
+export const useComparisonCellValue = ({
+  dataView,
+  comparisonFields,
+  fieldColumnId,
+  selectedDocs,
+  diffMode,
+  fieldFormats,
+  getDocById,
+}: UseComparisonCellValueProps) => {
+  const baseDocId = selectedDocs[0];
+  const baseDoc = useMemo(() => getDocById(baseDocId)?.flattened, [baseDocId, getDocById]);
+  const [calculateDiffMemoized] = useState(() => createCalculateDiffMemoized());
+
+  return useCallback(
+    (props: EuiDataGridCellValueElementProps) => (
+      <DiffProvider value={calculateDiffMemoized}>
+        <CellValue
+          dataView={dataView}
+          comparisonFields={comparisonFields}
+          fieldColumnId={fieldColumnId}
+          baseDocId={baseDocId}
+          baseDoc={baseDoc}
+          diffMode={diffMode}
+          fieldFormats={fieldFormats}
+          getDocById={getDocById}
+          {...props}
+        />
+      </DiffProvider>
+    ),
+    [
+      baseDoc,
+      baseDocId,
+      calculateDiffMemoized,
+      comparisonFields,
+      dataView,
+      diffMode,
+      fieldColumnId,
+      fieldFormats,
+      getDocById,
+    ]
+  );
+};
+
+type CellValueProps = Omit<UseComparisonCellValueProps, 'selectedDocs'> &
+  EuiDataGridCellValueElementProps & {
+    baseDocId: string;
+    baseDoc: DataTableRecord['flattened'] | undefined;
+  };
+
+const EMPTY_VALUE = '-';
+
+const CellValue = (props: CellValueProps) => {
+  const { dataView, comparisonFields, fieldColumnId, rowIndex, columnId, getDocById } = props;
+  const fieldName = comparisonFields[rowIndex];
+  const field = useMemo(() => dataView.fields.getByName(fieldName), [dataView.fields, fieldName]);
+  const comparisonDoc = useMemo(() => getDocById(columnId), [columnId, getDocById]);
+
+  if (columnId === fieldColumnId) {
+    return <FieldCellValue field={field} fieldName={fieldName} />;
+  }
+
+  if (!comparisonDoc) {
+    return <span className={CELL_CLASS}>{EMPTY_VALUE}</span>;
+  }
+
+  return (
+    <DiffCellValue {...props} field={field} fieldName={fieldName} comparisonDoc={comparisonDoc} />
+  );
+};
+
+interface FieldCellValueProps {
+  field: DataViewField | undefined;
+  fieldName: string;
+}
+
+const FieldCellValue = ({ field, fieldName }: FieldCellValueProps) => {
+  return (
+    <EuiFlexGroup responsive={false} gutterSize="s">
+      {field && (
+        <EuiFlexItem grow={false}>
+          <FieldIcon {...getFieldIconProps(field)} />
+        </EuiFlexItem>
+      )}
+      <EuiFlexItem>
+        <EuiText
+          size="relative"
+          className={FIELD_NAME_CLASS}
+          data-test-subj="unifiedDataTableComparisonFieldName"
+        >
+          {field?.displayName ?? fieldName}
+        </EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
+type DiffCellValueProps = CellValueProps &
+  FieldCellValueProps & {
+    comparisonDoc: DataTableRecord;
+  };
+
+const DiffCellValue = ({
+  dataView,
+  field,
+  fieldName,
+  baseDocId,
+  baseDoc,
+  comparisonDoc,
+  diffMode,
+  columnId,
+  fieldFormats,
+  setCellProps,
+}: DiffCellValueProps) => {
+  const baseValue = baseDoc?.[fieldName];
+  const comparisonValue = comparisonDoc?.flattened[fieldName];
+  const isBaseDoc = columnId === baseDocId;
+  const formattedBaseValue = useMemo(
+    () => (isBaseDoc ? formatDiffValue(baseValue, false).value : undefined),
+    [baseValue, isBaseDoc]
+  );
+
+  useEffect(() => {
+    if (isBaseDoc) {
+      setCellProps({ className: BASE_CELL_CLASS });
+    } else if (diffMode !== 'basic') {
+      setCellProps({ className: undefined });
+    } else if (isEqual(baseValue, comparisonValue)) {
+      setCellProps({ className: MATCH_CELL_CLASS });
+    } else {
+      setCellProps({ className: DIFF_CELL_CLASS });
+    }
+  }, [baseValue, columnId, comparisonValue, baseDocId, diffMode, setCellProps, isBaseDoc]);
+
+  if (!diffMode || diffMode === 'basic') {
+    return (
+      <span
+        className={CELL_CLASS}
+        // formatFieldValue guarantees sanitized values
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{
+          __html: formatFieldValue(
+            comparisonValue,
+            comparisonDoc.raw,
+            fieldFormats,
+            dataView,
+            field
+          ),
+        }}
+      />
+    );
+  }
+
+  if (formattedBaseValue) {
+    return <span className={CELL_CLASS}>{formattedBaseValue || EMPTY_VALUE}</span>;
+  }
+
+  return (
+    <DiffCellValueAdvanced
+      baseValue={baseValue}
+      comparisonValue={comparisonValue}
+      diffMode={diffMode}
+    />
+  );
+};
+
+const DiffCellValueAdvanced = ({ diffMode, ...props }: CalculateDiffProps) => {
+  const diff = useDiff({ diffMode, ...props });
+  const SegmentTag = diffMode === 'lines' ? 'div' : 'span';
+
+  return (
+    <span className={CELL_CLASS}>
+      {diff.map((change, i) => (
+        <SegmentTag
+          key={`segment-${i}`}
+          className={classNames(SEGMENT_CLASS, {
+            [ADDED_SEGMENT_CLASS]: change.added,
+            [REMOVED_SEGMENT_CLASS]: change.removed,
+          })}
+        >
+          {change.value || EMPTY_VALUE}
+        </SegmentTag>
+      ))}
+    </span>
+  );
+};
+
+// EuiDataGrid remounts cells often due to virtualization, e.g. on init to calculate cell sizes
+// and while scrolling, so React memoization is not effective here. Instead we memoize the diff
+// results in the comparison to avoid recalculating them frequently.
+const createCalculateDiffMemoized = (): typeof calculateDiff => {
+  const calculateDiffMemoized = memoize((diffMode: CalculateDiffProps['diffMode']) => {
+    return memoize((baseValue: CalculateDiffProps['baseValue']) => {
+      return memoize((comparisonValue: CalculateDiffProps['comparisonValue']) => {
+        return calculateDiff({ diffMode, baseValue, comparisonValue });
+      });
+    });
+  });
+
+  return ({ diffMode, baseValue, comparisonValue }: CalculateDiffProps) => {
+    return calculateDiffMemoized(diffMode)(baseValue)(comparisonValue);
+  };
+};
+
+const DiffContext = createContext(calculateDiff);
+const DiffProvider = DiffContext.Provider;
+
+const useDiff = (props: CalculateDiffProps) => {
+  const calculateDiffMemoized = useContext(DiffContext);
+  return calculateDiffMemoized(props);
+};
diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_columns.test.tsx b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_columns.test.tsx
new file mode 100644
index 00000000000000..c6df0f7fabcb6e
--- /dev/null
+++ b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_columns.test.tsx
@@ -0,0 +1,230 @@
+/*
+ * 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 {
+  DEFAULT_COLUMN_WIDTH,
+  FIELD_COLUMN_NAME,
+  FIELD_COLUMN_WIDTH,
+  useComparisonColumns,
+} from './use_comparison_columns';
+import { renderHook } from '@testing-library/react-hooks';
+import type { EuiDataGridColumn, EuiDataGridColumnActions } from '@elastic/eui';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { generateEsHits } from '@kbn/discover-utils/src/__mocks__';
+import { dataViewWithTimefieldMock } from '../../../../__mocks__/data_view_with_timefield';
+import { buildDataTableRecord } from '@kbn/discover-utils';
+import type { DataTableRecord } from '@kbn/discover-utils/types';
+
+type DataGridColumn = Partial<Omit<EuiDataGridColumn, 'actions'>> &
+  Pick<EuiDataGridColumn, 'id' | 'displayAsText'> & {
+    actions?: Partial<Omit<EuiDataGridColumnActions, 'additional'>>;
+  };
+
+const getComparisonColumn = ({
+  column,
+  includePinAction,
+  includeRemoveAction,
+}: {
+  column: DataGridColumn;
+  includePinAction?: boolean;
+  includeRemoveAction?: boolean;
+}): EuiDataGridColumn => {
+  const additional: EuiDataGridColumnActions['additional'] = [];
+  if (includePinAction) {
+    additional.push({
+      iconType: 'pin',
+      label: 'Pin for comparison',
+      size: 'xs',
+      onClick: expect.any(Function),
+    });
+  }
+  if (includeRemoveAction) {
+    additional.push({
+      iconType: 'cross',
+      label: 'Remove from comparison',
+      size: 'xs',
+      onClick: expect.any(Function),
+    });
+  }
+  return {
+    display: undefined,
+    initialWidth: DEFAULT_COLUMN_WIDTH,
+    isSortable: false,
+    isExpandable: false,
+    ...column,
+    actions: {
+      showHide: false,
+      showMoveLeft: false,
+      showMoveRight: false,
+      showSortAsc: false,
+      showSortDesc: false,
+      ...column.actions,
+      additional,
+    },
+  };
+};
+
+const docs = generateEsHits(dataViewWithTimefieldMock, 4).map((hit) =>
+  buildDataTableRecord(hit, dataViewWithTimefieldMock)
+);
+
+const defaultGetDocById = (id: string) => docs.find((doc) => doc.raw._id === id);
+
+const fieldColumnId = 'fieldColumnId';
+const selectedDocs = ['0', '1', '2', '3'];
+
+const renderColumns = ({
+  wrapperWidth,
+  isPlainRecord = false,
+  getDocById = defaultGetDocById,
+}: {
+  wrapperWidth?: number;
+  isPlainRecord?: boolean;
+  getDocById?: (id: string) => DataTableRecord | undefined;
+} = {}) => {
+  const wrapper = document.createElement('div');
+  if (wrapperWidth) {
+    Object.defineProperty(wrapper, 'offsetWidth', { value: wrapperWidth });
+  }
+  const setSelectedDocs = jest.fn();
+  const {
+    result: { current: columns },
+  } = renderHook(() =>
+    useComparisonColumns({
+      wrapper,
+      isPlainRecord,
+      fieldColumnId,
+      selectedDocs,
+      getDocById,
+      setSelectedDocs,
+    })
+  );
+  return { columns, setSelectedDocs };
+};
+
+describe('useComparisonColumns', () => {
+  it('should return comparison columns', () => {
+    const { columns, setSelectedDocs } = renderColumns();
+    expect(columns).toEqual([
+      {
+        id: fieldColumnId,
+        displayAsText: FIELD_COLUMN_NAME,
+        initialWidth: FIELD_COLUMN_WIDTH,
+        isSortable: false,
+        isExpandable: false,
+        actions: false,
+      },
+      getComparisonColumn({
+        column: {
+          id: selectedDocs[0],
+          display: expect.anything(),
+          displayAsText: `Pinned document: ${selectedDocs[0]}`,
+        },
+        includeRemoveAction: true,
+      }),
+      getComparisonColumn({
+        column: {
+          id: selectedDocs[1],
+          display: selectedDocs[1],
+          displayAsText: `Comparison document: ${selectedDocs[1]}`,
+          actions: {
+            showMoveRight: true,
+          },
+        },
+        includePinAction: true,
+        includeRemoveAction: true,
+      }),
+      getComparisonColumn({
+        column: {
+          id: selectedDocs[2],
+          display: selectedDocs[2],
+          displayAsText: `Comparison document: ${selectedDocs[2]}`,
+          actions: {
+            showMoveLeft: true,
+            showMoveRight: true,
+          },
+        },
+        includePinAction: true,
+        includeRemoveAction: true,
+      }),
+      getComparisonColumn({
+        column: {
+          id: selectedDocs[3],
+          display: selectedDocs[3],
+          displayAsText: `Comparison document: ${selectedDocs[3]}`,
+          actions: {
+            showMoveLeft: true,
+          },
+        },
+        includePinAction: true,
+        includeRemoveAction: true,
+      }),
+    ]);
+    expect(columns[1].display).toMatchInlineSnapshot(`
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="xs"
+        responsive={false}
+      >
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiIcon
+            type="pinFilled"
+          />
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          0
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    `);
+    const actions = columns[2].actions as EuiDataGridColumnActions;
+    const pinAction = actions.additional?.[0].onClick;
+    const removeAction = actions.additional?.[1].onClick;
+    render(<button onClick={pinAction} data-test-subj="pin" />);
+    userEvent.click(screen.getByTestId('pin'));
+    expect(setSelectedDocs).toHaveBeenCalledTimes(1);
+    expect(setSelectedDocs).toHaveBeenLastCalledWith(['1', '0', '2', '3']);
+    render(<button onClick={removeAction} data-test-subj="remove" />);
+    userEvent.click(screen.getByTestId('remove'));
+    expect(setSelectedDocs).toHaveBeenCalledTimes(2);
+    expect(setSelectedDocs).toHaveBeenLastCalledWith(['0', '2', '3']);
+  });
+
+  it('should not set column widths if there is sufficient space', () => {
+    const { columns } = renderColumns({
+      wrapperWidth: FIELD_COLUMN_WIDTH + selectedDocs.length * DEFAULT_COLUMN_WIDTH,
+    });
+    expect(columns[0].initialWidth).toBe(FIELD_COLUMN_WIDTH);
+    expect(columns[1].initialWidth).toBe(undefined);
+    expect(columns[2].initialWidth).toBe(undefined);
+    expect(columns[3].initialWidth).toBe(undefined);
+    expect(columns[4].initialWidth).toBe(undefined);
+  });
+
+  it('should use result column display for plain records', () => {
+    const { columns } = renderColumns({ isPlainRecord: true });
+    expect(columns[1].displayAsText).toBe(`Pinned result: 1`);
+    expect(columns[2].displayAsText).toBe(`Comparison result: 2`);
+    expect(columns[3].displayAsText).toBe(`Comparison result: 3`);
+    expect(columns[4].displayAsText).toBe(`Comparison result: 4`);
+  });
+
+  it('should skip columns for missing docs', () => {
+    const getDocById = (id: string) => (id === selectedDocs[1] ? undefined : defaultGetDocById(id));
+    const { columns } = renderColumns({ getDocById });
+    expect(columns).toHaveLength(4);
+    expect(columns[1].displayAsText).toBe(`Pinned document: ${selectedDocs[0]}`);
+    expect(columns[2].displayAsText).toBe(`Comparison document: ${selectedDocs[2]}`);
+    expect(columns[3].displayAsText).toBe(`Comparison document: ${selectedDocs[3]}`);
+  });
+});
diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_columns.tsx b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_columns.tsx
new file mode 100644
index 00000000000000..810dd8ba540811
--- /dev/null
+++ b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_columns.tsx
@@ -0,0 +1,173 @@
+/*
+ * 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 {
+  EuiDataGridColumn,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiListGroupItemProps,
+} from '@elastic/eui';
+import type { DataTableRecord } from '@kbn/discover-utils/types';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { useMemo } from 'react';
+
+export interface UseComparisonColumnsProps {
+  wrapper: HTMLElement | null;
+  isPlainRecord: boolean;
+  fieldColumnId: string;
+  selectedDocs: string[];
+  getDocById: (docId: string) => DataTableRecord | undefined;
+  setSelectedDocs: (selectedDocs: string[]) => void;
+}
+
+export const DEFAULT_COLUMN_WIDTH = 300;
+export const FIELD_COLUMN_WIDTH = 200;
+export const FIELD_COLUMN_NAME = i18n.translate('unifiedDataTable.fieldColumnTitle', {
+  defaultMessage: 'Field',
+});
+
+export const useComparisonColumns = ({
+  wrapper,
+  isPlainRecord,
+  fieldColumnId,
+  selectedDocs,
+  getDocById,
+  setSelectedDocs,
+}: UseComparisonColumnsProps) => {
+  const comparisonColumns = useMemo<EuiDataGridColumn[]>(() => {
+    const fieldsColumn: EuiDataGridColumn = {
+      id: fieldColumnId,
+      displayAsText: FIELD_COLUMN_NAME,
+      initialWidth: FIELD_COLUMN_WIDTH,
+      isSortable: false,
+      isExpandable: false,
+      actions: false,
+    };
+
+    const currentColumns = [fieldsColumn];
+    const wrapperWidth = wrapper?.offsetWidth ?? 0;
+    const columnWidth =
+      DEFAULT_COLUMN_WIDTH * selectedDocs.length + FIELD_COLUMN_WIDTH > wrapperWidth
+        ? DEFAULT_COLUMN_WIDTH
+        : undefined;
+
+    selectedDocs.forEach((docId, docIndex) => {
+      const doc = getDocById(docId);
+
+      if (!doc) {
+        return;
+      }
+
+      const additional: EuiListGroupItemProps[] = [];
+
+      if (docIndex !== 0) {
+        additional.push({
+          iconType: 'pin',
+          label: i18n.translate('unifiedDataTable.pinForComparison', {
+            defaultMessage: 'Pin for comparison',
+          }),
+          size: 'xs',
+          onClick: () => {
+            const newSelectedDocs = [...selectedDocs];
+            const index = newSelectedDocs.indexOf(docId);
+            const [baseDocId] = newSelectedDocs;
+
+            newSelectedDocs[0] = docId;
+            newSelectedDocs[index] = baseDocId;
+
+            setSelectedDocs(newSelectedDocs);
+          },
+        });
+      }
+
+      if (selectedDocs.length > 2) {
+        additional.push({
+          iconType: 'cross',
+          label: i18n.translate('unifiedDataTable.removeFromComparison', {
+            defaultMessage: 'Remove from comparison',
+          }),
+          size: 'xs',
+          onClick: () => {
+            setSelectedDocs(selectedDocs.filter((id) => id !== docId));
+          },
+        });
+      }
+
+      const resultNumber = isPlainRecord ? Number(docId || 0) + 1 : undefined;
+      const columnTitle = isPlainRecord
+        ? i18n.translate('unifiedDataTable.comparisonColumnResultDisplay', {
+            defaultMessage: 'Result {resultNumber}',
+            values: { resultNumber },
+          })
+        : doc.raw._id;
+
+      const display =
+        docIndex === 0 ? (
+          <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
+            <EuiFlexItem grow={false}>
+              <EuiIcon type="pinFilled" />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>{columnTitle}</EuiFlexItem>
+          </EuiFlexGroup>
+        ) : (
+          columnTitle
+        );
+
+      const displayAsText =
+        docIndex === 0
+          ? isPlainRecord
+            ? i18n.translate('unifiedDataTable.comparisonColumnResultPinnedTooltip', {
+                defaultMessage: 'Pinned result: {resultNumber}',
+                values: { resultNumber },
+              })
+            : i18n.translate('unifiedDataTable.comparisonColumnPinnedTooltip', {
+                defaultMessage: 'Pinned document: {documentId}',
+                values: { documentId: doc.raw._id },
+              })
+          : isPlainRecord
+          ? i18n.translate('unifiedDataTable.comparisonColumnResultTooltip', {
+              defaultMessage: 'Comparison result: {resultNumber}',
+              values: { resultNumber },
+            })
+          : i18n.translate('unifiedDataTable.comparisonColumnTooltip', {
+              defaultMessage: 'Comparison document: {documentId}',
+              values: { documentId: doc.raw._id },
+            });
+
+      currentColumns.push({
+        id: docId,
+        display,
+        displayAsText,
+        initialWidth: columnWidth,
+        isSortable: false,
+        isExpandable: false,
+        actions: {
+          showHide: false,
+          showMoveLeft: docIndex > 1,
+          showMoveRight: docIndex > 0 && docIndex < selectedDocs.length - 1,
+          showSortAsc: false,
+          showSortDesc: false,
+          additional,
+        },
+      });
+    });
+
+    return currentColumns;
+  }, [
+    fieldColumnId,
+    getDocById,
+    isPlainRecord,
+    selectedDocs,
+    setSelectedDocs,
+    wrapper?.offsetWidth,
+  ]);
+
+  return comparisonColumns;
+};
diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_css.test.ts b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_css.test.ts
new file mode 100644
index 00000000000000..990cf289c557a5
--- /dev/null
+++ b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_css.test.ts
@@ -0,0 +1,65 @@
+/*
+ * 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 { renderHook } from '@testing-library/react-hooks';
+import { useComparisonCss } from './use_comparison_css';
+
+describe('useComparisonCss', () => {
+  it('should render with no diff mode and no diff decorations', () => {
+    const { result } = renderHook(() => useComparisonCss({}));
+    expect(result.current).toMatchSnapshot();
+  });
+
+  it('should render with basic diff mode and no diff decorations', () => {
+    const { result } = renderHook(() => useComparisonCss({ diffMode: 'basic' }));
+    expect(result.current).toMatchSnapshot();
+  });
+
+  it('should render with basic diff mode and diff decorations', () => {
+    const { result } = renderHook(() =>
+      useComparisonCss({ diffMode: 'basic', showDiffDecorations: true })
+    );
+    expect(result.current).toMatchSnapshot();
+  });
+
+  it('should render with chars diff mode and no diff decorations', () => {
+    const { result } = renderHook(() => useComparisonCss({ diffMode: 'chars' }));
+    expect(result.current).toMatchSnapshot();
+  });
+
+  it('should render with chars diff mode and diff decorations', () => {
+    const { result } = renderHook(() =>
+      useComparisonCss({ diffMode: 'chars', showDiffDecorations: true })
+    );
+    expect(result.current).toMatchSnapshot();
+  });
+
+  it('should render with words diff mode and no diff decorations', () => {
+    const { result } = renderHook(() => useComparisonCss({ diffMode: 'words' }));
+    expect(result.current).toMatchSnapshot();
+  });
+
+  it('should render with words diff mode and diff decorations', () => {
+    const { result } = renderHook(() =>
+      useComparisonCss({ diffMode: 'words', showDiffDecorations: true })
+    );
+    expect(result.current).toMatchSnapshot();
+  });
+
+  it('should render with lines diff mode and no diff decorations', () => {
+    const { result } = renderHook(() => useComparisonCss({ diffMode: 'lines' }));
+    expect(result.current).toMatchSnapshot();
+  });
+
+  it('should render with lines diff mode and diff decorations', () => {
+    const { result } = renderHook(() =>
+      useComparisonCss({ diffMode: 'lines', showDiffDecorations: true })
+    );
+    expect(result.current).toMatchSnapshot();
+  });
+});
diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_css.ts b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_css.ts
new file mode 100644
index 00000000000000..aa0517a09fadd5
--- /dev/null
+++ b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_css.ts
@@ -0,0 +1,128 @@
+/*
+ * 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 { tint, useEuiBackgroundColor, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { CELL_CLASS } from '../../../utils/get_render_cell_value';
+import { DocumentDiffMode } from '../types';
+
+export const FIELD_NAME_CLASS = 'unifiedDataTable__comparisonFieldName';
+export const BASE_CELL_CLASS = 'unifiedDataTable__comparisonBaseDocCell';
+export const MATCH_CELL_CLASS = 'unifiedDataTable__comparisonMatchCell';
+export const DIFF_CELL_CLASS = 'unifiedDataTable__comparisonDiffCell';
+export const SEGMENT_CLASS = 'unifiedDataTable__comparisonSegment';
+export const ADDED_SEGMENT_CLASS = 'unifiedDataTable__comparisonAddedSegment';
+export const REMOVED_SEGMENT_CLASS = 'unifiedDataTable__comparisonRemovedSegment';
+
+export const useComparisonCss = ({
+  diffMode,
+  showDiffDecorations,
+}: {
+  diffMode?: DocumentDiffMode;
+  showDiffDecorations?: boolean;
+}) => {
+  const { euiTheme } = useEuiTheme();
+  const baseCellBackgroundColor = useEuiBackgroundColor('subdued', { method: 'transparent' });
+  const matchSegmentBackgroundColor = useEuiBackgroundColor('success');
+  const diffSegmentBackgroundColor = useEuiBackgroundColor('danger');
+
+  const indicatorCss = css`
+    position: absolute;
+    width: ${euiTheme.size.s};
+    height: 100%;
+    margin-left: calc(-${euiTheme.size.s} - calc(${euiTheme.size.xs} / 2));
+    text-align: center;
+    line-height: ${euiTheme.font.scale.m};
+    font-weight: ${euiTheme.font.weight.medium};
+  `;
+
+  return css`
+    .${CELL_CLASS} {
+      white-space: pre-wrap;
+    }
+
+    .${FIELD_NAME_CLASS} {
+      font-weight: ${euiTheme.font.weight.semiBold};
+    }
+
+    .${BASE_CELL_CLASS} {
+      background-color: ${baseCellBackgroundColor};
+    }
+
+    ${diffMode === 'basic' &&
+    css`
+      .${MATCH_CELL_CLASS} {
+        .${CELL_CLASS} {
+          &,
+          & * {
+            color: ${euiTheme.colors.successText} !important;
+          }
+        }
+      }
+
+      .${DIFF_CELL_CLASS} {
+        .${CELL_CLASS} {
+          &,
+          & * {
+            color: ${euiTheme.colors.dangerText} !important;
+          }
+        }
+      }
+    `}
+
+    .${SEGMENT_CLASS} {
+      position: relative;
+    }
+
+    .${ADDED_SEGMENT_CLASS} {
+      background-color: ${matchSegmentBackgroundColor};
+      color: ${euiTheme.colors.successText};
+    }
+
+    .${REMOVED_SEGMENT_CLASS} {
+      background-color: ${diffSegmentBackgroundColor};
+      color: ${euiTheme.colors.dangerText};
+    }
+
+    ${(diffMode === 'chars' || diffMode === 'words') &&
+    showDiffDecorations &&
+    css`
+      .${ADDED_SEGMENT_CLASS} {
+        text-decoration: underline;
+      }
+
+      .${REMOVED_SEGMENT_CLASS} {
+        text-decoration: line-through;
+      }
+    `}
+
+    ${diffMode === 'lines' &&
+    css`
+      .${SEGMENT_CLASS} {
+        padding-left: calc(${euiTheme.size.xs} / 2);
+      }
+
+      ${showDiffDecorations &&
+      css`
+        .${ADDED_SEGMENT_CLASS}:before {
+          content: '+';
+          ${indicatorCss}
+          background-color: ${euiTheme.colors.success};
+          color: ${euiTheme.colors.lightestShade};
+        }
+
+        .${REMOVED_SEGMENT_CLASS}:before {
+          content: '-';
+          ${indicatorCss}
+          background-color: ${tint(euiTheme.colors.danger, 0.25)};
+          color: ${euiTheme.colors.lightestShade};
+        }
+      `}
+    `}
+  `;
+};
diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_fields.test.ts b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_fields.test.ts
new file mode 100644
index 00000000000000..deb3f66a5f55db
--- /dev/null
+++ b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_fields.test.ts
@@ -0,0 +1,151 @@
+/*
+ * 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 { renderHook } from '@testing-library/react-hooks';
+import { buildDataTableRecord } from '@kbn/discover-utils';
+import {
+  MAX_COMPARISON_FIELDS,
+  useComparisonFields,
+  UseComparisonFieldsProps,
+} from './use_comparison_fields';
+import { buildDataViewMock, generateEsHits } from '@kbn/discover-utils/src/__mocks__';
+import { dataViewWithTimefieldMock } from '../../../../__mocks__/data_view_with_timefield';
+import { fieldList, FieldSpec } from '@kbn/data-views-plugin/common';
+import { EsHitRecord } from '@kbn/discover-utils/types';
+
+const matchValues = (hit: EsHitRecord) => {
+  hit.fields!.bytes = [50];
+  hit.fields!.extension = ['gif'];
+  return hit;
+};
+
+const clearValues = (hit: EsHitRecord) => {
+  hit.fields!.bytes = null;
+  hit.fields!.extension = undefined;
+  return hit;
+};
+
+const renderFields = ({
+  props,
+  transformHit = (hit) => hit,
+}: {
+  props?: Partial<Omit<UseComparisonFieldsProps, 'getDocById'>>;
+  transformHit?: (hit: EsHitRecord) => EsHitRecord;
+} = {}) => {
+  const dataView = props?.dataView ?? dataViewWithTimefieldMock;
+  const docs = generateEsHits(dataView, 5).map((hit) =>
+    buildDataTableRecord(transformHit(hit), dataView)
+  );
+  const getDocById = (id: string) => docs.find((doc) => doc.raw._id === id);
+  const {
+    result: {
+      current: { comparisonFields, totalFields },
+    },
+  } = renderHook(() =>
+    useComparisonFields({
+      dataView,
+      selectedFieldNames: ['message', 'extension', 'bytes'],
+      selectedDocs: ['0', '1', '2'],
+      showAllFields: true,
+      showMatchingValues: true,
+      getDocById,
+      ...props,
+    })
+  );
+  return { comparisonFields, totalFields };
+};
+
+describe('useComparisonFields', () => {
+  it('should return all fields, with the time field first and other fields ordered alphabetically, if showAllFields is true', () => {
+    const { comparisonFields, totalFields } = renderFields();
+    expect(comparisonFields).toEqual([
+      'timestamp',
+      'bytes',
+      'extension',
+      'message',
+      'scripted',
+      '_index',
+    ]);
+    expect(totalFields).toBe(6);
+  });
+
+  it('should return only selectedFieldNames, preserving the selected order, if showAllFields is false', () => {
+    const { comparisonFields, totalFields } = renderFields({ props: { showAllFields: false } });
+    expect(comparisonFields).toEqual(['message', 'extension', 'bytes']);
+    expect(totalFields).toBe(3);
+  });
+
+  it('should include fields with matching values if showMatchingValues is true', () => {
+    const { comparisonFields, totalFields } = renderFields({ transformHit: matchValues });
+    expect(comparisonFields).toEqual([
+      'timestamp',
+      'bytes',
+      'extension',
+      'message',
+      'scripted',
+      '_index',
+    ]);
+    expect(totalFields).toBe(6);
+    const { comparisonFields: comparisonFields2, totalFields: totalFields2 } = renderFields({
+      props: { showAllFields: false },
+      transformHit: matchValues,
+    });
+    expect(comparisonFields2).toEqual(['message', 'extension', 'bytes']);
+    expect(totalFields2).toBe(3);
+  });
+
+  it('should filter out fields with matching values if showMatchingValues is false', () => {
+    const { comparisonFields, totalFields } = renderFields({
+      props: { showMatchingValues: false },
+      transformHit: matchValues,
+    });
+    expect(comparisonFields).toEqual(['timestamp', 'message', 'scripted']);
+    expect(totalFields).toBe(3);
+    const { comparisonFields: comparisonFields2, totalFields: totalFields2 } = renderFields({
+      props: { showAllFields: false, showMatchingValues: false },
+      transformHit: matchValues,
+    });
+    expect(comparisonFields2).toEqual(['message']);
+    expect(totalFields2).toBe(1);
+  });
+
+  it('should filter out fields where all values are null/undefined if showAllFields is true', () => {
+    const { comparisonFields, totalFields } = renderFields({ transformHit: clearValues });
+    expect(comparisonFields).toEqual(['timestamp', 'message', 'scripted', '_index']);
+    expect(totalFields).toBe(4);
+  });
+
+  it('should not filter out fields where all values are null/undefined if showAllFields is false', () => {
+    const { comparisonFields, totalFields } = renderFields({
+      props: { showAllFields: false },
+      transformHit: clearValues,
+    });
+    expect(comparisonFields).toEqual(['message', 'extension', 'bytes']);
+    expect(totalFields).toBe(3);
+  });
+
+  it(`should limit the number of comparison fields to ${MAX_COMPARISON_FIELDS}`, () => {
+    const overflow = 10;
+    const fields: FieldSpec[] = Array.from(
+      { length: MAX_COMPARISON_FIELDS + overflow },
+      (_, i) => ({
+        name: `field${i}`,
+        type: 'string',
+        searchable: true,
+        aggregatable: true,
+      })
+    );
+    const dataView = buildDataViewMock({
+      name: 'test',
+      fields: fieldList(fields),
+    });
+    const { comparisonFields, totalFields } = renderFields({ props: { dataView } });
+    expect(comparisonFields).toHaveLength(fields.length - overflow);
+    expect(totalFields).toBe(fields.length);
+  });
+});
diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_fields.ts b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_fields.ts
new file mode 100644
index 00000000000000..d7499983872be5
--- /dev/null
+++ b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_fields.ts
@@ -0,0 +1,83 @@
+/*
+ * 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 type { DataView } from '@kbn/data-views-plugin/common';
+import type { DataTableRecord } from '@kbn/discover-utils/types';
+import { isEqual } from 'lodash';
+import { useMemo } from 'react';
+
+export const MAX_COMPARISON_FIELDS = 100;
+
+export interface UseComparisonFieldsProps {
+  dataView: DataView;
+  selectedFieldNames: string[];
+  selectedDocs: string[];
+  showAllFields: boolean;
+  showMatchingValues: boolean;
+  getDocById: (id: string) => DataTableRecord | undefined;
+}
+
+export const useComparisonFields = ({
+  dataView,
+  selectedFieldNames,
+  selectedDocs,
+  showAllFields,
+  showMatchingValues,
+  getDocById,
+}: UseComparisonFieldsProps) => {
+  const { baseDoc, comparisonDocs } = useMemo(() => {
+    const [baseDocId, ...comparisonDocIds] = selectedDocs;
+
+    return {
+      baseDoc: getDocById(baseDocId),
+      comparisonDocs: comparisonDocIds
+        .map((docId) => getDocById(docId))
+        .filter((doc): doc is DataTableRecord => Boolean(doc)),
+    };
+  }, [getDocById, selectedDocs]);
+
+  return useMemo(() => {
+    let comparisonFields = selectedFieldNames;
+
+    if (showAllFields) {
+      const sortedFields = dataView.fields
+        .filter((field) => {
+          if (field.name === dataView.timeFieldName) {
+            return false;
+          }
+
+          return (
+            baseDoc?.flattened[field.name] != null ||
+            comparisonDocs.some((doc) => doc.flattened[field.name] != null)
+          );
+        })
+        .sort((a, b) => a.displayName.localeCompare(b.displayName))
+        .map((field) => field.name);
+
+      comparisonFields = dataView.isTimeBased()
+        ? [dataView.timeFieldName, ...sortedFields]
+        : sortedFields;
+    }
+
+    if (baseDoc && !showMatchingValues) {
+      comparisonFields = comparisonFields.filter((fieldName) =>
+        comparisonDocs.some(
+          (doc) => !isEqual(doc.flattened[fieldName], baseDoc.flattened[fieldName])
+        )
+      );
+    }
+
+    const totalFields = comparisonFields.length;
+
+    if (totalFields > MAX_COMPARISON_FIELDS) {
+      comparisonFields = comparisonFields.slice(0, MAX_COMPARISON_FIELDS);
+    }
+
+    return { comparisonFields, totalFields };
+  }, [baseDoc, comparisonDocs, dataView, selectedFieldNames, showAllFields, showMatchingValues]);
+};
diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/index.tsx b/packages/kbn-unified-data-table/src/components/compare_documents/index.tsx
new file mode 100644
index 00000000000000..11119e2c1e3419
--- /dev/null
+++ b/packages/kbn-unified-data-table/src/components/compare_documents/index.tsx
@@ -0,0 +1,12 @@
+/*
+ * 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 { withSuspense } from '@kbn/shared-ux-utility';
+import { lazy } from 'react';
+
+export const CompareDocuments = withSuspense(lazy(() => import('./compare_documents')));
diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/types.ts b/packages/kbn-unified-data-table/src/components/compare_documents/types.ts
new file mode 100644
index 00000000000000..a68cfdc54a35e0
--- /dev/null
+++ b/packages/kbn-unified-data-table/src/components/compare_documents/types.ts
@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export type DocumentDiffMode = 'basic' | 'chars' | 'words' | 'lines';
diff --git a/src/plugins/discover/public/components/discover_grid/__snapshots__/render_custom_toolbar.test.tsx.snap b/packages/kbn-unified-data-table/src/components/custom_toolbar/__snapshots__/render_custom_toolbar.test.tsx.snap
similarity index 72%
rename from src/plugins/discover/public/components/discover_grid/__snapshots__/render_custom_toolbar.test.tsx.snap
rename to packages/kbn-unified-data-table/src/components/custom_toolbar/__snapshots__/render_custom_toolbar.test.tsx.snap
index 9f2af58f1dccba..431851e200ed86 100644
--- a/src/plugins/discover/public/components/discover_grid/__snapshots__/render_custom_toolbar.test.tsx.snap
+++ b/packages/kbn-unified-data-table/src/components/custom_toolbar/__snapshots__/render_custom_toolbar.test.tsx.snap
@@ -4,8 +4,8 @@ exports[`renderCustomToolbar should render correctly for smaller screens 1`] = `
 <React.Fragment>
   <EuiFlexGroup
     alignItems="center"
-    className="dscGridToolbar"
-    data-test-subj="dscGridToolbar"
+    className="unifiedDataTableToolbar"
+    data-test-subj="unifiedDataTableToolbar"
     gutterSize="s"
     justifyContent="spaceBetween"
     responsive={false}
@@ -32,20 +32,20 @@ exports[`renderCustomToolbar should render correctly for smaller screens 1`] = `
           grow={false}
         >
           <div
-            className="dscGridToolbarControlGroup"
+            className="unifiedDataTableToolbarControlGroup"
           >
             <div
-              className="dscGridToolbarControlIconButton"
+              className="unifiedDataTableToolbarControlIconButton"
             >
               keyboard
             </div>
             <div
-              className="dscGridToolbarControlIconButton"
+              className="unifiedDataTableToolbarControlIconButton"
             >
               display
             </div>
             <div
-              className="dscGridToolbarControlIconButton"
+              className="unifiedDataTableToolbarControlIconButton"
             >
               fullScreen
             </div>
@@ -61,8 +61,8 @@ exports[`renderCustomToolbar should render correctly with an element 1`] = `
 <React.Fragment>
   <EuiFlexGroup
     alignItems="center"
-    className="dscGridToolbar"
-    data-test-subj="dscGridToolbar"
+    className="unifiedDataTableToolbar"
+    data-test-subj="unifiedDataTableToolbar"
     gutterSize="s"
     justifyContent="spaceBetween"
     responsive={false}
@@ -88,7 +88,7 @@ exports[`renderCustomToolbar should render correctly with an element 1`] = `
             grow={false}
           >
             <div
-              className="dscGridToolbarControlButton"
+              className="unifiedDataTableToolbarControlButton"
             >
               additional
             </div>
@@ -97,7 +97,7 @@ exports[`renderCustomToolbar should render correctly with an element 1`] = `
             grow={false}
           >
             <div
-              className="dscGridToolbarControlButton"
+              className="unifiedDataTableToolbarControlButton"
             >
               column
             </div>
@@ -106,7 +106,7 @@ exports[`renderCustomToolbar should render correctly with an element 1`] = `
             grow={false}
           >
             <div
-              className="dscGridToolbarControlButton"
+              className="unifiedDataTableToolbarControlButton"
             >
               columnSorting
             </div>
@@ -116,20 +116,20 @@ exports[`renderCustomToolbar should render correctly with an element 1`] = `
           grow={false}
         >
           <div
-            className="dscGridToolbarControlGroup"
+            className="unifiedDataTableToolbarControlGroup"
           >
             <div
-              className="dscGridToolbarControlIconButton"
+              className="unifiedDataTableToolbarControlIconButton"
             >
               keyboard
             </div>
             <div
-              className="dscGridToolbarControlIconButton"
+              className="unifiedDataTableToolbarControlIconButton"
             >
               display
             </div>
             <div
-              className="dscGridToolbarControlIconButton"
+              className="unifiedDataTableToolbarControlIconButton"
             >
               fullScreen
             </div>
@@ -139,8 +139,8 @@ exports[`renderCustomToolbar should render correctly with an element 1`] = `
     </EuiFlexItem>
   </EuiFlexGroup>
   <div
-    className="dscGridToolbarBottom"
-    data-test-subj="dscGridToolbarBottom"
+    className="unifiedDataTableToolbarBottom"
+    data-test-subj="unifiedDataTableToolbarBottom"
   >
     <div>
       bottom
@@ -153,8 +153,8 @@ exports[`renderCustomToolbar should render successfully 1`] = `
 <React.Fragment>
   <EuiFlexGroup
     alignItems="center"
-    className="dscGridToolbar"
-    data-test-subj="dscGridToolbar"
+    className="unifiedDataTableToolbar"
+    data-test-subj="unifiedDataTableToolbar"
     gutterSize="s"
     justifyContent="spaceBetween"
     responsive={false}
@@ -173,7 +173,7 @@ exports[`renderCustomToolbar should render successfully 1`] = `
             grow={false}
           >
             <div
-              className="dscGridToolbarControlButton"
+              className="unifiedDataTableToolbarControlButton"
             >
               column
             </div>
@@ -182,7 +182,7 @@ exports[`renderCustomToolbar should render successfully 1`] = `
             grow={false}
           >
             <div
-              className="dscGridToolbarControlButton"
+              className="unifiedDataTableToolbarControlButton"
             >
               columnSorting
             </div>
@@ -191,7 +191,7 @@ exports[`renderCustomToolbar should render successfully 1`] = `
             grow={false}
           >
             <div
-              className="dscGridToolbarControlButton"
+              className="unifiedDataTableToolbarControlButton"
             >
               additional
             </div>
@@ -211,20 +211,20 @@ exports[`renderCustomToolbar should render successfully 1`] = `
           grow={false}
         >
           <div
-            className="dscGridToolbarControlGroup"
+            className="unifiedDataTableToolbarControlGroup"
           >
             <div
-              className="dscGridToolbarControlIconButton"
+              className="unifiedDataTableToolbarControlIconButton"
             >
               keyboard
             </div>
             <div
-              className="dscGridToolbarControlIconButton"
+              className="unifiedDataTableToolbarControlIconButton"
             >
               display
             </div>
             <div
-              className="dscGridToolbarControlIconButton"
+              className="unifiedDataTableToolbarControlIconButton"
             >
               fullScreen
             </div>
diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss b/packages/kbn-unified-data-table/src/components/custom_toolbar/render_custom_toolbar.scss
similarity index 79%
rename from src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss
rename to packages/kbn-unified-data-table/src/components/custom_toolbar/render_custom_toolbar.scss
index 66a3e9bb4f0435..054627d9340a68 100644
--- a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.scss
+++ b/packages/kbn-unified-data-table/src/components/custom_toolbar/render_custom_toolbar.scss
@@ -1,8 +1,8 @@
-.dscGridToolbar {
+.unifiedDataTableToolbar {
   padding: $euiSizeS $euiSizeS $euiSizeXS;
 }
 
-.dscGridToolbarControlButton .euiDataGridToolbarControl {
+.unifiedDataTableToolbarControlButton .euiDataGridToolbarControl {
   block-size: $euiSizeXL;
   border: $euiBorderThin;
   border-radius: $euiBorderRadiusSmall;
@@ -28,7 +28,7 @@
   }
 }
 
-.dscGridToolbarControlGroup {
+.unifiedDataTableToolbarControlGroup {
   box-shadow: inset 0 0 0 $euiBorderWidthThin $euiBorderColor;
   border-radius: $euiBorderRadiusSmall;
   display: inline-flex;
@@ -36,7 +36,7 @@
   flex-direction: row;
 }
 
-.dscGridToolbarControlIconButton .euiButtonIcon {
+.unifiedDataTableToolbarControlIconButton .euiButtonIcon {
   inline-size: $euiSizeXL;
   block-size: $euiSizeXL;
 
@@ -47,12 +47,12 @@
     transform: none !important;
   }
 
-  .dscGridToolbarControlIconButton + & {
+  .unifiedDataTableToolbarControlIconButton + & {
     border-inline-start: $euiBorderThin;
     border-radius: 0;
   }
 }
 
-.dscGridToolbarBottom {
+.unifiedDataTableToolbarBottom {
   position: relative; // for placing a loading indicator correctly
 }
diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.test.tsx b/packages/kbn-unified-data-table/src/components/custom_toolbar/render_custom_toolbar.test.tsx
similarity index 100%
rename from src/plugins/discover/public/components/discover_grid/render_custom_toolbar.test.tsx
rename to packages/kbn-unified-data-table/src/components/custom_toolbar/render_custom_toolbar.test.tsx
diff --git a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx b/packages/kbn-unified-data-table/src/components/custom_toolbar/render_custom_toolbar.tsx
similarity index 63%
rename from src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx
rename to packages/kbn-unified-data-table/src/components/custom_toolbar/render_custom_toolbar.tsx
index 2baeb4c287a160..cda99608764575 100644
--- a/src/plugins/discover/public/components/discover_grid/render_custom_toolbar.tsx
+++ b/packages/kbn-unified-data-table/src/components/custom_toolbar/render_custom_toolbar.tsx
@@ -7,19 +7,33 @@
  */
 
 import React from 'react';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import type {
-  UnifiedDataTableRenderCustomToolbarProps,
-  UnifiedDataTableRenderCustomToolbar,
-} from '@kbn/unified-data-table';
+import {
+  EuiDataGridCustomToolbarProps,
+  EuiDataGridToolBarVisibilityOptions,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
 import './render_custom_toolbar.scss';
 
+export interface UnifiedDataTableRenderCustomToolbarProps {
+  toolbarProps: EuiDataGridCustomToolbarProps;
+  gridProps: {
+    additionalControls?: EuiDataGridToolBarVisibilityOptions['additionalControls'];
+  };
+}
+
+export type UnifiedDataTableRenderCustomToolbar = (
+  props: UnifiedDataTableRenderCustomToolbarProps
+) => React.ReactElement;
+
 interface RenderCustomToolbarProps extends UnifiedDataTableRenderCustomToolbarProps {
   leftSide?: React.ReactElement;
   bottomSection?: React.ReactElement;
 }
 
-export const renderCustomToolbar = (props: RenderCustomToolbarProps): React.ReactElement => {
+export const internalRenderCustomToolbar = (
+  props: RenderCustomToolbarProps
+): React.ReactElement => {
   const {
     leftSide,
     bottomSection,
@@ -38,22 +52,22 @@ export const renderCustomToolbar = (props: RenderCustomToolbarProps): React.Reac
     <>
       {leftSide && additionalControls && (
         <EuiFlexItem grow={false}>
-          <div className="dscGridToolbarControlButton">{additionalControls}</div>
+          <div className="unifiedDataTableToolbarControlButton">{additionalControls}</div>
         </EuiFlexItem>
       )}
       {columnControl && (
         <EuiFlexItem grow={false}>
-          <div className="dscGridToolbarControlButton">{columnControl}</div>
+          <div className="unifiedDataTableToolbarControlButton">{columnControl}</div>
         </EuiFlexItem>
       )}
       {columnSortingControl && (
         <EuiFlexItem grow={false}>
-          <div className="dscGridToolbarControlButton">{columnSortingControl}</div>
+          <div className="unifiedDataTableToolbarControlButton">{columnSortingControl}</div>
         </EuiFlexItem>
       )}
       {!leftSide && additionalControls && (
         <EuiFlexItem grow={false}>
-          <div className="dscGridToolbarControlButton">{additionalControls}</div>
+          <div className="unifiedDataTableToolbarControlButton">{additionalControls}</div>
         </EuiFlexItem>
       )}
     </>
@@ -66,8 +80,8 @@ export const renderCustomToolbar = (props: RenderCustomToolbarProps): React.Reac
         gutterSize="s"
         justifyContent="spaceBetween"
         alignItems="center"
-        className="dscGridToolbar"
-        data-test-subj="dscGridToolbar"
+        className="unifiedDataTableToolbar"
+        data-test-subj="unifiedDataTableToolbar"
         wrap
       >
         <EuiFlexItem grow={false}>
@@ -82,17 +96,19 @@ export const renderCustomToolbar = (props: RenderCustomToolbarProps): React.Reac
             {Boolean(leftSide) && buttons}
             {(keyboardShortcutsControl || displayControl || fullScreenControl) && (
               <EuiFlexItem grow={false}>
-                <div className="dscGridToolbarControlGroup">
+                <div className="unifiedDataTableToolbarControlGroup">
                   {keyboardShortcutsControl && (
-                    <div className="dscGridToolbarControlIconButton">
+                    <div className="unifiedDataTableToolbarControlIconButton">
                       {keyboardShortcutsControl}
                     </div>
                   )}
                   {displayControl && (
-                    <div className="dscGridToolbarControlIconButton">{displayControl}</div>
+                    <div className="unifiedDataTableToolbarControlIconButton">{displayControl}</div>
                   )}
                   {fullScreenControl && (
-                    <div className="dscGridToolbarControlIconButton">{fullScreenControl}</div>
+                    <div className="unifiedDataTableToolbarControlIconButton">
+                      {fullScreenControl}
+                    </div>
                   )}
                 </div>
               </EuiFlexItem>
@@ -101,7 +117,10 @@ export const renderCustomToolbar = (props: RenderCustomToolbarProps): React.Reac
         </EuiFlexItem>
       </EuiFlexGroup>
       {bottomSection ? (
-        <div className="dscGridToolbarBottom" data-test-subj="dscGridToolbarBottom">
+        <div
+          className="unifiedDataTableToolbarBottom"
+          data-test-subj="unifiedDataTableToolbarBottom"
+        >
           {bottomSection}
         </div>
       ) : null}
@@ -109,6 +128,8 @@ export const renderCustomToolbar = (props: RenderCustomToolbarProps): React.Reac
   );
 };
 
+export const renderCustomToolbar: UnifiedDataTableRenderCustomToolbar = internalRenderCustomToolbar;
+
 /**
  * Render custom element on the left side and all controls to the right
  */
@@ -121,7 +142,7 @@ export const getRenderCustomToolbarWithElements = ({
 }): UnifiedDataTableRenderCustomToolbar => {
   const reservedSpace = <></>;
   return (props) =>
-    renderCustomToolbar({
+    internalRenderCustomToolbar({
       ...props,
       leftSide: leftSide || reservedSpace,
       bottomSection,
diff --git a/packages/kbn-unified-data-table/src/components/data_table.scss b/packages/kbn-unified-data-table/src/components/data_table.scss
index e9a95d87d8a302..1dde86b0c9eb68 100644
--- a/packages/kbn-unified-data-table/src/components/data_table.scss
+++ b/packages/kbn-unified-data-table/src/components/data_table.scss
@@ -40,10 +40,6 @@
     background: transparent;
   }
 
-  .euiDataGrid__controls {
-    border-top: $euiBorderThin;
-  }
-
   .euiDataGridHeaderCell {
     align-items: start;
 
diff --git a/packages/kbn-unified-data-table/src/components/data_table.test.tsx b/packages/kbn-unified-data-table/src/components/data_table.test.tsx
index f0c3c797c6dd43..88f13ac6688fac 100644
--- a/packages/kbn-unified-data-table/src/components/data_table.test.tsx
+++ b/packages/kbn-unified-data-table/src/components/data_table.test.tsx
@@ -24,11 +24,15 @@ import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { servicesMock } from '../../__mocks__/services';
 import { buildDataTableRecord, getDocId } from '@kbn/discover-utils';
 import type { DataTableRecord, EsHitRecord } from '@kbn/discover-utils/types';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 import {
   testLeadingControlColumn,
   testTrailingControlColumns,
 } from '../../__mocks__/external_control_columns';
 import { DatatableColumnType } from '@kbn/expressions-plugin/common';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { CELL_CLASS } from '../utils/get_render_cell_value';
 
 const mockUseDataGridColumnsCellActions = jest.fn((prop: unknown) => []);
 jest.mock('@kbn/cell-actions', () => ({
@@ -80,14 +84,14 @@ function getProps(): UnifiedDataTableProps {
   };
 }
 
-async function getComponent(props: UnifiedDataTableProps = getProps()) {
-  const Proxy = (innerProps: UnifiedDataTableProps) => (
-    <KibanaContextProvider services={servicesMock}>
-      <UnifiedDataTable {...innerProps} />
-    </KibanaContextProvider>
-  );
+const DataTable = (props: Partial<UnifiedDataTableProps>) => (
+  <KibanaContextProvider services={servicesMock}>
+    <UnifiedDataTable {...getProps()} {...props} />
+  </KibanaContextProvider>
+);
 
-  const component = mountWithIntl(<Proxy {...props} />);
+async function getComponent(props: UnifiedDataTableProps = getProps()) {
+  const component = mountWithIntl(<DataTable {...props} />);
   await act(async () => {
     // needed by cell actions to complete async loading
     component.update();
@@ -96,7 +100,7 @@ async function getComponent(props: UnifiedDataTableProps = getProps()) {
 }
 
 function getSelectedDocNr(component: ReactWrapper<UnifiedDataTableProps>) {
-  const gridSelectionBtn = findTestSubject(component, 'dscGridSelectionBtn');
+  const gridSelectionBtn = findTestSubject(component, 'unifiedDataTableSelectionBtn');
   if (!gridSelectionBtn.length) {
     return 0;
   }
@@ -153,7 +157,7 @@ describe('UnifiedDataTable', () => {
       await toggleDocSelection(component, esHitsMock[0]);
       await toggleDocSelection(component, esHitsMock[1]);
       expect(getSelectedDocNr(component)).toBe(2);
-      findTestSubject(component, 'dscGridSelectionBtn').simulate('click');
+      findTestSubject(component, 'unifiedDataTableSelectionBtn').simulate('click');
       findTestSubject(component, 'dscGridClearSelectedDocuments').simulate('click');
       expect(getSelectedDocNr(component)).toBe(0);
     });
@@ -162,10 +166,10 @@ describe('UnifiedDataTable', () => {
       await toggleDocSelection(component, esHitsMock[0]);
       await toggleDocSelection(component, esHitsMock[1]);
       expect(getSelectedDocNr(component)).toBe(2);
-      findTestSubject(component, 'dscGridSelectionBtn').simulate('click');
+      findTestSubject(component, 'unifiedDataTableSelectionBtn').simulate('click');
       findTestSubject(component, 'dscGridShowSelectedDocuments').simulate('click');
       expect(getDisplayedDocNr(component)).toBe(2);
-      findTestSubject(component, 'dscGridSelectionBtn').simulate('click');
+      findTestSubject(component, 'unifiedDataTableSelectionBtn').simulate('click');
       component.update();
       findTestSubject(component, 'dscGridShowAllDocuments').simulate('click');
       expect(getDisplayedDocNr(component)).toBe(5);
@@ -175,7 +179,7 @@ describe('UnifiedDataTable', () => {
       await toggleDocSelection(component, esHitsMock[0]);
       await toggleDocSelection(component, esHitsMock[1]);
       expect(getSelectedDocNr(component)).toBe(2);
-      findTestSubject(component, 'dscGridSelectionBtn').simulate('click');
+      findTestSubject(component, 'unifiedDataTableSelectionBtn').simulate('click');
       findTestSubject(component, 'dscGridShowSelectedDocuments').simulate('click');
       expect(getDisplayedDocNr(component)).toBe(2);
       component.setProps({
@@ -199,7 +203,7 @@ describe('UnifiedDataTable', () => {
 
     test('showing only selected documents and remove filter deselecting each doc manually', async () => {
       await toggleDocSelection(component, esHitsMock[0]);
-      findTestSubject(component, 'dscGridSelectionBtn').simulate('click');
+      findTestSubject(component, 'unifiedDataTableSelectionBtn').simulate('click');
       findTestSubject(component, 'dscGridShowSelectedDocuments').simulate('click');
       expect(getDisplayedDocNr(component)).toBe(1);
       await toggleDocSelection(component, esHitsMock[0]);
@@ -210,7 +214,7 @@ describe('UnifiedDataTable', () => {
 
     test('copying selected documents to clipboard', async () => {
       await toggleDocSelection(component, esHitsMock[0]);
-      findTestSubject(component, 'dscGridSelectionBtn').simulate('click');
+      findTestSubject(component, 'unifiedDataTableSelectionBtn').simulate('click');
       expect(component.find(EuiCopy).prop('textToCopy')).toMatchInlineSnapshot(
         `"[{\\"_index\\":\\"i\\",\\"_id\\":\\"1\\",\\"_score\\":1,\\"_type\\":\\"_doc\\",\\"_source\\":{\\"date\\":\\"2020-20-01T12:12:12.123\\",\\"message\\":\\"test1\\",\\"bytes\\":20}}]"`
       );
@@ -729,6 +733,7 @@ describe('UnifiedDataTable', () => {
       expect(grid.hasClass('euiDataGrid--bordersNone')).toBeTruthy();
     });
   });
+
   describe('rowLineHeightOverride', () => {
     it('should render the grid with the default row line height if no rowLineHeightOverride is provided', async () => {
       const component = await getComponent({
@@ -752,4 +757,93 @@ describe('UnifiedDataTable', () => {
       });
     });
   });
+
+  describe('document comparison', () => {
+    const renderDataTable = (props: Partial<UnifiedDataTableProps>) => {
+      render(
+        <IntlProvider locale="en">
+          <DataTable {...props} />
+        </IntlProvider>
+      );
+    };
+
+    const getSelectedDocumentsButton = () => screen.queryByRole('button', { name: /Selected/ });
+
+    const selectDocument = (document: EsHitRecord) =>
+      userEvent.click(screen.getByTestId(`dscGridSelectDoc-${getDocId(document)}`));
+
+    const getCompareDocumentsButton = () => screen.queryByRole('button', { name: /Compare/ });
+
+    const goToComparisonMode = async () => {
+      selectDocument(esHitsMock[0]);
+      selectDocument(esHitsMock[1]);
+      userEvent.click(getCompareDocumentsButton()!);
+      await screen.findByText('Comparing 2 documents');
+    };
+
+    const getFullScreenButton = () => screen.queryByTestId('dataGridFullScreenButton');
+
+    const getFieldColumns = () =>
+      screen
+        .queryAllByTestId('unifiedDataTableComparisonFieldName')
+        .map(({ textContent }) => textContent);
+
+    const getColumnHeaders = () =>
+      screen
+        .getAllByRole('columnheader')
+        .map((header) => header.querySelector('.euiDataGridHeaderCell__content')?.textContent);
+
+    const getCellValues = () =>
+      Array.from(document.querySelectorAll(`.${CELL_CLASS}`)).map(({ textContent }) => textContent);
+
+    it('should not allow comparison if less than 2 documents are selected', () => {
+      renderDataTable({ enableComparisonMode: true });
+      expect(getSelectedDocumentsButton()).not.toBeInTheDocument();
+      selectDocument(esHitsMock[0]);
+      expect(getSelectedDocumentsButton()).toBeInTheDocument();
+      expect(getCompareDocumentsButton()).not.toBeInTheDocument();
+      selectDocument(esHitsMock[1]);
+      expect(getSelectedDocumentsButton()).toBeInTheDocument();
+      expect(getCompareDocumentsButton()).toBeInTheDocument();
+    });
+
+    it('should not allow comparison if comparison mode is disabled', () => {
+      renderDataTable({ enableComparisonMode: false });
+      selectDocument(esHitsMock[0]);
+      selectDocument(esHitsMock[1]);
+      expect(getCompareDocumentsButton()).not.toBeInTheDocument();
+    });
+
+    it('should allow comparison if 2 or more documents are selected and comparison mode is enabled', async () => {
+      renderDataTable({ enableComparisonMode: true });
+      await goToComparisonMode();
+      expect(getColumnHeaders()).toEqual(['Field', '1', '2']);
+      expect(getCellValues()).toEqual(['', '', 'i', 'i', '20', '', '', 'jpg', 'test1', '']);
+    });
+
+    it('should show full screen button if showFullScreenButton is true', async () => {
+      renderDataTable({ enableComparisonMode: true, showFullScreenButton: true });
+      await goToComparisonMode();
+      expect(getFullScreenButton()).toBeInTheDocument();
+    });
+
+    it('should hide full screen button if showFullScreenButton is false', async () => {
+      renderDataTable({ enableComparisonMode: true, showFullScreenButton: false });
+      await goToComparisonMode();
+      expect(getFullScreenButton()).not.toBeInTheDocument();
+    });
+
+    it('should render selected fields', async () => {
+      const columns = ['bytes', 'message'];
+      renderDataTable({ enableComparisonMode: true, columns });
+      await goToComparisonMode();
+      expect(getFieldColumns()).toEqual(['@timestamp', ...columns]);
+    });
+
+    it('should render all available fields if no fields are selected', async () => {
+      renderDataTable({ enableComparisonMode: true });
+      await goToComparisonMode();
+      expect(getFieldColumns()).toEqual(['@timestamp', '_index', 'bytes', 'extension', 'message']);
+    });
+  });
 });
diff --git a/packages/kbn-unified-data-table/src/components/data_table.tsx b/packages/kbn-unified-data-table/src/components/data_table.tsx
index 09a2f2f8e065be..b1ce0298b9b5e5 100644
--- a/packages/kbn-unified-data-table/src/components/data_table.tsx
+++ b/packages/kbn-unified-data-table/src/components/data_table.tsx
@@ -26,11 +26,11 @@ import {
   EuiDataGridInMemory,
   EuiDataGridControlColumn,
   EuiDataGridCustomBodyProps,
-  EuiDataGridCustomToolbarProps,
-  EuiDataGridToolBarVisibilityOptions,
   EuiDataGridToolBarVisibilityDisplaySelectorOptions,
   EuiDataGridStyle,
   EuiDataGridProps,
+  EuiFlexGroup,
+  EuiFlexItem,
 } from '@elastic/eui';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import {
@@ -67,7 +67,10 @@ import {
 } from './data_table_columns';
 import { UnifiedDataTableContext } from '../table_context';
 import { getSchemaDetectors } from './data_table_schema';
-import { DataTableDocumentToolbarBtn } from './data_table_document_selection';
+import {
+  DataTableCompareToolbarBtn,
+  DataTableDocumentToolbarBtn,
+} from './data_table_document_selection';
 import { useRowHeightsOptions } from '../hooks/use_row_heights_options';
 import {
   DEFAULT_ROWS_PER_PAGE,
@@ -78,18 +81,9 @@ import {
 import { UnifiedDataTableFooter } from './data_table_footer';
 import { UnifiedDataTableAdditionalDisplaySettings } from './data_table_additional_display_settings';
 import { useRowHeight } from '../hooks/use_row_height';
+import { CompareDocuments } from './compare_documents';
 import { useFullScreenWatcher } from '../hooks/use_full_screen_watcher';
-
-export interface UnifiedDataTableRenderCustomToolbarProps {
-  toolbarProps: EuiDataGridCustomToolbarProps;
-  gridProps: {
-    additionalControls?: EuiDataGridToolBarVisibilityOptions['additionalControls'];
-  };
-}
-
-export type UnifiedDataTableRenderCustomToolbar = (
-  props: UnifiedDataTableRenderCustomToolbarProps
-) => React.ReactElement;
+import { UnifiedDataTableRenderCustomToolbar } from './custom_toolbar/render_custom_toolbar';
 
 export type SortOrder = [string, string];
 
@@ -367,6 +361,10 @@ export interface UnifiedDataTableProps {
    * Optional row line height override. Default is 1.6em.
    */
   rowLineHeightOverride?: string;
+  /**
+   * Set to true to allow users to compare selected documents
+   */
+  enableComparisonMode?: boolean;
   /**
    * Custom set of properties used by some actions.
    * An action might require a specific set of metadata properties to render.
@@ -439,28 +437,30 @@ export const UnifiedDataTable = ({
   cellActionsMetadata,
   customGridColumnsConfiguration,
   customControlColumnsConfiguration,
+  enableComparisonMode,
 }: UnifiedDataTableProps) => {
   const { fieldFormats, toastNotifications, dataViewFieldEditor, uiSettings, storage, data } =
     services;
-
   const { darkMode } = useObservable(services.theme?.theme$ ?? of(themeDefault), themeDefault);
   const dataGridRef = useRef<EuiDataGridRefProps>(null);
   const [selectedDocs, setSelectedDocs] = useState<string[]>([]);
   const [isFilterActive, setIsFilterActive] = useState(false);
+  const [isCompareActive, setIsCompareActive] = useState(false);
   const displayedColumns = getDisplayedColumns(columns, dataView);
   const defaultColumns = displayedColumns.includes('_source');
+  const docMap = useMemo(() => new Map(rows?.map((row) => [row.id, row]) ?? []), [rows]);
+  const getDocById = useCallback((id: string) => docMap.get(id), [docMap]);
   const usedSelectedDocs = useMemo(() => {
     if (!selectedDocs.length || !rows?.length) {
       return [];
     }
-    const idMap = rows.reduce((map, row) => map.set(row.id, true), new Map());
     // filter out selected docs that are no longer part of the current data
-    const result = selectedDocs.filter((docId) => !!idMap.get(docId));
+    const result = selectedDocs.filter((docId) => !!getDocById(docId));
     if (result.length === 0 && isFilterActive) {
       setIsFilterActive(false);
     }
     return result;
-  }, [selectedDocs, rows, isFilterActive]);
+  }, [selectedDocs, rows?.length, isFilterActive, getDocById]);
 
   const displayedRows = useMemo(() => {
     if (!rows) {
@@ -741,7 +741,6 @@ export const UnifiedDataTable = ({
         customGridColumnsConfiguration,
       }),
     [
-      showColumnTokens,
       columnsMeta,
       columnsCellActions,
       customGridColumnsConfiguration,
@@ -755,6 +754,7 @@ export const UnifiedDataTable = ({
       isSortEnabled,
       onFilter,
       settings,
+      showColumnTokens,
       toastNotifications,
       uiSettings,
       valueToStringConverter,
@@ -840,19 +840,39 @@ export const UnifiedDataTable = ({
 
     return (
       <>
-        {usedSelectedDocs.length ? (
-          <DataTableDocumentToolbarBtn
-            isFilterActive={isFilterActive}
-            rows={rows!}
-            selectedDocs={usedSelectedDocs}
-            setSelectedDocs={setSelectedDocs}
-            setIsFilterActive={setIsFilterActive}
-          />
-        ) : null}
+        {Boolean(usedSelectedDocs.length) && (
+          <EuiFlexGroup gutterSize="s" responsive={false}>
+            {enableComparisonMode && usedSelectedDocs.length > 1 && (
+              <EuiFlexItem grow={false}>
+                <DataTableCompareToolbarBtn
+                  selectedDocs={usedSelectedDocs}
+                  setIsCompareActive={setIsCompareActive}
+                />
+              </EuiFlexItem>
+            )}
+            <EuiFlexItem grow={false}>
+              <DataTableDocumentToolbarBtn
+                isPlainRecord={isPlainRecord}
+                isFilterActive={isFilterActive}
+                rows={rows!}
+                selectedDocs={usedSelectedDocs}
+                setSelectedDocs={setSelectedDocs}
+                setIsFilterActive={setIsFilterActive}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        )}
         {externalAdditionalControls}
       </>
     );
-  }, [usedSelectedDocs, isFilterActive, rows, externalAdditionalControls]);
+  }, [
+    externalAdditionalControls,
+    usedSelectedDocs,
+    isPlainRecord,
+    isFilterActive,
+    enableComparisonMode,
+    rows,
+  ]);
 
   const renderCustomToolbarFn: EuiDataGridProps['renderCustomToolbar'] | undefined = useMemo(
     () =>
@@ -944,7 +964,7 @@ export const UnifiedDataTable = ({
     rowLineHeight: rowLineHeightOverride,
   });
 
-  const { dataGridId, setDataGridWrapper } = useFullScreenWatcher();
+  const { dataGridId, dataGridWrapper, setDataGridWrapper } = useFullScreenWatcher();
 
   const isRenderComplete = loadingState !== DataLoadingState.loading;
 
@@ -987,6 +1007,7 @@ export const UnifiedDataTable = ({
       <span className="unifiedDataTable__inner">
         <div
           ref={setDataGridWrapper}
+          key={isCompareActive ? 'comparisonTable' : 'docTable'}
           data-test-subj="discoverDocTable"
           data-render-complete={isRenderComplete}
           data-shared-item=""
@@ -995,33 +1016,55 @@ export const UnifiedDataTable = ({
           data-document-number={displayedRows.length}
           className={classnames(className, 'unifiedDataTable__table')}
         >
-          <EuiDataGridMemoized
-            id={dataGridId}
-            aria-describedby={randomId}
-            aria-labelledby={ariaLabelledBy}
-            columns={euiGridColumns}
-            columnVisibility={columnsVisibility}
-            data-test-subj="docTable"
-            leadingControlColumns={customLeadingControlColumn}
-            onColumnResize={onResize}
-            pagination={paginationObj}
-            renderCellValue={renderCellValue}
-            ref={dataGridRef}
-            rowCount={rowCount}
-            schemaDetectors={schemaDetectors}
-            sorting={sorting as EuiDataGridSorting}
-            toolbarVisibility={toolbarVisibility}
-            rowHeightsOptions={rowHeightsOptions}
-            inMemory={inMemory}
-            gridStyle={gridStyleOverride ?? GRID_STYLE}
-            renderCustomGridBody={renderCustomGridBody}
-            renderCustomToolbar={renderCustomToolbarFn}
-            trailingControlColumns={customTrailingControlColumn}
-          />
+          {isCompareActive ? (
+            <CompareDocuments
+              id={dataGridId}
+              wrapper={dataGridWrapper}
+              consumer={consumer}
+              ariaDescribedBy={randomId}
+              ariaLabelledBy={ariaLabelledBy}
+              dataView={dataView}
+              isPlainRecord={isPlainRecord}
+              selectedFieldNames={visibleColumns}
+              selectedDocs={selectedDocs}
+              schemaDetectors={schemaDetectors}
+              forceShowAllFields={defaultColumns}
+              showFullScreenButton={showFullScreenButton}
+              fieldFormats={fieldFormats}
+              getDocById={getDocById}
+              setSelectedDocs={setSelectedDocs}
+              setIsCompareActive={setIsCompareActive}
+            />
+          ) : (
+            <EuiDataGridMemoized
+              id={dataGridId}
+              aria-describedby={randomId}
+              aria-labelledby={ariaLabelledBy}
+              columns={euiGridColumns}
+              columnVisibility={columnsVisibility}
+              data-test-subj="docTable"
+              leadingControlColumns={customLeadingControlColumn}
+              onColumnResize={onResize}
+              pagination={paginationObj}
+              renderCellValue={renderCellValue}
+              ref={dataGridRef}
+              rowCount={rowCount}
+              schemaDetectors={schemaDetectors}
+              sorting={sorting as EuiDataGridSorting}
+              toolbarVisibility={toolbarVisibility}
+              rowHeightsOptions={rowHeightsOptions}
+              inMemory={inMemory}
+              gridStyle={gridStyleOverride ?? GRID_STYLE}
+              renderCustomGridBody={renderCustomGridBody}
+              renderCustomToolbar={renderCustomToolbarFn}
+              trailingControlColumns={customTrailingControlColumn}
+            />
+          )}
         </div>
         {loadingState !== DataLoadingState.loading &&
           !usedSelectedDocs.length && // hide footer when showing selected documents
-          isPaginationEnabled && ( // we hide the footer for Surrounding Documents page
+          isPaginationEnabled &&
+          !isCompareActive && ( // we hide the footer for Surrounding Documents page
             <UnifiedDataTableFooter
               isLoadingMore={loadingState === DataLoadingState.loadingMore}
               rowCount={rowCount}
diff --git a/packages/kbn-unified-data-table/src/components/data_table_document_selection.test.tsx b/packages/kbn-unified-data-table/src/components/data_table_document_selection.test.tsx
index ca0d4229484168..9835f6f0798f93 100644
--- a/packages/kbn-unified-data-table/src/components/data_table_document_selection.test.tsx
+++ b/packages/kbn-unified-data-table/src/components/data_table_document_selection.test.tsx
@@ -8,10 +8,16 @@
 import React from 'react';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
 import { findTestSubject } from '@elastic/eui/lib/test';
-import { DataTableDocumentToolbarBtn, SelectButton } from './data_table_document_selection';
+import {
+  DataTableCompareToolbarBtn,
+  DataTableDocumentToolbarBtn,
+  SelectButton,
+} from './data_table_document_selection';
 import { dataTableContextMock } from '../../__mocks__/table_context';
 import { UnifiedDataTableContext } from '../table_context';
 import { getDocId } from '@kbn/discover-utils';
+import { render, screen } from '@testing-library/react';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 
 describe('document selection', () => {
   describe('getDocId', () => {
@@ -23,6 +29,7 @@ describe('document selection', () => {
       };
       expect(getDocId(doc)).toMatchInlineSnapshot(`"test-indices::test-id::why-not"`);
     });
+
     test('doc without custom routing', () => {
       const doc = {
         _id: 'test-id',
@@ -103,6 +110,7 @@ describe('document selection', () => {
       checkBox.simulate('change');
       expect(contextMock.setSelectedDocs).toHaveBeenCalledWith(['i::1::']);
     });
+
     test('removing a selection', () => {
       const contextMock = {
         ...dataTableContextMock,
@@ -128,18 +136,52 @@ describe('document selection', () => {
       expect(contextMock.setSelectedDocs).toHaveBeenCalledWith([]);
     });
   });
+
   describe('DataTableDocumentToolbarBtn', () => {
     test('it renders a button clickable button', () => {
       const props = {
+        isPlainRecord: false,
         isFilterActive: false,
         rows: dataTableContextMock.rows,
         selectedDocs: ['i::1::'],
         setIsFilterActive: jest.fn(),
         setSelectedDocs: jest.fn(),
+        setIsCompareActive: jest.fn(),
       };
       const component = mountWithIntl(<DataTableDocumentToolbarBtn {...props} />);
-      const button = findTestSubject(component, 'dscGridSelectionBtn');
+      const button = findTestSubject(component, 'unifiedDataTableSelectionBtn');
       expect(button.length).toBe(1);
     });
   });
+
+  describe('DataTableCompareToolbarBtn', () => {
+    const renderCompareBtn = ({
+      selectedDocs = ['1', '2'],
+      setIsCompareActive = jest.fn(),
+    }: Partial<Parameters<typeof DataTableCompareToolbarBtn>[0]> = {}) => {
+      render(
+        <IntlProvider locale="en">
+          <DataTableCompareToolbarBtn
+            selectedDocs={selectedDocs}
+            setIsCompareActive={setIsCompareActive}
+          />
+        </IntlProvider>
+      );
+      return {
+        getButton: () => screen.queryByRole('button', { name: /Compare/ }),
+      };
+    };
+
+    it('should render the compare button', () => {
+      const { getButton } = renderCompareBtn();
+      expect(getButton()).toBeInTheDocument();
+    });
+
+    it('should call setIsCompareActive when the button is clicked', () => {
+      const setIsCompareActive = jest.fn();
+      const { getButton } = renderCompareBtn({ setIsCompareActive });
+      getButton()?.click();
+      expect(setIsCompareActive).toHaveBeenCalledWith(true);
+    });
+  });
 });
diff --git a/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx b/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx
index 771c2e5fdfd5ba..6b806891b6334c 100644
--- a/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx
+++ b/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx
@@ -78,12 +78,14 @@ export const SelectButton = ({ rowIndex, setCellProps }: EuiDataGridCellValueEle
 };
 
 export function DataTableDocumentToolbarBtn({
+  isPlainRecord,
   isFilterActive,
   rows,
   selectedDocs,
   setIsFilterActive,
   setSelectedDocs,
 }: {
+  isPlainRecord: boolean;
   isFilterActive: boolean;
   rows: DataTableRecord[];
   selectedDocs: string[];
@@ -104,10 +106,17 @@ export function DataTableDocumentToolbarBtn({
             setIsFilterActive(false);
           }}
         >
-          <FormattedMessage
-            id="unifiedDataTable.showAllDocuments"
-            defaultMessage="Show all documents"
-          />
+          {isPlainRecord ? (
+            <FormattedMessage
+              id="unifiedDataTable.showAllResults"
+              defaultMessage="Show all results"
+            />
+          ) : (
+            <FormattedMessage
+              id="unifiedDataTable.showAllDocuments"
+              defaultMessage="Show all documents"
+            />
+          )}
         </EuiContextMenuItem>
       ) : (
         <EuiContextMenuItem
@@ -119,10 +128,17 @@ export function DataTableDocumentToolbarBtn({
             setIsFilterActive(true);
           }}
         >
-          <FormattedMessage
-            id="unifiedDataTable.showSelectedDocumentsOnly"
-            defaultMessage="Show selected documents only"
-          />
+          {isPlainRecord ? (
+            <FormattedMessage
+              id="unifiedDataTable.showSelectedResultsOnly"
+              defaultMessage="Show selected results only"
+            />
+          ) : (
+            <FormattedMessage
+              id="unifiedDataTable.showSelectedDocumentsOnly"
+              defaultMessage="Show selected documents only"
+            />
+          )}
         </EuiContextMenuItem>
       ),
       <EuiCopy
@@ -138,10 +154,17 @@ export function DataTableDocumentToolbarBtn({
       >
         {(copy) => (
           <EuiContextMenuItem key="copyJSON" icon="copyClipboard" onClick={copy}>
-            <FormattedMessage
-              id="unifiedDataTable.copyToClipboardJSON"
-              defaultMessage="Copy documents to clipboard (JSON)"
-            />
+            {isPlainRecord ? (
+              <FormattedMessage
+                id="unifiedDataTable.copyResultsToClipboardJSON"
+                defaultMessage="Copy results to clipboard (JSON)"
+              />
+            ) : (
+              <FormattedMessage
+                id="unifiedDataTable.copyToClipboardJSON"
+                defaultMessage="Copy documents to clipboard (JSON)"
+              />
+            )}
           </EuiContextMenuItem>
         )}
       </EuiCopy>,
@@ -158,14 +181,7 @@ export function DataTableDocumentToolbarBtn({
         <FormattedMessage id="unifiedDataTable.clearSelection" defaultMessage="Clear selection" />
       </EuiContextMenuItem>,
     ];
-  }, [
-    isFilterActive,
-    rows,
-    selectedDocs,
-    setIsFilterActive,
-    setIsSelectionPopoverOpen,
-    setSelectedDocs,
-  ]);
+  }, [isFilterActive, isPlainRecord, rows, selectedDocs, setIsFilterActive, setSelectedDocs]);
 
   const toggleSelectionToolbar = useCallback(
     () => setIsSelectionPopoverOpen((prevIsOpen) => !prevIsOpen),
@@ -182,19 +198,56 @@ export function DataTableDocumentToolbarBtn({
           iconType="documents"
           onClick={toggleSelectionToolbar}
           data-selected-documents={selectedDocs.length}
-          data-test-subj="dscGridSelectionBtn"
+          data-test-subj="unifiedDataTableSelectionBtn"
           isSelected={isFilterActive}
           badgeContent={selectedDocs.length}
         >
-          <FormattedMessage
-            id="unifiedDataTable.selectedRowsButtonLabel"
-            defaultMessage="Selected"
-            description="Selected documents"
-          />
+          {isPlainRecord ? (
+            <FormattedMessage
+              id="unifiedDataTable.selectedResultsButtonLabel"
+              defaultMessage="Selected"
+              description="Selected results"
+            />
+          ) : (
+            <FormattedMessage
+              id="unifiedDataTable.selectedRowsButtonLabel"
+              defaultMessage="Selected"
+              description="Selected documents"
+            />
+          )}
         </EuiDataGridToolbarControl>
       }
     >
-      {isSelectionPopoverOpen && <EuiContextMenuPanel items={getMenuItems()} />}
+      {isSelectionPopoverOpen && (
+        <EuiContextMenuPanel
+          items={getMenuItems()}
+          data-test-subj="unifiedDataTableSelectionMenu"
+        />
+      )}
     </EuiPopover>
   );
 }
+
+export const DataTableCompareToolbarBtn = ({
+  selectedDocs,
+  setIsCompareActive,
+}: {
+  selectedDocs: string[];
+  setIsCompareActive: (value: boolean) => void;
+}) => {
+  return (
+    <EuiDataGridToolbarControl
+      iconType="diff"
+      badgeContent={selectedDocs.length}
+      data-test-subj="unifiedDataTableCompareSelectedDocuments"
+      onClick={() => {
+        setIsCompareActive(true);
+      }}
+    >
+      <FormattedMessage
+        id="unifiedDataTable.compareSelectedRowsButtonLabel"
+        defaultMessage="Compare"
+      />
+    </EuiDataGridToolbarControl>
+  );
+};
diff --git a/packages/kbn-unified-data-table/src/hooks/use_full_screen_watcher.ts b/packages/kbn-unified-data-table/src/hooks/use_full_screen_watcher.ts
index 23cffb8456a29a..819f0b0ebd9083 100644
--- a/packages/kbn-unified-data-table/src/hooks/use_full_screen_watcher.ts
+++ b/packages/kbn-unified-data-table/src/hooks/use_full_screen_watcher.ts
@@ -39,7 +39,7 @@ export const useFullScreenWatcher = () => {
     attributeFilter: ['class'],
   });
 
-  return { dataGridId, setDataGridWrapper };
+  return { dataGridId, dataGridWrapper, setDataGridWrapper };
 };
 
 export const EUI_DATA_GRID_FULL_SCREEN_CLASS = 'euiDataGrid--fullScreen';
diff --git a/packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx b/packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx
index 8abd06c7c391fe..15bf0efb0c604c 100644
--- a/packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx
+++ b/packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx
@@ -24,7 +24,7 @@ import { SourceDocument } from '../components/source_document';
 import SourcePopoverContent from '../components/source_popover_content';
 import { DataTablePopoverCellValue } from '../components/data_table_cell_value';
 
-const CELL_CLASS = 'unifiedDataTable__cellValue';
+export const CELL_CLASS = 'unifiedDataTable__cellValue';
 
 export const getRenderCellValueFn = ({
   dataView,
diff --git a/packages/kbn-unified-data-table/tsconfig.json b/packages/kbn-unified-data-table/tsconfig.json
index c9c4c1fef6feaf..ee71f13b4af133 100644
--- a/packages/kbn-unified-data-table/tsconfig.json
+++ b/packages/kbn-unified-data-table/tsconfig.json
@@ -34,5 +34,7 @@
     "@kbn/config",
     "@kbn/monaco",
     "@kbn/field-utils",
+    "@kbn/react-field",
+    "@kbn/shared-ux-utility",
   ]
 }
diff --git a/src/plugins/discover/public/application/context/context_app_content.test.tsx b/src/plugins/discover/public/application/context/context_app_content.test.tsx
index f615768a938fbf..02d90eb8a21518 100644
--- a/src/plugins/discover/public/application/context/context_app_content.test.tsx
+++ b/src/plugins/discover/public/application/context/context_app_content.test.tsx
@@ -105,12 +105,12 @@ describe('ContextAppContent test', () => {
   it('should render discover grid correctly', async () => {
     const component = await mountComponent({ isLegacy: false });
     expect(component.find(UnifiedDataTable).length).toBe(1);
-    expect(findTestSubject(component, 'dscGridToolbar').exists()).toBe(true);
+    expect(findTestSubject(component, 'unifiedDataTableToolbar').exists()).toBe(true);
   });
 
   it('should not show display options button', async () => {
     const component = await mountComponent({ isLegacy: false });
-    expect(findTestSubject(component, 'dscGridToolbar').exists()).toBe(true);
+    expect(findTestSubject(component, 'unifiedDataTableToolbar').exists()).toBe(true);
     expect(findTestSubject(component, 'dataGridDisplaySelectorButton').exists()).toBe(false);
   });
 });
diff --git a/src/plugins/discover/public/application/main/components/layout/discover_documents.test.tsx b/src/plugins/discover/public/application/main/components/layout/discover_documents.test.tsx
index bb085774768d71..d63da979e4ee4e 100644
--- a/src/plugins/discover/public/application/main/components/layout/discover_documents.test.tsx
+++ b/src/plugins/discover/public/application/main/components/layout/discover_documents.test.tsx
@@ -82,8 +82,8 @@ describe('Discover documents layout', () => {
     const component = await mountComponent(FetchStatus.COMPLETE, esHitsMock);
     expect(component.find('.dscDocuments__loading').exists()).toBeFalsy();
     expect(component.find('.dscTable').exists()).toBeTruthy();
-    expect(findTestSubject(component, 'dscGridToolbar').exists()).toBe(true);
-    expect(findTestSubject(component, 'dscGridToolbarBottom').exists()).toBe(true);
+    expect(findTestSubject(component, 'unifiedDataTableToolbar').exists()).toBe(true);
+    expect(findTestSubject(component, 'unifiedDataTableToolbarBottom').exists()).toBe(true);
     expect(findTestSubject(component, 'viewModeToggle').exists()).toBe(true);
   });
 
diff --git a/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx b/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx
index 6d123ab057deb2..4d09970eb9fad9 100644
--- a/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx
+++ b/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx
@@ -26,6 +26,7 @@ import {
   useColumns,
   type DataTableColumnsMeta,
   getTextBasedColumnsMeta,
+  getRenderCustomToolbarWithElements,
 } from '@kbn/unified-data-table';
 import {
   DOC_HIDE_TIME_COLUMN_SETTING,
@@ -61,7 +62,6 @@ import {
   getAllowedSampleSize,
 } from '../../../../utils/get_allowed_sample_size';
 import { DiscoverGridFlyout } from '../../../../components/discover_grid_flyout';
-import { getRenderCustomToolbarWithElements } from '../../../../components/discover_grid/render_custom_toolbar';
 import { useSavedSearchInitial } from '../../services/discover_state_provider';
 import { useFetchMoreRecords } from './use_fetch_more_records';
 import { SelectedVSAvailableCallout } from './selected_vs_available_callout';
@@ -322,7 +322,7 @@ function DiscoverDocumentsComponent({
     [isDataLoading]
   );
 
-  const renderCustomToolbar = useMemo(
+  const renderCustomToolbarWithElements = useMemo(
     () =>
       getRenderCustomToolbarWithElements({
         leftSide: viewModeToggle,
@@ -438,7 +438,7 @@ function DiscoverDocumentsComponent({
                   showMultiFields={uiSettings.get(SHOW_MULTIFIELDS)}
                   maxDocFieldsDisplayed={uiSettings.get(MAX_DOC_FIELDS_DISPLAYED)}
                   renderDocumentView={renderDocumentView}
-                  renderCustomToolbar={renderCustomToolbar}
+                  renderCustomToolbar={renderCustomToolbarWithElements}
                   services={services}
                   totalHits={totalHits}
                   onFetchMoreRecords={onFetchMoreRecords}
diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid.tsx
index fe2586e32f895c..cc0b283c4c5e81 100644
--- a/src/plugins/discover/public/components/discover_grid/discover_grid.tsx
+++ b/src/plugins/discover/public/components/discover_grid/discover_grid.tsx
@@ -7,8 +7,11 @@
  */
 
 import React from 'react';
-import { UnifiedDataTable, type UnifiedDataTableProps } from '@kbn/unified-data-table';
-import { renderCustomToolbar } from './render_custom_toolbar';
+import {
+  renderCustomToolbar,
+  UnifiedDataTable,
+  type UnifiedDataTableProps,
+} from '@kbn/unified-data-table';
 
 /**
  * Customized version of the UnifiedDataTable
@@ -16,5 +19,12 @@ import { renderCustomToolbar } from './render_custom_toolbar';
  * @constructor
  */
 export const DiscoverGrid: React.FC<UnifiedDataTableProps> = (props) => {
-  return <UnifiedDataTable showColumnTokens renderCustomToolbar={renderCustomToolbar} {...props} />;
+  return (
+    <UnifiedDataTable
+      showColumnTokens
+      enableComparisonMode
+      renderCustomToolbar={renderCustomToolbar}
+      {...props}
+    />
+  );
 };
diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.test.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.test.tsx
index cd421430d8c1de..6097543c8aeb12 100644
--- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.test.tsx
+++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.test.tsx
@@ -258,7 +258,7 @@ describe('Discover flyout', function () {
     const singleDocumentView = findTestSubject(component, 'docTableRowAction');
     expect(singleDocumentView.length).toBeFalsy();
     const flyoutTitle = findTestSubject(component, 'docTableRowDetailsTitle');
-    expect(flyoutTitle.text()).toBe('Row');
+    expect(flyoutTitle.text()).toBe('Result');
   });
 
   describe('with applied customizations', () => {
diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx
index b46594585b1e71..ee2a8d0fb3564d 100644
--- a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx
+++ b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx
@@ -198,7 +198,7 @@ export function DiscoverGridFlyout({
 
   const defaultFlyoutTitle = isPlainRecord
     ? i18n.translate('discover.grid.tableRow.docViewerTextBasedDetailHeading', {
-        defaultMessage: 'Row',
+        defaultMessage: 'Result',
       })
     : i18n.translate('discover.grid.tableRow.docViewerDetailHeading', {
         defaultMessage: 'Document',
diff --git a/src/plugins/discover/public/components/doc_table/components/table_row.test.tsx b/src/plugins/discover/public/components/doc_table/components/table_row.test.tsx
index 44775021eda9e1..c4e53c265311d6 100644
--- a/src/plugins/discover/public/components/doc_table/components/table_row.test.tsx
+++ b/src/plugins/discover/public/components/doc_table/components/table_row.test.tsx
@@ -133,7 +133,7 @@ describe('Doc table row component', () => {
       const component = mountComponent(props);
       const toggleButton = findTestSubject(component, 'docTableExpandToggleColumn');
       toggleButton.simulate('click');
-      expect(findTestSubject(component, 'docTableRowDetailsTitle').text()).toBe('Expanded row');
+      expect(findTestSubject(component, 'docTableRowDetailsTitle').text()).toBe('Expanded result');
       expect(findTestSubject(component, 'docTableRowAction').length).toBeFalsy();
     });
   });
diff --git a/src/plugins/discover/public/components/doc_table/components/table_row_details.tsx b/src/plugins/discover/public/components/doc_table/components/table_row_details.tsx
index 1ef01a7094ef90..5a0aea52de3f4e 100644
--- a/src/plugins/discover/public/components/doc_table/components/table_row_details.tsx
+++ b/src/plugins/discover/public/components/doc_table/components/table_row_details.tsx
@@ -63,7 +63,7 @@ export const TableRowDetails = ({
                   {isPlainRecord && (
                     <FormattedMessage
                       id="discover.grid.tableRow.textBasedDetailHeading"
-                      defaultMessage="Expanded row"
+                      defaultMessage="Expanded result"
                     />
                   )}
                   {!isPlainRecord && (
diff --git a/src/plugins/discover/public/embeddable/saved_search_grid.tsx b/src/plugins/discover/public/embeddable/saved_search_grid.tsx
index a810205d9f3120..8bf43fa5b3e3bd 100644
--- a/src/plugins/discover/public/embeddable/saved_search_grid.tsx
+++ b/src/plugins/discover/public/embeddable/saved_search_grid.tsx
@@ -14,12 +14,12 @@ import {
   type UnifiedDataTableProps,
   type DataTableColumnsMeta,
   DataLoadingState as DiscoverGridLoadingState,
+  getRenderCustomToolbarWithElements,
 } from '@kbn/unified-data-table';
 import { DiscoverGrid } from '../components/discover_grid';
 import './saved_search_grid.scss';
 import { DiscoverGridFlyout } from '../components/discover_grid_flyout';
 import { SavedSearchEmbeddableBase } from './saved_search_embeddable_base';
-import { getRenderCustomToolbarWithElements } from '../components/discover_grid/render_custom_toolbar';
 import { TotalDocuments } from '../application/main/components/total_documents/total_documents';
 
 export interface DiscoverGridEmbeddableProps
@@ -77,7 +77,7 @@ export function DiscoverGridEmbeddable(props: DiscoverGridEmbeddableProps) {
     ]
   );
 
-  const renderCustomToolbar = useMemo(
+  const renderCustomToolbarWithElements = useMemo(
     () =>
       getRenderCustomToolbarWithElements({
         leftSide:
@@ -104,7 +104,8 @@ export function DiscoverGridEmbeddable(props: DiscoverGridEmbeddableProps) {
         showMultiFields={props.services.uiSettings.get(SHOW_MULTIFIELDS)}
         maxDocFieldsDisplayed={props.services.uiSettings.get(MAX_DOC_FIELDS_DISPLAYED)}
         renderDocumentView={renderDocumentView}
-        renderCustomToolbar={renderCustomToolbar}
+        renderCustomToolbar={renderCustomToolbarWithElements}
+        enableComparisonMode
         showColumnTokens
         configHeaderRowHeight={3}
         showFullScreenButton={false}
diff --git a/test/functional/apps/discover/embeddable/_saved_search_embeddable.ts b/test/functional/apps/discover/embeddable/_saved_search_embeddable.ts
index f86358e584766d..d964eed00cb27d 100644
--- a/test/functional/apps/discover/embeddable/_saved_search_embeddable.ts
+++ b/test/functional/apps/discover/embeddable/_saved_search_embeddable.ts
@@ -134,7 +134,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
     it('should show the the grid toolbar', async () => {
       await addSearchEmbeddableToDashboard();
-      await testSubjects.existOrFail('dscGridToolbar');
+      await testSubjects.existOrFail('unifiedDataTableToolbar');
     });
   });
 }
diff --git a/test/functional/apps/discover/group2/_data_grid.ts b/test/functional/apps/discover/group2/_data_grid.ts
index cdce56db6e856e..6384daabfa863c 100644
--- a/test/functional/apps/discover/group2/_data_grid.ts
+++ b/test/functional/apps/discover/group2/_data_grid.ts
@@ -87,7 +87,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     });
 
     it('should show the the grid toolbar', async () => {
-      await testSubjects.existOrFail('dscGridToolbar');
+      await testSubjects.existOrFail('unifiedDataTableToolbar');
     });
   });
 }
diff --git a/test/functional/apps/discover/group2/_data_grid_context.ts b/test/functional/apps/discover/group2/_data_grid_context.ts
index e8e218625687b3..13b3eb994c7dbf 100644
--- a/test/functional/apps/discover/group2/_data_grid_context.ts
+++ b/test/functional/apps/discover/group2/_data_grid_context.ts
@@ -98,7 +98,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     });
 
     it('should show the the grid toolbar', async () => {
-      await testSubjects.existOrFail('dscGridToolbar');
+      await testSubjects.existOrFail('unifiedDataTableToolbar');
     });
 
     it('navigates to context view from embeddable', async () => {
diff --git a/test/functional/apps/discover/group3/_view_mode_toggle.ts b/test/functional/apps/discover/group3/_view_mode_toggle.ts
index 62c78efbc24320..935b75bf61937c 100644
--- a/test/functional/apps/discover/group3/_view_mode_toggle.ts
+++ b/test/functional/apps/discover/group3/_view_mode_toggle.ts
@@ -61,7 +61,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
           await testSubjects.existOrFail('dscViewModeToggle');
 
           if (!useLegacyTable) {
-            await testSubjects.existOrFail('dscGridToolbar');
+            await testSubjects.existOrFail('unifiedDataTableToolbar');
           }
 
           const documentsTab = await testSubjects.find('dscViewModeDocumentButton');
@@ -114,7 +114,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
           await testSubjects.missingOrFail('dscViewModeToggle');
 
           if (!useLegacyTable) {
-            await testSubjects.existOrFail('dscGridToolbar');
+            await testSubjects.existOrFail('unifiedDataTableToolbar');
           }
         });
 
diff --git a/test/functional/apps/discover/group4/_document_comparison.ts b/test/functional/apps/discover/group4/_document_comparison.ts
new file mode 100644
index 00000000000000..592567c0f854c5
--- /dev/null
+++ b/test/functional/apps/discover/group4/_document_comparison.ts
@@ -0,0 +1,262 @@
+/*
+ * 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 expect from '@kbn/expect';
+import { FtrProviderContext } from '../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const esArchiver = getService('esArchiver');
+  const PageObjects = getPageObjects(['common', 'discover', 'timePicker', 'unifiedFieldList']);
+  const kibanaServer = getService('kibanaServer');
+  const security = getService('security');
+  const dataGrid = getService('dataGrid');
+  const monacoEditor = getService('monacoEditor');
+  const testSubjects = getService('testSubjects');
+
+  describe('Discover document comparison', () => {
+    before(async () => {
+      await security.testUser.setRoles(['kibana_admin', 'test_logstash_reader']);
+      await kibanaServer.importExport.load('test/functional/fixtures/kbn_archiver/discover.json');
+      await esArchiver.loadIfNeeded('test/functional/fixtures/es_archiver/logstash_functional');
+      await kibanaServer.uiSettings.replace({ defaultIndex: 'logstash-*' });
+    });
+
+    after(async () => {
+      await kibanaServer.importExport.unload('test/functional/fixtures/kbn_archiver/discover.json');
+      await esArchiver.unload('test/functional/fixtures/es_archiver/logstash_functional');
+      await kibanaServer.uiSettings.replace({});
+      await kibanaServer.savedObjects.cleanStandardList();
+    });
+
+    describe('data view mode', () => {
+      before(async () => {
+        await PageObjects.common.navigateToApp('discover');
+        await PageObjects.timePicker.setDefaultAbsoluteRange();
+        await PageObjects.discover.waitUntilSearchingHasFinished();
+      });
+
+      runComparisonTests({
+        comparisonDisplay: 'Comparing 2 documents',
+        tableHeaders: ['Field', 'AU_x3_g4GFA8no6QjkYX', 'AU_x3-TcGFA8no6Qjipx'],
+        fullFieldNames: [
+          '@timestamp',
+          '_id',
+          '_index',
+          '@message',
+          '@message.raw',
+          '@tags',
+          '@tags.raw',
+          'agent',
+          'agent.raw',
+          'bytes',
+          'clientip',
+          'extension',
+          'extension.raw',
+          'geo.coordinates',
+          'geo.dest',
+        ],
+        selectedFieldNames: ['@timestamp', 'extension', 'bytes', '@message', 'agent'],
+        extensionRowIndex: 1,
+        bytesRowIndex: 2,
+      });
+    });
+
+    describe('ES|QL mode', () => {
+      before(async () => {
+        await PageObjects.common.navigateToApp('discover');
+        await PageObjects.timePicker.setDefaultAbsoluteRange();
+        await PageObjects.discover.selectTextBaseLang();
+        await monacoEditor.setCodeEditorValue('from logstash-* | sort @timestamp desc | limit 10');
+        await testSubjects.click('querySubmitButton');
+        await PageObjects.discover.waitUntilSearchingHasFinished();
+      });
+
+      runComparisonTests({
+        comparisonDisplay: 'Comparing 2 results',
+        tableHeaders: ['Field', 'Result 1', 'Result 2'],
+        fullFieldNames: [
+          '@timestamp',
+          '@message',
+          '@message.raw',
+          '@tags',
+          '@tags.raw',
+          'agent',
+          'agent.raw',
+          'bytes',
+          'clientip',
+          'extension',
+          'extension.raw',
+          'geo.coordinates',
+          'geo.dest',
+          'geo.src',
+          'geo.srcdest',
+        ],
+        selectedFieldNames: ['extension', 'bytes', '@message', 'agent'],
+        extensionRowIndex: 0,
+        bytesRowIndex: 1,
+      });
+    });
+  });
+
+  function runComparisonTests({
+    comparisonDisplay,
+    tableHeaders,
+    fullFieldNames,
+    selectedFieldNames,
+    extensionRowIndex,
+    bytesRowIndex,
+  }: {
+    comparisonDisplay: string;
+    tableHeaders: string[];
+    fullFieldNames: string[];
+    selectedFieldNames: string[];
+    extensionRowIndex: number;
+    bytesRowIndex: number;
+  }) {
+    it('should allow comparing documents', async () => {
+      await dataGrid.selectRow(0);
+      expect(await dataGrid.compareSelectedButtonExists()).to.be(false);
+      await dataGrid.selectRow(1);
+      expect(await dataGrid.compareSelectedButtonExists()).to.be(true);
+      await dataGrid.clickCompareSelectedButton();
+      await dataGrid.waitForComparisonModeToLoad();
+      expect(await dataGrid.getComparisonDisplay()).to.be(comparisonDisplay);
+    });
+
+    it('should allow selecting comparison fields', async () => {
+      const headers = await dataGrid.getHeaders();
+      expect(headers).to.eql(tableHeaders);
+      let fieldNames = await dataGrid.getComparisonFieldNames();
+      expect(fieldNames.length >= fullFieldNames.length).to.be(true);
+      expect(fieldNames.slice(0, fullFieldNames.length)).to.eql(fullFieldNames);
+      await dataGrid.openComparisonSettingsMenu();
+      expect(await dataGrid.showAllFieldsSwitchExists()).to.be(false);
+      await PageObjects.unifiedFieldList.clickFieldListItemAdd('extension');
+      await PageObjects.unifiedFieldList.clickFieldListItemAdd('bytes');
+      await PageObjects.unifiedFieldList.clickFieldListItemAdd('@message');
+      await PageObjects.unifiedFieldList.clickFieldListItemAdd('agent');
+      fieldNames = await dataGrid.getComparisonFieldNames();
+      expect(fieldNames).have.length(selectedFieldNames.length);
+      expect(fieldNames).to.eql(selectedFieldNames);
+    });
+
+    const testDiffMode = async ({
+      diffMode,
+      expectedExtensionValues,
+      expectedBytesValues,
+    }: {
+      diffMode?: Parameters<typeof dataGrid.selectComparisonDiffMode>[0];
+      expectedExtensionValues: string[];
+      expectedBytesValues: string[];
+    }) => {
+      if (diffMode) {
+        await dataGrid.selectComparisonDiffMode(diffMode);
+      }
+      const extensionRow = await dataGrid.getComparisonRow(extensionRowIndex);
+      expect(extensionRow.fieldName).to.be('extension');
+      expect(extensionRow.values).to.eql(expectedExtensionValues);
+      const bytesRow = await dataGrid.getComparisonRow(bytesRowIndex);
+      expect(bytesRow.fieldName).to.be('bytes');
+      expect(bytesRow.values).to.eql(expectedBytesValues);
+    };
+
+    it('should allow changing diff modes', async () => {
+      await testDiffMode({
+        diffMode: 'basic',
+        expectedExtensionValues: ['jpg', 'jpg'],
+        expectedBytesValues: ['7,124', '5,453'],
+      });
+      await testDiffMode({
+        diffMode: 'chars',
+        expectedExtensionValues: [
+          'jpg',
+          '<span class="unifiedDataTable__comparisonSegment">jpg</span>',
+        ],
+        expectedBytesValues: [
+          '7124',
+          '<span class="unifiedDataTable__comparisonSegment unifiedDataTable__comparisonRemovedSegment">712</span>' +
+            '<span class="unifiedDataTable__comparisonSegment unifiedDataTable__comparisonAddedSegment">5</span>' +
+            '<span class="unifiedDataTable__comparisonSegment">4</span>' +
+            '<span class="unifiedDataTable__comparisonSegment unifiedDataTable__comparisonAddedSegment">53</span>',
+        ],
+      });
+      await testDiffMode({
+        diffMode: 'words',
+        expectedExtensionValues: [
+          'jpg',
+          '<span class="unifiedDataTable__comparisonSegment">jpg</span>',
+        ],
+        expectedBytesValues: [
+          '7124',
+          '<span class="unifiedDataTable__comparisonSegment unifiedDataTable__comparisonRemovedSegment">7124</span>' +
+            '<span class="unifiedDataTable__comparisonSegment unifiedDataTable__comparisonAddedSegment">5453</span>',
+        ],
+      });
+      await testDiffMode({
+        diffMode: 'lines',
+        expectedExtensionValues: [
+          'jpg',
+          '<div class="unifiedDataTable__comparisonSegment">jpg</div>',
+        ],
+        expectedBytesValues: [
+          '7124',
+          '<div class="unifiedDataTable__comparisonSegment unifiedDataTable__comparisonRemovedSegment">7124</div>' +
+            '<div class="unifiedDataTable__comparisonSegment unifiedDataTable__comparisonAddedSegment">5453</div>',
+        ],
+      });
+    });
+
+    it('should allow toggling show diff switch', async () => {
+      await dataGrid.toggleShowDiffSwitch();
+      await testDiffMode({
+        expectedExtensionValues: ['jpg', 'jpg'],
+        expectedBytesValues: ['7,124', '5,453'],
+      });
+      await dataGrid.toggleShowDiffSwitch();
+    });
+
+    it('should allow toggling all fields', async () => {
+      await dataGrid.selectComparisonDiffMode('basic');
+      await dataGrid.toggleShowAllFieldsSwitch();
+      const fieldNames = await dataGrid.getComparisonFieldNames();
+      expect(fieldNames.length >= fullFieldNames.length).to.be(true);
+      await dataGrid.toggleShowAllFieldsSwitch();
+    });
+
+    it('should allow toggling matching values', async () => {
+      let fieldNames = await dataGrid.getComparisonFieldNames();
+      expect(fieldNames).have.length(selectedFieldNames.length);
+      await dataGrid.toggleShowMatchingValuesSwitch();
+      fieldNames = await dataGrid.getComparisonFieldNames();
+      expect(fieldNames).have.length(selectedFieldNames.length - 1);
+      expect(fieldNames).to.eql(selectedFieldNames.filter((name) => name !== 'extension'));
+      await dataGrid.toggleShowMatchingValuesSwitch();
+    });
+
+    it('should allow toggling diff decorations', async () => {
+      await dataGrid.selectComparisonDiffMode('words');
+      let diffSegments = await dataGrid.getComparisonDiffSegments(bytesRowIndex, 2);
+      expect(diffSegments).to.eql([
+        { decoration: 'removed', value: '7124' },
+        { decoration: 'added', value: '5453' },
+      ]);
+      await dataGrid.toggleShowDiffDecorationsSwitch();
+      diffSegments = await dataGrid.getComparisonDiffSegments(bytesRowIndex, 2);
+      expect(diffSegments).to.eql([
+        { decoration: undefined, value: '7124' },
+        { decoration: undefined, value: '5453' },
+      ]);
+      await dataGrid.toggleShowDiffDecorationsSwitch();
+    });
+
+    it('should allow exiting comparison mode', async () => {
+      await dataGrid.exitComparisonMode();
+      await PageObjects.discover.waitForDocTableLoadingComplete();
+    });
+  }
+}
diff --git a/test/functional/apps/discover/group4/index.ts b/test/functional/apps/discover/group4/index.ts
index e8196216c23361..4a145b06cf2487 100644
--- a/test/functional/apps/discover/group4/index.ts
+++ b/test/functional/apps/discover/group4/index.ts
@@ -36,5 +36,6 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
     loadTestFile(require.resolve('./_field_list_new_fields'));
     loadTestFile(require.resolve('./_request_cancellation'));
     loadTestFile(require.resolve('./_new_search'));
+    loadTestFile(require.resolve('./_document_comparison'));
   });
 }
diff --git a/test/functional/services/data_grid.ts b/test/functional/services/data_grid.ts
index 79d561bd2f855c..e242bd4c6a19aa 100644
--- a/test/functional/services/data_grid.ts
+++ b/test/functional/services/data_grid.ts
@@ -173,8 +173,11 @@ export class DataGridService extends FtrService {
     return await this.testSubjects.find(selector);
   }
 
-  public async getBodyRows(options?: SelectOptions): Promise<WebElementWrapper[][]> {
-    return this.getDocTableRows(options);
+  public async getBodyRows(
+    options?: SelectOptions,
+    selector: string = 'docTable'
+  ): Promise<WebElementWrapper[][]> {
+    return this.getDocTableRows(options, selector);
   }
 
   public async getRowsText(renderMoreRows?: boolean) {
@@ -201,22 +204,22 @@ export class DataGridService extends FtrService {
   /**
    * Returns an array of rows (which are array of cells)
    */
-  public async getDocTableRows(options?: SelectOptions) {
+  public async getDocTableRows(options?: SelectOptions, selector: string = 'docTable') {
     // open full screen mode
     if (options?.renderMoreRows) {
       await this.testSubjects.click('dataGridFullScreenButton');
     }
 
-    const table = await this.getTable('docTable');
+    const table = await this.getTable(selector);
 
     if (!table) {
       return [];
     }
 
-    const selector = options?.isAnchorRow
+    const cellSelector = options?.isAnchorRow
       ? '.euiDataGridRowCell.unifiedDataTable__cell--highlight'
       : '.euiDataGridRowCell';
-    const cells = await table.findAllByCssSelector(selector);
+    const cells = await table.findAllByCssSelector(cellSelector);
 
     const rows: WebElementWrapper[][] = [];
     let rowIdx = -1;
@@ -238,8 +241,11 @@ export class DataGridService extends FtrService {
   /**
    * Returns an array of cells for that row
    */
-  public async getRow(options: SelectOptions): Promise<WebElementWrapper[]> {
-    return (await this.getBodyRows(options))[options.rowIndex || 0];
+  public async getRow(
+    options: SelectOptions,
+    selector: string = 'docTable'
+  ): Promise<WebElementWrapper[]> {
+    return (await this.getBodyRows(options, selector))[options.rowIndex || 0];
   }
 
   public async clickRowToggle(
@@ -479,4 +485,122 @@ export class DataGridService extends FtrService {
     await this.testSubjects.click(option);
     await this.checkCurrentRowsPerPageToBe(newValue);
   }
+
+  public async selectRow(rowIndex: number) {
+    const columns = await this.getRow({ rowIndex });
+    const checkbox = await columns[1].findByClassName('euiCheckbox__input');
+    await checkbox.click();
+  }
+
+  public async openSelectedRowsMenu() {
+    await this.testSubjects.click('unifiedDataTableSelectionBtn');
+    await this.retry.try(async () => {
+      return await this.testSubjects.exists('unifiedDataTableSelectionMenu');
+    });
+  }
+
+  public async compareSelectedButtonExists() {
+    return await this.testSubjects.exists('unifiedDataTableCompareSelectedDocuments');
+  }
+
+  public async clickCompareSelectedButton() {
+    await this.testSubjects.click('unifiedDataTableCompareSelectedDocuments');
+  }
+
+  public async waitForComparisonModeToLoad() {
+    await this.retry.try(async () => {
+      return await this.testSubjects.exists('unifiedDataTableCompareDocuments');
+    });
+  }
+
+  public async getComparisonDisplay() {
+    const display = await this.testSubjects.find('unifiedDataTableComparisonDisplay');
+    return await display.getVisibleText();
+  }
+
+  public async getComparisonFieldNames() {
+    const fields = await this.testSubjects.findAll('unifiedDataTableComparisonFieldName');
+    return await Promise.all(fields.map((field) => field.getVisibleText()));
+  }
+
+  public async getComparisonRow(rowIndex: number) {
+    const columns = await this.getRow({ rowIndex }, 'unifiedDataTableCompareDocuments');
+    const fieldName = await columns[0]
+      .findByTestSubject('unifiedDataTableComparisonFieldName')
+      .then((field) => field.getVisibleText());
+    const values = await Promise.all(
+      columns.slice(1).map(async (cell) =>
+        cell
+          .findByClassName('unifiedDataTable__cellValue')
+          .then((cellValue) => cellValue.parseDomContent())
+          .then((content) => content.html())
+      )
+    );
+    return { fieldName, values };
+  }
+
+  public async openComparisonSettingsMenu() {
+    if (await this.testSubjects.exists('unifiedDataTableComparisonSettingsMenu')) {
+      return;
+    }
+    await this.testSubjects.click('unifiedDataTableComparisonSettings');
+    await this.retry.try(async () => {
+      return await this.testSubjects.exists('unifiedDataTableComparisonSettingsMenu');
+    });
+  }
+
+  public async toggleShowDiffSwitch() {
+    await this.openComparisonSettingsMenu();
+    await this.testSubjects.click('unifiedDataTableShowDiffSwitch');
+  }
+
+  public async selectComparisonDiffMode(diffMode: 'basic' | 'chars' | 'words' | 'lines') {
+    await this.openComparisonSettingsMenu();
+    const menuEntry = await this.testSubjects.find(`unifiedDataTableDiffMode-${diffMode}`);
+    await menuEntry.click();
+  }
+
+  public async getComparisonDiffSegments(rowIndex: number, cellIndex: number) {
+    const columns = await this.getRow({ rowIndex }, 'unifiedDataTableCompareDocuments');
+    const segments = await columns[cellIndex].findAllByClassName(
+      'unifiedDataTable__comparisonSegment'
+    );
+    return Promise.all(
+      segments.map(async (segment) => {
+        const decoration = await segment.getComputedStyle('text-decoration');
+        return {
+          decoration: decoration.includes('underline')
+            ? 'added'
+            : decoration.includes('line-through')
+            ? 'removed'
+            : undefined,
+          value: await segment.getVisibleText(),
+        };
+      })
+    );
+  }
+
+  public async showAllFieldsSwitchExists() {
+    await this.openComparisonSettingsMenu();
+    return await this.testSubjects.exists('unifiedDataTableDiffOptionSwitch-showAllFields');
+  }
+
+  public async toggleShowAllFieldsSwitch() {
+    await this.openComparisonSettingsMenu();
+    await this.testSubjects.click('unifiedDataTableDiffOptionSwitch-showAllFields');
+  }
+
+  public async toggleShowMatchingValuesSwitch() {
+    await this.openComparisonSettingsMenu();
+    await this.testSubjects.click('unifiedDataTableDiffOptionSwitch-showMatchingValues');
+  }
+
+  public async toggleShowDiffDecorationsSwitch() {
+    await this.openComparisonSettingsMenu();
+    await this.testSubjects.click('unifiedDataTableDiffOptionSwitch-showDiffDecorations');
+  }
+
+  public async exitComparisonMode() {
+    await this.testSubjects.click('unifiedDataTableExitDocumentComparison');
+  }
 }
diff --git a/x-pack/test_serverless/functional/test_suites/common/discover/embeddable/_saved_search_embeddable.ts b/x-pack/test_serverless/functional/test_suites/common/discover/embeddable/_saved_search_embeddable.ts
index 591b34da48b575..14c4417da4c31d 100644
--- a/x-pack/test_serverless/functional/test_suites/common/discover/embeddable/_saved_search_embeddable.ts
+++ b/x-pack/test_serverless/functional/test_suites/common/discover/embeddable/_saved_search_embeddable.ts
@@ -145,7 +145,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
     it('should show the the grid toolbar', async () => {
       await addSearchEmbeddableToDashboard();
-      await testSubjects.existOrFail('dscGridToolbar');
+      await testSubjects.existOrFail('unifiedDataTableToolbar');
     });
   });
 }