diff --git a/apps/jetstream/src/app/components/automation-control/AutomationControlEditorReviewModal.tsx b/apps/jetstream/src/app/components/automation-control/AutomationControlEditorReviewModal.tsx
index 056006c84..43177861a 100644
--- a/apps/jetstream/src/app/components/automation-control/AutomationControlEditorReviewModal.tsx
+++ b/apps/jetstream/src/app/components/automation-control/AutomationControlEditorReviewModal.tsx
@@ -5,8 +5,8 @@ import { SalesforceOrgUi } from '@jetstream/types';
 import { AutoFullHeightContainer, DataTable, Icon, Modal, Spinner } from '@jetstream/ui';
 import { Fragment, FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react';
 import { Column } from 'react-data-grid';
-import { useAmplitude } from '../core/analytics';
 import ConfirmPageChange from '../core/ConfirmPageChange';
+import { useAmplitude } from '../core/analytics';
 import { deployMetadata, getAutomationTypeLabel, preparePayloads } from './automation-control-data-utils';
 import { AutomationDeployStatusRenderer, BooleanAndVersionRenderer } from './automation-control-table-renderers';
 import {
@@ -37,21 +37,21 @@ const COLUMNS: Column<DeploymentItemRow>[] = [
   {
     name: 'Old Value',
     key: 'isActiveInitialState',
-    formatter: BooleanAndVersionRenderer,
+    renderCell: BooleanAndVersionRenderer,
     width: 130,
     cellClass: 'bg-color-gray',
   },
   {
     name: 'New Value',
     key: 'isActive',
-    formatter: BooleanAndVersionRenderer,
+    renderCell: BooleanAndVersionRenderer,
     width: 130,
     cellClass: 'active-item-yellow-bg',
   },
   {
     name: 'Status',
     key: 'status',
-    formatter: AutomationDeployStatusRenderer,
+    renderCell: AutomationDeployStatusRenderer,
     width: 200,
   },
 ];
diff --git a/apps/jetstream/src/app/components/automation-control/AutomationControlEditorTable.tsx b/apps/jetstream/src/app/components/automation-control/AutomationControlEditorTable.tsx
index c6e54f34a..17a306a74 100644
--- a/apps/jetstream/src/app/components/automation-control/AutomationControlEditorTable.tsx
+++ b/apps/jetstream/src/app/components/automation-control/AutomationControlEditorTable.tsx
@@ -43,7 +43,7 @@ export const AutomationControlEditorTable = forwardRef<any, AutomationControlEdi
           name: 'Automation Item',
           key: 'label',
           width: 400,
-          formatter: ({ column, row }) => {
+          renderCell: ({ column, row }) => {
             return (
               <ExpandingLabelRenderer
                 serverUrl={serverUrl}
@@ -67,7 +67,7 @@ export const AutomationControlEditorTable = forwardRef<any, AutomationControlEdi
           key: 'isActive',
           width: 110,
           cellClass: (row) => (!isTableRow(row) && row.isActive !== row.isActiveInitialState ? 'active-item-yellow-bg' : ''),
-          formatter: ({ row }) => {
+          renderCell: ({ row }) => {
             return <LoadingAndActiveRenderer row={row} updateIsActiveFlag={updateIsActiveFlag} />;
           },
         },
@@ -88,7 +88,7 @@ export const AutomationControlEditorTable = forwardRef<any, AutomationControlEdi
           width: 400,
           filters: null,
           sortable: false,
-          formatter: AdditionalDetailRenderer,
+          renderCell: AdditionalDetailRenderer,
         },
       ] as ColumnWithFilter<TableRowOrItemOrChild>[];
     }, []);
diff --git a/apps/jetstream/src/app/components/automation-control/automation-control-table-renderers.tsx b/apps/jetstream/src/app/components/automation-control/automation-control-table-renderers.tsx
index 1a5af3c77..5a1795b96 100644
--- a/apps/jetstream/src/app/components/automation-control/automation-control-table-renderers.tsx
+++ b/apps/jetstream/src/app/components/automation-control/automation-control-table-renderers.tsx
@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import isNumber from 'lodash/isNumber';
 import uniqueId from 'lodash/uniqueId';
 import { FunctionComponent } from 'react';
-import { CalculatedColumn, FormatterProps } from 'react-data-grid';
+import { CalculatedColumn, RenderCellProps } from 'react-data-grid';
 import { isTableRow, isTableRowChild, isTableRowItem } from './automation-control-data-utils';
 import { DeploymentItemRow, DeploymentItemStatus, MetadataCompositeResponseError, TableRowOrItemOrChild } from './automation-control-types';
 
@@ -104,7 +104,7 @@ export const LoadingAndActiveRenderer: FunctionComponent<{
   }
 };
 
