@procore/data-table 13.1.1 → 13.2.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 13.2.1
+
+### Patch Changes
+
+- 15f03dbed4: Fix keyboard interactions for editors that format the value
+
+## 13.2.0
+
+### Minor Changes
+
+- 04d6c4f48c: Allow autoGroupColumnDefinition to be added to nested tables and fix nested table column header icons to display correctly
+
 ## 13.1.1
 
 ### Patch Changes

package/dist/legacy/index.d.mts

@@ -154,6 +154,7 @@ interface DataTableCellRendererProps<TValue = any, TColumnDefinition extends Col
     rowIndex?: number;
 }
 interface DataTableCellEditorProps<TValue = any, TColumnDefinition extends ColumnDefinition = ColumnDefinition<TValue>> extends DataTableCellRendererProps<TValue, TColumnDefinition> {
+    eventKey: string | null;
     ref?: ((instance: HTMLElement | null) => void) | React__default.MutableRefObject<HTMLElement | null> | null;
     setDataValue: (field: string, newValue: TValue) => void;
     stopEditing: () => void;
@@ -669,6 +670,7 @@ interface GetDetailRowDataParams<TRow = any> extends Omit<AgGetDetailRowDataPara
 }
 type GetRowHeightWithFooters = (customFooters: CustomFooterConfig[] | undefined) => (params: Partial<RowHeightParams>) => number;
 interface DetailRowConfig<TRow = any> {
+    autoGroupColumnDefinition?: ColumnDefinition;
     columnDefinitions: ColumnDefinition[];
     getDetailRowData: (params: GetDetailRowDataParams<TRow>) => void;
     height?: 'auto' | number;

package/dist/legacy/index.d.ts

@@ -154,6 +154,7 @@ interface DataTableCellRendererProps<TValue = any, TColumnDefinition extends Col
     rowIndex?: number;
 }
 interface DataTableCellEditorProps<TValue = any, TColumnDefinition extends ColumnDefinition = ColumnDefinition<TValue>> extends DataTableCellRendererProps<TValue, TColumnDefinition> {
+    eventKey: string | null;
     ref?: ((instance: HTMLElement | null) => void) | React__default.MutableRefObject<HTMLElement | null> | null;
     setDataValue: (field: string, newValue: TValue) => void;
     stopEditing: () => void;
@@ -669,6 +670,7 @@ interface GetDetailRowDataParams<TRow = any> extends Omit<AgGetDetailRowDataPara
 }
 type GetRowHeightWithFooters = (customFooters: CustomFooterConfig[] | undefined) => (params: Partial<RowHeightParams>) => number;
 interface DetailRowConfig<TRow = any> {
+    autoGroupColumnDefinition?: ColumnDefinition;
     columnDefinitions: ColumnDefinition[];
     getDetailRowData: (params: GetDetailRowDataParams<TRow>) => void;
     height?: 'auto' | number;

package/dist/legacy/index.js

@@ -8182,7 +8182,7 @@ var Renderer3 = ({
 };
 var CurrencyCellRenderer = withDataTableRenderer(Renderer3, "input");
 var Editor = React82__default.default.forwardRef(
-  ({ columnDefinition, stopEditing, value }, ref) => {
+  ({ columnDefinition, eventKey, stopEditing, value }, ref) => {
     var _a, _b, _c, _d, _e;
     const I18n = coreReact.useI18nContext();
     if (isEmptyValue(value) && !columnDefinition.editable) {
@@ -8191,7 +8191,7 @@ var Editor = React82__default.default.forwardRef(
     function onBlur() {
       stopEditing();
     }
-    const defaultValue = labsFinancialsUtils.formatNumber(value, {
+    const defaultValue = eventKey ? value : labsFinancialsUtils.formatNumber(value, {
       ...((_a = columnDefinition.cellEditorParams) == null ? void 0 : _a.formatConfig) ?? ((_b = columnDefinition.cellRendererParams) == null ? void 0 : _b.formatConfig) ?? {},
       symbol: void 0,
       symbolAfterValue: void 0
@@ -53243,7 +53243,7 @@ var Renderer7 = ({
   );
 };
 var PercentCellRenderer = withDataTableRenderer(Renderer7, "input");
-var Editor4 = React82__default.default.forwardRef(({ columnDefinition, stopEditing, value }, ref) => {
+var Editor4 = React82__default.default.forwardRef(({ columnDefinition, eventKey, stopEditing, value }, ref) => {
   var _a, _b, _c, _d, _e;
   const I18n = coreReact.useI18nContext();
   function onBlur() {
@@ -53252,7 +53252,7 @@ var Editor4 = React82__default.default.forwardRef(({ columnDefinition, stopEditi
   if (isEmptyValue(value) && !columnDefinition.editable) {
     return null;
   }
-  const defaultValue = labsFinancialsUtils.formatNumber(value, {
+  const defaultValue = eventKey ? value : labsFinancialsUtils.formatNumber(value, {
     ...((_a = columnDefinition.cellEditorParams) == null ? void 0 : _a.formatConfig) ?? ((_b = columnDefinition.cellRendererParams) == null ? void 0 : _b.formatConfig) ?? {},
     symbol: void 0,
     symbolAfterValue: void 0
@@ -53607,13 +53607,13 @@ var Renderer11 = ({
 };
 var TextCellRenderer = withDataTableRenderer(Renderer11, "input");
 var Editor7 = React82__default.default.forwardRef(
-  ({ columnDefinition, stopEditing, value }, ref) => {
+  ({ columnDefinition, eventKey, stopEditing, value }, ref) => {
     var _a, _b, _c, _d;
     function onBlur() {
       stopEditing();
     }
     const I18n = coreReact.useI18nContext();
-    const internalValue = ((_a = columnDefinition.getStringFormattedValue) == null ? void 0 : _a.call(columnDefinition, value)) ?? value;
+    const internalValue = eventKey ? value : ((_a = columnDefinition.getStringFormattedValue) == null ? void 0 : _a.call(columnDefinition, value)) ?? value;
     return /* @__PURE__ */ React82__default.default.createElement(
       coreReact.Input,
       {
@@ -54589,6 +54589,15 @@ function getCheckboxColumn(columnApi) {
 
 // src/utils/transformers.ts
 var emptyObject = {};
+var DEFAULT_AUTO_GROUP_COLUMN_DEFINITION = {
+  headerName: "",
+  cellRendererSelector(params) {
+    return {
+      component: (params == null ? void 0 : params.node.rowPinned) ? GrandTotalsLabelRenderer : void 0
+    };
+  },
+  lockPosition: true
+};
 function isColGroupDef(colDef) {
   var _a;
   return ((_a = colDef.children) == null ? void 0 : _a.length) > 0;
@@ -55041,6 +55050,44 @@ function getFilterParams(columnDefinition) {
   }
   return filterProps;
 }
+function addAutoGroupParams(columnDefinition, isRowSelectable, siblingGroupsRowSelectionDisabled) {
+  return {
+    ...columnDefinition,
+    cellRendererSelector: (params) => {
+      var _a;
+      const cellRendererSelector = (_a = columnDefinition.cellRendererSelector) == null ? void 0 : _a.call(columnDefinition, params);
+      return {
+        component: (cellRendererSelector == null ? void 0 : cellRendererSelector.component) ?? AutoGroupCellRenderer,
+        params: {
+          ...columnDefinition.cellRendererParams,
+          ...cellRendererSelector == null ? void 0 : cellRendererSelector.params,
+          checkbox(_params) {
+            if (_params.node) {
+              return isRowSelectable({
+                ..._params.node,
+                data: _params.node.data ?? _params.node.aggData
+              });
+            }
+            return false;
+          },
+          siblingGroupsRowSelectionDisabled
+        }
+      };
+    }
+  };
+}
+function getDecoratedAutoGroupColDef(columnDefinition, enableGroupEditAndValidation, enableDynamicRowHeight, isRowSelectable, siblingGroupsRowSelectionDisabled) {
+  const colDef = columnDefinition ? transformToColDef(
+    columnDefinition,
+    enableGroupEditAndValidation,
+    enableDynamicRowHeight
+  ) : DEFAULT_AUTO_GROUP_COLUMN_DEFINITION;
+  return addAutoGroupParams(
+    colDef,
+    isRowSelectable,
+    siblingGroupsRowSelectionDisabled
+  );
+}
 
 // src/CellRenderers/AutoGroupCell.scss
 var css5 = `._autoGroupCell_15e3f_1 {
@@ -55822,6 +55869,7 @@ var DataTableCellEditor = React82__default.default.forwardRef(
         {
           columnDefinition,
           data,
+          eventKey,
           field: node.field,
           isGroup: node.group || false,
           parentData: context == null ? void 0 : context.parentData,
@@ -56218,7 +56266,7 @@ var GenericHeaderRenderer = (props) => {
   const colDef = props.column.getColDef();
   const HeaderNode = (_a = colDef.headerComponentParams) == null ? void 0 : _a.headerNode;
   const I18n = coreReact.useI18nContext();
-  const { columnApi, tableRef, gridApi, onServerSideDataRequest } = useInternalTableContext();
+  const { columnApi, tableRef, onServerSideDataRequest } = useInternalTableContext();
   const onSSDR = Boolean(onServerSideDataRequest);
   const [sortOrder, setSortOrder] = React82__default.default.useState(props.column.getSort());
   const [isFirstColumn2, setIsFirstColumn] = React82__default.default.useState(false);
@@ -56226,7 +56274,7 @@ var GenericHeaderRenderer = (props) => {
   const headerCellRef = React82.useRef(null);
   const headerCheckboxSelection = colDef.headerCheckboxSelection;
   const headerCheckboxSelectionEnabled = typeof headerCheckboxSelection === "function" ? headerCheckboxSelection({
-    api: gridApi,
+    api: props.api,
     colDef,
     column: props.column,
     columnApi,
@@ -56322,14 +56370,16 @@ var GenericHeaderRenderer = (props) => {
   });
   const [expansionVariant, setExpansionVariant] = React82__default.default.useState("closed");
   React82__default.default.useEffect(() => {
+    var _a2;
     const onExpandAllChange = (event) => {
       setExpansionVariant(event.source === "expandAll" ? "all" : "closed");
     };
-    gridApi == null ? void 0 : gridApi.addEventListener("expandOrCollapseAll", onExpandAllChange);
+    (_a2 = props.api) == null ? void 0 : _a2.addEventListener("expandOrCollapseAll", onExpandAllChange);
     return () => {
-      gridApi == null ? void 0 : gridApi.removeEventListener("expandOrCollapseAll", onExpandAllChange);
+      var _a3;
+      (_a3 = props.api) == null ? void 0 : _a3.removeEventListener("expandOrCollapseAll", onExpandAllChange);
     };
-  }, [gridApi]);
+  }, [props.api]);
   React82__default.default.useEffect(() => {
     const hasTierOneCollapsedNodes = !!findNode(
       (node) => node.level === 0 && !node.expanded,
@@ -56439,7 +56489,7 @@ var GenericHeaderRenderer = (props) => {
       return;
     }
     function updateSelectAllCheckbox() {
-      const currentRows = getCurrentRows(gridApi);
+      const currentRows = getCurrentRows(props.api);
       const isAllSelected = currentRows.length && currentRows.every(isRowSelected);
       const isPartialSelected = !isAllSelected && currentRows.some(isRowSelected);
       if (isAllSelected) {
@@ -73511,6 +73561,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
     }
   };
   const rowHeightConfig = detailRowConfig.height === "auto" || detailRowConfig.height === void 0 ? { detailRowAutoHeight: true } : { detailRowHeight: detailRowConfig.height };
+  const isRowSelectable = () => deprecatedDetailRowSelectionEnabled ?? false;
   return {
     isRowMaster: detailRowConfig.isExpandable,
     masterDetail: true,
@@ -73519,6 +73570,13 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
       return {
         detailGridOptions: {
           alwaysAggregateAtRootLevel: !isServerSideRowModel,
+          autoGroupColumnDef: getDecoratedAutoGroupColDef(
+            detailRowConfig.autoGroupColumnDefinition,
+            enableGroupEditAndValidation,
+            enableDynamicRowHeight,
+            isRowSelectable,
+            false
+          ),
           context: {
             parentId: masterGridParams.node.id.replace("detail_", ""),
             parentData: masterGridParams.node.data
@@ -73532,6 +73590,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
               )
             )
           ),
+          isRowSelectable,
           onGridReady: onGridReadyOrValueChange,
           onCellValueChanged: onGridReadyOrValueChange,
           onRowDataChanged: onGridReadyOrValueChange,
@@ -73554,7 +73613,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
           rowMultiSelectWithClick: detailRowConfig.rowMultiSelectWithClick,
           suppressRowClickSelection: detailRowConfig.suppressRowClickSelection ?? true,
           ensureDomOrder: true,
-          frameworkComponents,
+          components: frameworkComponents,
           icons: tableIcons,
           loadingOverlayComponent: "loadingOverlayRenderer",
           loadingOverlayComponentParams: {
@@ -73566,6 +73625,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
           },
           rowDragManaged: true,
           singleClickEdit: true,
+          suppressAggFuncInHeader: true,
           suppressContextMenu: true,
           suppressColumnVirtualisation: true,
           getRowHeight: getRowHeight == null ? void 0 : getRowHeight(detailRowConfig.customFooters)
@@ -76982,61 +77042,16 @@ var Table = (props) => {
     },
     [props]
   );
-  const addAutoGroupParams = React82__default.default.useCallback(
-    function addAutoGroupParams2(columnDefinition) {
-      return {
-        ...columnDefinition,
-        cellRendererSelector: (params) => {
-          var _a2;
-          const cellRendererSelector = (_a2 = columnDefinition.cellRendererSelector) == null ? void 0 : _a2.call(columnDefinition, params);
-          let component = (cellRendererSelector == null ? void 0 : cellRendererSelector.component) ?? "autoGroupCellRenderer";
-          return {
-            component,
-            params: {
-              ...columnDefinition.cellRendererParams,
-              ...cellRendererSelector == null ? void 0 : cellRendererSelector.params,
-              checkbox(_params) {
-                if (_params.node) {
-                  return isRowSelectable({
-                    ..._params.node,
-                    data: _params.node.data ?? _params.node.aggData
-                  });
-                }
-                return false;
-              },
-              siblingGroupsRowSelectionDisabled: props.siblingGroupsRowSelectionDisabled
-            }
-          };
-        }
-      };
-    },
-    [isRowSelectable]
+  const decoratedAutoGroupColDef = React82__default.default.useMemo(
+    () => getDecoratedAutoGroupColDef(
+      props == null ? void 0 : props.autoGroupColumnDefinition,
+      internalTableContext.enableGroupEditAndValidation,
+      internalTableContext.enableDynamicRowHeight,
+      isRowSelectable,
+      props.siblingGroupsRowSelectionDisabled
+    ),
+    [props == null ? void 0 : props.autoGroupColumnDefinition]
   );
-  const decoratedAutoGroupColDef = React82__default.default.useMemo(() => {
-    if (props == null ? void 0 : props.autoGroupColumnDefinition) {
-      return addAutoGroupParams(
-        transformToColDef(
-          props == null ? void 0 : props.autoGroupColumnDefinition,
-          internalTableContext.enableGroupEditAndValidation,
-          internalTableContext.enableDynamicRowHeight
-        )
-      );
-    }
-    return addAutoGroupParams({
-      headerName: "",
-      cellRendererSelector: (params) => {
-        if (params == null ? void 0 : params.node.rowPinned) {
-          return {
-            component: GrandTotalsLabelRenderer
-          };
-        }
-        return {
-          component: void 0
-        };
-      },
-      lockPosition: true
-    });
-  }, [props == null ? void 0 : props.autoGroupColumnDefinition, addAutoGroupParams]);
   const onColumnGroupOpened = React82__default.default.useCallback(
     (event) => {
       var _a2, _b2, _c;

package/dist/legacy/index.mjs

@@ -2,7 +2,7 @@ import React82, { useState, forwardRef, useContext, useRef, useImperativeHandle,
 import { startsWith, equals, omit, isNil, mergeDeepLeft, intersection, isEmpty, groupBy } from 'ramda';
 import { useI18nContext, Select, Input, UNSAFE_useOverlayTriggerContext, Card, Flex, Box, SegmentedController, Calendar, useDateTime, OverlayTrigger, isEventSource, DateInput, UNSAFE_isValidYearRange, DateSelect, PillSelect, TextArea, UNSAFE_useMenuImperativeControlNavigation, UNSAFE_Menu, UNSAFE_menuItemsWrapperAttribute, Spinner, FlexList, Typography, Tooltip, Button, Required, colors, Form, spacing, Switch, Panel, UNSAFE_StyledFilterTokenLabel, typographyWeights, SelectButton, StyledSelectButton, StyledSelectButtonLabel, StyledButton, StyledSelectArrow, Popover, UNSAFE_StyledSuperSelectTrigger, UNSAFE_StyledSuperSelectLabel, UNSAFE_StyledSuperSelectArrow, DateTimeProvider, useField, Label, UNSAFE_mergeRefs, ContactItem as ContactItem$1, ToggleButton, Pagination, Link, AvatarStack, Pill, Typeahead, UNSAFE_FilterToken, useI18n, I18nContext, UNSAFE_SuperSelect, Avatar, MultiSelect, H3, Checkbox, useVisibility, UNSAFE_useSuperSelectContext, DropdownFlyout, StyledDropdownFlyoutLabel, StyledDropdownFlyoutExpandIcon, EmptyState as EmptyState$1 } from '@procore/core-react';
 import classnames from 'classnames/bind';
-import { Error as Error$1, Grip, Pencil, Building, Calendar as Calendar$1, CaretsInVertical, CaretsOutVertical, CaretsOutVerticalWithLine, CaretsIn, CaretsOut, ArrowDown, ArrowUp, CaretDown, CaretRight } from '@procore/core-icons';
+import { Error as Error$1, Grip, Pencil, Building, Calendar as Calendar$1, CaretsInVertical, CaretsOutVertical, CaretsOutVerticalWithLine, CaretsIn, CaretsOut, CaretDown, CaretRight, ArrowDown, ArrowUp } from '@procore/core-icons';
 import classNames from 'classnames';
 import { isDate, parseISO, isSameDay, formatISO, isBefore } from 'date-fns';
 import { formatNumber, formatCurrency, formatPercentage } from '@procore/labs-financials-utils';
@@ -8167,7 +8167,7 @@ var Renderer3 = ({
 };
 var CurrencyCellRenderer = withDataTableRenderer(Renderer3, "input");
 var Editor = React82.forwardRef(
-  ({ columnDefinition, stopEditing, value }, ref) => {
+  ({ columnDefinition, eventKey, stopEditing, value }, ref) => {
     var _a, _b, _c, _d, _e;
     const I18n = useI18nContext();
     if (isEmptyValue(value) && !columnDefinition.editable) {
@@ -8176,7 +8176,7 @@ var Editor = React82.forwardRef(
     function onBlur() {
       stopEditing();
     }
-    const defaultValue = formatNumber(value, {
+    const defaultValue = eventKey ? value : formatNumber(value, {
       ...((_a = columnDefinition.cellEditorParams) == null ? void 0 : _a.formatConfig) ?? ((_b = columnDefinition.cellRendererParams) == null ? void 0 : _b.formatConfig) ?? {},
       symbol: void 0,
       symbolAfterValue: void 0
@@ -53228,7 +53228,7 @@ var Renderer7 = ({
   );
 };
 var PercentCellRenderer = withDataTableRenderer(Renderer7, "input");
-var Editor4 = React82.forwardRef(({ columnDefinition, stopEditing, value }, ref) => {
+var Editor4 = React82.forwardRef(({ columnDefinition, eventKey, stopEditing, value }, ref) => {
   var _a, _b, _c, _d, _e;
   const I18n = useI18nContext();
   function onBlur() {
@@ -53237,7 +53237,7 @@ var Editor4 = React82.forwardRef(({ columnDefinition, stopEditing, value }, ref)
   if (isEmptyValue(value) && !columnDefinition.editable) {
     return null;
   }
-  const defaultValue = formatNumber(value, {
+  const defaultValue = eventKey ? value : formatNumber(value, {
     ...((_a = columnDefinition.cellEditorParams) == null ? void 0 : _a.formatConfig) ?? ((_b = columnDefinition.cellRendererParams) == null ? void 0 : _b.formatConfig) ?? {},
     symbol: void 0,
     symbolAfterValue: void 0
@@ -53592,13 +53592,13 @@ var Renderer11 = ({
 };
 var TextCellRenderer = withDataTableRenderer(Renderer11, "input");
 var Editor7 = React82.forwardRef(
-  ({ columnDefinition, stopEditing, value }, ref) => {
+  ({ columnDefinition, eventKey, stopEditing, value }, ref) => {
     var _a, _b, _c, _d;
     function onBlur() {
       stopEditing();
     }
     const I18n = useI18nContext();
-    const internalValue = ((_a = columnDefinition.getStringFormattedValue) == null ? void 0 : _a.call(columnDefinition, value)) ?? value;
+    const internalValue = eventKey ? value : ((_a = columnDefinition.getStringFormattedValue) == null ? void 0 : _a.call(columnDefinition, value)) ?? value;
     return /* @__PURE__ */ React82.createElement(
       Input,
       {
@@ -54574,6 +54574,15 @@ function getCheckboxColumn(columnApi) {
 
 // src/utils/transformers.ts
 var emptyObject = {};
+var DEFAULT_AUTO_GROUP_COLUMN_DEFINITION = {
+  headerName: "",
+  cellRendererSelector(params) {
+    return {
+      component: (params == null ? void 0 : params.node.rowPinned) ? GrandTotalsLabelRenderer : void 0
+    };
+  },
+  lockPosition: true
+};
 function isColGroupDef(colDef) {
   var _a;
   return ((_a = colDef.children) == null ? void 0 : _a.length) > 0;
@@ -55026,6 +55035,44 @@ function getFilterParams(columnDefinition) {
   }
   return filterProps;
 }
+function addAutoGroupParams(columnDefinition, isRowSelectable, siblingGroupsRowSelectionDisabled) {
+  return {
+    ...columnDefinition,
+    cellRendererSelector: (params) => {
+      var _a;
+      const cellRendererSelector = (_a = columnDefinition.cellRendererSelector) == null ? void 0 : _a.call(columnDefinition, params);
+      return {
+        component: (cellRendererSelector == null ? void 0 : cellRendererSelector.component) ?? AutoGroupCellRenderer,
+        params: {
+          ...columnDefinition.cellRendererParams,
+          ...cellRendererSelector == null ? void 0 : cellRendererSelector.params,
+          checkbox(_params) {
+            if (_params.node) {
+              return isRowSelectable({
+                ..._params.node,
+                data: _params.node.data ?? _params.node.aggData
+              });
+            }
+            return false;
+          },
+          siblingGroupsRowSelectionDisabled
+        }
+      };
+    }
+  };
+}
+function getDecoratedAutoGroupColDef(columnDefinition, enableGroupEditAndValidation, enableDynamicRowHeight, isRowSelectable, siblingGroupsRowSelectionDisabled) {
+  const colDef = columnDefinition ? transformToColDef(
+    columnDefinition,
+    enableGroupEditAndValidation,
+    enableDynamicRowHeight
+  ) : DEFAULT_AUTO_GROUP_COLUMN_DEFINITION;
+  return addAutoGroupParams(
+    colDef,
+    isRowSelectable,
+    siblingGroupsRowSelectionDisabled
+  );
+}
 
 // src/CellRenderers/AutoGroupCell.scss
 var css5 = `._autoGroupCell_15e3f_1 {
@@ -55807,6 +55854,7 @@ var DataTableCellEditor = React82.forwardRef(
         {
           columnDefinition,
           data,
+          eventKey,
           field: node.field,
           isGroup: node.group || false,
           parentData: context == null ? void 0 : context.parentData,
@@ -56203,7 +56251,7 @@ var GenericHeaderRenderer = (props) => {
   const colDef = props.column.getColDef();
   const HeaderNode = (_a = colDef.headerComponentParams) == null ? void 0 : _a.headerNode;
   const I18n = useI18nContext();
-  const { columnApi, tableRef, gridApi, onServerSideDataRequest } = useInternalTableContext();
+  const { columnApi, tableRef, onServerSideDataRequest } = useInternalTableContext();
   const onSSDR = Boolean(onServerSideDataRequest);
   const [sortOrder, setSortOrder] = React82.useState(props.column.getSort());
   const [isFirstColumn2, setIsFirstColumn] = React82.useState(false);
@@ -56211,7 +56259,7 @@ var GenericHeaderRenderer = (props) => {
   const headerCellRef = useRef(null);
   const headerCheckboxSelection = colDef.headerCheckboxSelection;
   const headerCheckboxSelectionEnabled = typeof headerCheckboxSelection === "function" ? headerCheckboxSelection({
-    api: gridApi,
+    api: props.api,
     colDef,
     column: props.column,
     columnApi,
@@ -56307,14 +56355,16 @@ var GenericHeaderRenderer = (props) => {
   });
   const [expansionVariant, setExpansionVariant] = React82.useState("closed");
   React82.useEffect(() => {
+    var _a2;
     const onExpandAllChange = (event) => {
       setExpansionVariant(event.source === "expandAll" ? "all" : "closed");
     };
-    gridApi == null ? void 0 : gridApi.addEventListener("expandOrCollapseAll", onExpandAllChange);
+    (_a2 = props.api) == null ? void 0 : _a2.addEventListener("expandOrCollapseAll", onExpandAllChange);
     return () => {
-      gridApi == null ? void 0 : gridApi.removeEventListener("expandOrCollapseAll", onExpandAllChange);
+      var _a3;
+      (_a3 = props.api) == null ? void 0 : _a3.removeEventListener("expandOrCollapseAll", onExpandAllChange);
     };
-  }, [gridApi]);
+  }, [props.api]);
   React82.useEffect(() => {
     const hasTierOneCollapsedNodes = !!findNode(
       (node) => node.level === 0 && !node.expanded,
@@ -56424,7 +56474,7 @@ var GenericHeaderRenderer = (props) => {
       return;
     }
     function updateSelectAllCheckbox() {
-      const currentRows = getCurrentRows(gridApi);
+      const currentRows = getCurrentRows(props.api);
       const isAllSelected = currentRows.length && currentRows.every(isRowSelected);
       const isPartialSelected = !isAllSelected && currentRows.some(isRowSelected);
       if (isAllSelected) {
@@ -73496,6 +73546,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
     }
   };
   const rowHeightConfig = detailRowConfig.height === "auto" || detailRowConfig.height === void 0 ? { detailRowAutoHeight: true } : { detailRowHeight: detailRowConfig.height };
+  const isRowSelectable = () => deprecatedDetailRowSelectionEnabled ?? false;
   return {
     isRowMaster: detailRowConfig.isExpandable,
     masterDetail: true,
@@ -73504,6 +73555,13 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
       return {
         detailGridOptions: {
           alwaysAggregateAtRootLevel: !isServerSideRowModel,
+          autoGroupColumnDef: getDecoratedAutoGroupColDef(
+            detailRowConfig.autoGroupColumnDefinition,
+            enableGroupEditAndValidation,
+            enableDynamicRowHeight,
+            isRowSelectable,
+            false
+          ),
           context: {
             parentId: masterGridParams.node.id.replace("detail_", ""),
             parentData: masterGridParams.node.data
@@ -73517,6 +73575,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
               )
             )
           ),
+          isRowSelectable,
           onGridReady: onGridReadyOrValueChange,
           onCellValueChanged: onGridReadyOrValueChange,
           onRowDataChanged: onGridReadyOrValueChange,
@@ -73539,7 +73598,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
           rowMultiSelectWithClick: detailRowConfig.rowMultiSelectWithClick,
           suppressRowClickSelection: detailRowConfig.suppressRowClickSelection ?? true,
           ensureDomOrder: true,
-          frameworkComponents,
+          components: frameworkComponents,
           icons: tableIcons,
           loadingOverlayComponent: "loadingOverlayRenderer",
           loadingOverlayComponentParams: {
@@ -73551,6 +73610,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
           },
           rowDragManaged: true,
           singleClickEdit: true,
+          suppressAggFuncInHeader: true,
           suppressContextMenu: true,
           suppressColumnVirtualisation: true,
           getRowHeight: getRowHeight == null ? void 0 : getRowHeight(detailRowConfig.customFooters)
@@ -76967,61 +77027,16 @@ var Table = (props) => {
     },
     [props]
   );
-  const addAutoGroupParams = React82.useCallback(
-    function addAutoGroupParams2(columnDefinition) {
-      return {
-        ...columnDefinition,
-        cellRendererSelector: (params) => {
-          var _a2;
-          const cellRendererSelector = (_a2 = columnDefinition.cellRendererSelector) == null ? void 0 : _a2.call(columnDefinition, params);
-          let component = (cellRendererSelector == null ? void 0 : cellRendererSelector.component) ?? "autoGroupCellRenderer";
-          return {
-            component,
-            params: {
-              ...columnDefinition.cellRendererParams,
-              ...cellRendererSelector == null ? void 0 : cellRendererSelector.params,
-              checkbox(_params) {
-                if (_params.node) {
-                  return isRowSelectable({
-                    ..._params.node,
-                    data: _params.node.data ?? _params.node.aggData
-                  });
-                }
-                return false;
-              },
-              siblingGroupsRowSelectionDisabled: props.siblingGroupsRowSelectionDisabled
-            }
-          };
-        }
-      };
-    },
-    [isRowSelectable]
+  const decoratedAutoGroupColDef = React82.useMemo(
+    () => getDecoratedAutoGroupColDef(
+      props == null ? void 0 : props.autoGroupColumnDefinition,
+      internalTableContext.enableGroupEditAndValidation,
+      internalTableContext.enableDynamicRowHeight,
+      isRowSelectable,
+      props.siblingGroupsRowSelectionDisabled
+    ),
+    [props == null ? void 0 : props.autoGroupColumnDefinition]
   );
-  const decoratedAutoGroupColDef = React82.useMemo(() => {
-    if (props == null ? void 0 : props.autoGroupColumnDefinition) {
-      return addAutoGroupParams(
-        transformToColDef(
-          props == null ? void 0 : props.autoGroupColumnDefinition,
-          internalTableContext.enableGroupEditAndValidation,
-          internalTableContext.enableDynamicRowHeight
-        )
-      );
-    }
-    return addAutoGroupParams({
-      headerName: "",
-      cellRendererSelector: (params) => {
-        if (params == null ? void 0 : params.node.rowPinned) {
-          return {
-            component: GrandTotalsLabelRenderer
-          };
-        }
-        return {
-          component: void 0
-        };
-      },
-      lockPosition: true
-    });
-  }, [props == null ? void 0 : props.autoGroupColumnDefinition, addAutoGroupParams]);
   const onColumnGroupOpened = React82.useCallback(
     (event) => {
       var _a2, _b2, _c;

package/dist/modern/index.d.mts

@@ -154,6 +154,7 @@ interface DataTableCellRendererProps<TValue = any, TColumnDefinition extends Col
     rowIndex?: number;
 }
 interface DataTableCellEditorProps<TValue = any, TColumnDefinition extends ColumnDefinition = ColumnDefinition<TValue>> extends DataTableCellRendererProps<TValue, TColumnDefinition> {
+    eventKey: string | null;
     ref?: ((instance: HTMLElement | null) => void) | React__default.MutableRefObject<HTMLElement | null> | null;
     setDataValue: (field: string, newValue: TValue) => void;
     stopEditing: () => void;
@@ -669,6 +670,7 @@ interface GetDetailRowDataParams<TRow = any> extends Omit<AgGetDetailRowDataPara
 }
 type GetRowHeightWithFooters = (customFooters: CustomFooterConfig[] | undefined) => (params: Partial<RowHeightParams>) => number;
 interface DetailRowConfig<TRow = any> {
+    autoGroupColumnDefinition?: ColumnDefinition;
     columnDefinitions: ColumnDefinition[];
     getDetailRowData: (params: GetDetailRowDataParams<TRow>) => void;
     height?: 'auto' | number;

package/dist/modern/index.d.ts

@@ -154,6 +154,7 @@ interface DataTableCellRendererProps<TValue = any, TColumnDefinition extends Col
     rowIndex?: number;
 }
 interface DataTableCellEditorProps<TValue = any, TColumnDefinition extends ColumnDefinition = ColumnDefinition<TValue>> extends DataTableCellRendererProps<TValue, TColumnDefinition> {
+    eventKey: string | null;
     ref?: ((instance: HTMLElement | null) => void) | React__default.MutableRefObject<HTMLElement | null> | null;
     setDataValue: (field: string, newValue: TValue) => void;
     stopEditing: () => void;
@@ -669,6 +670,7 @@ interface GetDetailRowDataParams<TRow = any> extends Omit<AgGetDetailRowDataPara
 }
 type GetRowHeightWithFooters = (customFooters: CustomFooterConfig[] | undefined) => (params: Partial<RowHeightParams>) => number;
 interface DetailRowConfig<TRow = any> {
+    autoGroupColumnDefinition?: ColumnDefinition;
     columnDefinitions: ColumnDefinition[];
     getDetailRowData: (params: GetDetailRowDataParams<TRow>) => void;
     height?: 'auto' | number;

package/dist/modern/index.js

@@ -8179,7 +8179,7 @@ var Renderer3 = ({
 };
 var CurrencyCellRenderer = withDataTableRenderer(Renderer3, "input");
 var Editor = React82__default.default.forwardRef(
-  ({ columnDefinition, stopEditing, value }, ref) => {
+  ({ columnDefinition, eventKey, stopEditing, value }, ref) => {
     const I18n = coreReact.useI18nContext();
     if (isEmptyValue(value) && !columnDefinition.editable) {
       return null;
@@ -8187,7 +8187,7 @@ var Editor = React82__default.default.forwardRef(
     function onBlur() {
       stopEditing();
     }
-    const defaultValue = labsFinancialsUtils.formatNumber(value, {
+    const defaultValue = eventKey ? value : labsFinancialsUtils.formatNumber(value, {
       ...columnDefinition.cellEditorParams?.formatConfig ?? columnDefinition.cellRendererParams?.formatConfig ?? {},
       symbol: void 0,
       symbolAfterValue: void 0
@@ -53221,7 +53221,7 @@ var Renderer7 = ({
   );
 };
 var PercentCellRenderer = withDataTableRenderer(Renderer7, "input");
-var Editor4 = React82__default.default.forwardRef(({ columnDefinition, stopEditing, value }, ref) => {
+var Editor4 = React82__default.default.forwardRef(({ columnDefinition, eventKey, stopEditing, value }, ref) => {
   const I18n = coreReact.useI18nContext();
   function onBlur() {
     stopEditing();
@@ -53229,7 +53229,7 @@ var Editor4 = React82__default.default.forwardRef(({ columnDefinition, stopEditi
   if (isEmptyValue(value) && !columnDefinition.editable) {
     return null;
   }
-  const defaultValue = labsFinancialsUtils.formatNumber(value, {
+  const defaultValue = eventKey ? value : labsFinancialsUtils.formatNumber(value, {
     ...columnDefinition.cellEditorParams?.formatConfig ?? columnDefinition.cellRendererParams?.formatConfig ?? {},
     symbol: void 0,
     symbolAfterValue: void 0
@@ -53571,12 +53571,12 @@ var Renderer11 = ({
 };
 var TextCellRenderer = withDataTableRenderer(Renderer11, "input");
 var Editor7 = React82__default.default.forwardRef(
-  ({ columnDefinition, stopEditing, value }, ref) => {
+  ({ columnDefinition, eventKey, stopEditing, value }, ref) => {
     function onBlur() {
       stopEditing();
     }
     const I18n = coreReact.useI18nContext();
-    const internalValue = columnDefinition.getStringFormattedValue?.(value) ?? value;
+    const internalValue = eventKey ? value : columnDefinition.getStringFormattedValue?.(value) ?? value;
     return /* @__PURE__ */ React82__default.default.createElement(
       coreReact.Input,
       {
@@ -54532,6 +54532,15 @@ function getCheckboxColumn(columnApi) {
 
 // src/utils/transformers.ts
 var emptyObject = {};
+var DEFAULT_AUTO_GROUP_COLUMN_DEFINITION = {
+  headerName: "",
+  cellRendererSelector(params) {
+    return {
+      component: params?.node.rowPinned ? GrandTotalsLabelRenderer : void 0
+    };
+  },
+  lockPosition: true
+};
 function isColGroupDef(colDef) {
   return colDef.children?.length > 0;
 }
@@ -54974,6 +54983,43 @@ function getFilterParams(columnDefinition) {
   }
   return filterProps;
 }
+function addAutoGroupParams(columnDefinition, isRowSelectable, siblingGroupsRowSelectionDisabled) {
+  return {
+    ...columnDefinition,
+    cellRendererSelector: (params) => {
+      const cellRendererSelector = columnDefinition.cellRendererSelector?.(params);
+      return {
+        component: cellRendererSelector?.component ?? AutoGroupCellRenderer,
+        params: {
+          ...columnDefinition.cellRendererParams,
+          ...cellRendererSelector?.params,
+          checkbox(_params) {
+            if (_params.node) {
+              return isRowSelectable({
+                ..._params.node,
+                data: _params.node.data ?? _params.node.aggData
+              });
+            }
+            return false;
+          },
+          siblingGroupsRowSelectionDisabled
+        }
+      };
+    }
+  };
+}
+function getDecoratedAutoGroupColDef(columnDefinition, enableGroupEditAndValidation, enableDynamicRowHeight, isRowSelectable, siblingGroupsRowSelectionDisabled) {
+  const colDef = columnDefinition ? transformToColDef(
+    columnDefinition,
+    enableGroupEditAndValidation,
+    enableDynamicRowHeight
+  ) : DEFAULT_AUTO_GROUP_COLUMN_DEFINITION;
+  return addAutoGroupParams(
+    colDef,
+    isRowSelectable,
+    siblingGroupsRowSelectionDisabled
+  );
+}
 
 // src/CellRenderers/AutoGroupCell.scss
 var css5 = `._autoGroupCell_15e3f_1 {
@@ -55737,6 +55783,7 @@ var DataTableCellEditor = React82__default.default.forwardRef(
         {
           columnDefinition,
           data,
+          eventKey,
           field: node.field,
           isGroup: node.group || false,
           parentData: context?.parentData,
@@ -56130,7 +56177,7 @@ var GenericHeaderRenderer = (props) => {
   const colDef = props.column.getColDef();
   const HeaderNode = colDef.headerComponentParams?.headerNode;
   const I18n = coreReact.useI18nContext();
-  const { columnApi, tableRef, gridApi, onServerSideDataRequest } = useInternalTableContext();
+  const { columnApi, tableRef, onServerSideDataRequest } = useInternalTableContext();
   const onSSDR = Boolean(onServerSideDataRequest);
   const [sortOrder, setSortOrder] = React82__default.default.useState(props.column.getSort());
   const [isFirstColumn2, setIsFirstColumn] = React82__default.default.useState(false);
@@ -56138,7 +56185,7 @@ var GenericHeaderRenderer = (props) => {
   const headerCellRef = React82.useRef(null);
   const headerCheckboxSelection = colDef.headerCheckboxSelection;
   const headerCheckboxSelectionEnabled = typeof headerCheckboxSelection === "function" ? headerCheckboxSelection({
-    api: gridApi,
+    api: props.api,
     colDef,
     column: props.column,
     columnApi,
@@ -56236,11 +56283,11 @@ var GenericHeaderRenderer = (props) => {
     const onExpandAllChange = (event) => {
       setExpansionVariant(event.source === "expandAll" ? "all" : "closed");
     };
-    gridApi?.addEventListener("expandOrCollapseAll", onExpandAllChange);
+    props.api?.addEventListener("expandOrCollapseAll", onExpandAllChange);
     return () => {
-      gridApi?.removeEventListener("expandOrCollapseAll", onExpandAllChange);
+      props.api?.removeEventListener("expandOrCollapseAll", onExpandAllChange);
     };
-  }, [gridApi]);
+  }, [props.api]);
   React82__default.default.useEffect(() => {
     const hasTierOneCollapsedNodes = !!findNode(
       (node) => node.level === 0 && !node.expanded,
@@ -56347,7 +56394,7 @@ var GenericHeaderRenderer = (props) => {
       return;
     }
     function updateSelectAllCheckbox() {
-      const currentRows = getCurrentRows(gridApi);
+      const currentRows = getCurrentRows(props.api);
       const isAllSelected = currentRows.length && currentRows.every(isRowSelected);
       const isPartialSelected = !isAllSelected && currentRows.some(isRowSelected);
       if (isAllSelected) {
@@ -73356,6 +73403,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
     }
   };
   const rowHeightConfig = detailRowConfig.height === "auto" || detailRowConfig.height === void 0 ? { detailRowAutoHeight: true } : { detailRowHeight: detailRowConfig.height };
+  const isRowSelectable = () => deprecatedDetailRowSelectionEnabled ?? false;
   return {
     isRowMaster: detailRowConfig.isExpandable,
     masterDetail: true,
@@ -73364,6 +73412,13 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
       return {
         detailGridOptions: {
           alwaysAggregateAtRootLevel: !isServerSideRowModel,
+          autoGroupColumnDef: getDecoratedAutoGroupColDef(
+            detailRowConfig.autoGroupColumnDefinition,
+            enableGroupEditAndValidation,
+            enableDynamicRowHeight,
+            isRowSelectable,
+            false
+          ),
           context: {
             parentId: masterGridParams.node.id.replace("detail_", ""),
             parentData: masterGridParams.node.data
@@ -73377,6 +73432,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
               )
             )
           ),
+          isRowSelectable,
           onGridReady: onGridReadyOrValueChange,
           onCellValueChanged: onGridReadyOrValueChange,
           onRowDataChanged: onGridReadyOrValueChange,
@@ -73398,7 +73454,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
           rowMultiSelectWithClick: detailRowConfig.rowMultiSelectWithClick,
           suppressRowClickSelection: detailRowConfig.suppressRowClickSelection ?? true,
           ensureDomOrder: true,
-          frameworkComponents,
+          components: frameworkComponents,
           icons: tableIcons,
           loadingOverlayComponent: "loadingOverlayRenderer",
           loadingOverlayComponentParams: {
@@ -73410,6 +73466,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
           },
           rowDragManaged: true,
           singleClickEdit: true,
+          suppressAggFuncInHeader: true,
           suppressContextMenu: true,
           suppressColumnVirtualisation: true,
           getRowHeight: getRowHeight?.(detailRowConfig.customFooters)
@@ -76792,60 +76849,16 @@ var Table = (props) => {
     },
     [props]
   );
-  const addAutoGroupParams = React82__default.default.useCallback(
-    function addAutoGroupParams2(columnDefinition) {
-      return {
-        ...columnDefinition,
-        cellRendererSelector: (params) => {
-          const cellRendererSelector = columnDefinition.cellRendererSelector?.(params);
-          let component = cellRendererSelector?.component ?? "autoGroupCellRenderer";
-          return {
-            component,
-            params: {
-              ...columnDefinition.cellRendererParams,
-              ...cellRendererSelector?.params,
-              checkbox(_params) {
-                if (_params.node) {
-                  return isRowSelectable({
-                    ..._params.node,
-                    data: _params.node.data ?? _params.node.aggData
-                  });
-                }
-                return false;
-              },
-              siblingGroupsRowSelectionDisabled: props.siblingGroupsRowSelectionDisabled
-            }
-          };
-        }
-      };
-    },
-    [isRowSelectable]
+  const decoratedAutoGroupColDef = React82__default.default.useMemo(
+    () => getDecoratedAutoGroupColDef(
+      props?.autoGroupColumnDefinition,
+      internalTableContext.enableGroupEditAndValidation,
+      internalTableContext.enableDynamicRowHeight,
+      isRowSelectable,
+      props.siblingGroupsRowSelectionDisabled
+    ),
+    [props?.autoGroupColumnDefinition]
   );
-  const decoratedAutoGroupColDef = React82__default.default.useMemo(() => {
-    if (props?.autoGroupColumnDefinition) {
-      return addAutoGroupParams(
-        transformToColDef(
-          props?.autoGroupColumnDefinition,
-          internalTableContext.enableGroupEditAndValidation,
-          internalTableContext.enableDynamicRowHeight
-        )
-      );
-    }
-    return addAutoGroupParams({
-      headerName: "",
-      cellRendererSelector: (params) => {
-        if (params?.node.rowPinned) {
-          return {
-            component: GrandTotalsLabelRenderer
-          };
-        }
-        return {
-          component: void 0
-        };
-      },
-      lockPosition: true
-    });
-  }, [props?.autoGroupColumnDefinition, addAutoGroupParams]);
   const onColumnGroupOpened = React82__default.default.useCallback(
     (event) => {
       internalTableContext.analytics?.client.addEvent(

package/dist/modern/index.mjs

@@ -2,7 +2,7 @@ import React82, { useState, forwardRef, useContext, useRef, useImperativeHandle,
 import { startsWith, equals, omit, isNil, mergeDeepLeft, intersection, isEmpty, groupBy } from 'ramda';
 import { useI18nContext, Select, Input, UNSAFE_useOverlayTriggerContext, Card, Flex, Box, SegmentedController, Calendar, useDateTime, OverlayTrigger, isEventSource, DateInput, UNSAFE_isValidYearRange, DateSelect, PillSelect, TextArea, UNSAFE_useMenuImperativeControlNavigation, UNSAFE_Menu, UNSAFE_menuItemsWrapperAttribute, Spinner, FlexList, Typography, Tooltip, Button, Required, colors, Form, spacing, Switch, Panel, UNSAFE_StyledFilterTokenLabel, typographyWeights, SelectButton, StyledSelectButton, StyledSelectButtonLabel, StyledButton, StyledSelectArrow, Popover, UNSAFE_StyledSuperSelectTrigger, UNSAFE_StyledSuperSelectLabel, UNSAFE_StyledSuperSelectArrow, DateTimeProvider, useField, Label, UNSAFE_mergeRefs, ContactItem as ContactItem$1, ToggleButton, Pagination, Link, AvatarStack, Pill, Typeahead, UNSAFE_FilterToken, useI18n, I18nContext, UNSAFE_SuperSelect, Avatar, MultiSelect, H3, Checkbox, useVisibility, UNSAFE_useSuperSelectContext, DropdownFlyout, StyledDropdownFlyoutLabel, StyledDropdownFlyoutExpandIcon, EmptyState as EmptyState$1 } from '@procore/core-react';
 import classnames from 'classnames/bind';
-import { Error as Error$1, Grip, Pencil, Building, Calendar as Calendar$1, CaretsInVertical, CaretsOutVertical, CaretsOutVerticalWithLine, CaretsIn, CaretsOut, ArrowDown, ArrowUp, CaretDown, CaretRight } from '@procore/core-icons';
+import { Error as Error$1, Grip, Pencil, Building, Calendar as Calendar$1, CaretsInVertical, CaretsOutVertical, CaretsOutVerticalWithLine, CaretsIn, CaretsOut, CaretDown, CaretRight, ArrowDown, ArrowUp } from '@procore/core-icons';
 import classNames from 'classnames';
 import { isDate, parseISO, isSameDay, formatISO, isBefore } from 'date-fns';
 import { formatNumber, formatCurrency, formatPercentage } from '@procore/labs-financials-utils';
@@ -8164,7 +8164,7 @@ var Renderer3 = ({
 };
 var CurrencyCellRenderer = withDataTableRenderer(Renderer3, "input");
 var Editor = React82.forwardRef(
-  ({ columnDefinition, stopEditing, value }, ref) => {
+  ({ columnDefinition, eventKey, stopEditing, value }, ref) => {
     const I18n = useI18nContext();
     if (isEmptyValue(value) && !columnDefinition.editable) {
       return null;
@@ -8172,7 +8172,7 @@ var Editor = React82.forwardRef(
     function onBlur() {
       stopEditing();
     }
-    const defaultValue = formatNumber(value, {
+    const defaultValue = eventKey ? value : formatNumber(value, {
       ...columnDefinition.cellEditorParams?.formatConfig ?? columnDefinition.cellRendererParams?.formatConfig ?? {},
       symbol: void 0,
       symbolAfterValue: void 0
@@ -53206,7 +53206,7 @@ var Renderer7 = ({
   );
 };
 var PercentCellRenderer = withDataTableRenderer(Renderer7, "input");
-var Editor4 = React82.forwardRef(({ columnDefinition, stopEditing, value }, ref) => {
+var Editor4 = React82.forwardRef(({ columnDefinition, eventKey, stopEditing, value }, ref) => {
   const I18n = useI18nContext();
   function onBlur() {
     stopEditing();
@@ -53214,7 +53214,7 @@ var Editor4 = React82.forwardRef(({ columnDefinition, stopEditing, value }, ref)
   if (isEmptyValue(value) && !columnDefinition.editable) {
     return null;
   }
-  const defaultValue = formatNumber(value, {
+  const defaultValue = eventKey ? value : formatNumber(value, {
     ...columnDefinition.cellEditorParams?.formatConfig ?? columnDefinition.cellRendererParams?.formatConfig ?? {},
     symbol: void 0,
     symbolAfterValue: void 0
@@ -53556,12 +53556,12 @@ var Renderer11 = ({
 };
 var TextCellRenderer = withDataTableRenderer(Renderer11, "input");
 var Editor7 = React82.forwardRef(
-  ({ columnDefinition, stopEditing, value }, ref) => {
+  ({ columnDefinition, eventKey, stopEditing, value }, ref) => {
     function onBlur() {
       stopEditing();
     }
     const I18n = useI18nContext();
-    const internalValue = columnDefinition.getStringFormattedValue?.(value) ?? value;
+    const internalValue = eventKey ? value : columnDefinition.getStringFormattedValue?.(value) ?? value;
     return /* @__PURE__ */ React82.createElement(
       Input,
       {
@@ -54517,6 +54517,15 @@ function getCheckboxColumn(columnApi) {
 
 // src/utils/transformers.ts
 var emptyObject = {};
+var DEFAULT_AUTO_GROUP_COLUMN_DEFINITION = {
+  headerName: "",
+  cellRendererSelector(params) {
+    return {
+      component: params?.node.rowPinned ? GrandTotalsLabelRenderer : void 0
+    };
+  },
+  lockPosition: true
+};
 function isColGroupDef(colDef) {
   return colDef.children?.length > 0;
 }
@@ -54959,6 +54968,43 @@ function getFilterParams(columnDefinition) {
   }
   return filterProps;
 }
+function addAutoGroupParams(columnDefinition, isRowSelectable, siblingGroupsRowSelectionDisabled) {
+  return {
+    ...columnDefinition,
+    cellRendererSelector: (params) => {
+      const cellRendererSelector = columnDefinition.cellRendererSelector?.(params);
+      return {
+        component: cellRendererSelector?.component ?? AutoGroupCellRenderer,
+        params: {
+          ...columnDefinition.cellRendererParams,
+          ...cellRendererSelector?.params,
+          checkbox(_params) {
+            if (_params.node) {
+              return isRowSelectable({
+                ..._params.node,
+                data: _params.node.data ?? _params.node.aggData
+              });
+            }
+            return false;
+          },
+          siblingGroupsRowSelectionDisabled
+        }
+      };
+    }
+  };
+}
+function getDecoratedAutoGroupColDef(columnDefinition, enableGroupEditAndValidation, enableDynamicRowHeight, isRowSelectable, siblingGroupsRowSelectionDisabled) {
+  const colDef = columnDefinition ? transformToColDef(
+    columnDefinition,
+    enableGroupEditAndValidation,
+    enableDynamicRowHeight
+  ) : DEFAULT_AUTO_GROUP_COLUMN_DEFINITION;
+  return addAutoGroupParams(
+    colDef,
+    isRowSelectable,
+    siblingGroupsRowSelectionDisabled
+  );
+}
 
 // src/CellRenderers/AutoGroupCell.scss
 var css5 = `._autoGroupCell_15e3f_1 {
@@ -55722,6 +55768,7 @@ var DataTableCellEditor = React82.forwardRef(
         {
           columnDefinition,
           data,
+          eventKey,
           field: node.field,
           isGroup: node.group || false,
           parentData: context?.parentData,
@@ -56115,7 +56162,7 @@ var GenericHeaderRenderer = (props) => {
   const colDef = props.column.getColDef();
   const HeaderNode = colDef.headerComponentParams?.headerNode;
   const I18n = useI18nContext();
-  const { columnApi, tableRef, gridApi, onServerSideDataRequest } = useInternalTableContext();
+  const { columnApi, tableRef, onServerSideDataRequest } = useInternalTableContext();
   const onSSDR = Boolean(onServerSideDataRequest);
   const [sortOrder, setSortOrder] = React82.useState(props.column.getSort());
   const [isFirstColumn2, setIsFirstColumn] = React82.useState(false);
@@ -56123,7 +56170,7 @@ var GenericHeaderRenderer = (props) => {
   const headerCellRef = useRef(null);
   const headerCheckboxSelection = colDef.headerCheckboxSelection;
   const headerCheckboxSelectionEnabled = typeof headerCheckboxSelection === "function" ? headerCheckboxSelection({
-    api: gridApi,
+    api: props.api,
     colDef,
     column: props.column,
     columnApi,
@@ -56221,11 +56268,11 @@ var GenericHeaderRenderer = (props) => {
     const onExpandAllChange = (event) => {
       setExpansionVariant(event.source === "expandAll" ? "all" : "closed");
     };
-    gridApi?.addEventListener("expandOrCollapseAll", onExpandAllChange);
+    props.api?.addEventListener("expandOrCollapseAll", onExpandAllChange);
     return () => {
-      gridApi?.removeEventListener("expandOrCollapseAll", onExpandAllChange);
+      props.api?.removeEventListener("expandOrCollapseAll", onExpandAllChange);
     };
-  }, [gridApi]);
+  }, [props.api]);
   React82.useEffect(() => {
     const hasTierOneCollapsedNodes = !!findNode(
       (node) => node.level === 0 && !node.expanded,
@@ -56332,7 +56379,7 @@ var GenericHeaderRenderer = (props) => {
       return;
     }
     function updateSelectAllCheckbox() {
-      const currentRows = getCurrentRows(gridApi);
+      const currentRows = getCurrentRows(props.api);
       const isAllSelected = currentRows.length && currentRows.every(isRowSelected);
       const isPartialSelected = !isAllSelected && currentRows.some(isRowSelected);
       if (isAllSelected) {
@@ -73341,6 +73388,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
     }
   };
   const rowHeightConfig = detailRowConfig.height === "auto" || detailRowConfig.height === void 0 ? { detailRowAutoHeight: true } : { detailRowHeight: detailRowConfig.height };
+  const isRowSelectable = () => deprecatedDetailRowSelectionEnabled ?? false;
   return {
     isRowMaster: detailRowConfig.isExpandable,
     masterDetail: true,
@@ -73349,6 +73397,13 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
       return {
         detailGridOptions: {
           alwaysAggregateAtRootLevel: !isServerSideRowModel,
+          autoGroupColumnDef: getDecoratedAutoGroupColDef(
+            detailRowConfig.autoGroupColumnDefinition,
+            enableGroupEditAndValidation,
+            enableDynamicRowHeight,
+            isRowSelectable,
+            false
+          ),
           context: {
             parentId: masterGridParams.node.id.replace("detail_", ""),
             parentData: masterGridParams.node.data
@@ -73362,6 +73417,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
               )
             )
           ),
+          isRowSelectable,
           onGridReady: onGridReadyOrValueChange,
           onCellValueChanged: onGridReadyOrValueChange,
           onRowDataChanged: onGridReadyOrValueChange,
@@ -73383,7 +73439,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
           rowMultiSelectWithClick: detailRowConfig.rowMultiSelectWithClick,
           suppressRowClickSelection: detailRowConfig.suppressRowClickSelection ?? true,
           ensureDomOrder: true,
-          frameworkComponents,
+          components: frameworkComponents,
           icons: tableIcons,
           loadingOverlayComponent: "loadingOverlayRenderer",
           loadingOverlayComponentParams: {
@@ -73395,6 +73451,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
           },
           rowDragManaged: true,
           singleClickEdit: true,
+          suppressAggFuncInHeader: true,
           suppressContextMenu: true,
           suppressColumnVirtualisation: true,
           getRowHeight: getRowHeight?.(detailRowConfig.customFooters)
@@ -76777,60 +76834,16 @@ var Table = (props) => {
     },
     [props]
   );
-  const addAutoGroupParams = React82.useCallback(
-    function addAutoGroupParams2(columnDefinition) {
-      return {
-        ...columnDefinition,
-        cellRendererSelector: (params) => {
-          const cellRendererSelector = columnDefinition.cellRendererSelector?.(params);
-          let component = cellRendererSelector?.component ?? "autoGroupCellRenderer";
-          return {
-            component,
-            params: {
-              ...columnDefinition.cellRendererParams,
-              ...cellRendererSelector?.params,
-              checkbox(_params) {
-                if (_params.node) {
-                  return isRowSelectable({
-                    ..._params.node,
-                    data: _params.node.data ?? _params.node.aggData
-                  });
-                }
-                return false;
-              },
-              siblingGroupsRowSelectionDisabled: props.siblingGroupsRowSelectionDisabled
-            }
-          };
-        }
-      };
-    },
-    [isRowSelectable]
+  const decoratedAutoGroupColDef = React82.useMemo(
+    () => getDecoratedAutoGroupColDef(
+      props?.autoGroupColumnDefinition,
+      internalTableContext.enableGroupEditAndValidation,
+      internalTableContext.enableDynamicRowHeight,
+      isRowSelectable,
+      props.siblingGroupsRowSelectionDisabled
+    ),
+    [props?.autoGroupColumnDefinition]
   );
-  const decoratedAutoGroupColDef = React82.useMemo(() => {
-    if (props?.autoGroupColumnDefinition) {
-      return addAutoGroupParams(
-        transformToColDef(
-          props?.autoGroupColumnDefinition,
-          internalTableContext.enableGroupEditAndValidation,
-          internalTableContext.enableDynamicRowHeight
-        )
-      );
-    }
-    return addAutoGroupParams({
-      headerName: "",
-      cellRendererSelector: (params) => {
-        if (params?.node.rowPinned) {
-          return {
-            component: GrandTotalsLabelRenderer
-          };
-        }
-        return {
-          component: void 0
-        };
-      },
-      lockPosition: true
-    });
-  }, [props?.autoGroupColumnDefinition, addAutoGroupParams]);
   const onColumnGroupOpened = React82.useCallback(
     (event) => {
       internalTableContext.analytics?.client.addEvent(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/data-table",
-  "version": "13.1.1",
+  "version": "13.2.1",
   "description": "Complex data grid built on top of ag-grid, with DST components and styles.",
   "main": "dist/legacy/index.js",
   "module": "dist/legacy/index.mjs",
@@ -101,7 +101,7 @@
     "@procore/core-css": "10.17.0",
     "@procore/core-icons": "12.0.0",
     "@procore/core-prettier": "10.2.0",
-    "@procore/core-react": "11.30.0",
+    "@procore/core-react": "11.31.0",
     "@procore/eslint-config": "10.0.0",
     "@procore/labs-financials-utils": "3.0.1",
     "@procore/labs-procore-environment": "3.2.0",