From ab36f99b5c0ff2002bb5d4f70a757293af656509 Mon Sep 17 00:00:00 2001
From: Austin Turner <paustint@gmail.com>
Date: Sun, 26 Nov 2023 10:37:36 -0700
Subject: [PATCH] Upgrade React Data Grid

Moved grouped tables to DataTree component

Moved data table logic into a hook to be used by both components

Deprecated column dragging using react-dnd in favor of native drag support
---
 .../app/components/core/ViewChildRecords.tsx  |   4 +-
 .../debug-log-viewer/DebugLogViewerTable.tsx  |   9 +-
 .../deploy/DeployMetadataDeploymentTable.tsx  |   4 +-
 .../DeployMetadataHistoryTable.tsx            |   7 +-
 .../ManagePermissionsEditorFieldTable.tsx     |   4 +-
 .../PlatformEventMonitorEvents.tsx            |   8 +-
 .../SalesforceApiExamplesModal.tsx            |  13 +-
 libs/ui/src/index.ts                          |   1 +
 libs/ui/src/lib/data-table/DataTable.tsx      | 397 ++----------------
 .../src/lib/data-table/DataTableRenderers.tsx |  45 +-
 .../data-table/DataTableSubqueryRenderer.tsx  |   1 -
 libs/ui/src/lib/data-table/DataTree.tsx       | 112 +++++
 .../data-table/SalesforceRecordDataTable.tsx  |   1 -
 .../ui/src/lib/data-table/data-table-types.ts |  12 +-
 .../src/lib/data-table/data-table-utils.tsx   |   1 +
 libs/ui/src/lib/data-table/useDataTable.tsx   | 391 +++++++++++++++++
 package.json                                  |   2 +-
 tsconfig.base.json                            |   2 +-
 yarn.lock                                     |  15 +-
 19 files changed, 594 insertions(+), 435 deletions(-)
 create mode 100644 libs/ui/src/lib/data-table/DataTree.tsx
 create mode 100644 libs/ui/src/lib/data-table/useDataTable.tsx

diff --git a/apps/jetstream/src/app/components/core/ViewChildRecords.tsx b/apps/jetstream/src/app/components/core/ViewChildRecords.tsx
index 0bcbf960d..6b85c779f 100644
--- a/apps/jetstream/src/app/components/core/ViewChildRecords.tsx
+++ b/apps/jetstream/src/app/components/core/ViewChildRecords.tsx
@@ -9,7 +9,7 @@ import { Maybe, Record, SalesforceOrgUi } from '@jetstream/types';
 import {
   AutoFullHeightContainer,
   ColumnWithFilter,
-  DataTable,
+  DataTree,
   Grid,
   Icon,
   PopoverErrorButton,
@@ -346,7 +346,7 @@ export const ViewChildRecords: FunctionComponent<ViewChildRecordsProps> = ({
         </Tooltip>
       </Grid>
       <AutoFullHeightContainer fillHeight setHeightAttr bottomBuffer={155}>
-        <DataTable
+        <DataTree
           columns={columns}
           data={rows}
           getRowKey={getRowId}
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 ce62a98ea..4a4e3f8bf 100644
--- a/apps/jetstream/src/app/components/debug-log-viewer/DebugLogViewerTable.tsx
+++ b/apps/jetstream/src/app/components/debug-log-viewer/DebugLogViewerTable.tsx
@@ -29,43 +29,48 @@ const COLUMNS: ColumnWithFilter<ApexLogWithViewed>[] = [
     width: 12,
     renderCell: LogViewedRenderer,
     resizable: false,
-    // TODO: filter for this
   },
   {
     ...setColumnFromType('LogUser.Name', 'text'),
     name: 'User',
     key: 'LogUser.Name',
     width: 125,
+    draggable: true,
   },
   {
     ...setColumnFromType('Application', 'text'),
     name: 'Application',
     key: 'Application',
     width: 125,
+    draggable: true,
   },
   {
     ...setColumnFromType('Operation', 'text'),
     name: 'Operation',
     key: 'Operation',
     width: 125,
+    draggable: true,
   },
   {
     ...setColumnFromType('Status', 'text'),
     name: 'Status',
     key: 'Status',
     width: 125,
+    draggable: true,
   },
   {
     ...setColumnFromType('LogLength', 'text'),
     name: 'Size',
     key: 'LogLength',
     width: 125,
+    draggable: true,
   },
   {
     ...setColumnFromType('LastModifiedDate', 'date'),
     name: 'Time',
     key: 'LastModifiedDate',
     width: 202,
+    draggable: true,
   },
 ];
 
@@ -96,7 +101,7 @@ export const DebugLogViewerTable: FunctionComponent<DebugLogViewerTableProps> =
 
   return (
     <AutoFullHeightContainer fillHeight setHeightAttr bottomBuffer={75}>
-      <DataTable allowReorder columns={COLUMNS} data={logs} getRowKey={getRowId} onCellClick={handleSelectionChanged} />
+      <DataTable columns={COLUMNS} data={logs} getRowKey={getRowId} onCellClick={handleSelectionChanged} />
     </AutoFullHeightContainer>
   );
 };
diff --git a/apps/jetstream/src/app/components/deploy/DeployMetadataDeploymentTable.tsx b/apps/jetstream/src/app/components/deploy/DeployMetadataDeploymentTable.tsx
index 7179cba61..22a3c7df4 100644
--- a/apps/jetstream/src/app/components/deploy/DeployMetadataDeploymentTable.tsx
+++ b/apps/jetstream/src/app/components/deploy/DeployMetadataDeploymentTable.tsx
@@ -1,5 +1,5 @@
 import { formatNumber } from '@jetstream/shared/ui-utils';
-import { AutoFullHeightContainer, ColumnWithFilter, DataTable, DataTableSelectedContext, Grid, Icon, SearchInput } from '@jetstream/ui';
+import { AutoFullHeightContainer, ColumnWithFilter, DataTableSelectedContext, DataTree, Grid, Icon, SearchInput } from '@jetstream/ui';
 import groupBy from 'lodash/groupBy';
 import { FunctionComponent, useEffect, useState } from 'react';
 import { DeployMetadataTableRow } from './deploy-metadata.types';
@@ -60,7 +60,7 @@ export const DeployMetadataDeploymentTable: FunctionComponent<DeployMetadataDepl
         </Grid>
       )}
       <AutoFullHeightContainer fillHeight setHeightAttr delayForSecondTopCalc bottomBuffer={15}>
-        <DataTable
+        <DataTree
           columns={columns}
           data={rows}
           getRowKey={getRowId}
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 316885f67..2e634f3ba 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
@@ -18,18 +18,21 @@ const COLUMNS: ColumnWithFilter<SalesforceDeployHistoryItem>[] = [
     name: 'Started',
     key: 'start',
     width: 200,
+    draggable: true,
   },
   {
     ...setColumnFromType('type', 'text'),
     name: 'Type',
     key: 'type',
     width: 165,
+    draggable: true,
     renderCell: ({ column, row }) => TYPE_MAP[row[column.key]],
   },
   {
     ...setColumnFromType('destinationOrg', 'text'),
     name: 'Deployed To Org',
     key: 'destinationOrg',
+    draggable: true,
     renderCell: OrgRenderer,
     getValue: ({ row }) => row.destinationOrg?.label,
     width: 350,
@@ -38,6 +41,7 @@ const COLUMNS: ColumnWithFilter<SalesforceDeployHistoryItem>[] = [
     ...setColumnFromType('status', 'text'),
     name: 'Status',
     key: 'status',
+    draggable: true,
     renderCell: StatusRenderer,
     width: 150,
   },
@@ -47,6 +51,7 @@ const COLUMNS: ColumnWithFilter<SalesforceDeployHistoryItem>[] = [
     width: 220,
     sortable: false,
     resizable: false,
+    draggable: true,
     renderCell: ActionRenderer,
   },
 ];