-export const AdditionalDetailRenderer: FunctionComponent<FormatterProps<TableRowOrItemOrChild, unknown>> = ({ row }) => {
+export const AdditionalDetailRenderer: FunctionComponent<RenderCellProps<TableRowOrItemOrChild, unknown>> = ({ row }) => {
   if (!isTableRow(row) && Array.isArray(row.additionalData) && row.additionalData.length > 0) {
     return (
       <Grid vertical className="slds-line-height_reset">
@@ -132,7 +132,7 @@ export const AdditionalDetailRenderer: FunctionComponent<FormatterProps<TableRow
   return null;
 };
 
-export const BooleanAndVersionRenderer: FunctionComponent<FormatterProps<DeploymentItemRow, unknown>> = ({ column, row }) => {
+export const BooleanAndVersionRenderer: FunctionComponent<RenderCellProps<DeploymentItemRow, unknown>> = ({ column, row }) => {
   const metadata = row;
   const type = metadata.type;
   const value = metadata[column.key];
@@ -182,7 +182,7 @@ function getErrorMessageContentString(deployError: Maybe<MetadataCompositeRespon
   }
 }
 
-export const AutomationDeployStatusRenderer: FunctionComponent<FormatterProps<DeploymentItemRow, unknown>> = ({ row }) => {
+export const AutomationDeployStatusRenderer: FunctionComponent<RenderCellProps<DeploymentItemRow, unknown>> = ({ row }) => {
   const { status, deploy } = row;
   const { deployError } = deploy;
   const isLoading = loadingStatuses.includes(status);
diff --git a/apps/jetstream/src/app/components/core/ViewChildRecords.tsx b/apps/jetstream/src/app/components/core/ViewChildRecords.tsx
index 4f1ed0ea5..0f4f7ce00 100644
--- a/apps/jetstream/src/app/components/core/ViewChildRecords.tsx
+++ b/apps/jetstream/src/app/components/core/ViewChildRecords.tsx
@@ -101,7 +101,7 @@ export const ViewChildRecords: FunctionComponent<ViewChildRecordsProps> = ({
         name: '',
         width: 40,
         frozen: true,
-        groupFormatter: ({ isExpanded }) => (
+        renderGroupCell: ({ isExpanded }) => (
           <Grid align="end" verticalAlign="center" className="h-100">
             <Icon
               icon={isExpanded ? 'chevrondown' : 'chevronright'}
@@ -116,7 +116,7 @@ export const ViewChildRecords: FunctionComponent<ViewChildRecordsProps> = ({
         ...setColumnFromType('Id', 'text'),
         key: 'Id',
         name: 'Id',
-        formatter: ({ row }) => {
+        renderCell: ({ row }) => {
           return (
             <Grid>
               <SalesforceLogin
@@ -131,7 +131,7 @@ export const ViewChildRecords: FunctionComponent<ViewChildRecordsProps> = ({
             </Grid>
           );
         },
-        groupFormatter: ({ toggleGroup, groupKey, childRows }) => (
+        renderGroupCell: ({ toggleGroup, groupKey, childRows }) => (
           <button
             css={css`
               white-space: nowrap;
diff --git a/apps/jetstream/src/app/components/debug-log-viewer/DebugLogViewerTable.tsx b/apps/jetstream/src/app/components/debug-log-viewer/DebugLogViewerTable.tsx
index da8a47f94..ce62a98ea 100644
--- a/apps/jetstream/src/app/components/debug-log-viewer/DebugLogViewerTable.tsx
+++ b/apps/jetstream/src/app/components/debug-log-viewer/DebugLogViewerTable.tsx
@@ -2,9 +2,9 @@ import { css } from '@emotion/react';
 import { ApexLogWithViewed } from '@jetstream/types';
 import { AutoFullHeightContainer, ColumnWithFilter, DataTable, Icon, setColumnFromType } from '@jetstream/ui';
 import { FunctionComponent, useEffect, useRef } from 'react';
-import { CellClickArgs, FormatterProps } from 'react-data-grid';
+import { CellClickArgs, RenderCellProps } from 'react-data-grid';
 
-export const LogViewedRenderer: FunctionComponent<FormatterProps<ApexLogWithViewed>> = ({ row }) => {
+export const LogViewedRenderer: FunctionComponent<RenderCellProps<ApexLogWithViewed>> = ({ row }) => {
   if (row?.viewed) {
     return (
       <Icon
@@ -27,7 +27,7 @@ const COLUMNS: ColumnWithFilter<ApexLogWithViewed>[] = [
     name: '',
     key: 'viewed',
     width: 12,
-    formatter: LogViewedRenderer,
+    renderCell: LogViewedRenderer,
     resizable: false,
     // TODO: filter for this
   },
diff --git a/apps/jetstream/src/app/components/deploy/deploy-metadata-history/DeployMetadataHistoryTable.tsx b/apps/jetstream/src/app/components/deploy/deploy-metadata-history/DeployMetadataHistoryTable.tsx
index 7d55f9f95..316885f67 100644
--- a/apps/jetstream/src/app/components/deploy/deploy-metadata-history/DeployMetadataHistoryTable.tsx
+++ b/apps/jetstream/src/app/components/deploy/deploy-metadata-history/DeployMetadataHistoryTable.tsx
@@ -24,13 +24,13 @@ const COLUMNS: ColumnWithFilter<SalesforceDeployHistoryItem>[] = [
     name: 'Type',
     key: 'type',
     width: 165,
-    formatter: ({ column, row }) => TYPE_MAP[row[column.key]],
+    renderCell: ({ column, row }) => TYPE_MAP[row[column.key]],
   },
   {
     ...setColumnFromType('destinationOrg', 'text'),
     name: 'Deployed To Org',
     key: 'destinationOrg',
-    formatter: OrgRenderer,
+    renderCell: OrgRenderer,
     getValue: ({ row }) => row.destinationOrg?.label,
     width: 350,
   },
@@ -38,7 +38,7 @@ const COLUMNS: ColumnWithFilter<SalesforceDeployHistoryItem>[] = [
     ...setColumnFromType('status', 'text'),
     name: 'Status',
     key: 'status',
-    formatter: StatusRenderer,
+    renderCell: StatusRenderer,
     width: 150,
   },
   {
@@ -47,7 +47,7 @@ const COLUMNS: ColumnWithFilter<SalesforceDeployHistoryItem>[] = [
     width: 220,
     sortable: false,
     resizable: false,
-    formatter: ActionRenderer,
+    renderCell: ActionRenderer,
   },
 ];
 
diff --git a/apps/jetstream/src/app/components/deploy/deploy-metadata-history/DeployMetadataHistoryTableRenderers.tsx b/apps/jetstream/src/app/components/deploy/deploy-metadata-history/DeployMetadataHistoryTableRenderers.tsx
index db5918ffb..ba7b635e7 100644
--- a/apps/jetstream/src/app/components/deploy/deploy-metadata-history/DeployMetadataHistoryTableRenderers.tsx
+++ b/apps/jetstream/src/app/components/deploy/deploy-metadata-history/DeployMetadataHistoryTableRenderers.tsx
@@ -3,13 +3,13 @@ import { IconName } from '@jetstream/icon-factory';
 import { SalesforceDeployHistoryItem } from '@jetstream/types';
 import { DataTableGenericContext, Grid, Icon } from '@jetstream/ui';
 import { Fragment, useContext } from 'react';
-import { FormatterProps } from 'react-data-grid';
+import { RenderCellProps } from 'react-data-grid';
 import OrgLabelBadge from '../../core/OrgLabelBadge';
 import { DeployHistoryTableContext } from '../deploy-metadata.types';
 
 const fallbackLabel = 'Unknown Org';
 
-export function OrgRenderer({ row: item }: FormatterProps<SalesforceDeployHistoryItem>) {
+export function OrgRenderer({ row: item }: RenderCellProps<SalesforceDeployHistoryItem>) {
   const { orgsById } = useContext(DataTableGenericContext) as DeployHistoryTableContext;
 
   const sourceOrg = item.sourceOrg ? orgsById[item.sourceOrg.uniqueId] : null;
@@ -54,7 +54,7 @@ export function OrgRenderer({ row: item }: FormatterProps<SalesforceDeployHistor
   );
 }
 
-export function StatusRenderer({ row: item }: FormatterProps<SalesforceDeployHistoryItem>) {
+export function StatusRenderer({ row: item }: RenderCellProps<SalesforceDeployHistoryItem>) {
   let status: string = item.status;
   let icon: IconName = 'success';
   let iconClassName = 'slds-icon slds-icon_x-small slds-icon-text-success';
@@ -82,7 +82,7 @@ export function StatusRenderer({ row: item }: FormatterProps<SalesforceDeployHis
   );
 }
 
-export function ActionRenderer({ row: item }: FormatterProps<SalesforceDeployHistoryItem>) {
+export function ActionRenderer({ row: item }: RenderCellProps<SalesforceDeployHistoryItem>) {
   const { onDownload, onView } = useContext(DataTableGenericContext) as DeployHistoryTableContext;
 
   return (
diff --git a/apps/jetstream/src/app/components/deploy/utils/deploy-metadata.utils.tsx b/apps/jetstream/src/app/components/deploy/utils/deploy-metadata.utils.tsx
index 1123b8b8d..73fa899d5 100644
--- a/apps/jetstream/src/app/components/deploy/utils/deploy-metadata.utils.tsx
+++ b/apps/jetstream/src/app/components/deploy/utils/deploy-metadata.utils.tsx
@@ -28,7 +28,7 @@ import type { DeployOptions } from 'jsforce';
 import JSZip from 'jszip';
 import localforage from 'localforage';
 import isString from 'lodash/isString';
-import { SelectColumn, SELECT_COLUMN_KEY } from 'react-data-grid';
+import { SELECT_COLUMN_KEY, SelectColumn } from 'react-data-grid';
 import { composeQuery, getField, Query } from 'soql-parser-js';
 import { DeployMetadataTableRow } from '../deploy-metadata.types';
 
@@ -224,7 +224,7 @@ export function getColumnDefinitions(): ColumnWithFilter<DeployMetadataTableRow>
       ...SelectColumn,
       key: SELECT_COLUMN_KEY,
       resizable: false,
-      formatter: (args) => {
+      renderCell: (args) => {
         const { row } = args;
         if (row.loading) {
           return null;
@@ -237,8 +237,8 @@ export function getColumnDefinitions(): ColumnWithFilter<DeployMetadataTableRow>
         }
         return <SelectFormatter {...args} />;
       },
-      headerRenderer: SelectHeaderRenderer,
-      groupFormatter: (args) => {
+      renderHeaderCell: SelectHeaderRenderer,
+      renderGroupCell: (args) => {
         const { childRows } = args;
         // Don't allow selection if child rows are loading
         if (childRows.length === 0 || (childRows.length === 1 && (childRows[0].loading || !childRows[0].metadata))) {
@@ -262,7 +262,7 @@ export function getColumnDefinitions(): ColumnWithFilter<DeployMetadataTableRow>
       key: 'typeLabel',
       width: 40,
       frozen: true,
-      groupFormatter: ({ isExpanded }) => (
+      renderGroupCell: ({ isExpanded }) => (
         <Grid align="end" verticalAlign="center" className="h-100">
           <Icon
             icon={isExpanded ? 'chevrondown' : 'chevronright'}
@@ -278,8 +278,8 @@ export function getColumnDefinitions(): ColumnWithFilter<DeployMetadataTableRow>
       name: 'Name',
       key: 'fullName',
       frozen: true,
-      formatter: ({ row }) => (row.loading ? <Spinner size={'x-small'} /> : row.fullName),
-      groupFormatter: ({ toggleGroup, groupKey, childRows }) => (
+      renderCell: ({ row }) => (row.loading ? <Spinner size={'x-small'} /> : row.fullName),
+      renderGroupCell: ({ toggleGroup, groupKey, childRows }) => (
         <>
           <button className="slds-button" onClick={toggleGroup}>
             {groupKey as string}
diff --git a/apps/jetstream/src/app/components/load-records/components/load-results/LoadRecordsResultsModal.tsx b/apps/jetstream/src/app/components/load-records/components/load-results/LoadRecordsResultsModal.tsx
index 5272f323a..e6b10e3fc 100644
--- a/apps/jetstream/src/app/components/load-records/components/load-results/LoadRecordsResultsModal.tsx
+++ b/apps/jetstream/src/app/components/load-records/components/load-results/LoadRecordsResultsModal.tsx
@@ -5,12 +5,12 @@ import {
   ColumnWithFilter,
   CopyToClipboardWithToolTip,
   DataTable,
+  getRowTypeFromValue,
   Icon,
   Modal,
   setColumnFromType,
   Spinner,
 } from '@jetstream/ui';
-import { getRowTypeFromValue } from 'libs/ui/src/lib/data-table/data-table-utils';
 import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react';
 import { RowHeightArgs } from 'react-data-grid';
 
@@ -75,7 +75,7 @@ export const LoadRecordsResultsModal: FunctionComponent<LoadRecordsResultsModalP
                       {row?._errors}
                     </p>
                   )
-                : baseColumn.formatter,
+                : baseColumn.renderCell,
           };
         })
       );
diff --git a/apps/jetstream/src/app/components/manage-permissions/utils/permission-manager-table-utils.tsx b/apps/jetstream/src/app/components/manage-permissions/utils/permission-manager-table-utils.tsx
index 50f61d7b6..2536099d8 100644
--- a/apps/jetstream/src/app/components/manage-permissions/utils/permission-manager-table-utils.tsx
+++ b/apps/jetstream/src/app/components/manage-permissions/utils/permission-manager-table-utils.tsx
@@ -18,7 +18,7 @@ import {
 } from '@jetstream/ui';
 import startCase from 'lodash/startCase';
 import { Fragment, FunctionComponent, useContext, useRef, useState } from 'react';
-import { FormatterProps, SummaryFormatterProps } from 'react-data-grid';
+import { RenderCellProps, RenderSummaryCellProps } from 'react-data-grid';
 import {
   BulkActionCheckbox,
   DirtyRow,
@@ -205,7 +205,7 @@ export function getObjectColumns(
         return data && `${data.label} (${data.apiName})`;
       },
       summaryCellClass: 'bg-color-gray-dark no-outline',
-      summaryFormatter: ({ row }) => {
+      renderSummaryCell: ({ row }) => {
         if (row.type === 'HEADING') {
           return <ColumnSearchFilterSummary />;
         } else if (row.type === 'ACTION') {
@@ -220,9 +220,9 @@ export function getObjectColumns(
       width: 100,
       resizable: false,
       frozen: true,
-      formatter: RowActionRenderer,
+      renderCell: RowActionRenderer,
       summaryCellClass: ({ type }) => (type === 'HEADING' ? 'bg-color-gray' : null),
-      summaryFormatter: ({ row }) => {
+      renderSummaryCell: ({ row }) => {
         if (row.type === 'ACTION') {
           return <BulkActionRenderer />;
         }
@@ -353,7 +353,7 @@ export function getFieldColumns(
       width: 85,
       cellClass: 'bg-color-gray-dark',
       summaryCellClass: 'bg-color-gray-dark',
-      groupFormatter: ({ isExpanded }) => (
+      renderGroupCell: ({ isExpanded }) => (
         <Grid align="end" verticalAlign="center" className="h-100">
           <Icon
             icon={isExpanded ? 'chevrondown' : 'chevronright'}
@@ -370,7 +370,7 @@ export function getFieldColumns(
       key: 'tableLabel',
       frozen: true,
       width: 300,
-      groupFormatter: ({ groupKey, childRows, toggleGroup }) => (
+      renderGroupCell: ({ groupKey, childRows, toggleGroup }) => (
         <>
           <button className="slds-button" onClick={toggleGroup}>
             {groupKey as string}
@@ -379,7 +379,7 @@ export function getFieldColumns(
         </>
       ),
       summaryCellClass: 'bg-color-gray-dark no-outline',
-      summaryFormatter: ({ row }) => {
+      renderSummaryCell: ({ row }) => {
         if (row.type === 'HEADING') {
           return <ColumnSearchFilterSummary />;
         } else if (row.type === 'ACTION') {
@@ -394,9 +394,9 @@ export function getFieldColumns(
       width: 100,
       resizable: false,
       frozen: true,
-      formatter: RowActionRenderer,
+      renderCell: RowActionRenderer,
       summaryCellClass: ({ type }) => (type === 'HEADING' ? 'bg-color-gray' : null),
-      summaryFormatter: ({ row }) => {
+      renderSummaryCell: ({ row }) => {
         if (row.type === 'ACTION') {
           return <BulkActionRenderer />;
         }
@@ -488,7 +488,7 @@ function getColumnForProfileOrPermSet<T extends PermissionType>({
       return '';
     },
     colSpan: (args) => (args.type === 'HEADER' && isFirstItem ? numItems : undefined),
-    formatter: ({ column, isCellSelected, row, onRowChange }) => {
+    renderCell: ({ row, onRowChange }) => {
       const errorMessage = row.permissions[id].errorMessage;
       const value = row.permissions[id][actionKey as any];
 
@@ -549,7 +549,7 @@ function getColumnForProfileOrPermSet<T extends PermissionType>({
     },
     getValue: ({ column, row }) => row.permissions[id][actionKey as any],
     summaryCellClass: ({ type }) => (type === 'HEADING' ? 'bg-color-gray' : null),
-    summaryFormatter: (args) => {
+    renderSummaryCell: (args) => {
       if (args.row.type === 'HEADING') {
         return <SummaryFilterRenderer columnKey={`${id}-${actionKey}`} label={actionType} />;
       }
@@ -780,8 +780,7 @@ export function updateRowsFromRowAction<TRows extends PermissionTableObjectCell
 /**
  * Pinned row selection renderer
  */
-//  export const IdLinkRenderer: FunctionComponent<FormatterProps<any, unknown>> = ({ column, row, onRowChange, isCellSelected }) => {
-export const PinnedSelectAllRendererWrapper: FunctionComponent<SummaryFormatterProps<any, unknown>> = ({ column }) => {
+export const PinnedSelectAllRendererWrapper: FunctionComponent<RenderSummaryCellProps<any, unknown>> = ({ column }) => {
   const { onColumnAction } = useContext(DataTableGenericContext) as PermissionManagerTableContext;
 
   function handleSelection(action: 'selectAll' | 'unselectAll' | 'reset') {
@@ -947,7 +946,7 @@ function getDirtyCount({
  *
  * This component provides a popover that the user can open to make changes that apply to an entire row
  */
-export const RowActionRenderer: FunctionComponent<FormatterProps<PermissionTableObjectCell | PermissionTableFieldCell>> = ({
+export const RowActionRenderer: FunctionComponent<RenderCellProps<PermissionTableObjectCell | PermissionTableFieldCell>> = ({
   column,
   onRowChange,
   row,
diff --git a/apps/jetstream/src/app/components/platform-event-monitor/PlatformEventMonitorEvents.tsx b/apps/jetstream/src/app/components/platform-event-monitor/PlatformEventMonitorEvents.tsx
index 5427e2920..f86f60e52 100644
--- a/apps/jetstream/src/app/components/platform-event-monitor/PlatformEventMonitorEvents.tsx
+++ b/apps/jetstream/src/app/components/platform-event-monitor/PlatformEventMonitorEvents.tsx
@@ -3,10 +3,10 @@ import { orderStringsBy } from '@jetstream/shared/utils';
 import { AutoFullHeightContainer, ColumnWithFilter, DataTable } from '@jetstream/ui';
 import groupBy from 'lodash/groupBy';
 import { FunctionComponent, useEffect, useState } from 'react';
-import { FormatterProps, RowHeightArgs } from 'react-data-grid';
+import { RenderCellProps, RowHeightArgs } from 'react-data-grid';
 import { MessagesByChannel } from './usePlatformEvent';
 
-export const WrappedTextFormatter: FunctionComponent<FormatterProps<PlatformEventRow>> = ({ column, row }) => {
+export const WrappedTextFormatter: FunctionComponent<RenderCellProps<PlatformEventRow>> = ({ column, row }) => {
   const value = row[column.key];
   return (
     <p
@@ -38,7 +38,7 @@ const columns: ColumnWithFilter<PlatformEventRow>[] = [
     width: 450,
     // wrapText: true,
     // autoHeight: true,
-    formatter: WrappedTextFormatter,
+    renderCell: WrappedTextFormatter,
     cellClass: 'break-all',
   },
   {
diff --git a/apps/jetstream/src/app/components/salesforce-api/SalesforceApiExamplesModal.tsx b/apps/jetstream/src/app/components/salesforce-api/SalesforceApiExamplesModal.tsx
index a3e8c4777..f12564aa3 100644
--- a/apps/jetstream/src/app/components/salesforce-api/SalesforceApiExamplesModal.tsx
+++ b/apps/jetstream/src/app/components/salesforce-api/SalesforceApiExamplesModal.tsx
@@ -69,7 +69,7 @@ export const SalesforceApiExamplesModal: FunctionComponent<SalesforceApiExamples
         name: 'action',
         key: 'action',
         width: 150,
-        formatter: ({ row }) => {
+        renderCell: ({ row }) => {
           return (
             <button className={'slds-button slds-text-link_reset slds-text-link'} onClick={() => handleExecute(row)}>
               Use Request
diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
index 3de90bf0b..2e7a1c119 100644
--- a/libs/ui/src/index.ts
+++ b/libs/ui/src/index.ts
@@ -14,7 +14,7 @@ export * from './lib/data-table/SalesforceRecordDataTable';
 export * from './lib/data-table/data-table-context';
 export * from './lib/data-table/data-table-formatters';
 export type { ColumnWithFilter, RowWithKey } from './lib/data-table/data-table-types';
-export { getColumnsForGenericTable, setColumnFromType } from './lib/data-table/data-table-utils';
+export { getColumnsForGenericTable, getRowTypeFromValue, setColumnFromType } from './lib/data-table/data-table-utils';
 export * from './lib/docked-composer/DockedComposer';
 export * from './lib/expression-group/ExpressionContainer';
 export * from './lib/expression-group/expression-utils';
diff --git a/libs/ui/src/lib/data-table/DataTable.tsx b/libs/ui/src/lib/data-table/DataTable.tsx
index 42d0dca83..4bdcb7722 100644
--- a/libs/ui/src/lib/data-table/DataTable.tsx
+++ b/libs/ui/src/lib/data-table/DataTable.tsx
@@ -3,29 +3,31 @@ import { logger } from '@jetstream/shared/client-logger';
 import { useNonInitialEffect } from '@jetstream/shared/ui-utils';
 import { orderObjectsBy, orderStringsBy } from '@jetstream/shared/utils';
 import { SalesforceOrgUi } from '@jetstream/types';
-import uniqueId from 'lodash/uniqueId';
 import escapeRegExp from 'lodash/escapeRegExp';
 import isNil from 'lodash/isNil';
+import isString from 'lodash/isString';
+import uniqueId from 'lodash/uniqueId';
 import { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useReducer, useState } from 'react';
 import DataGrid, {
+  CellClickArgs,
   DataGridProps,
-  HeaderRendererProps,
-  Renderers,
   Row as GridRow,
-  RowRendererProps,
+  RenderHeaderCellProps,
+  RenderRowProps,
+  RenderSortStatusProps,
+  Renderers,
   SortColumn,
-  SortStatusProps,
 } from 'react-data-grid';
 import 'react-data-grid/lib/styles.css';
 import ContextMenu, { ContextMenuContext, ContextMenuItem } from '../popover/ContextMenu';
 import Icon from '../widgets/Icon';
+import { DraggableHeaderRenderer, configIdLinkRenderer } from './DataTableRenderers';
 import { DataTableFilterContext, DataTableGenericContext } from './data-table-context';
 import './data-table-styles.scss';
 import { ColumnWithFilter, ContextMenuActionData, DataTableFilter, FILTER_SET_TYPES, RowWithKey } from './data-table-types';
-import { EMPTY_FIELD, filterRecord, getSearchTextByRow, isFilterActive, NON_DATA_COLUMN_KEYS, resetFilter } from './data-table-utils';
-import { configIdLinkRenderer, DraggableHeaderRenderer } from './DataTableRenderers';
+import { EMPTY_FIELD, NON_DATA_COLUMN_KEYS, filterRecord, getSearchTextByRow, isFilterActive, resetFilter } from './data-table-utils';
 
-function sortStatus({ sortDirection, priority }: SortStatusProps) {
+function renderSortStatus({ sortDirection, priority }: RenderSortStatusProps) {
   const iconName: IconName = sortDirection === 'ASC' ? 'arrowup' : 'arrowdown';
   return sortDirection !== undefined ? (
     <>
@@ -37,7 +39,7 @@ function sortStatus({ sortDirection, priority }: SortStatusProps) {
 
 interface ContextMenuRendererProps {
   containerId?: string;
-  props: RowRendererProps<any>;
+  props: RenderRowProps<any>;
   contextMenuItems: ContextMenuItem[];
   contextMenuAction: (item: ContextMenuItem, data: ContextMenuActionData<unknown>) => void;
 }
@@ -207,8 +209,8 @@ export const DataTable = forwardRef<any, DataTableProps<any>>(
     useEffect(() => {
       if (contextMenuItems && contextMenuAction) {
         setRenderers({
-          sortStatus,
-          rowRenderer: (key: React.Key, props: RowRendererProps<any>) => {
+          renderSortStatus,
+          renderRow: (key: React.Key, props: RenderRowProps<any>) => {
             return (
               <ContextMenuRenderer
                 key={key}
@@ -221,7 +223,7 @@ export const DataTable = forwardRef<any, DataTableProps<any>>(
           },
         });
       } else {
-        setRenderers({ sortStatus });
+        setRenderers({ renderSortStatus });
       }
     }, [contextMenuAction, contextMenuItems, gridId]);
 
@@ -318,7 +320,7 @@ export const DataTable = forwardRef<any, DataTableProps<any>>(
       if (!allowReorder) {
         return columns;
       }
-      function headerRenderer(props: HeaderRendererProps<T>) {
+      function headerRenderer(props: RenderHeaderCellProps<T>) {
         return <DraggableHeaderRenderer {...props} onColumnsReorder={handleColumnsReorder} />;
       }
 
@@ -336,7 +338,7 @@ export const DataTable = forwardRef<any, DataTableProps<any>>(
         if (column.preventReorder || column.frozen) {
           return column;
         }
-        return { ...column, headerRenderer, _priorHeaderRenderer: column.headerRenderer };
+        return { ...column, headerRenderer, _priorrenderHeaderCell: column.renderHeaderCell };
       });
     }, [columns, allowReorder]);
 
@@ -371,6 +373,17 @@ export const DataTable = forwardRef<any, DataTableProps<any>>(
       configIdLinkRenderer(serverUrl, org);
     }
 
+    const handleCellDoubleClick = useCallback(({ row, column, selectCell }: CellClickArgs<any, any>) => {
+      if (window.isSecureContext) {
+        let value = row[column.key];
+        if (value && !isString(value)) {
+          value = JSON.stringify(value);
+        }
+        navigator.clipboard.writeText(value);
+        selectCell(false);
+      }
+    }, []);
+
     return (
       <ContextMenuContext.Provider value={new Map()}>
         <DataTableGenericContext.Provider value={{ ...context, rows: filteredRows, columns }}>
@@ -392,6 +405,7 @@ export const DataTable = forwardRef<any, DataTableProps<any>>(
               onSortColumnsChange={setSortColumns}
               rowKeyGetter={getRowKey}
               defaultColumnOptions={{ resizable: true, sortable: true, ...rest.defaultColumnOptions }}
+              onCellDoubleClick={handleCellDoubleClick}
               {...rest}
             />
           </DataTableFilterContext.Provider>
diff --git a/libs/ui/src/lib/data-table/DataTableRenderers.tsx b/libs/ui/src/lib/data-table/DataTableRenderers.tsx
index e3817676f..3ac0a3026 100644
--- a/libs/ui/src/lib/data-table/DataTableRenderers.tsx
+++ b/libs/ui/src/lib/data-table/DataTableRenderers.tsx
@@ -9,8 +9,8 @@ import formatISO from 'date-fns/formatISO';
 import parseISO from 'date-fns/parseISO';
 import isBoolean from 'lodash/isBoolean';
 import isFunction from 'lodash/isFunction';
-import { Fragment, FunctionComponent, memo, MutableRefObject, useContext, useEffect, useRef, useState } from 'react';
-import { FormatterProps, GroupFormatterProps, headerRenderer, HeaderRendererProps, useFocusRef, useRowSelection } from 'react-data-grid';
+import { Fragment, FunctionComponent, MutableRefObject, memo, useContext, useEffect, useRef, useState } from 'react';
+import { RenderCellProps, RenderGroupCellProps, RenderHeaderCellProps, renderHeaderCell, useRowSelection } from 'react-data-grid';
 import { useDrag, useDrop } from 'react-dnd';
 import Checkbox from '../form/checkbox/Checkbox';
 import DatePicker from '../form/date/DatePicker';
@@ -56,7 +56,7 @@ export function configIdLinkRenderer(serverUrl: string, org: SalesforceOrgUi) {
 /**
  * DRAGGABLE COLUMNS, ALLOW REORDERING
  */
-interface DraggableHeaderRendererProps<R> extends HeaderRendererProps<R> {
+interface DraggableHeaderRendererProps<R> extends RenderHeaderCellProps<R> {
   onColumnsReorder: (sourceKey: string, targetKey: string) => void;
 }
 
@@ -94,7 +94,7 @@ export function DraggableHeaderRenderer<R>({ onColumnsReorder, column, ...props
     >
       {(column as any)._priorHeaderRenderer
         ? (column as any)._priorHeaderRenderer({ column, ...props })
-        : headerRenderer({ column, ...props })}
+        : renderHeaderCell({ column, ...props })}
     </div>
   );
 }
@@ -102,7 +102,7 @@ export function DraggableHeaderRenderer<R>({ onColumnsReorder, column, ...props
 /**
  * SELECT ALL CHECKBOX HEADER
  */
-export function SelectHeaderRenderer<T>(props: HeaderRendererProps<T>) {
+export function SelectHeaderRenderer<T>(props: RenderHeaderCellProps<T>) {
   const { column } = props;
   const [isRowSelected, onRowSelectionChange] = useRowSelection();
 
@@ -119,7 +119,7 @@ export function SelectHeaderRenderer<T>(props: HeaderRendererProps<T>) {
   );
 }
 
-export function SelectHeaderGroupRenderer<T>(props: GroupFormatterProps<T>) {
+export function SelectHeaderGroupRenderer<T>(props: RenderGroupCellProps<T>) {
   const { column, groupKey, row, childRows } = props;
   const [isRowSelected, onRowSelectionChange] = useRowSelection();
 
@@ -140,12 +140,11 @@ export function SelectHeaderGroupRenderer<T>(props: GroupFormatterProps<T>) {
 }
 
 export function FilterRenderer<R, SR, T extends HTMLOrSVGElement>({
-  isCellSelected,
   onSort,
   sortDirection,
   column,
   children,
-}: HeaderRendererProps<R, SR> & {
+}: RenderHeaderCellProps<R, SR> & {
   children: (
     args: HeaderFilterProps & {
       ref?: React.RefObject<T>;
@@ -154,7 +153,6 @@ export function FilterRenderer<R, SR, T extends HTMLOrSVGElement>({
   ) => React.ReactElement;
 }) {
   const { filters, filterSetValues, portalRefForFilters, updateFilter } = useContext(DataTableFilterContext);
-  const { ref, tabIndex } = useFocusRef<T>(isCellSelected);
 
   const iconName: IconName = sortDirection === 'ASC' ? 'arrowup' : 'arrowdown';
 
@@ -165,8 +163,6 @@ export function FilterRenderer<R, SR, T extends HTMLOrSVGElement>({
         {sortDirection && <Icon type="utility" icon={iconName} className="slds-icon slds-icon-text-default slds-icon_xx-small" />}
         <div>
           {children({
-            ref,
-            tabIndex,
             columnKey: column.key,
             filters: filters[column.key],
             filterSetValues,
@@ -536,8 +532,8 @@ export const HeaderTimeFilter = memo(({ columnKey, filter, updateFilter }: Heade
 
 // CELL RENDERERS
 /** Generic cell renderer when the type of data is unknown */
-export function GenericRenderer(formatterProps: FormatterProps<RowWithKey>) {
-  const { column, row } = formatterProps;
+export function GenericRenderer(RenderCellProps: RenderCellProps<RowWithKey>) {
+  const { column, row } = RenderCellProps;
 
   if (!row) {
     return <div />;
@@ -548,15 +544,15 @@ export function GenericRenderer(formatterProps: FormatterProps<RowWithKey>) {
   if (value instanceof Date) {
     value = dataTableDateFormatter(value);
   } else if (isBoolean(value)) {
-    return <BooleanRenderer {...formatterProps} />;
+    return <BooleanRenderer {...RenderCellProps} />;
   } else if (value && typeof value === 'object') {
-    value = <ComplexDataRenderer {...formatterProps} />;
+    value = <ComplexDataRenderer {...RenderCellProps} />;
   }
 
   return <div className="slds-truncate">{value}</div>;
 }
 
-export function SelectFormatter<T>(props: FormatterProps<T>) {
+export function SelectFormatter<T>(props: RenderCellProps<T>) {
   const { column, row } = props;
   const [isRowSelected, onRowSelectionChange] = useRowSelection();
 
@@ -571,7 +567,7 @@ export function SelectFormatter<T>(props: FormatterProps<T>) {
   );
 }
 
-export function ValueOrLoadingRenderer<T extends { loading: boolean }>({ column, row }: FormatterProps<T>) {
+export function ValueOrLoadingRenderer<T extends { loading: boolean }>({ column, row }: RenderCellProps<T>) {
   if (!row) {
     return <div />;
   }
@@ -583,7 +579,7 @@ export function ValueOrLoadingRenderer<T extends { loading: boolean }>({ column,
   return <div>{value}</div>;
 }
 
-export const ComplexDataRenderer: FunctionComponent<FormatterProps<RowWithKey, unknown>> = ({ column, row }) => {
+export const ComplexDataRenderer: FunctionComponent<RenderCellProps<RowWithKey, unknown>> = ({ column, row }) => {
   const value = row[column.key];
   const [isActive, setIsActive] = useState(false);
   const [jsonValue] = useState(JSON.stringify(value || '', null, 2));
@@ -627,7 +623,7 @@ export const ComplexDataRenderer: FunctionComponent<FormatterProps<RowWithKey, u
   );
 };
 
-export const IdLinkRenderer: FunctionComponent<FormatterProps<any, unknown>> = ({ column, row, onRowChange, isCellSelected }) => {
+export const IdLinkRenderer: FunctionComponent<RenderCellProps<any, unknown>> = ({ column, row, onRowChange }) => {
   const value = row[column.key];
   const { skipFrontDoorAuth, url } = column.key === 'Id' ? getSfdcRetUrl(value, row) : { skipFrontDoorAuth: false, url: `/${value}` };
   return (
@@ -661,7 +657,7 @@ export const ActionRenderer: FunctionComponent<{ row: any }> = ({ row }) => {
   );
 };
 
-export const BooleanRenderer: FunctionComponent<FormatterProps<any, unknown>> = ({ column, row, onRowChange, isCellSelected }) => {
+export const BooleanRenderer: FunctionComponent<RenderCellProps<any, unknown>> = ({ column, row }) => {
   const value = row[column.key];
   return (
     <Checkbox
diff --git a/libs/ui/src/lib/data-table/DataTableSubqueryRenderer.tsx b/libs/ui/src/lib/data-table/DataTableSubqueryRenderer.tsx
index 97aa202df..fdaa660ad 100644
--- a/libs/ui/src/lib/data-table/DataTableSubqueryRenderer.tsx
+++ b/libs/ui/src/lib/data-table/DataTableSubqueryRenderer.tsx
@@ -5,7 +5,7 @@ import { Maybe, SalesforceOrgUi } from '@jetstream/types';
 import copyToClipboard from 'copy-to-clipboard';
 import type { QueryResult } from 'jsforce';
 import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react';
-import { FormatterProps } from 'react-data-grid';
+import { RenderCellProps } from 'react-data-grid';
 import RecordDownloadModal from '../file-download-modal/RecordDownloadModal';
 import Grid from '../grid/Grid';
 import AutoFullHeightContainer from '../layout/AutoFullHeightContainer';
@@ -13,6 +13,7 @@ import Modal from '../modal/Modal';
 import { ContextMenuItem } from '../popover/ContextMenu';
 import Icon from '../widgets/Icon';
 import Spinner from '../widgets/Spinner';
+import { DataTable } from './DataTable';
 import { DataTableSubqueryContext } from './data-table-context';
 import {
   ColumnWithFilter,
@@ -23,15 +24,14 @@ import {
   SubqueryContext,
 } from './data-table-types';
 import {
+  NON_DATA_COLUMN_KEYS,
+  TABLE_CONTEXT_MENU_ITEMS,
   copySalesforceRecordTableDataToClipboard,
   getRowId,
   getSubqueryModalTagline,
-  NON_DATA_COLUMN_KEYS,
-  TABLE_CONTEXT_MENU_ITEMS,
 } from './data-table-utils';
-import { DataTable } from './DataTable';
 
-export const SubqueryRenderer: FunctionComponent<FormatterProps<RowWithKey, unknown>> = ({ column, row, onRowChange, isCellSelected }) => {
+export const SubqueryRenderer: FunctionComponent<RenderCellProps<RowWithKey, unknown>> = ({ column, row, onRowChange }) => {
   const isMounted = useRef(true);
   const [isActive, setIsActive] = useState(false);
   const [modalTagline, setModalTagline] = useState<Maybe<string>>(null);
@@ -305,7 +305,6 @@ function ModalDataTable({
                 data={rows}
                 columns={columns}
                 getRowKey={getRowId}
-                // onCopy={handleCopy}
                 rowHeight={28.5}
                 selectedRows={selectedRows}
                 onSelectedRowsChange={setSelectedRows as any}
diff --git a/libs/ui/src/lib/data-table/SalesforceRecordDataTable.tsx b/libs/ui/src/lib/data-table/SalesforceRecordDataTable.tsx
index c43bb8039..c77dc2d11 100644
--- a/libs/ui/src/lib/data-table/SalesforceRecordDataTable.tsx
+++ b/libs/ui/src/lib/data-table/SalesforceRecordDataTable.tsx
@@ -7,7 +7,7 @@ import { MapOf, Maybe, SalesforceOrgUi } from '@jetstream/types';
 import type { Field } from 'jsforce';
 import uniqueId from 'lodash/uniqueId';
 import { Fragment, FunctionComponent, ReactNode, memo, useCallback, useEffect, useRef, useState } from 'react';
-import { Column, CopyEvent } from 'react-data-grid';
+import { Column } from 'react-data-grid';
 import SearchInput from '../form/search-input/SearchInput';
 import Grid from '../grid/Grid';
 import AutoFullHeightContainer from '../layout/AutoFullHeightContainer';
@@ -242,12 +242,6 @@ export const SalesforceRecordDataTable: FunctionComponent<SalesforceRecordDataTa
       setSelectedRows(rows);
     }, []);
 
-    const handleCopy = useCallback(({ sourceRow, sourceColumnKey }: CopyEvent<RowWithKey>) => {
-      if (window.isSecureContext) {
-        navigator.clipboard.writeText(sourceRow[sourceColumnKey]);
-      }
-    }, []);
-
     const handleColumnReorder = useCallback((newFields: string[]) => {
       onFields({ allFields: newFields, visibleFields: newFields });
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -300,7 +294,6 @@ export const SalesforceRecordDataTable: FunctionComponent<SalesforceRecordDataTa
               includeQuickFilter
               quickFilterText={globalFilter}
               getRowKey={getRowId}
-              onCopy={handleCopy}
               rowHeight={28.5}
               selectedRows={selectedRows}
               onReorderColumns={handleColumnReorder}
diff --git a/libs/ui/src/lib/data-table/data-table-utils.tsx b/libs/ui/src/lib/data-table/data-table-utils.tsx
index 8320e949b..2295bbfe4 100644
--- a/libs/ui/src/lib/data-table/data-table-utils.tsx
+++ b/libs/ui/src/lib/data-table/data-table-utils.tsx
@@ -92,8 +92,8 @@ export function getColumnsForGenericTable(
       resizable: true,
       sortable: true,
       filters: defaultFilters,
-      formatter: GenericRenderer,
-      headerRenderer: (props) => (
+      renderCell: GenericRenderer,
+      renderHeaderCell: (props) => (
         <FilterRenderer {...props}>
           {({ filters, filterSetValues, portalRefForFilters, updateFilter }) => (
             <HeaderFilter
@@ -171,8 +171,8 @@ export function getColumnDefinitions(results: QueryResults<any>, isTooling: bool
       ...SelectColumn,
       key: SELECT_COLUMN_KEY,
       resizable: false,
-      formatter: SelectFormatter,
-      headerRenderer: SelectHeaderRenderer,
+      renderCell: SelectFormatter,
+      renderHeaderCell: SelectHeaderRenderer,
     });
     if (includeRecordActions) {
       parentColumns.unshift({
@@ -180,7 +180,7 @@ export function getColumnDefinitions(results: QueryResults<any>, isTooling: bool
         name: '',
         resizable: false,
         width: 100,
-        formatter: ActionRenderer,
+        renderCell: ActionRenderer,
         frozen: true,
         sortable: false,
       });
@@ -218,7 +218,7 @@ function getQueryResultColumn(
     sortable: true,
     width: 200,
     filters: ['TEXT', 'SET'],
-    headerRenderer: (props) => (
+    renderHeaderCell: (props) => (
       <FilterRenderer {...props}>
         {({ filters, filterSetValues, portalRefForFilters, updateFilter }) => (
           <HeaderFilter
@@ -281,7 +281,7 @@ function getColumnTypeFromQueryResultsColumn(col: QueryResultsColumn): ColumnTyp
  */
 export function setColumnFromType<T>(key: string, fieldType: ColumnType, defaultProps?: Partial<Mutable<ColumnWithFilter<T>>>) {
   const column: Partial<Mutable<ColumnWithFilter<T>>> = { ...defaultProps };
-  column.headerRenderer = (props) => (
+  column.renderHeaderCell = (props) => (
     <FilterRenderer {...props}>
       {({ filters, filterSetValues, portalRefForFilters, updateFilter }) => (
         <HeaderFilter
@@ -326,7 +326,7 @@ export function updateColumnFromType(column: Mutable<ColumnWithFilter<any>>, fie
       break;
     case 'subquery':
       column.filters = ['SET'];
-      column.formatter = SubqueryRenderer;
+      column.renderCell = SubqueryRenderer;
       column.getValue = ({ column, row }) => {
         const results = row[column.key];
         if (!results || !results.totalSize) {
@@ -337,33 +337,33 @@ export function updateColumnFromType(column: Mutable<ColumnWithFilter<any>>, fie
       break;
     case 'object':
       column.filters = [];
-      column.formatter = ComplexDataRenderer;
+      column.renderCell = ComplexDataRenderer;
       break;
     case 'location':
-      column.formatter = ({ column, row }) => dataTableLocationFormatter(row[column.key]);
+      column.renderCell = ({ column, row }) => dataTableLocationFormatter(row[column.key]);
       column.getValue = ({ column, row }) => dataTableLocationFormatter(row[column.key]);
       break;
     case 'date':
       column.filters = ['DATE', 'SET'];
-      column.formatter = ({ column, row }) => dataTableDateFormatter(row[column.key]);
+      column.renderCell = ({ column, row }) => dataTableDateFormatter(row[column.key]);
       column.getValue = ({ column, row }) => dataTableDateFormatter(row[column.key]);
       break;
     case 'time':
       column.filters = ['TIME', 'SET'];
-      column.formatter = ({ column, row }) => dataTableTimeFormatter(row[column.key]);
+      column.renderCell = ({ column, row }) => dataTableTimeFormatter(row[column.key]);
       column.getValue = ({ column, row }) => dataTableTimeFormatter(row[column.key]);
       break;
     case 'boolean':
       column.filters = ['BOOLEAN_SET'];
-      column.formatter = BooleanRenderer;
+      column.renderCell = BooleanRenderer;
       column.width = 100;
       break;
     case 'address':
-      column.formatter = ({ column, row }) => dataTableAddressValueFormatter(row[column.key]);
+      column.renderCell = ({ column, row }) => dataTableAddressValueFormatter(row[column.key]);
       column.getValue = ({ column, row }) => dataTableAddressValueFormatter(row[column.key]);
       break;
     case 'salesforceId':
-      column.formatter = IdLinkRenderer;
+      column.renderCell = IdLinkRenderer;
       column.width = 175;
       break;
     default:
diff --git a/package.json b/package.json
index 919338e45..0514a6e2c 100644
--- a/package.json
+++ b/package.json
@@ -329,7 +329,7 @@
     "quill": "^1.3.7",
     "quill-delta": "^3.6.3",
     "react": "18.2.0",
-    "react-data-grid": "7.0.0-beta.28",
+    "react-data-grid": "7.0.0-beta.34",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.2.0",
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 3be89888d..8af09a071 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -28,6 +28,7 @@
       "@jetstream/shared/client-logger": ["libs/shared/client-logger/src/index.ts"],
       "@jetstream/shared/constants": ["libs/shared/constants/src/index.ts"],
       "@jetstream/shared/data": ["libs/shared/data/src/index.ts"],
+      "@jetstream/shared/data-table": ["libs/shared/data/src/index.ts"],
       "@jetstream/shared/node-utils": ["libs/shared/node-utils/src/index.ts"],
       "@jetstream/shared/ui-utils": ["libs/shared/ui-utils/src/index.ts"],
       "@jetstream/shared/utils": ["libs/shared/utils/src/index.ts"],
diff --git a/yarn.lock b/yarn.lock
index 3362d261a..8dd87c945 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -22874,10 +22874,10 @@ react-colorful@^5.6.1:
   resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
   integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
 
-react-data-grid@7.0.0-beta.28:
-  version "7.0.0-beta.28"
-  resolved "https://registry.yarnpkg.com/react-data-grid/-/react-data-grid-7.0.0-beta.28.tgz#744edf7ae54254ade87d57c928137437f7f9bf69"
-  integrity sha512-lckE2ozj8iZrYYi1ZzKNVaJvxxvxkxJXhjh57BXSoCayj7rg5bBIoLKmb4XGgMF9LNAuNQ71uNQKOYsJaZo11g==
+react-data-grid@7.0.0-beta.34:
+  version "7.0.0-beta.34"
+  resolved "https://registry.yarnpkg.com/react-data-grid/-/react-data-grid-7.0.0-beta.34.tgz#399f7456da495cede15782d64e5ffb6e64f4ea01"
+  integrity sha512-OwOP77vabb47xhbvHCXJ2QwFHsfduoLJhgXncGe0gIjrrwJ9xr2SdfEe/U6KAfHnLuBDxCDoY0SOgfJiOQtd+Q==
   dependencies:
     clsx "^1.1.1"