@procore/data-table 14.13.0 → 14.14.0

package/dist/legacy/index.js

@@ -53422,7 +53422,7 @@ var Renderer9 = ({
   if (isGroup || rowPinned && columnDefinition.aggFunc) {
     return /* @__PURE__ */ React76.createElement(Typography, { ...typographyProps, weight: "semibold" }, label);
   }
-  return /* @__PURE__ */ React76.createElement(Pill, { color: getColor(value), className: cx10("pill-cell") }, label == null ? void 0 : label.toUpperCase());
+  return /* @__PURE__ */ React76.createElement(Pill, { color: getColor(value), className: cx10("pill-cell") }, label);
 };
 var PillCellRenderer = withDataTableRenderer(Renderer9, "select");
 var Editor5 = React76.forwardRef(
@@ -53459,7 +53459,7 @@ var Editor5 = React76.forwardRef(
     function getLabel3(item) {
       var _a2;
       const unformattedLabel = ((_a2 = columnDefinition.getStringFormattedValue) == null ? void 0 : _a2.call(columnDefinition, item)) || "";
-      return unformattedLabel.toUpperCase();
+      return unformattedLabel;
     }
     return /* @__PURE__ */ React76.createElement(
       PillSelect,
@@ -56611,9 +56611,10 @@ var GenericHeaderRenderer = (props) => {
     props.api.addEventListener("columnRowGroupChanged", updateExpandedState);
     return () => {
       props.column.removeEventListener("sortChanged", onSortChanged);
-      props.api.removeEventListener(
+      removeEventListenerFromGrid(
         "columnRowGroupChanged",
-        updateExpandedState
+        updateExpandedState,
+        props.api
       );
     };
   }, [props.column]);
@@ -57708,6 +57709,7 @@ var InternalTableContext = React76.createContext({
   getRowHeight: () => () => rowSize.md,
   grandTotalsLabelInnerRenderer: void 0,
   gridApi: void 0,
+  localStoragePersistenceKey: void 0,
   onBulkEditUpdate: () => Promise.resolve(),
   onServerSideDataRequest: void 0,
   onTableConfigChange: () => {
@@ -57724,6 +57726,7 @@ var InternalTableContext = React76.createContext({
   setRowHeight: () => {
   },
   showExpandCollapseAllToggle: false,
+  expandCollapseStateRef: null,
   tableRef: null,
   getColumnDefinition: () => void 0,
   setSelectedGroupIndex: () => {
@@ -78171,6 +78174,63 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
   };
 };
 
+// src/utils/expandRows.ts
+var getGroupRowState = (gridApi, groupDefaultExpanded = 0) => {
+  const expandedRoutes = [];
+  const collapsedRoutes = [];
+  if (gridApi) {
+    gridApi.forEachNode((node) => {
+      const route = node.getRoute();
+      if (route) {
+        const routePath = route.join(",");
+        const defaultExpandLevel = groupDefaultExpanded === -1 ? Infinity : groupDefaultExpanded;
+        if (node.level > defaultExpandLevel - 1) {
+          if (node.expanded) {
+            expandedRoutes.push(routePath);
+          }
+        } else if (!node.expanded) {
+          collapsedRoutes.push(routePath);
+        }
+      }
+    });
+  }
+  return { expandedRoutes, collapsedRoutes };
+};
+var setExpandCollapseRow = (gridApi, tableConfig, groupDefaultExpanded = 0) => {
+  var _a, _b;
+  const expandedRoutes = ((_a = tableConfig.groupRowState) == null ? void 0 : _a.expandedRoutes) ?? [];
+  const collapsedRoutes = ((_b = tableConfig.groupRowState) == null ? void 0 : _b.collapsedRoutes) ?? [];
+  gridApi.forEachNode((node) => {
+    const route = node.getRoute();
+    if (route) {
+      const routePath = route.join(",");
+      const defaultExpandLevel = groupDefaultExpanded === -1 ? Infinity : groupDefaultExpanded;
+      if (node.level > defaultExpandLevel - 1) {
+        if (expandedRoutes.includes(routePath)) {
+          node.setExpanded(true);
+        }
+      } else if (collapsedRoutes.includes(routePath)) {
+        node.setExpanded(false);
+      }
+    }
+  });
+};
+var isRowOpenedByDefault = (node, tableConfig, groupDefaultExpanded = 0) => {
+  var _a, _b;
+  const expandedRoutes = ((_a = tableConfig == null ? void 0 : tableConfig.groupRowState) == null ? void 0 : _a.expandedRoutes) ?? [];
+  const collapsedRoutes = ((_b = tableConfig == null ? void 0 : tableConfig.groupRowState) == null ? void 0 : _b.collapsedRoutes) ?? [];
+  const route = node.getRoute();
+  if (!route) {
+    return false;
+  }
+  const routePath = route.join(",");
+  const defaultExpandLevel = groupDefaultExpanded === -1 ? Infinity : groupDefaultExpanded;
+  if (node.level > defaultExpandLevel - 1) {
+    return expandedRoutes.includes(routePath);
+  } else
+    return !collapsedRoutes.includes(routePath);
+};
+
 // src/utils/getRootRowNode.ts
 function getRootRowNode(rowNode) {
   return rowNode.level > 0 && rowNode.parent ? getRootRowNode(rowNode.parent) : rowNode;
@@ -80693,6 +80753,7 @@ var useTableApi = ({
   columnApi,
   columnDefinitions,
   gridApi,
+  groupDefaultExpanded,
   setLoadingStatus,
   wrapperRef
 }) => {
@@ -80886,10 +80947,33 @@ var useTableApi = ({
   const setSearchValue = React76.useCallback(
     (value) => {
       gridApi == null ? void 0 : gridApi.setQuickFilter(value);
+      gridApi == null ? void 0 : gridApi.forEachNodeAfterFilterAndSort((node) => {
+        if (node.id) {
+          const currentNode = rowSelectionRef == null ? void 0 : rowSelectionRef.current.affectedRows[node.id];
+          if (currentNode && currentNode.selectedState === rowSelectionState.selected) {
+            node.setSelected(true, false, "checkboxSelected");
+          }
+        }
+      });
       resetPagination();
+      gridApi == null ? void 0 : gridApi.redrawRows();
     },
-    [gridApi]
+    [gridApi, rowSelectionRef.current]
   );
+  React76.useEffect(() => {
+    function handleRowSelection(event) {
+      if (event.node.displayed && event.node.id) {
+        rowSelectionRef.current.affectedRows[event.node.id] = {
+          node: event.node,
+          selectedState: event.node.isSelected() ? rowSelectionState.selected : rowSelectionState.unselected
+        };
+      }
+    }
+    (gridApi == null ? void 0 : gridApi.addEventListener) && gridApi.addEventListener("rowSelected", handleRowSelection);
+    return () => {
+      removeEventListenerFromGrid("rowSelected", handleRowSelection, gridApi);
+    };
+  }, [gridApi]);
   const setLoading = React76.useCallback((loading, message = "") => {
     setLoadingStatus({
       loading,
@@ -80951,6 +81035,7 @@ var useTableApi = ({
           adjustRowDragIcon(gridApi, columnApi);
         });
       }
+      setExpandCollapseRow(gridApi, config, groupDefaultExpanded);
     },
     [columnApi, gridApi, internalSetRowHeight, filterStorage.setSelectedFilters]
   );
@@ -81044,7 +81129,8 @@ var useTableApi = ({
       columnApi,
       rowHeight,
       filterStorage,
-      rowSelectionRef
+      rowSelectionRef,
+      groupDefaultExpanded
     }),
     [columnApi, gridApi, rowHeight, filterStorage]
   );
@@ -81318,7 +81404,6 @@ function buildPartialTableApi({
     focusField && (gridApi == null ? void 0 : gridApi.setFocusedCell(rowIndex, focusField));
   };
   return {
-    getVisibleRowNodes,
     applyTransaction,
     applyServerSideTransaction,
     collapseAll,
@@ -81333,6 +81418,7 @@ function buildPartialTableApi({
     getSelectedRows: getSelectedRows2,
     getServerSideSelectionState,
     getTableConfiguration,
+    getVisibleRowNodes,
     refreshCells,
     setPinnedBottomRowData,
     setRowData,
@@ -81450,6 +81536,12 @@ var DataTable = ({
   const [rowHeight, setRowHeight] = React76.useState(
     (initialTableConfig == null ? void 0 : initialTableConfig.rowHeight) || rowSize.md
   );
+  const expandCollapseStateRef = React76.useRef(
+    (initialTableConfig == null ? void 0 : initialTableConfig.groupRowState) || {
+      expandedRoutes: [],
+      collapsedRoutes: []
+    }
+  );
   const rowHeightRef = React76.useRef(
     (initialTableConfig == null ? void 0 : initialTableConfig.rowHeight) || rowSize.md
   );
@@ -81497,12 +81589,14 @@ var DataTable = ({
       if (localStoragePersistenceKey) {
         storage.local.setItem(localStoragePersistenceKey, {
           ...config,
+          groupRowState: expandCollapseStateRef.current,
           rowHeight: rowHeightRef.current,
           serverFilters: filterStorage.filtersState
         });
       }
       onTableConfigChange == null ? void 0 : onTableConfigChange({
         ...config,
+        groupRowState: expandCollapseStateRef.current,
         rowHeight: rowHeightRef.current,
         serverFilters: filterStorage.filtersState
       });
@@ -81613,6 +81707,7 @@ var DataTable = ({
         onServerSideDataRequest,
         onTableConfigChange: internalOnTableConfigChange,
         rowSelectionRef,
+        expandCollapseStateRef,
         rowHeight,
         searchStorage,
         selectedGroupIndex,
@@ -81673,7 +81768,7 @@ function getServerSideDatasource(onServerSideDataRequestCallbackRef, onEmptyResp
 }
 var minimumColumnWidth = 140;
 var Table = (props) => {
-  var _a, _b;
+  var _a, _b, _c;
   const { suppressColumnVirtualisation = true, rowActionsConfig = {} } = props;
   const I18n = useI18nContext();
   const internalTableContext = useInternalTableContext();
@@ -81715,8 +81810,10 @@ var Table = (props) => {
     columnDefinitions: internalTableContext.columnDefinitions,
     gridApi,
     setLoadingStatus,
-    wrapperRef
+    wrapperRef,
+    groupDefaultExpanded: props.groupDefaultExpanded
   });
+  const initialTableConfig = internalTableContext.initialTableConfig;
   React76.useImperativeHandle(internalTableContext.tableRef, () => tableApi, [
     tableApi
   ]);
@@ -82030,8 +82127,8 @@ var Table = (props) => {
   );
   const onColumnGroupOpened = React76.useCallback(
     (event) => {
-      var _a2, _b2, _c;
-      (_c = internalTableContext.analytics) == null ? void 0 : _c.client.addEvent(
+      var _a2, _b2, _c2;
+      (_c2 = internalTableContext.analytics) == null ? void 0 : _c2.client.addEvent(
         "design_system.data_table.column.expand_toggled",
         {
           client: internalTableContext.analytics.clientName,
@@ -82048,14 +82145,14 @@ var Table = (props) => {
   );
   const onColumnPinned = React76.useCallback(
     (event) => {
-      var _a2, _b2, _c, _d;
+      var _a2, _b2, _c2, _d;
       (_d = internalTableContext.analytics) == null ? void 0 : _d.client.addEvent(
         "design_system.data_table.column.pinned",
         {
           client: internalTableContext.analytics.clientName,
           column: (_a2 = event.column) == null ? void 0 : _a2.getColId(),
           side: (_b2 = event.column) == null ? void 0 : _b2.getPinned(),
-          position: (_c = columnApi == null ? void 0 : columnApi.getColumns()) == null ? void 0 : _c.findIndex(
+          position: (_c2 = columnApi == null ? void 0 : columnApi.getColumns()) == null ? void 0 : _c2.findIndex(
             (col) => {
               var _a3;
               return col.getId() === ((_a3 = event.column) == null ? void 0 : _a3.getColId());
@@ -82154,7 +82251,7 @@ var Table = (props) => {
   const onDragStopped = React76.useCallback(
     // eslint-disable-next-line complexity
     (event) => {
-      var _a2, _b2, _c;
+      var _a2, _b2, _c2;
       if (event.target.className.includes("ag-header-cell")) {
         internalTableContext.onTableConfigChange();
       }
@@ -82172,7 +82269,7 @@ var Table = (props) => {
           const firstVisibleColumnIndex = allColumns.findIndex(
             (col) => col.isVisible()
           );
-          if (moveColumnEvent.toIndex === firstVisibleColumnIndex || ((_c = moveColumnEvent.column) == null ? void 0 : _c.getColDef().rowDrag)) {
+          if (moveColumnEvent.toIndex === firstVisibleColumnIndex || ((_c2 = moveColumnEvent.column) == null ? void 0 : _c2.getColDef().rowDrag)) {
             adjustRowDragIcon(event.api, event.columnApi);
           }
         }
@@ -82251,27 +82348,55 @@ var Table = (props) => {
       (_a2 = document.getElementsByClassName("ag-body-viewport")[0]) == null ? void 0 : _a2.clientWidth
     );
   }, [setViewportWidth]);
+  const isClientSideGroupOpenByDefault = React76.useCallback(
+    (params) => {
+      const node = params.rowNode;
+      if (!node) {
+        return false;
+      }
+      return isRowOpenedByDefault(
+        node,
+        initialTableConfig,
+        props.groupsAlwaysExpanded ? -1 : props.groupDefaultExpanded
+      );
+    },
+    [initialTableConfig, props.groupDefaultExpanded]
+  );
+  const isServerSideGroupOpenByDefault = React76.useCallback(
+    (params) => {
+      const node = params.rowNode;
+      if (!node) {
+        return false;
+      }
+      return isRowOpenedByDefault(
+        node,
+        initialTableConfig,
+        props.groupsAlwaysExpanded ? -1 : props.groupDefaultExpanded
+      );
+    },
+    [initialTableConfig, props.groupDefaultExpanded]
+  );
   const onGridReady = (params) => {
-    var _a2, _b2, _c;
+    var _a2, _b2, _c2;
     internalTableContext.setGridApi(params.api);
     internalTableContext.setColumnApi(params.columnApi);
     setViewportWidth(
       (_a2 = document.getElementsByClassName("ag-body-viewport")[0]) == null ? void 0 : _a2.clientWidth
     );
-    (_c = (_b2 = props.UNSAFE_internalAGGridOverrides) == null ? void 0 : _b2.onGridReady) == null ? void 0 : _c.call(_b2, params);
+    (_c2 = (_b2 = props.UNSAFE_internalAGGridOverrides) == null ? void 0 : _b2.onGridReady) == null ? void 0 : _c2.call(_b2, params);
   };
   const postProcessPopup = (params) => {
     params.ePopup.style.top = `${HEADER_HEIGHT}px`;
   };
   const internalOnRowSelected = (event) => {
-    var _a2, _b2, _c;
+    var _a2, _b2, _c2;
     (_a2 = props.onRowSelected) == null ? void 0 : _a2.call(props, event);
     if (props.siblingGroupsRowSelectionDisabled) {
       const rootRowNode = getRootRowNode(event.node);
       if (!event.node.isSelected() && internalTableContext.selectedGroupIndex !== null && (rootRowNode == null ? void 0 : rootRowNode.id) === internalTableContext.selectedGroupIndex && event.api.getSelectedNodes().length === 0) {
         (_b2 = internalTableContext == null ? void 0 : internalTableContext.setSelectedGroupIndex) == null ? void 0 : _b2.call(internalTableContext, null);
       } else {
-        (_c = internalTableContext == null ? void 0 : internalTableContext.setSelectedGroupIndex) == null ? void 0 : _c.call(internalTableContext, (prevState) => {
+        (_c2 = internalTableContext == null ? void 0 : internalTableContext.setSelectedGroupIndex) == null ? void 0 : _c2.call(internalTableContext, (prevState) => {
           return prevState ?? (rootRowNode == null ? void 0 : rootRowNode.id) ?? null;
         });
       }
@@ -82280,13 +82405,26 @@ var Table = (props) => {
   const internalRowGroupOpened = React76.useCallback(
     (event) => {
       var _a2;
+      if (internalTableContext.expandCollapseStateRef) {
+        internalTableContext.expandCollapseStateRef.current = getGroupRowState(
+          gridApi,
+          props.groupDefaultExpanded
+        );
+      }
+      internalTableContext.onTableConfigChange();
       (_a2 = props.onRowGroupOpened) == null ? void 0 : _a2.call(props, {
         expanded: event.expanded,
         node: serializeNode(event.node),
         rowIndex: event.rowIndex
       });
     },
-    [props.onRowGroupOpened]
+    [
+      props.onRowGroupOpened,
+      internalTableContext.onTableConfigChange,
+      tableApi == null ? void 0 : tableApi.getTableConfiguration(),
+      (_c = internalTableContext.expandCollapseStateRef) == null ? void 0 : _c.current,
+      gridApi
+    ]
   );
   const getGroupRowAgg = React76.useCallback(
     (params) => {
@@ -82439,6 +82577,8 @@ var Table = (props) => {
             alwaysAggregateAtRootLevel: !onSSDR,
             autoGroupColumnDef: decoratedAutoGroupColDef,
             cacheBlockSize: props.paginationPageSize || defaultPaginationPageSize,
+            isGroupOpenByDefault: isClientSideGroupOpenByDefault,
+            isServerSideGroupOpenByDefault,
             defaultColDef,
             enableGroupEdit: internalTableContext.enableGroupEditAndValidation,
             enableCellTextSelection: internalTableContext.enableCellTextSelection,

package/dist/modern/index.cjs

@@ -53409,7 +53409,7 @@ var Renderer9 = ({
   if (isGroup || rowPinned && columnDefinition.aggFunc) {
     return /* @__PURE__ */ React76__default.default.createElement(coreReact.Typography, { ...typographyProps, weight: "semibold" }, label);
   }
-  return /* @__PURE__ */ React76__default.default.createElement(coreReact.Pill, { color: getColor(value), className: cx10("pill-cell") }, label?.toUpperCase());
+  return /* @__PURE__ */ React76__default.default.createElement(coreReact.Pill, { color: getColor(value), className: cx10("pill-cell") }, label);
 };
 var PillCellRenderer = withDataTableRenderer(Renderer9, "select");
 var Editor5 = React76__default.default.forwardRef(
@@ -53442,7 +53442,7 @@ var Editor5 = React76__default.default.forwardRef(
     }
     function getLabel3(item) {
       const unformattedLabel = columnDefinition.getStringFormattedValue?.(item) || "";
-      return unformattedLabel.toUpperCase();
+      return unformattedLabel;
     }
     return /* @__PURE__ */ React76__default.default.createElement(
       coreReact.PillSelect,
@@ -56535,9 +56535,10 @@ var GenericHeaderRenderer = (props) => {
     props.api.addEventListener("columnRowGroupChanged", updateExpandedState);
     return () => {
       props.column.removeEventListener("sortChanged", onSortChanged);
-      props.api.removeEventListener(
+      removeEventListenerFromGrid(
         "columnRowGroupChanged",
-        updateExpandedState
+        updateExpandedState,
+        props.api
       );
     };
   }, [props.column]);
@@ -57603,6 +57604,7 @@ var InternalTableContext = React76__default.default.createContext({
   getRowHeight: () => () => rowSize.md,
   grandTotalsLabelInnerRenderer: void 0,
   gridApi: void 0,
+  localStoragePersistenceKey: void 0,
   onBulkEditUpdate: () => Promise.resolve(),
   onServerSideDataRequest: void 0,
   onTableConfigChange: () => {
@@ -57619,6 +57621,7 @@ var InternalTableContext = React76__default.default.createContext({
   setRowHeight: () => {
   },
   showExpandCollapseAllToggle: false,
+  expandCollapseStateRef: null,
   tableRef: null,
   getColumnDefinition: () => void 0,
   setSelectedGroupIndex: () => {
@@ -78033,6 +78036,61 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
   };
 };
 
+// src/utils/expandRows.ts
+var getGroupRowState = (gridApi, groupDefaultExpanded = 0) => {
+  const expandedRoutes = [];
+  const collapsedRoutes = [];
+  if (gridApi) {
+    gridApi.forEachNode((node) => {
+      const route = node.getRoute();
+      if (route) {
+        const routePath = route.join(",");
+        const defaultExpandLevel = groupDefaultExpanded === -1 ? Infinity : groupDefaultExpanded;
+        if (node.level > defaultExpandLevel - 1) {
+          if (node.expanded) {
+            expandedRoutes.push(routePath);
+          }
+        } else if (!node.expanded) {
+          collapsedRoutes.push(routePath);
+        }
+      }
+    });
+  }
+  return { expandedRoutes, collapsedRoutes };
+};
+var setExpandCollapseRow = (gridApi, tableConfig, groupDefaultExpanded = 0) => {
+  const expandedRoutes = tableConfig.groupRowState?.expandedRoutes ?? [];
+  const collapsedRoutes = tableConfig.groupRowState?.collapsedRoutes ?? [];
+  gridApi.forEachNode((node) => {
+    const route = node.getRoute();
+    if (route) {
+      const routePath = route.join(",");
+      const defaultExpandLevel = groupDefaultExpanded === -1 ? Infinity : groupDefaultExpanded;
+      if (node.level > defaultExpandLevel - 1) {
+        if (expandedRoutes.includes(routePath)) {
+          node.setExpanded(true);
+        }
+      } else if (collapsedRoutes.includes(routePath)) {
+        node.setExpanded(false);
+      }
+    }
+  });
+};
+var isRowOpenedByDefault = (node, tableConfig, groupDefaultExpanded = 0) => {
+  const expandedRoutes = tableConfig?.groupRowState?.expandedRoutes ?? [];
+  const collapsedRoutes = tableConfig?.groupRowState?.collapsedRoutes ?? [];
+  const route = node.getRoute();
+  if (!route) {
+    return false;
+  }
+  const routePath = route.join(",");
+  const defaultExpandLevel = groupDefaultExpanded === -1 ? Infinity : groupDefaultExpanded;
+  if (node.level > defaultExpandLevel - 1) {
+    return expandedRoutes.includes(routePath);
+  } else
+    return !collapsedRoutes.includes(routePath);
+};
+
 // src/utils/getRootRowNode.ts
 function getRootRowNode(rowNode) {
   return rowNode.level > 0 && rowNode.parent ? getRootRowNode(rowNode.parent) : rowNode;
@@ -80554,6 +80612,7 @@ var useTableApi = ({
   columnApi,
   columnDefinitions,
   gridApi,
+  groupDefaultExpanded,
   setLoadingStatus,
   wrapperRef
 }) => {
@@ -80745,10 +80804,33 @@ var useTableApi = ({
   const setSearchValue = React76__default.default.useCallback(
     (value) => {
       gridApi?.setQuickFilter(value);
+      gridApi?.forEachNodeAfterFilterAndSort((node) => {
+        if (node.id) {
+          const currentNode = rowSelectionRef?.current.affectedRows[node.id];
+          if (currentNode && currentNode.selectedState === rowSelectionState.selected) {
+            node.setSelected(true, false, "checkboxSelected");
+          }
+        }
+      });
       resetPagination();
+      gridApi?.redrawRows();
     },
-    [gridApi]
+    [gridApi, rowSelectionRef.current]
   );
+  React76__default.default.useEffect(() => {
+    function handleRowSelection(event) {
+      if (event.node.displayed && event.node.id) {
+        rowSelectionRef.current.affectedRows[event.node.id] = {
+          node: event.node,
+          selectedState: event.node.isSelected() ? rowSelectionState.selected : rowSelectionState.unselected
+        };
+      }
+    }
+    gridApi?.addEventListener && gridApi.addEventListener("rowSelected", handleRowSelection);
+    return () => {
+      removeEventListenerFromGrid("rowSelected", handleRowSelection, gridApi);
+    };
+  }, [gridApi]);
   const setLoading = React76__default.default.useCallback((loading, message = "") => {
     setLoadingStatus({
       loading,
@@ -80809,6 +80891,7 @@ var useTableApi = ({
           adjustRowDragIcon(gridApi, columnApi);
         });
       }
+      setExpandCollapseRow(gridApi, config, groupDefaultExpanded);
     },
     [columnApi, gridApi, internalSetRowHeight, filterStorage.setSelectedFilters]
   );
@@ -80900,7 +80983,8 @@ var useTableApi = ({
       columnApi,
       rowHeight,
       filterStorage,
-      rowSelectionRef
+      rowSelectionRef,
+      groupDefaultExpanded
     }),
     [columnApi, gridApi, rowHeight, filterStorage]
   );
@@ -81168,7 +81252,6 @@ function buildPartialTableApi({
     focusField && gridApi?.setFocusedCell(rowIndex, focusField);
   };
   return {
-    getVisibleRowNodes,
     applyTransaction,
     applyServerSideTransaction,
     collapseAll,
@@ -81183,6 +81266,7 @@ function buildPartialTableApi({
     getSelectedRows: getSelectedRows2,
     getServerSideSelectionState,
     getTableConfiguration,
+    getVisibleRowNodes,
     refreshCells,
     setPinnedBottomRowData,
     setRowData,
@@ -81300,6 +81384,12 @@ var DataTable = ({
   const [rowHeight, setRowHeight] = React76__default.default.useState(
     initialTableConfig?.rowHeight || rowSize.md
   );
+  const expandCollapseStateRef = React76__default.default.useRef(
+    initialTableConfig?.groupRowState || {
+      expandedRoutes: [],
+      collapsedRoutes: []
+    }
+  );
   const rowHeightRef = React76__default.default.useRef(
     initialTableConfig?.rowHeight || rowSize.md
   );
@@ -81345,12 +81435,14 @@ var DataTable = ({
       if (localStoragePersistenceKey) {
         webSdkStorage.storage.local.setItem(localStoragePersistenceKey, {
           ...config,
+          groupRowState: expandCollapseStateRef.current,
           rowHeight: rowHeightRef.current,
           serverFilters: filterStorage.filtersState
         });
       }
       onTableConfigChange?.({
         ...config,
+        groupRowState: expandCollapseStateRef.current,
         rowHeight: rowHeightRef.current,
         serverFilters: filterStorage.filtersState
       });
@@ -81459,6 +81551,7 @@ var DataTable = ({
         onServerSideDataRequest,
         onTableConfigChange: internalOnTableConfigChange,
         rowSelectionRef,
+        expandCollapseStateRef,
         rowHeight,
         searchStorage,
         selectedGroupIndex,
@@ -81560,8 +81653,10 @@ var Table = (props) => {
     columnDefinitions: internalTableContext.columnDefinitions,
     gridApi,
     setLoadingStatus,
-    wrapperRef
+    wrapperRef,
+    groupDefaultExpanded: props.groupDefaultExpanded
   });
+  const initialTableConfig = internalTableContext.initialTableConfig;
   React76__default.default.useImperativeHandle(internalTableContext.tableRef, () => tableApi, [
     tableApi
   ]);
@@ -82068,6 +82163,34 @@ var Table = (props) => {
       document.getElementsByClassName("ag-body-viewport")[0]?.clientWidth
     );
   }, [setViewportWidth]);
+  const isClientSideGroupOpenByDefault = React76__default.default.useCallback(
+    (params) => {
+      const node = params.rowNode;
+      if (!node) {
+        return false;
+      }
+      return isRowOpenedByDefault(
+        node,
+        initialTableConfig,
+        props.groupsAlwaysExpanded ? -1 : props.groupDefaultExpanded
+      );
+    },
+    [initialTableConfig, props.groupDefaultExpanded]
+  );
+  const isServerSideGroupOpenByDefault = React76__default.default.useCallback(
+    (params) => {
+      const node = params.rowNode;
+      if (!node) {
+        return false;
+      }
+      return isRowOpenedByDefault(
+        node,
+        initialTableConfig,
+        props.groupsAlwaysExpanded ? -1 : props.groupDefaultExpanded
+      );
+    },
+    [initialTableConfig, props.groupDefaultExpanded]
+  );
   const onGridReady = (params) => {
     internalTableContext.setGridApi(params.api);
     internalTableContext.setColumnApi(params.columnApi);
@@ -82094,13 +82217,26 @@ var Table = (props) => {
   };
   const internalRowGroupOpened = React76__default.default.useCallback(
     (event) => {
+      if (internalTableContext.expandCollapseStateRef) {
+        internalTableContext.expandCollapseStateRef.current = getGroupRowState(
+          gridApi,
+          props.groupDefaultExpanded
+        );
+      }
+      internalTableContext.onTableConfigChange();
       props.onRowGroupOpened?.({
         expanded: event.expanded,
         node: serializeNode(event.node),
         rowIndex: event.rowIndex
       });
     },
-    [props.onRowGroupOpened]
+    [
+      props.onRowGroupOpened,
+      internalTableContext.onTableConfigChange,
+      tableApi?.getTableConfiguration(),
+      internalTableContext.expandCollapseStateRef?.current,
+      gridApi
+    ]
   );
   const getGroupRowAgg = React76__default.default.useCallback(
     (params) => {
@@ -82252,6 +82388,8 @@ var Table = (props) => {
             alwaysAggregateAtRootLevel: !onSSDR,
             autoGroupColumnDef: decoratedAutoGroupColDef,
             cacheBlockSize: props.paginationPageSize || defaultPaginationPageSize,
+            isGroupOpenByDefault: isClientSideGroupOpenByDefault,
+            isServerSideGroupOpenByDefault,
             defaultColDef,
             enableGroupEdit: internalTableContext.enableGroupEditAndValidation,
             enableCellTextSelection: internalTableContext.enableCellTextSelection,