@@ -89,7 +94,7 @@ export const DeployMetadataHistoryTable: FunctionComponent<DeployMetadataHistory
     [orgsById, modalRef, onView, onDownload]
   );
   const getRowHeightFn = useMemo(() => getRowHeight(orgsById), [orgsById]);
-  return <DataTable allowReorder columns={COLUMNS} data={items} getRowKey={getRowId} context={context} rowHeight={getRowHeightFn} />;
+  return <DataTable columns={COLUMNS} data={items} getRowKey={getRowId} context={context} rowHeight={getRowHeightFn} />;
 };
 
 export default DeployMetadataHistoryTable;
diff --git a/apps/jetstream/src/app/components/manage-permissions/ManagePermissionsEditorFieldTable.tsx b/apps/jetstream/src/app/components/manage-permissions/ManagePermissionsEditorFieldTable.tsx
index 108c9bb90..76d408e67 100644
--- a/apps/jetstream/src/app/components/manage-permissions/ManagePermissionsEditorFieldTable.tsx
+++ b/apps/jetstream/src/app/components/manage-permissions/ManagePermissionsEditorFieldTable.tsx
@@ -1,6 +1,6 @@
 import { useNonInitialEffect } from '@jetstream/shared/ui-utils';
 import { MapOf } from '@jetstream/types';
-import { AutoFullHeightContainer, ColumnWithFilter, DataTable } from '@jetstream/ui';
+import { AutoFullHeightContainer, ColumnWithFilter, DataTree } from '@jetstream/ui';
 import groupBy from 'lodash/groupBy';
 import { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
 import { RowHeightArgs } from 'react-data-grid';
@@ -69,7 +69,7 @@ export const ManagePermissionsEditorFieldTable = forwardRef<any, ManagePermissio
     return (
       <div>
         <AutoFullHeightContainer fillHeight setHeightAttr bottomBuffer={15}>
-          <DataTable
+          <DataTree
             columns={columns}
             data={rows}
             getRowKey={getRowKey}
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 f86f60e52..3c58e1081 100644
--- a/apps/jetstream/src/app/components/platform-event-monitor/PlatformEventMonitorEvents.tsx
+++ b/apps/jetstream/src/app/components/platform-event-monitor/PlatformEventMonitorEvents.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { orderStringsBy } from '@jetstream/shared/utils';
-import { AutoFullHeightContainer, ColumnWithFilter, DataTable } from '@jetstream/ui';
+import { AutoFullHeightContainer, ColumnWithFilter, DataTree } from '@jetstream/ui';
 import groupBy from 'lodash/groupBy';
 import { FunctionComponent, useEffect, useState } from 'react';
 import { RenderCellProps, RowHeightArgs } from 'react-data-grid';
@@ -40,18 +40,21 @@ const columns: ColumnWithFilter<PlatformEventRow>[] = [
     // autoHeight: true,
     renderCell: WrappedTextFormatter,
     cellClass: 'break-all',
+    draggable: true,
   },
   {
     name: 'UUID',
     key: 'uuid',
     width: 160,
     // tooltipField: 'uuid',
+    draggable: true,
   },
   {
     name: 'Replay Id',
     key: 'replayId',
     width: 120,
     // tooltipField: 'replayId',
+    draggable: true,
   },
 ];
 
@@ -107,8 +110,7 @@ export const PlatformEventMonitorEvents: FunctionComponent<PlatformEventMonitorE
 
   return (
     <AutoFullHeightContainer fillHeight setHeightAttr delayForSecondTopCalc bottomBuffer={25}>
-      <DataTable
-        allowReorder
+      <DataTree
         columns={columns}
         data={rows}
         getRowKey={getRowId}
diff --git a/apps/jetstream/src/app/components/salesforce-api/SalesforceApiExamplesModal.tsx b/apps/jetstream/src/app/components/salesforce-api/SalesforceApiExamplesModal.tsx
index f12564aa3..4ca1b624b 100644
--- a/apps/jetstream/src/app/components/salesforce-api/SalesforceApiExamplesModal.tsx
+++ b/apps/jetstream/src/app/components/salesforce-api/SalesforceApiExamplesModal.tsx
@@ -3,7 +3,7 @@ import { logger } from '@jetstream/shared/client-logger';
 import { ANALYTICS_KEYS } from '@jetstream/shared/constants';
 import { salesforceApiReq } from '@jetstream/shared/data';
 import { SalesforceApiRequest } from '@jetstream/types';
-import { AutoFullHeightContainer, ColumnWithFilter, DataTable, Grid, Icon, Modal, setColumnFromType, Spinner } from '@jetstream/ui';
+import { AutoFullHeightContainer, ColumnWithFilter, DataTree, Grid, Icon, Modal, setColumnFromType, Spinner } from '@jetstream/ui';
 import groupBy from 'lodash/groupBy';
 import { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -63,12 +63,12 @@ export const SalesforceApiExamplesModal: FunctionComponent<SalesforceApiExamples
         name: 'Group',
         key: 'groupName',
         width: 150,
-        preventReorder: true,
       },
       {
         name: 'action',
         key: 'action',
         width: 150,
+        draggable: true,
         renderCell: ({ row }) => {
           return (
             <button className={'slds-button slds-text-link_reset slds-text-link'} onClick={() => handleExecute(row)}>
@@ -77,9 +77,9 @@ export const SalesforceApiExamplesModal: FunctionComponent<SalesforceApiExamples
           );
         },
       },
-      { ...setColumnFromType('name', 'text'), name: 'Name', key: 'name', width: 250 },
-      { ...setColumnFromType('method', 'text'), name: 'Method', key: 'method', width: 110 },
-      { ...setColumnFromType('url', 'text'), name: 'url', key: 'url' /** flex: 1 */ },
+      { ...setColumnFromType('name', 'text'), name: 'Name', key: 'name', width: 250, draggable: true },
+      { ...setColumnFromType('method', 'text'), name: 'Method', key: 'method', width: 110, draggable: true },
+      { ...setColumnFromType('url', 'text'), name: 'url', key: 'url', draggable: true /** flex: 1 */ },
     ];
     return columns;
   }, []);
@@ -131,8 +131,7 @@ export const SalesforceApiExamplesModal: FunctionComponent<SalesforceApiExamples
           >
             {isLoading && <Spinner />}
             <AutoFullHeightContainer fillHeight setHeightAttr bottomBuffer={250}>
-              <DataTable
-                allowReorder
+              <DataTree
                 columns={COLUMNS}
                 data={requests}
                 getRowKey={(row: SalesforceApiRequest) => row.id}
diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
index 81e34750e..26e2ac254 100644
--- a/libs/ui/src/index.ts
+++ b/libs/ui/src/index.ts
@@ -10,6 +10,7 @@ export * from './lib/color-picker/ColorSwatches';
 export * from './lib/confirmation-dialog/ConfirmationDialog';
 export * from './lib/data-table/DataTable';
 export * from './lib/data-table/DataTableRenderers';
+export * from './lib/data-table/DataTree';
 export * from './lib/data-table/SalesforceRecordDataTable';
 export * from './lib/data-table/data-table-context';
 export * from './lib/data-table/data-table-formatters';
