diff --git a/desktop/flipper-plugin/src/ui/DataFormatter.tsx b/desktop/flipper-plugin/src/ui/DataFormatter.tsx
index aabc1f61c..a1dc5fdc4 100644
--- a/desktop/flipper-plugin/src/ui/DataFormatter.tsx
+++ b/desktop/flipper-plugin/src/ui/DataFormatter.tsx
@@ -20,6 +20,7 @@ import {safeStringify} from '../utils/safeStringify';
 import {urlRegex} from '../utils/urlRegex';
 import {useTableRedraw} from '../data-source/index';
 import {theme} from './theme';
+import {HighlightManager} from './Highlight';
 
 /**
  * A Formatter is used to render an arbitrarily value to React. If a formatter returns 'undefined'
@@ -27,48 +28,65 @@ import {theme} from './theme';
  *
  * In case further processing by the default formatter is to be avoided, make sure a string is returned from any custom formatter.
  */
-export type Formatter = (value: any) => string | React.ReactElement | any;
+export type Formatter = (
+  value: any,
+  highlighter?: HighlightManager,
+) => string | React.ReactElement | any;
 
 export const DataFormatter = {
-  defaultFormatter(value: any) {
+  defaultFormatter(value: any, highlighter?: HighlightManager) {
     if (isValidElement(value)) {
       return value;
     }
+    let res = '';
     switch (typeof value) {
       case 'boolean':
-        return value ? 'true' : 'false';
+        res = value ? 'true' : 'false';
+        break;
       case 'number':
-        return '' + value;
+        res = '' + value;
+        break;
       case 'undefined':
-        return '';
+        break;
       case 'string':
-        return value;
+        res = value;
+        break;
       case 'object': {
-        if (value === null) return '';
+        if (value === null) break;
         if (value instanceof Date) {
-          return (
+          res =
             value.toTimeString().split(' ')[0] +
             '.' +
-            pad('' + value.getMilliseconds(), 3, '0')
-          );
+            pad('' + value.getMilliseconds(), 3, '0');
+          break;
         }
         if (value instanceof Map) {
-          return safeStringify(Array.from(value.entries()));
+          res = safeStringify(Array.from(value.entries()));
+          break;
         }
         if (value instanceof Set) {
-          return safeStringify(Array.from(value.values()));
+          res = safeStringify(Array.from(value.values()));
+          break;
         }
-        return safeStringify(value);
+        res = safeStringify(value);
+        break;
       }
       default:
-        return '<unrenderable value>';
+        res = '<unrenderable value>';
     }
+    return highlighter?.render(res) ?? res;
   },
 
   truncate(maxLength: number) {
-    return (value: any) => {
+    return (value: any, highlighter?: HighlightManager) => {
       if (typeof value === 'string' && value.length > maxLength) {
-        return <TruncateHelper value={value} maxLength={maxLength} />;
+        return (
+          <TruncateHelper
+            value={value}
+            maxLength={maxLength}
+            textWrapper={highlighter}
+          />
+        );
       }
       return value;
     };
@@ -131,16 +149,20 @@ export const DataFormatter = {
     return value;
   },
 
-  format(value: any, formatters?: Formatter[] | Formatter): any {
+  format(
+    value: any,
+    formatters?: Formatter[] | Formatter,
+    highlighter?: HighlightManager,
+  ): any {
     let res = value;
     if (Array.isArray(formatters)) {
       for (const formatter of formatters) {
-        res = formatter(res);
+        res = formatter(res, highlighter);
       }
     } else if (formatters) {
-      res = formatters(res);
+      res = formatters(res, highlighter);
     }
-    return DataFormatter.defaultFormatter(res);
+    return DataFormatter.defaultFormatter(res, highlighter);
   },
 };
 
@@ -148,16 +170,18 @@ export const DataFormatter = {
 export function TruncateHelper({
   value,
   maxLength,
+  textWrapper,
 }: {
   value: string;
   maxLength: number;
+  textWrapper?: HighlightManager; //Could be a generic type
 }) {
   const [collapsed, setCollapsed] = useState(true);
   const redrawRow = useTableRedraw();
-
+  const message = collapsed ? value.substr(0, maxLength) : value;
   return (
     <>
-      {collapsed ? value.substr(0, maxLength) : value}
+      {textWrapper ? textWrapper.render(message) : message}
       <Button
         onClick={() => {
           setCollapsed((c) => !c);
diff --git a/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx b/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx
index ce8b7e536..11569df64 100644
--- a/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx
+++ b/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx
@@ -53,6 +53,7 @@ import {usePluginInstanceMaybe} from '../../plugin/PluginContext';
 import {debounce} from 'lodash';
 import {useInUnitTest} from '../../utils/useInUnitTest';
 import {createDataSource} from '../../state/createDataSource';
+import {HighlightProvider} from '../Highlight';
 
 type DataTableBaseProps<T = any> = {
   columns: DataTableColumn<T>[];
@@ -603,7 +604,14 @@ export function DataTable<T extends object>(
 
   return (
     <Layout.Container grow={props.scrollable}>
-      {mainSection}
+      <HighlightProvider
+        text={
+          tableState.highlightSearchSetting.highlightEnabled
+            ? tableState.searchValue
+            : ''
+        }>
+        {mainSection}
+      </HighlightProvider>
       {props.enableAutoScroll && (
         <AutoScroller>
           <PushpinFilled
diff --git a/desktop/flipper-plugin/src/ui/data-table/TableRow.tsx b/desktop/flipper-plugin/src/ui/data-table/TableRow.tsx
index a885873d4..92cd581a3 100644
--- a/desktop/flipper-plugin/src/ui/data-table/TableRow.tsx
+++ b/desktop/flipper-plugin/src/ui/data-table/TableRow.tsx
@@ -16,6 +16,7 @@ import {DataFormatter} from '../DataFormatter';
 import {Dropdown} from 'antd';
 import {contextMenuTrigger} from '../data-inspector/DataInspectorNode';
 import {getValueAtPath} from './DataTableManager';
+import {HighlightManager, useHighlighter} from '../Highlight';
 
 // heuristic for row estimation, should match any future styling updates
 export const DEFAULT_ROW_HEIGHT = 24;
@@ -109,6 +110,7 @@ export const TableRow = memo(function TableRow<T>({
   highlighted,
   config,
 }: TableRowProps<T>) {
+  const highlighter = useHighlighter();
   const row = (
     <TableBodyRowContainer
       highlighted={highlighted}
@@ -127,6 +129,7 @@ export const TableRow = memo(function TableRow<T>({
             record,
             highlighted,
             itemIndex,
+            highlighter,
           );
 
           return (
@@ -157,8 +160,13 @@ export function renderColumnValue<T>(
   record: T,
   highlighted: boolean,
   itemIndex: number,
+  highlighter?: HighlightManager,
 ) {
   return col.onRender
     ? col.onRender(record, highlighted, itemIndex)
-    : DataFormatter.format(getValueAtPath(record, col.key), col.formatters);
+    : DataFormatter.format(
+        getValueAtPath(record, col.key),
+        col.formatters,
+        highlighter,
+      );
 }
diff --git a/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTable.node.tsx b/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTable.node.tsx
index 3e2d15218..4e4b7cd09 100644
--- a/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTable.node.tsx
+++ b/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTable.node.tsx
@@ -49,24 +49,34 @@ test('update and append', async () => {
   {
     const elem = await rendering.findAllByText('test DataTable');
     expect(elem.length).toBe(1);
-    expect(elem[0].parentElement).toMatchInlineSnapshot(`
-       <div
-         class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1"
-       >
-         <div
-           class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
-           width="50%"
-         >
-           test DataTable
-         </div>
-         <div
-           class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
-           width="50%"
-         >
-           true
-         </div>
-       </div>
-     `);
+    expect(elem[0].parentElement?.parentElement).toMatchInlineSnapshot(`
+      <div
+        class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1"
+      >
+        <div
+          class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
+          width="50%"
+        >
+          <span>
+            <span
+              class="css-1cfwmd7-Highlighted eiud9hg0"
+            />
+            test DataTable
+          </span>
+        </div>
+        <div
+          class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
+          width="50%"
+        >
+          <span>
+            <span
+              class="css-1cfwmd7-Highlighted eiud9hg0"
+            />
+            true
+          </span>
+        </div>
+      </div>
+    `);
   }
 
   act(() => {
@@ -103,24 +113,34 @@ test('column visibility', async () => {
   {
     const elem = await rendering.findAllByText('test DataTable');
     expect(elem.length).toBe(1);
-    expect(elem[0].parentElement).toMatchInlineSnapshot(`
-       <div
-         class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1"
-       >
-         <div
-           class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
-           width="50%"
-         >
-           test DataTable
-         </div>
-         <div
-           class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
-           width="50%"
-         >
-           true
-         </div>
-       </div>
-     `);
+    expect(elem[0].parentElement?.parentElement).toMatchInlineSnapshot(`
+      <div
+        class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1"
+      >
+        <div
+          class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
+          width="50%"
+        >
+          <span>
+            <span
+              class="css-1cfwmd7-Highlighted eiud9hg0"
+            />
+            test DataTable
+          </span>
+        </div>
+        <div
+          class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
+          width="50%"
+        >
+          <span>
+            <span
+              class="css-1cfwmd7-Highlighted eiud9hg0"
+            />
+            true
+          </span>
+        </div>
+      </div>
+    `);
   }
 
   // hide done
@@ -130,18 +150,23 @@ test('column visibility', async () => {
   {
     const elem = await rendering.findAllByText('test DataTable');
     expect(elem.length).toBe(1);
-    expect(elem[0].parentElement).toMatchInlineSnapshot(`
-       <div
-         class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1"
-       >
-         <div
-           class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
-           width="50%"
-         >
-           test DataTable
-         </div>
-       </div>
-     `);
+    expect(elem[0].parentElement?.parentElement).toMatchInlineSnapshot(`
+      <div
+        class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1"
+      >
+        <div
+          class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
+          width="50%"
+        >
+          <span>
+            <span
+              class="css-1cfwmd7-Highlighted eiud9hg0"
+            />
+            test DataTable
+          </span>
+        </div>
+      </div>
+    `);
   }
 
   // reset
@@ -151,7 +176,7 @@ test('column visibility', async () => {
   {
     const elem = await rendering.findAllByText('test DataTable');
     expect(elem.length).toBe(1);
-    expect(elem[0].parentElement?.children.length).toBe(2);
+    expect(elem[0].parentElement?.parentElement?.children.length).toBe(2);
   }
 });
 
diff --git a/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTableRecords.node.tsx b/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTableRecords.node.tsx
index 0f31afd15..7244728f8 100644
--- a/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTableRecords.node.tsx
+++ b/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTableRecords.node.tsx
@@ -42,7 +42,7 @@ test('update and append', async () => {
   {
     const elem = await rendering.findAllByText('test DataTable');
     expect(elem.length).toBe(1);
-    expect(elem[0].parentElement).toMatchInlineSnapshot(`
+    expect(elem[0].parentElement?.parentElement).toMatchInlineSnapshot(`
       <div
         class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1"
       >
@@ -50,13 +50,23 @@ test('update and append', async () => {
           class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
           width="50%"
         >
-          test DataTable
+          <span>
+            <span
+              class="css-1cfwmd7-Highlighted eiud9hg0"
+            />
+            test DataTable
+          </span>
         </div>
         <div
           class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
           width="50%"
         >
-          true
+          <span>
+            <span
+              class="css-1cfwmd7-Highlighted eiud9hg0"
+            />
+            true
+          </span>
         </div>
       </div>
     `);
diff --git a/desktop/flipper-ui-core/src/chrome/__tests__/flipper_messages.node.tsx b/desktop/flipper-ui-core/src/chrome/__tests__/flipper_messages.node.tsx
index 60de95248..4e5831751 100644
--- a/desktop/flipper-ui-core/src/chrome/__tests__/flipper_messages.node.tsx
+++ b/desktop/flipper-ui-core/src/chrome/__tests__/flipper_messages.node.tsx
@@ -117,8 +117,9 @@ test('It can render rows', async () => {
     });
   });
 
-  expect((await renderer.findByText('unique-string')).parentElement)
-    .toMatchInlineSnapshot(`
+  expect(
+    (await renderer.findByText('unique-string')).parentElement?.parentElement,
+  ).toMatchInlineSnapshot(`
     <div
       class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1"
     >
@@ -126,39 +127,76 @@ test('It can render rows', async () => {
         class="css-12luweq-TableBodyColumnContainer e1luu51r0"
         width="14%"
       >
-        00:00:00.000
+        <span>
+          <span
+            class="css-1cfwmd7-Highlighted eiud9hg0"
+          />
+          00:00:00.000
+        </span>
       </div>
       <div
         class="css-12luweq-TableBodyColumnContainer e1luu51r0"
         width="14%"
       >
-        Android Phone
+        <span>
+          <span
+            class="css-1cfwmd7-Highlighted eiud9hg0"
+          />
+          Android Phone
+        </span>
       </div>
       <div
         class="css-12luweq-TableBodyColumnContainer e1luu51r0"
         width="14%"
       >
-        FB4A
+        <span>
+          <span
+            class="css-1cfwmd7-Highlighted eiud9hg0"
+          />
+          FB4A
+        </span>
       </div>
       <div
         class="css-12luweq-TableBodyColumnContainer e1luu51r0"
         width="14%"
       >
-        unique-string
+        <span>
+          <span
+            class="css-1cfwmd7-Highlighted eiud9hg0"
+          />
+          unique-string
+        </span>
       </div>
       <div
         class="css-12luweq-TableBodyColumnContainer e1luu51r0"
         width="14%"
-      />
-      <div
-        class="css-12luweq-TableBodyColumnContainer e1luu51r0"
-        width="14%"
-      />
+      >
+        <span>
+          <span
+            class="css-1cfwmd7-Highlighted eiud9hg0"
+          />
+        </span>
+      </div>
       <div
         class="css-12luweq-TableBodyColumnContainer e1luu51r0"
         width="14%"
       >
-        toClient:send
+        <span>
+          <span
+            class="css-1cfwmd7-Highlighted eiud9hg0"
+          />
+        </span>
+      </div>
+      <div
+        class="css-12luweq-TableBodyColumnContainer e1luu51r0"
+        width="14%"
+      >
+        <span>
+          <span
+            class="css-1cfwmd7-Highlighted eiud9hg0"
+          />
+          toClient:send
+        </span>
       </div>
     </div>
   `);