diff --git a/desktop/flipper-plugin/src/ui/datatable/DataSourceRenderer.tsx b/desktop/flipper-plugin/src/ui/datatable/DataSourceRenderer.tsx
index 95341961c..82e02ebf3 100644
--- a/desktop/flipper-plugin/src/ui/datatable/DataSourceRenderer.tsx
+++ b/desktop/flipper-plugin/src/ui/datatable/DataSourceRenderer.tsx
@@ -56,6 +56,7 @@ type DataSourceProps<T extends object, C> = {
   onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
   virtualizerRef?: MutableRefObject<DataSourceVirtualizer | undefined>;
   onRangeChange?(start: number, end: number, total: number): void;
+  emptyRenderer?(dataSource: DataSource<T>): React.ReactElement;
   _testHeight?: number; // exposed for unit testing only
 };
 
@@ -75,6 +76,7 @@ export const DataSourceRenderer: <T extends object, C>(
   onKeyDown,
   virtualizerRef,
   onRangeChange,
+  emptyRenderer,
   _testHeight,
 }: DataSourceProps<any, any>) {
   /**
@@ -235,6 +237,9 @@ export const DataSourceRenderer: <T extends object, C>(
    */
   return (
     <TableContainer onScroll={onScroll} ref={parentRef}>
+      {virtualizer.virtualItems.length === 0
+        ? emptyRenderer?.(dataSource)
+        : null}
       <TableWindow
         height={virtualizer.totalSize}
         onKeyDown={onKeyDown}
diff --git a/desktop/flipper-plugin/src/ui/datatable/DataTable.tsx b/desktop/flipper-plugin/src/ui/datatable/DataTable.tsx
index e6462d380..69b0fc3b9 100644
--- a/desktop/flipper-plugin/src/ui/datatable/DataTable.tsx
+++ b/desktop/flipper-plugin/src/ui/datatable/DataTable.tsx
@@ -27,6 +27,8 @@ import {TableSearch} from './TableSearch';
 import styled from '@emotion/styled';
 import {theme} from '../theme';
 import {tableContextMenuFactory} from './TableContextMenu';
+import {Typography} from 'antd';
+import {CoffeeOutlined, SearchOutlined} from '@ant-design/icons';
 
 interface DataTableProps<T = any> {
   columns: DataTableColumn<T>[];
@@ -231,6 +233,10 @@ export function DataTable<T extends object>(
     ? undefined // don't render context menu in tests
     : tableContextMenuFactory(tableManager);
 
+  const emptyRenderer = useCallback((dataSource: DataSource<T>) => {
+    return <EmptyTable dataSource={dataSource} />;
+  }, []);
+
   return (
     <Layout.Container grow>
       <Layout.Top>
@@ -264,6 +270,7 @@ export function DataTable<T extends object>(
           onKeyDown={onKeyDown}
           virtualizerRef={virtualizerRef}
           onRangeChange={onRangeChange}
+          emptyRenderer={emptyRenderer}
           _testHeight={props._testHeight}
         />
       </Layout.Top>
@@ -272,6 +279,28 @@ export function DataTable<T extends object>(
   );
 }
 
+function EmptyTable({dataSource}: {dataSource: DataSource<any>}) {
+  return (
+    <Layout.Container
+      center
+      style={{width: '100%', padding: 40, color: theme.textColorSecondary}}>
+      {dataSource.records.length === 0 ? (
+        <>
+          <CoffeeOutlined style={{fontSize: '2em', margin: 8}} />
+          <Typography.Text type="secondary">No records yet</Typography.Text>
+        </>
+      ) : (
+        <>
+          <SearchOutlined style={{fontSize: '2em', margin: 8}} />
+          <Typography.Text type="secondary">
+            No records match the current search / filter criteria
+          </Typography.Text>
+        </>
+      )}
+    </Layout.Container>
+  );
+}
+
 const RangeFinder = styled.div({
   backgroundColor: theme.backgroundWash,
   position: 'absolute',