diff --git a/libs/ui/src/lib/data-table/DataTable.tsx b/libs/ui/src/lib/data-table/DataTable.tsx
index f16dd4035..b356b25fe 100644
--- a/libs/ui/src/lib/data-table/DataTable.tsx
+++ b/libs/ui/src/lib/data-table/DataTable.tsx
@@ -1,164 +1,12 @@
-import { IconName } from '@jetstream/icon-factory';
-import { logger } from '@jetstream/shared/client-logger';
-import { hasCtrlOrMeta, isArrowKey, isCKey, isEnterKey, isVKey, useNonInitialEffect } from '@jetstream/shared/ui-utils';
-import { orderObjectsBy, orderStringsBy } from '@jetstream/shared/utils';
 import { SalesforceOrgUi } from '@jetstream/types';
-import copyToClipboard from 'copy-to-clipboard';
-import escapeRegExp from 'lodash/escapeRegExp';
-import isArray from 'lodash/isArray';
-import isNil from 'lodash/isNil';
-import isObject from 'lodash/isObject';
-import uniqueId from 'lodash/uniqueId';
-import { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useReducer, useState } from 'react';
-import DataGrid, {
-  CellKeyDownArgs,
-  CellKeyboardEvent,
-  DataGridProps,
-  Row as GridRow,
-  RenderHeaderCellProps,
-  RenderRowProps,
-  RenderSortStatusProps,
-  Renderers,
-  SortColumn,
-} from 'react-data-grid';
+import { forwardRef } from 'react';
+import DataGrid, { DataGridProps } 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 { ContextMenuContext, ContextMenuItem } from '../popover/ContextMenu';
 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, NON_DATA_COLUMN_KEYS, filterRecord, getSearchTextByRow, isFilterActive, resetFilter } from './data-table-utils';
-
-function renderSortStatus({ sortDirection, priority }: RenderSortStatusProps) {
-  const iconName: IconName = sortDirection === 'ASC' ? 'arrowup' : 'arrowdown';
-  return sortDirection !== undefined ? (
-    <>
-      <Icon type="utility" icon={iconName} className="slds-icon slds-icon-text-default slds-icon_xx-small" />
-      <span>{priority}</span>
-    </>
-  ) : null;
-}
-
-interface ContextMenuRendererProps {
-  containerId?: string;
-  props: RenderRowProps<any>;
-  contextMenuItems: ContextMenuItem[];
-  contextMenuAction: (item: ContextMenuItem, data: ContextMenuActionData<unknown>) => void;
-}
-
-function ContextMenuRenderer({ containerId, props, contextMenuItems, contextMenuAction }: ContextMenuRendererProps) {
-  const { columns, rows } = useContext(DataTableGenericContext);
-  return (
-    <ContextMenu
-      containerId={containerId}
-      menu={contextMenuItems}
-      onItemSelected={(item) => {
-        if (!props.selectedCellIdx) {
-          return;
-        }
-        contextMenuAction(item, {
-          row: props.row,
-          rowIdx: props.rowIdx,
-          rows,
-          column: columns[props.selectedCellIdx],
-          columns,
-        });
-      }}
-    >
-      <GridRow data-id={containerId} {...props} />
-    </ContextMenu>
-  );
-}
-
-interface State<T> {
-  columnMap: Map<string, ColumnWithFilter<T>>;
-  filters: Record<string, DataTableFilter[]>;
-  filterSetValues: Record<string, string[]>;
-}
-
-type Action =
-  | { type: 'INIT'; payload: { columns: ColumnWithFilter<any>[]; data: any[]; ignoreRowInSetFilter?: (row: any) => boolean } }
-  | { type: 'UPDATE_FILTER'; payload: { column: string; filter: DataTableFilter } };
-
-// Reducer is used to limit the number of re-renders because of dependent state
-function reducer<T>(state: State<T>, action: Action): State<T> {
-  switch (action.type) {
-    case 'INIT': {
-      const { columns, data, ignoreRowInSetFilter } = action.payload;
-
-      const columnMap = new Map(columns.map((column) => [column.key, column]));
-
-      const filters = columns.reduce((acc: Record<string, DataTableFilter[]>, column) => {
-        if (Array.isArray(column.filters)) {
-          acc[column.key] = column.filters.map((filter) => resetFilter(filter, []));
-        }
-        return acc;
-      }, {});
-
-      // NOTICE: This function mutates filters
-      const filterSetValues = Object.keys(filters)
-        .filter((columnKey) => Array.isArray(filters[columnKey]) && filters[columnKey].some(({ type }) => FILTER_SET_TYPES.has(type)))
-        .reduce((acc: Record<string, string[]>, columnKey) => {
-          const filter = filters[columnKey].find(({ type }) => FILTER_SET_TYPES.has(type));
-          const column = columnMap.get(columnKey);
-          const getValueFn = columnMap.get(columnKey)?.getValue || (({ row, column }) => row[columnKey]);
-          if (!filter || !column) {
-            return acc;
-          }
-          if (filter.type === 'BOOLEAN_SET') {
-            acc[columnKey] = ['True', 'False'];
-          } else {
-            acc[columnKey] = orderStringsBy(
-              Array.from(
-                new Set(
-                  data
-                    .filter((row) => (ignoreRowInSetFilter ? !ignoreRowInSetFilter(row) : true))
-                    .map((row) => {
-                      const rowValue = getValueFn({ row, column });
-                      // TODO: we need some additional function to get the filter value and also compare the value when filtering
-                      return isNil(rowValue) ? EMPTY_FIELD : String(rowValue);
-                    })
-                )
-              )
-            );
-          }
-
-          // Set filter default values to all values in set
-          filter.value = acc[columnKey];
-
-          return acc;
-        }, {});
-
-      return {
-        ...state,
-        columnMap,
-        filters,
-        filterSetValues,
-      };
-    }
-    case 'UPDATE_FILTER': {
-      const { column, filter } = action.payload;
-      return {
-        ...state,
-        filters: {
-          ...state.filters,
-          [column]: state.filters[column].map((currFilter) => (currFilter.type === filter.type ? filter : currFilter)),
-        },
-      };
-    }
-  }
-}
-
-export interface DataTableRef<T> {
-  hasSortApplied: () => boolean;
-  getFilteredAndSortedRows: () => readonly T[];
-  hasReorderedColumns: () => boolean;
-  /** Takes into account re-ordered columns */
-  getCurrentColumns: () => ColumnWithFilter<T>[];
-  /** Takes into account re-ordered columns */
-  getCurrentColumnNames: () => string[];
-}
+import { ColumnWithFilter, ContextMenuActionData, RowWithKey } from './data-table-types';
+import { useDataTable } from './useDataTable';
 
 export interface DataTableProps<T = RowWithKey, TContext = Record<string, any>>
   extends Omit<DataGridProps<T>, 'columns' | 'rows' | 'rowKeyGetter'> {
@@ -169,7 +17,6 @@ export interface DataTableProps<T = RowWithKey, TContext = Record<string, any>>
   quickFilterText?: string | null;
   includeQuickFilter?: boolean;
   context?: TContext;
-  allowReorder?: boolean;
   /** Must be stable to avoid constant re-renders */
   contextMenuItems?: ContextMenuItem[];
   /** Must be stable to avoid constant re-renders */
@@ -191,7 +38,6 @@ export const DataTable = forwardRef<any, DataTableProps<any>>(
       quickFilterText,
       includeQuickFilter,
       context,
-      allowReorder,
       contextMenuItems,
       contextMenuAction,
       getRowKey,
@@ -203,209 +49,35 @@ export const DataTable = forwardRef<any, DataTableProps<any>>(
     }: DataTableProps<T>,
     ref
   ) => {
-    const [gridId] = useState(() => uniqueId('grid-'));
-    const [columns, setColumns] = useState(_columns || []);
-    const [sortColumns, setSortColumns] = useState<readonly SortColumn[]>([]);
-    const [rowFilterText, setRowFilterText] = useState<Record<string, string>>({});
-    const [renderers, setRenderers] = useState<Renderers<T, unknown>>({});
-
-    useEffect(() => {
-      if (contextMenuItems && contextMenuAction) {
-        setRenderers({
-          renderSortStatus,
-          renderRow: (key: React.Key, props: RenderRowProps<any>) => {
-            return (
-              <ContextMenuRenderer
-                key={key}
-                containerId={gridId}
-                props={props}
-                contextMenuItems={contextMenuItems}
-                contextMenuAction={contextMenuAction}
-              />
-            );
-          },
-        });
-      } else {
-        setRenderers({ renderSortStatus });
-      }
-    }, [contextMenuAction, contextMenuItems, gridId]);
-
-    const [{ columnMap, filters, filterSetValues }, dispatch] = useReducer(reducer, {
-      columnMap: new Map(),
-      filters: {},
-      filterSetValues: {},
-    });
-
-    useEffect(() => {
-      dispatch({ type: 'INIT', payload: { columns: _columns, data, ignoreRowInSetFilter } });
-    }, [_columns, data, ignoreRowInSetFilter]);
-
-    useNonInitialEffect(() => {
-      setColumns(_columns);
-    }, [_columns]);
-
-    useNonInitialEffect(() => {
-      onReorderColumns && onReorderColumns(columns.filter((column) => !NON_DATA_COLUMN_KEYS.has(column.key)).map(({ key }) => key));
-    }, [columns, onReorderColumns]);
-
-    useEffect(() => {
-      if (Array.isArray(columns) && columns.length && Array.isArray(data) && data.length) {
-        setRowFilterText(getSearchTextByRow(data, columns, getRowKey));
-      } else {
-        setRowFilterText({});
-      }
-    }, [columns, data, getRowKey]);
-
-    const updateFilter = useCallback((column: string, filter: DataTableFilter) => {
-      dispatch({ type: 'UPDATE_FILTER', payload: { column, filter } });
-    }, []);
-
-    const sortedRows = useMemo((): readonly T[] => {
-      if (sortColumns.length === 0) {
-        return data;
-      }
-
-      return orderObjectsBy(
-        data,
-        sortColumns.map(({ columnKey }) => columnKey) as any,
-        sortColumns.map(({ direction }) => (direction === 'ASC' ? 'asc' : 'desc'))
-      );
-    }, [data, sortColumns]);
-
-    const filteredRows = useMemo((): readonly T[] => {
-      let quickFilterRegex: RegExp;
-      if (includeQuickFilter && quickFilterText) {
-        try {
-          quickFilterRegex = new RegExp(escapeRegExp(quickFilterText), 'i');
-        } catch (ex) {
-          logger.warn('Invalid quick filter text', ex);
-        }
-      }
-      return sortedRows.filter((row) => {
-        if (rowAlwaysVisible && rowAlwaysVisible(row)) {
-          return true;
-        }
-        const isVisible = Object.keys(filters)
-          .filter(
-            (columnKey) =>
-              Array.isArray(filters[columnKey]) &&
-              filters[columnKey].length &&
-              filters[columnKey].some((filter) => isFilterActive(filter, sortedRows.length))
-          )
-          .every((columnKey) => {
-            let rowValue = row[columnKey];
-            const column = columnMap.get(columnKey);
-            if (column?.getValue && column) {
-              rowValue = column.getValue({ row, column });
-            }
-            return filters[columnKey]
-              .filter((filter) => isFilterActive(filter, sortedRows.length))
-              .every((filter) => {
-                const filterResult = filterRecord(filter, rowValue);
-                return filterResult;
-              });
-          });
-        // Apply global filter
-        const key = getRowKey(row);
-        if (quickFilterRegex && key && rowFilterText[key]) {
-          return isVisible && quickFilterRegex.test(rowFilterText[key]);
-        }
-        return isVisible;
-      });
-    }, [columnMap, filters, getRowKey, includeQuickFilter, quickFilterText, rowAlwaysVisible, rowFilterText, sortedRows]);
-
-    useEffect(() => {
-      onSortedAndFilteredRowsChange && onSortedAndFilteredRowsChange(filteredRows);
-    }, [filteredRows, onSortedAndFilteredRowsChange]);
-
-    // This will be standard columns unless allowReorder is set to true
-    const draggableColumns = useMemo(() => {
-      if (!allowReorder) {
-        return columns;
-      }
-      function renderHeaderCell(props: RenderHeaderCellProps<T>) {
-        return <DraggableHeaderRenderer {...props} onColumnsReorder={handleColumnsReorder} />;
-      }
-
-      function handleColumnsReorder(sourceKey: string, targetKey: string) {
-        const sourceColumnIndex = columns.findIndex((c) => c.key === sourceKey);
-        const targetColumnIndex = columns.findIndex((c) => c.key === targetKey);
-        const reorderedColumns = [...columns];
-
-        reorderedColumns.splice(targetColumnIndex, 0, reorderedColumns.splice(sourceColumnIndex, 1)[0]);
-
-        setColumns(reorderedColumns);
-      }
-
-      return columns.map((column) => {
-        if (column.preventReorder || column.frozen) {
-          return column;
-        }
-        return { ...column, renderHeaderCell, _priorHeaderRenderer: column.renderHeaderCell };
-      });
-    }, [columns, allowReorder]);
-
-    /**
-     * For columns that have edit mode, by default any keypress will enable edit mode which breaks things like ctrl+c to copy.
-     * Aside from some specific use-cases, we disable the event from being handled by the grid.
-     */
-    function handleCellKeydown(args: CellKeyDownArgs<T, unknown>, event: CellKeyboardEvent) {
-      try {
-        /** Events allowed to be handled by the editor */
-        if (isArrowKey(event) || isEnterKey(event) || (hasCtrlOrMeta(event) && isVKey(event))) {
-          return;
-        }
-
-        /** Custom copy to clipboard */
-        if (hasCtrlOrMeta(event) && isCKey(event)) {
-          const column = args.column as ColumnWithFilter<unknown>;
-          let value = args.row[column.key];
-
-          if (isArray(value) || isObject(value)) {
-            value = JSON.stringify(value);
-          }
-
-          !isNil(value) && copyToClipboard(value);
-        }
-
-        event.preventGridDefault();
-      } catch (ex) {
-        logger.warn('handleCellKeydown Error', ex);
-        event.preventGridDefault();
-        return;
-      }
-    }
-
-    // NOTE: this is not used anywhere, so we may consider removing it.
-    useImperativeHandle<unknown, DataTableRef<T>>(
+    const {
+      gridId,
+      columns,
+      sortColumns,
+      renderers,
+      filters,
+      reorderedColumns,
+      filterSetValues,
+      filteredRows,
+      setSortColumns,
+      updateFilter,
+      handleReorderColumns,
+      handleCellKeydown,
+    } = useDataTable({
+      data,
+      columns: _columns,
+      serverUrl,
+      org,
+      quickFilterText,
+      includeQuickFilter,
+      contextMenuItems,
       ref,
-      () => {
-        return {
-          hasSortApplied: () => sortColumns?.length > 0,
-          getFilteredAndSortedRows: () => filteredRows,
-          hasReorderedColumns: () => {
-            if (!allowReorder) {
-              return false;
-            }
-            const columnKeys = draggableColumns.filter((column) => !NON_DATA_COLUMN_KEYS.has(column.key)).map(({ key }) => key);
-            return (
-              allowReorder &&
-              draggableColumns
-                .filter((column) => !NON_DATA_COLUMN_KEYS.has(column.key))
-                .map(({ key }) => key)
-                .every((key, i) => columnKeys[i] === key)
-            );
-          },
-          getCurrentColumns: () => draggableColumns.filter((column) => !NON_DATA_COLUMN_KEYS.has(column.key)),
-          getCurrentColumnNames: () => draggableColumns.filter((column) => !NON_DATA_COLUMN_KEYS.has(column.key)).map(({ key }) => key),
-        };
-      },
-      [allowReorder, draggableColumns, filteredRows, sortColumns]
-    );
-
-    if (serverUrl && org) {
-      configIdLinkRenderer(serverUrl, org);
-    }
+      contextMenuAction,
+      getRowKey,
+      ignoreRowInSetFilter,
+      rowAlwaysVisible,
+      onReorderColumns,
+      onSortedAndFilteredRowsChange,
+    });
 
     return (
       <ContextMenuContext.Provider value={new Map()}>
@@ -421,7 +93,7 @@ export const DataTable = forwardRef<any, DataTableProps<any>>(
             <DataGrid
               data-id={gridId}
               className="rdg-light fill-grid"
-              columns={draggableColumns}
+              columns={reorderedColumns}
               rows={filteredRows}
               renderers={renderers}
               sortColumns={sortColumns}
@@ -429,6 +101,7 @@ export const DataTable = forwardRef<any, DataTableProps<any>>(
               rowKeyGetter={getRowKey}
               defaultColumnOptions={{ resizable: true, sortable: true, ...rest.defaultColumnOptions }}
               onCellKeyDown={handleCellKeydown}
+              onColumnsReorder={handleReorderColumns}
               {...rest}
             />
           </DataTableFilterContext.Provider>
diff --git a/libs/ui/src/lib/data-table/DataTableRenderers.tsx b/libs/ui/src/lib/data-table/DataTableRenderers.tsx
index c71e885ce..681240843 100644
--- a/libs/ui/src/lib/data-table/DataTableRenderers.tsx
+++ b/libs/ui/src/lib/data-table/DataTableRenderers.tsx
@@ -10,8 +10,7 @@ import parseISO from 'date-fns/parseISO';
 import isBoolean from 'lodash/isBoolean';
 import isFunction from 'lodash/isFunction';
 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 { RenderCellProps, RenderGroupCellProps, RenderHeaderCellProps, useRowSelection } from 'react-data-grid';
 import Checkbox from '../form/checkbox/Checkbox';
 import DatePicker from '../form/date/DatePicker';
 import Input from '../form/input/Input';
@@ -60,45 +59,6 @@ interface DraggableHeaderRendererProps<R> extends RenderHeaderCellProps<R> {
   onColumnsReorder: (sourceKey: string, targetKey: string) => void;
 }
 
-export function DraggableHeaderRenderer<R>({ onColumnsReorder, column, ...props }: DraggableHeaderRendererProps<R>) {
-  const [{ isDragging }, drag] = useDrag({
-    type: 'COLUMN_DRAG',
-    item: { key: column.key },
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging(),
-    }),
-  });
-
-  const [{ isOver }, drop] = useDrop({
-    accept: 'COLUMN_DRAG',
-    drop({ key }: { key: string }) {
-      onColumnsReorder(key, column.key);
-    },
-    collect: (monitor) => ({
-      isOver: monitor.isOver(),
-      canDrop: monitor.canDrop(),
-    }),
-  });
-
-  return (
-    <div
-      ref={(ref) => {
-        drag(ref);
-        drop(ref);
-      }}
-      style={{
-        opacity: isDragging ? 0.5 : 1,
-        backgroundColor: isOver ? '#ececec' : undefined,
-        cursor: isDragging ? 'move' : undefined,
-      }}
-    >
-      {(column as any)._priorHeaderRenderer
-        ? (column as any)._priorHeaderRenderer({ column, ...props })
-        : renderHeaderCell({ column, ...props })}
-    </div>
-  );
-}
-
 /**
  * SELECT ALL CHECKBOX HEADER
  */
@@ -140,7 +100,6 @@ export function SelectHeaderGroupRenderer<T>(props: RenderGroupCellProps<T>) {
 }
 
 export function FilterRenderer<R, SR, T extends HTMLOrSVGElement>({
-  onSort,
   sortDirection,
   column,
   children,
@@ -157,7 +116,7 @@ export function FilterRenderer<R, SR, T extends HTMLOrSVGElement>({
   const iconName: IconName = sortDirection === 'ASC' ? 'arrowup' : 'arrowdown';
 
   return (
-    <div className="slds-grid slds-grid_align-spread slds-grid_vertical-align-center cursor-pointer" onClick={() => onSort(false)}>
+    <div className="slds-grid slds-grid_align-spread slds-grid_vertical-align-center cursor-pointer">
       <div className="slds-truncate">{column.name}</div>
       <div className="slds-grid slds-grid_vertical-align-center">
         {sortDirection && <Icon type="utility" icon={iconName} className="slds-icon slds-icon-text-default slds-icon_xx-small" />}
diff --git a/libs/ui/src/lib/data-table/DataTableSubqueryRenderer.tsx b/libs/ui/src/lib/data-table/DataTableSubqueryRenderer.tsx
index 282945bb1..0cf6e281e 100644
--- a/libs/ui/src/lib/data-table/DataTableSubqueryRenderer.tsx
+++ b/libs/ui/src/lib/data-table/DataTableSubqueryRenderer.tsx
@@ -297,7 +297,6 @@ function ModalDataTable({
           >
             <AutoFullHeightContainer fillHeight setHeightAttr bottomBuffer={300}>
               <DataTable
-                allowReorder
                 serverUrl={serverUrl}
                 org={org}
                 data={rows}
diff --git a/libs/ui/src/lib/data-table/DataTree.tsx b/libs/ui/src/lib/data-table/DataTree.tsx
new file mode 100644
index 000000000..fca1a450f
--- /dev/null
+++ b/libs/ui/src/lib/data-table/DataTree.tsx
@@ -0,0 +1,112 @@
+import { SalesforceOrgUi } from '@jetstream/types';
+import { forwardRef } from 'react';
+import { TreeDataGrid, TreeDataGridProps } from 'react-data-grid';
+import 'react-data-grid/lib/styles.css';
+import { ContextMenuContext, ContextMenuItem } from '../popover/ContextMenu';
+import { DataTableFilterContext, DataTableGenericContext } from './data-table-context';
+import './data-table-styles.scss';
+import { ColumnWithFilter, ContextMenuActionData, RowWithKey } from './data-table-types';
+import { useDataTable } from './useDataTable';
+
+export interface DataTreeProps<T = RowWithKey, TContext = Record<string, any>>
+  extends Omit<TreeDataGridProps<T>, 'columns' | 'rows' | 'rowKeyGetter'> {
+  data: T[];
+  columns: ColumnWithFilter<T>[];
+  serverUrl?: string;
+  org?: SalesforceOrgUi;
+  quickFilterText?: string | null;
+  includeQuickFilter?: boolean;
+  context?: TContext;
+  /** Must be stable to avoid constant re-renders */
+  contextMenuItems?: ContextMenuItem[];
+  /** Must be stable to avoid constant re-renders */
+  contextMenuAction?: (item: ContextMenuItem, data: ContextMenuActionData<T>) => void;
+  getRowKey: (row: T) => string;
+  rowAlwaysVisible?: (row: T) => boolean;
+  ignoreRowInSetFilter?: (row: T) => boolean;
+  onReorderColumns?: (columns: string[]) => void;
+  onSortedAndFilteredRowsChange?: (rows: readonly T[]) => void;
+}
+
+export const DataTree = forwardRef<any, DataTreeProps<any>>(
+  <T extends object>(
+    {
+      data,
+      columns: _columns,
+      serverUrl,
+      org,
+      quickFilterText,
+      includeQuickFilter,
+      context,
+      contextMenuItems,
+      contextMenuAction,
+      getRowKey,
+      ignoreRowInSetFilter,
+      rowAlwaysVisible,
+      onReorderColumns,
+      onSortedAndFilteredRowsChange,
+      ...rest
+    }: DataTreeProps<T>,
+    ref
+  ) => {
+    const {
+      gridId,
+      columns,
+      sortColumns,
+      renderers,
+      filters,
+      reorderedColumns,
+      filterSetValues,
+      filteredRows,
+      setSortColumns,
+      updateFilter,
+      handleReorderColumns,
+      handleCellKeydown,
+    } = useDataTable({
+      data,
+      columns: _columns,
+      serverUrl,
+      org,
+      quickFilterText,
+      includeQuickFilter,
+      contextMenuItems,
+      ref,
+      contextMenuAction,
+      getRowKey,
+      ignoreRowInSetFilter,
+      rowAlwaysVisible,
+      onReorderColumns,
+      onSortedAndFilteredRowsChange,
+    });
+
+    return (
+      <ContextMenuContext.Provider value={new Map()}>
+        <DataTableGenericContext.Provider value={{ ...context, rows: filteredRows, columns }}>
+          <DataTableFilterContext.Provider
+            value={{
+              filterSetValues,
+              filters,
+              portalRefForFilters: context?.portalRefForFilters,
+              updateFilter,
+            }}
+          >
+            <TreeDataGrid
+              data-id={gridId}
+              className="rdg-light fill-grid"
+              columns={reorderedColumns}
+              rows={filteredRows}
+              renderers={renderers}
+              sortColumns={sortColumns}
+              onSortColumnsChange={setSortColumns}
+              rowKeyGetter={getRowKey}
+              defaultColumnOptions={{ resizable: true, sortable: true, ...rest.defaultColumnOptions }}
+              onCellKeyDown={handleCellKeydown}
+              onColumnsReorder={handleReorderColumns}
+              {...rest}
+            />
+          </DataTableFilterContext.Provider>
+        </DataTableGenericContext.Provider>
+      </ContextMenuContext.Provider>
+    );
+  }
+);
diff --git a/libs/ui/src/lib/data-table/SalesforceRecordDataTable.tsx b/libs/ui/src/lib/data-table/SalesforceRecordDataTable.tsx
index 58bd50ec7..386f1abce 100644
--- a/libs/ui/src/lib/data-table/SalesforceRecordDataTable.tsx
+++ b/libs/ui/src/lib/data-table/SalesforceRecordDataTable.tsx
@@ -431,7 +431,6 @@ export const SalesforceRecordDataTable: FunctionComponent<SalesforceRecordDataTa
               org={org}
               data={rows || []}
               columns={columns || []}
-              allowReorder
               includeQuickFilter
               quickFilterText={globalFilter}
               getRowKey={getRowId}
diff --git a/libs/ui/src/lib/data-table/data-table-types.ts b/libs/ui/src/lib/data-table/data-table-types.ts
index b37be17b9..6d4865337 100644
--- a/libs/ui/src/lib/data-table/data-table-types.ts
+++ b/libs/ui/src/lib/data-table/data-table-types.ts
@@ -13,6 +13,16 @@ export type ColumnType = 'text' | 'number' | 'subquery' | 'object' | 'location'
 export type FilterType = 'TEXT' | 'NUMBER' | 'DATE' | 'TIME' | 'SET' | 'BOOLEAN_SET';
 export const FILTER_SET_TYPES = new Set<FilterType>(['SET', 'BOOLEAN_SET']);
 
+export interface DataTableRef<T> {
+  hasSortApplied: () => boolean;
+  getFilteredAndSortedRows: () => readonly T[];
+  hasReorderedColumns: () => boolean;
+  /** Takes into account re-ordered columns */
+  getCurrentColumns: () => ColumnWithFilter<T>[];
+  /** Takes into account re-ordered columns */
+  getCurrentColumnNames: () => string[];
+}
+
 export type DataTableFilter =
   | DataTableTextFilter
   | DataTableNumberFilter
@@ -58,8 +68,6 @@ export interface ColumnWithFilter<TRow, TSummaryRow = unknown> extends Column<TR
   /** getValue is used when filtering or sorting rows */
   readonly getValue?: (params: { row: TRow; column: ColumnWithFilter<TRow, unknown> }) => string | null;
   readonly filters?: FilterType[];
-  /** If column reordering is enabled for a table, prevent column from reorder */
-  readonly preventReorder?: boolean;
 }
 
 export interface SalesforceQueryColumnDefinition<TRow, TSummaryRow = unknown> {
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 7434235c1..c61eea0f3 100644
--- a/libs/ui/src/lib/data-table/data-table-utils.tsx
+++ b/libs/ui/src/lib/data-table/data-table-utils.tsx
@@ -258,6 +258,7 @@ function getQueryResultColumn({
     },
     resizable: true,
     sortable: true,
+    draggable: true,
     width: 200,
     filters: ['TEXT', 'SET'],
     renderHeaderCell: (props) => (
diff --git a/libs/ui/src/lib/data-table/useDataTable.tsx b/libs/ui/src/lib/data-table/useDataTable.tsx
new file mode 100644
index 000000000..e2e914c72
--- /dev/null
+++ b/libs/ui/src/lib/data-table/useDataTable.tsx
@@ -0,0 +1,391 @@
+import { IconName } from '@jetstream/icon-factory';
+import { logger } from '@jetstream/shared/client-logger';
+import { hasCtrlOrMeta, isArrowKey, isCKey, isEnterKey, isVKey, useNonInitialEffect } from '@jetstream/shared/ui-utils';
+import { orderObjectsBy, orderStringsBy } from '@jetstream/shared/utils';
+import { SalesforceOrgUi } from '@jetstream/types';
+import copyToClipboard from 'copy-to-clipboard';
+import escapeRegExp from 'lodash/escapeRegExp';
+import isArray from 'lodash/isArray';
+import isNil from 'lodash/isNil';
+import isObject from 'lodash/isObject';
+import uniqueId from 'lodash/uniqueId';
+import { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useReducer, useState } from 'react';
+import {
+  CellKeyDownArgs,
+  CellKeyboardEvent,
+  Row as GridRow,
+  RenderRowProps,
+  RenderSortStatusProps,
+  Renderers,
+  SortColumn,
+} from 'react-data-grid';
+import 'react-data-grid/lib/styles.css';
+import ContextMenu, { ContextMenuItem } from '../popover/ContextMenu';
+import Icon from '../widgets/Icon';
+import { configIdLinkRenderer } from './DataTableRenderers';
+import { DataTableGenericContext } from './data-table-context';
+import './data-table-styles.scss';
+import { ColumnWithFilter, ContextMenuActionData, DataTableFilter, DataTableRef, FILTER_SET_TYPES, RowWithKey } from './data-table-types';
+import { EMPTY_FIELD, NON_DATA_COLUMN_KEYS, filterRecord, getSearchTextByRow, isFilterActive, resetFilter } from './data-table-utils';
+
+export interface UseDataTableProps {
+  data: any[];
+  columns: ColumnWithFilter<any>[];
+  serverUrl?: string;
+  org?: SalesforceOrgUi;
+  quickFilterText?: string | null;
+  includeQuickFilter?: boolean;
+  // context?: TContext;
+  /** Must be stable to avoid constant re-renders */
+  contextMenuItems?: ContextMenuItem[];
+  ref: any;
+  /** Must be stable to avoid constant re-renders */
+  contextMenuAction?: (item: ContextMenuItem, data: ContextMenuActionData<any>) => void;
+  getRowKey: (row: any) => string;
+  rowAlwaysVisible?: (row: any) => boolean;
+  ignoreRowInSetFilter?: (row: any) => boolean;
+  onReorderColumns?: (columns: string[]) => void;
+  onSortedAndFilteredRowsChange?: (rows: readonly any[]) => void;
+}
+
+export function useDataTable<T = RowWithKey>({
+  data,
+  columns: _columns,
+  serverUrl,
+  org,
+  quickFilterText,
+  includeQuickFilter,
+  contextMenuItems,
+  ref,
+  contextMenuAction,
+  getRowKey,
+  ignoreRowInSetFilter,
+  rowAlwaysVisible,
+  onReorderColumns,
+  onSortedAndFilteredRowsChange,
+}: UseDataTableProps) {
+  const [gridId] = useState(() => uniqueId('grid-'));
+  const [columns, setColumns] = useState(_columns || []);
+  const [sortColumns, setSortColumns] = useState<readonly SortColumn[]>([]);
+  const [rowFilterText, setRowFilterText] = useState<Record<string, string>>({});
+  const [renderers, setRenderers] = useState<Renderers<T, unknown>>({});
+  const [columnsOrder, setColumnsOrder] = useState((): readonly number[] => columns.map((_, index) => index));
+
+  const reorderedColumns = useMemo(() => {
+    return columnsOrder.map((index) => columns[index]);
+  }, [columns, columnsOrder]);
+
+  useEffect(() => {
+    if (contextMenuItems && contextMenuAction) {
+      setRenderers({
+        renderSortStatus,
+        renderRow: (key: React.Key, props: RenderRowProps<any>) => {
+          return (
+            <ContextMenuRenderer
+              key={key}
+              containerId={gridId}
+              props={props}
+              contextMenuItems={contextMenuItems}
+              contextMenuAction={contextMenuAction}
+            />
+          );
+        },
+      });
+    } else {
+      setRenderers({ renderSortStatus });
+    }
+  }, [contextMenuAction, contextMenuItems, gridId]);
+
+  const [{ columnMap, filters, filterSetValues }, dispatch] = useReducer(reducer, {
+    columnMap: new Map(),
+    filters: {},
+    filterSetValues: {},
+  });
+
+  useEffect(() => {
+    dispatch({ type: 'INIT', payload: { columns: _columns, data, ignoreRowInSetFilter } });
+  }, [_columns, data, ignoreRowInSetFilter]);
+
+  useNonInitialEffect(() => {
+    setColumns(_columns);
+  }, [_columns]);
+
+  useNonInitialEffect(() => {
+    onReorderColumns && onReorderColumns(columns.filter((column) => !NON_DATA_COLUMN_KEYS.has(column.key)).map(({ key }) => key));
+  }, [columns, onReorderColumns]);
+
+  useEffect(() => {
+    if (Array.isArray(columns) && columns.length && Array.isArray(data) && data.length) {
+      setRowFilterText(getSearchTextByRow(data, columns, getRowKey));
+    } else {
+      setRowFilterText({});
+    }
+  }, [columns, data, getRowKey]);
+
+  const updateFilter = useCallback((column: string, filter: DataTableFilter) => {
+    dispatch({ type: 'UPDATE_FILTER', payload: { column, filter } });
+  }, []);
+
+  const sortedRows = useMemo((): readonly RowWithKey[] => {
+    if (sortColumns.length === 0) {
+      return data;
+    }
+
+    return orderObjectsBy(
+      data,
+      sortColumns.map(({ columnKey }) => columnKey) as any,
+      sortColumns.map(({ direction }) => (direction === 'ASC' ? 'asc' : 'desc'))
+    );
+  }, [data, sortColumns]);
+
+  const filteredRows = useMemo((): readonly RowWithKey[] => {
+    let quickFilterRegex: RegExp;
+    if (includeQuickFilter && quickFilterText) {
+      try {
+        quickFilterRegex = new RegExp(escapeRegExp(quickFilterText), 'i');
+      } catch (ex) {
+        logger.warn('Invalid quick filter text', ex);
+      }
+    }
+    return sortedRows.filter((row) => {
+      if (rowAlwaysVisible && rowAlwaysVisible(row)) {
+        return true;
+      }
+      const isVisible = Object.keys(filters)
+        .filter(
+          (columnKey) =>
+            Array.isArray(filters[columnKey]) &&
+            filters[columnKey].length &&
+            filters[columnKey].some((filter) => isFilterActive(filter, sortedRows.length))
+        )
+        .every((columnKey) => {
+          let rowValue = row[columnKey];
+          const column = columnMap.get(columnKey);
+          if (column?.getValue && column) {
+            rowValue = column.getValue({ row, column });
+          }
+          return filters[columnKey]
+            .filter((filter) => isFilterActive(filter, sortedRows.length))
+            .every((filter) => {
+              const filterResult = filterRecord(filter, rowValue);
+              return filterResult;
+            });
+        });
+      // Apply global filter
+      const key = getRowKey(row);
+      if (quickFilterRegex && key && rowFilterText[key]) {
+        return isVisible && quickFilterRegex.test(rowFilterText[key]);
+      }
+      return isVisible;
+    });
+  }, [columnMap, filters, getRowKey, includeQuickFilter, quickFilterText, rowAlwaysVisible, rowFilterText, sortedRows]);
+
+  useEffect(() => {
+    onSortedAndFilteredRowsChange && onSortedAndFilteredRowsChange(filteredRows);
+  }, [filteredRows, onSortedAndFilteredRowsChange]);
+
+  function handleReorderColumns(sourceKey: string, targetKey: string) {
+    setColumnsOrder((columnsOrder) => {
+      const sourceColumnOrderIndex = columnsOrder.findIndex((index) => columns[index].key === sourceKey)!;
+      const targetColumnOrderIndex = columnsOrder.findIndex((index) => columns[index].key === targetKey)!;
+      const sourceColumnOrder = columnsOrder[sourceColumnOrderIndex];
+      const newColumnsOrder = columnsOrder.toSpliced(sourceColumnOrderIndex, 1);
+      newColumnsOrder.splice(targetColumnOrderIndex, 0, sourceColumnOrder);
+      return newColumnsOrder;
+    });
+  }
+
+  /**
+   * For columns that have edit mode, by default any keypress will enable edit mode which breaks things like ctrl+c to copy.
+   * Aside from some specific use-cases, we disable the event from being handled by the grid.
+   */
+  function handleCellKeydown(args: CellKeyDownArgs<T, unknown>, event: CellKeyboardEvent) {
+    try {
+      /** Events allowed to be handled by the editor */
+      if (isArrowKey(event) || isEnterKey(event) || (hasCtrlOrMeta(event) && isVKey(event))) {
+        return;
+      }
+
+      /** Custom copy to clipboard */
+      if (hasCtrlOrMeta(event) && isCKey(event)) {
+        const column = args.column as ColumnWithFilter<unknown>;
+        let value = args.row[column.key];
+
+        if (isArray(value) || isObject(value)) {
+          value = JSON.stringify(value);
+        }
+
+        !isNil(value) && copyToClipboard(value);
+      }
+
+      event.preventGridDefault();
+    } catch (ex) {
+      logger.warn('handleCellKeydown Error', ex);
+      event.preventGridDefault();
+      return;
+    }
+  }
+
+  // NOTE: this is not used anywhere, so we may consider removing it.
+  useImperativeHandle<unknown, DataTableRef<any>>(
+    ref,
+    () => {
+      return {
+        hasSortApplied: () => sortColumns?.length > 0,
+        getFilteredAndSortedRows: () => filteredRows,
+        hasReorderedColumns: () => columnsOrder.some((idx, i) => idx !== i),
+        getCurrentColumns: () => columnsOrder.map((idx) => columns[idx]).filter((column) => !NON_DATA_COLUMN_KEYS.has(column.key)),
+        getCurrentColumnNames: () =>
+          columnsOrder
+            .map((idx) => columns[idx])
+            .filter((column) => !NON_DATA_COLUMN_KEYS.has(column.key))
+            .map(({ key }) => key),
+      };
+    },
+    [columns, columnsOrder, filteredRows, sortColumns?.length]
+  );
+
+  if (serverUrl && org) {
+    configIdLinkRenderer(serverUrl, org);
+  }
+  return {
+    gridId,
+    columns,
+    sortColumns,
+    rowFilterText,
+    filters,
+    renderers,
+    columnsOrder,
+    reorderedColumns,
+    filterSetValues,
+    filteredRows,
+    setSortColumns,
+    updateFilter,
+    handleReorderColumns,
+    handleCellKeydown,
+  };
+}
+
+/**
+ * SUPPORTING FUNCTIONS
+ */
+
+function renderSortStatus({ sortDirection, priority }: RenderSortStatusProps) {
+  const iconName: IconName = sortDirection === 'ASC' ? 'arrowup' : 'arrowdown';
+  return sortDirection !== undefined ? (
+    <>
+      <Icon type="utility" icon={iconName} className="slds-icon slds-icon-text-default slds-icon_xx-small" />
+      <span>{priority}</span>
+    </>
+  ) : null;
+}
+
+interface ContextMenuRendererProps {
+  containerId?: string;
+  props: RenderRowProps<any>;
+  contextMenuItems: ContextMenuItem[];
+  contextMenuAction: (item: ContextMenuItem, data: ContextMenuActionData<unknown>) => void;
+}
+
+function ContextMenuRenderer({ containerId, props, contextMenuItems, contextMenuAction }: ContextMenuRendererProps) {
+  const { columns, rows } = useContext(DataTableGenericContext);
+  return (
+    <ContextMenu
+      containerId={containerId}
+      menu={contextMenuItems}
+      onItemSelected={(item) => {
+        if (!props.selectedCellIdx) {
+          return;
+        }
+        contextMenuAction(item, {
+          row: props.row,
+          rowIdx: props.rowIdx,
+          rows,
+          column: columns[props.selectedCellIdx],
+          columns,
+        });
+      }}
+    >
+      <GridRow data-id={containerId} {...props} />
+    </ContextMenu>
+  );
+}
+
+interface State<T> {
+  columnMap: Map<string, ColumnWithFilter<T>>;
+  filters: Record<string, DataTableFilter[]>;
+  filterSetValues: Record<string, string[]>;
+}
+
+type Action =
+  | { type: 'INIT'; payload: { columns: ColumnWithFilter<any>[]; data: any[]; ignoreRowInSetFilter?: (row: any) => boolean } }
+  | { type: 'UPDATE_FILTER'; payload: { column: string; filter: DataTableFilter } };
+
+// Reducer is used to limit the number of re-renders because of dependent state
+function reducer<T>(state: State<T>, action: Action): State<T> {
+  switch (action.type) {
+    case 'INIT': {
+      const { columns, data, ignoreRowInSetFilter } = action.payload;
+
+      const columnMap = new Map(columns.map((column) => [column.key, column]));
+
+      const filters = columns.reduce((acc: Record<string, DataTableFilter[]>, column) => {
+        if (Array.isArray(column.filters)) {
+          acc[column.key] = column.filters.map((filter) => resetFilter(filter, []));
+        }
+        return acc;
+      }, {});
+
+      // NOTICE: This function mutates filters
+      const filterSetValues = Object.keys(filters)
+        .filter((columnKey) => Array.isArray(filters[columnKey]) && filters[columnKey].some(({ type }) => FILTER_SET_TYPES.has(type)))
+        .reduce((acc: Record<string, string[]>, columnKey) => {
+          const filter = filters[columnKey].find(({ type }) => FILTER_SET_TYPES.has(type));
+          const column = columnMap.get(columnKey);
+          const getValueFn = columnMap.get(columnKey)?.getValue || (({ row, column }) => row[columnKey]);
+          if (!filter || !column) {
+            return acc;
+          }
+          if (filter.type === 'BOOLEAN_SET') {
+            acc[columnKey] = ['True', 'False'];
+          } else {
+            acc[columnKey] = orderStringsBy(
+              Array.from(
+                new Set(
+                  data
+                    .filter((row) => (ignoreRowInSetFilter ? !ignoreRowInSetFilter(row) : true))
+                    .map((row) => {
+                      const rowValue = getValueFn({ row, column });
+                      // TODO: we need some additional function to get the filter value and also compare the value when filtering
+                      return isNil(rowValue) ? EMPTY_FIELD : String(rowValue);
+                    })
+                )
+              )
+            );
+          }
+
+          // Set filter default values to all values in set
+          filter.value = acc[columnKey];
+
+          return acc;
+        }, {});
+
+      return {
+        ...state,
+        columnMap,
+        filters,
+        filterSetValues,
+      };
+    }
+    case 'UPDATE_FILTER': {
+      const { column, filter } = action.payload;
+      return {
+        ...state,
+        filters: {
+          ...state.filters,
+          [column]: state.filters[column].map((currFilter) => (currFilter.type === filter.type ? filter : currFilter)),
+        },
+      };
+    }
+  }
+}
diff --git a/package.json b/package.json
index 5367a4eb2..1c4f6f0f4 100644
--- a/package.json
+++ b/package.json
@@ -316,7 +316,7 @@
     "quill": "^1.3.7",
     "quill-delta": "^3.6.3",
     "react": "18.2.0",
-    "react-data-grid": "7.0.0-beta.34",
+    "react-data-grid": "7.0.0-beta.41",
     "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 8af09a071..1114e3c75 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -11,7 +11,7 @@
     "target": "es2015",
     "module": "esnext",
     "typeRoots": ["./node_modules/@types", "./custom-typings"],
-    "lib": ["es2021", "dom"],
+    "lib": ["es2023", "dom"],
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
diff --git a/yarn.lock b/yarn.lock
index 32947ce37..bc05a090e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12136,6 +12136,11 @@ clsx@^1.1.1:
   resolved "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz"
   integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
 
+clsx@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
+  integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
+
 co-prompt@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/co-prompt/-/co-prompt-1.0.0.tgz"
@@ -21881,12 +21886,12 @@ 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.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==
+react-data-grid@7.0.0-beta.41:
+  version "7.0.0-beta.41"
+  resolved "https://registry.yarnpkg.com/react-data-grid/-/react-data-grid-7.0.0-beta.41.tgz#4de30876df528cf0ecf8d2922b674917c15b50c6"
+  integrity sha512-WmTP/PV+vtVjIaGVLgyG6WAhqvuPBM8I54bsR7oJZl6w43+mIasZM9rEBWjQ52XHJEy41/tjcMBIMNiWqoEbrQ==
   dependencies:
-    clsx "^1.1.1"
+    clsx "^2.0.0"
 
 react-dnd-html5-backend@^16.0.1:
   version "16.0.1"