@procore/data-table 14.13.0 → 14.15.0

package/dist/modern/index.js

@@ -3,10 +3,11 @@ import { uniqBy, prop, startsWith, mergeDeepRight, equals, omit, intersection, i
 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 as Spinner$1, FlexList, Typography, Tooltip, Button, Required, MultiSelect, 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, Link, AvatarStack, Pill, Typeahead, Pagination, UNSAFE_FilterToken, UNSAFE_SuperSelect, Avatar, H3, Checkbox, useI18n, I18nContext, UNSAFE_useSuperSelectContext, DropdownFlyout, useVisibility, StyledDropdownFlyoutLabel, StyledDropdownFlyoutExpandIcon, EmptyState as EmptyState$1 } from '@procore/core-react';
 import classnames from 'classnames/bind';
 import debounce5 from 'lodash.debounce';
-import { Error as Error$1, Grip, Pencil, Building, Clear, Calendar as Calendar$1, ArrowDown, ArrowUp, CaretDown, CaretRight, CaretsInVertical, CaretsOutVerticalWithLine, CaretsOutVertical, CaretsIn, CaretsOut } from '@procore/core-icons';
+import { Error as Error$1, Grip, ExternalLink, Pencil, Building, Clear, Calendar as Calendar$1, ArrowDown, ArrowUp, CaretDown, CaretRight, CaretsInVertical, CaretsOutVerticalWithLine, CaretsOutVertical, CaretsIn, CaretsOut } 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';
+import { format } from '@procore/labs-financials-utils/dist/format';
 import { detectPrng, factory } from 'ulid';
 import { useToastAlertContext, ToastAlertProvider } from '@procore/toast-alert';
 import ReactDOM, { createPortal } from 'react-dom';
@@ -1407,7 +1408,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
   animation-iteration-count: infinite;
   animation-name: ag-shake-left-to-right;
 }
-@keyframes _ag-shake-left-to-right_1c24o_369 {
+@keyframes _ag-shake-left-to-right_ye2ai_369 {
   from {
     padding-left: 6px;
     padding-right: 2px;
@@ -5408,7 +5409,7 @@ input[class^=ag-][type=button]:focus, button[class^=ag-]:focus {
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
-@keyframes _spin_1c24o_1 {
+@keyframes _spin_ye2ai_1 {
   from {
     transform: rotate(0deg);
   }
@@ -7493,10 +7494,15 @@ input[class^=ag-][type=range]:disabled {
 }
 .ag-theme-alpine.ag-theme-alpine .ag-row--dt-active {
   background-color: #e4ecfb;
-  border-left: 4px solid #2066df;
 }
-.ag-theme-alpine.ag-theme-alpine .ag-row--dt-active > .ag-cell {
-  padding-left: 12px;
+.ag-theme-alpine.ag-theme-alpine .ag-row--dt-active::before {
+  background-color: #2066df;
+  content: "";
+  width: 4px;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 .ag-theme-alpine.ag-theme-alpine .ag-row--dt-overdue span {
   color: #e61920;
@@ -7908,7 +7914,7 @@ input[class^=ag-][type=range]:disabled {
   padding-left: 16px;
 }
 
-div._contextPanel_1c24o_7148 {
+div._contextPanel_ye2ai_7153 {
   width: 400px;
   transition: all ease 500ms;
   flex: 0 0 auto;
@@ -7917,7 +7923,7 @@ div._contextPanel_1c24o_7148 {
   border: 1px solid #d6dadc;
   display: flex;
 }
-div._contextPanel--hidden_1c24o_7157 {
+div._contextPanel--hidden_ye2ai_7162 {
   border: none;
   overflow: hidden;
   padding: 0px;
@@ -7925,50 +7931,50 @@ div._contextPanel--hidden_1c24o_7157 {
   width: 0px;
 }
 
-._contextPanelWrapper_1c24o_7165 {
+._contextPanelWrapper_ye2ai_7170 {
   position: relative;
   flex-grow: 1;
 }
 
-._contextPanelBody_1c24o_7170 {
+._contextPanelBody_ye2ai_7175 {
   width: clamp(380px, 400px, 100%);
 }
 
-._contextPanel-stickyHeader_1c24o_7174 {
+._contextPanel-stickyHeader_ye2ai_7179 {
   background-color: #ffffff;
   position: sticky;
   top: 0;
   z-index: 5;
 }
 
-._filters-list_1c24o_7181 {
+._filters-list_ye2ai_7186 {
   padding: 0;
   margin: 0;
 }
-._filters-list_1c24o_7181 ol {
+._filters-list_ye2ai_7186 ol {
   padding: 0;
   margin: 0;
 }
 
-._col-drag-column-icon_1c24o_7190 {
+._col-drag-column-icon_ye2ai_7195 {
   color: #6a767c;
 }
 
-._tabular-nums_1c24o_7194 {
+._tabular-nums_ye2ai_7199 {
   font-variant-numeric: tabular-nums;
 }`;
 document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
 var styles_default = {
-  "contextPanel": "_contextPanel_1c24o_7148",
-  "contextPanel--hidden": "_contextPanel--hidden_1c24o_7157",
-  "contextPanelWrapper": "_contextPanelWrapper_1c24o_7165",
-  "contextPanelBody": "_contextPanelBody_1c24o_7170",
-  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_1c24o_7174",
-  "filters-list": "_filters-list_1c24o_7181",
-  "col-drag-column-icon": "_col-drag-column-icon_1c24o_7190",
-  "tabular-nums": "_tabular-nums_1c24o_7194",
-  "ag-shake-left-to-right": "_ag-shake-left-to-right_1c24o_369",
-  "spin": "_spin_1c24o_1"
+  "contextPanel": "_contextPanel_ye2ai_7153",
+  "contextPanel--hidden": "_contextPanel--hidden_ye2ai_7162",
+  "contextPanelWrapper": "_contextPanelWrapper_ye2ai_7170",
+  "contextPanelBody": "_contextPanelBody_ye2ai_7175",
+  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_ye2ai_7179",
+  "filters-list": "_filters-list_ye2ai_7186",
+  "col-drag-column-icon": "_col-drag-column-icon_ye2ai_7195",
+  "tabular-nums": "_tabular-nums_ye2ai_7199",
+  "ag-shake-left-to-right": "_ag-shake-left-to-right_ye2ai_369",
+  "spin": "_spin_ye2ai_1"
 };
 
 // src/utils/getCellValueTypographyProps.ts
@@ -8642,12 +8648,12 @@ var DateCellValue = ({
   isGroup,
   value
 }) => {
-  const { format } = useDateTime();
+  const { format: format2 } = useDateTime();
   if (isGroup || isEmptyValue(value)) {
     return null;
   }
   const parsedValue = getDateObject(value);
-  const internalValue = parsedValue ? format(
+  const internalValue = parsedValue ? format2(
     parsedValue,
     columnDefinition.cellRendererParams?.dateFormatType || "numeric-date"
   ) : void 0;
@@ -8713,12 +8719,12 @@ var DateTimeCellValue = ({
   isGroup,
   value
 }) => {
-  const { format } = useDateTime();
+  const { format: format2 } = useDateTime();
   if (isGroup || isEmptyValue(value)) {
     return null;
   }
   const parsedValue = getDateObject2(value);
-  const internalValue = parsedValue ? format(
+  const internalValue = parsedValue ? format2(
     parsedValue,
     columnDefinition.cellRendererParams?.dateFormatType || "abbr-weekday-abbr-date-at-time"
   ) : void 0;
@@ -16639,7 +16645,7 @@ var calculateOrdinal = (value) => {
   }
   return "th";
 };
-function dateToFormattedString(date, format = "YYYY-MM-DD") {
+function dateToFormattedString(date, format2 = "YYYY-MM-DD") {
   const fullYear = padStartWidthZeros(date.getFullYear(), 4);
   const months = [
     "January",
@@ -16683,7 +16689,7 @@ function dateToFormattedString(date, format = "YYYY-MM-DD") {
     d: () => `${date.getDay()}`
   };
   const regexp = new RegExp(Object.keys(replace).join("|"), "g");
-  return format.replace(regexp, (match) => {
+  return format2.replace(regexp, (match) => {
     if (match in replace) {
       return replace[match]();
     }
@@ -21326,14 +21332,14 @@ var DateFilterModelFormatter = class extends SimpleFilterModelFormatter {
     const isRange = type == SimpleFilter.IN_RANGE || numberOfInputs === 2;
     const dateFrom = parseDateTimeFromString(condition.dateFrom);
     const dateTo = parseDateTimeFromString(condition.dateTo);
-    const format = this.dateFilterParams.inRangeFloatingFilterDateFormat;
+    const format2 = this.dateFilterParams.inRangeFloatingFilterDateFormat;
     if (isRange) {
-      const formattedFrom = dateFrom !== null ? dateToFormattedString(dateFrom, format) : "null";
-      const formattedTo = dateTo !== null ? dateToFormattedString(dateTo, format) : "null";
+      const formattedFrom = dateFrom !== null ? dateToFormattedString(dateFrom, format2) : "null";
+      const formattedTo = dateTo !== null ? dateToFormattedString(dateTo, format2) : "null";
       return `${formattedFrom}-${formattedTo}`;
     }
     if (dateFrom != null) {
-      return dateToFormattedString(dateFrom, format);
+      return dateToFormattedString(dateFrom, format2);
     }
     return `${type}`;
   }
@@ -52955,7 +52961,27 @@ var InternalLinkCellRenderer = ({ columnDefinition, isGroup, data, rowHeight, va
   if (isGroup) {
     return /* @__PURE__ */ React76.createElement(Typography, { ...typographyProps, className, weight: "semibold" }, value);
   }
+  const isExternalLink = columnDefinition.cellRendererParams.isExternalLink ?? false;
   const URL = columnDefinition.cellRendererParams.getURL(value, data);
+  if (isExternalLink && value && URL) {
+    return /* @__PURE__ */ React76.createElement(
+      Typography,
+      {
+        ...typographyProps,
+        className,
+        style: { display: "flex", alignItems: "center", gap: "5px" }
+      },
+      internalValue,
+      /* @__PURE__ */ React76.createElement(
+        ExternalLink,
+        {
+          cursor: "pointer",
+          size: "sm",
+          onClick: () => window.open(URL, "_blank")
+        }
+      )
+    );
+  }
   return URL ? /* @__PURE__ */ React76.createElement(Typography, { ...typographyProps, className }, /* @__PURE__ */ React76.createElement(Link, { href: URL }, internalValue)) : /* @__PURE__ */ React76.createElement(Typography, { ...typographyProps }, internalValue);
 };
 var LinkCellRenderer = withDataTableRenderer(
@@ -52983,9 +53009,10 @@ var InternalNumberCellRenderer = ({ columnDefinition, rowPinned, isGroup, value
     }
     return /* @__PURE__ */ React76.createElement(React76.Fragment, null);
   }
-  const internalValue = formatNumber(value, {
+  const internalValue = format(value, {
     maxDecimalPrecision: 15,
     minDecimalPrecision: 0,
+    shouldUseGtk: true,
     symbol: "",
     ...columnDefinition.cellRendererParams?.formatConfig
   });
@@ -53366,7 +53393,7 @@ var Renderer9 = ({
   value,
   rowPinned
 }) => {
-  const { getColor } = columnDefinition.cellRendererParams;
+  const { getColor, displayAsPill } = columnDefinition.cellRendererParams;
   const I18n = useI18nContext();
   if (isEmptyValue(value)) {
     if (isGroup) {
@@ -53392,10 +53419,10 @@ var Renderer9 = ({
   const typographyProps = getCellValueTypographyProps(
     columnDefinition.cellRendererParams?.typographyProps
   );
-  if (isGroup || rowPinned && columnDefinition.aggFunc) {
+  if ((isGroup || rowPinned && columnDefinition.aggFunc) && !displayAsPill) {
     return /* @__PURE__ */ React76.createElement(Typography, { ...typographyProps, weight: "semibold" }, label);
   }
-  return /* @__PURE__ */ React76.createElement(Pill, { color: getColor(value), className: cx10("pill-cell") }, label?.toUpperCase());
+  return /* @__PURE__ */ React76.createElement(Pill, { color: getColor(value), className: cx10("pill-cell") }, label);
 };
 var PillCellRenderer = withDataTableRenderer(Renderer9, "select");
 var Editor5 = React76.forwardRef(
@@ -53428,7 +53455,7 @@ var Editor5 = React76.forwardRef(
     }
     function getLabel3(item) {
       const unformattedLabel = columnDefinition.getStringFormattedValue?.(item) || "";
-      return unformattedLabel.toUpperCase();
+      return unformattedLabel;
     }
     return /* @__PURE__ */ React76.createElement(
       PillSelect,
@@ -54796,8 +54823,8 @@ function transformToExcelStyles(excelDataFormats) {
   if (excelDataFormats === void 0) {
     return void 0;
   }
-  return excelDataFormats.map((format) => {
-    const { id, ...rest } = format;
+  return excelDataFormats.map((format2) => {
+    const { id, ...rest } = format2;
     return {
       id: toExcelCellClass(id),
       ...rest
@@ -55853,6 +55880,8 @@ var DataTableCellRenderer = ({
     value
   };
   const hasValue = value !== void 0 && value !== null && value !== "";
+  const isSelectCellComponent = columnDefinition.cellEditor?.render?.displayName === "SelectCellEditor";
+  const URL = isSelectCellComponent && columnDefinition?.cellRendererParams?.getURL ? columnDefinition.cellRendererParams.getURL(value) : null;
   const startEditing = useCallback(
     () => api.startEditingCell({
       rowIndex: node.rowIndex,
@@ -55860,34 +55889,54 @@ var DataTableCellRenderer = ({
     }),
     [column2, node]
   );
-  return /* @__PURE__ */ React76.createElement(React76.Fragment, null, shouldDisplayRowCheckbox(columnApi, column2, node) && /* @__PURE__ */ React76.createElement(Box, { paddingLeft: "sm" }, /* @__PURE__ */ React76.createElement(RowCheckbox, { api, data, node })), columnDefinition.editable ? /* @__PURE__ */ React76.createElement(
-    PseudoInlineEditorWrapper,
-    {
-      showArrow: editorType === "select",
-      onClick: startEditing,
-      onClear: columnDefinition.cellEditorParams?.clearable && hasValue ? () => {
-        setValue?.(null);
-      } : void 0,
-      showCalendar: editorType === "date",
-      rightAligned: colDef.type === "rightAligned",
-      hasValue,
-      alwaysShowEditors: columnDefinition.cellEditorParams?.alwaysShowPseudoEditors,
-      ...validationOutput
-    },
-    /* @__PURE__ */ React76.createElement(Component4, { ...componentParams })
-  ) : /* @__PURE__ */ React76.createElement(
-    NonEditorWrapper,
+  return /* @__PURE__ */ React76.createElement(React76.Fragment, null, shouldDisplayRowCheckbox(columnApi, column2, node) && /* @__PURE__ */ React76.createElement(Box, { paddingLeft: "sm" }, /* @__PURE__ */ React76.createElement(RowCheckbox, { api, data, node })), /* @__PURE__ */ React76.createElement(
+    Flex,
     {
-      rightAligned: colDef.type === "rightAligned",
-      ...validationOutput,
-      rowPinned: Boolean(componentParams.rowPinned),
-      isGroup: Boolean(componentParams.isGroup)
+      gap: "5px",
+      alignItems: "center",
+      justifyContent: "center",
+      style: { width: "100%" }
     },
-    /* @__PURE__ */ React76.createElement(
-      Component4,
+    columnDefinition.editable ? /* @__PURE__ */ React76.createElement(
+      PseudoInlineEditorWrapper,
+      {
+        showArrow: editorType === "select",
+        onClick: startEditing,
+        onClear: columnDefinition.cellEditorParams?.clearable && hasValue ? () => {
+          setValue?.(null);
+        } : void 0,
+        showCalendar: editorType === "date",
+        rightAligned: colDef.type === "rightAligned",
+        hasValue,
+        alwaysShowEditors: columnDefinition.cellEditorParams?.alwaysShowPseudoEditors,
+        ...validationOutput
+      },
+      /* @__PURE__ */ React76.createElement(Component4, { ...componentParams })
+    ) : /* @__PURE__ */ React76.createElement(
+      NonEditorWrapper,
+      {
+        rightAligned: colDef.type === "rightAligned",
+        ...validationOutput,
+        rowPinned: Boolean(componentParams.rowPinned),
+        isGroup: Boolean(componentParams.isGroup)
+      },
+      /* @__PURE__ */ React76.createElement(
+        Component4,
+        {
+          ...componentParams,
+          tableRef: columnDefinition.cellRendererParams.tableRef
+        }
+      )
+    ),
+    URL && /* @__PURE__ */ React76.createElement(
+      ExternalLink,
       {
-        ...componentParams,
-        tableRef: columnDefinition.cellRendererParams.tableRef
+        cursor: "pointer",
+        size: "sm",
+        onClick: (e) => {
+          e.stopPropagation();
+          window.open(URL, "_blank");
+        }
       }
     )
   ));
@@ -56521,9 +56570,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]);
@@ -57589,6 +57639,7 @@ var InternalTableContext = React76.createContext({
   getRowHeight: () => () => rowSize.md,
   grandTotalsLabelInnerRenderer: void 0,
   gridApi: void 0,
+  localStoragePersistenceKey: void 0,
   onBulkEditUpdate: () => Promise.resolve(),
   onServerSideDataRequest: void 0,
   onTableConfigChange: () => {
@@ -57605,6 +57656,7 @@ var InternalTableContext = React76.createContext({
   setRowHeight: () => {
   },
   showExpandCollapseAllToggle: false,
+  expandCollapseStateRef: null,
   tableRef: null,
   getColumnDefinition: () => void 0,
   setSelectedGroupIndex: () => {
@@ -61426,14 +61478,14 @@ var protection_default = protection;
 // ../../node_modules/@ag-grid-enterprise/excel-export/dist/esm/es6/excelExport/files/xml/styles/numberFormat.mjs
 var numberFormat = {
   getTemplate(styleProperties) {
-    const { format } = styleProperties.numberFormat;
+    const { format: format2 } = styleProperties.numberFormat;
     return {
       name: "NumberFormat",
       properties: {
         prefixedAttributes: [{
           prefix: "ss:",
           map: {
-            Format: format
+            Format: format2
           }
         }]
       }
@@ -63384,15 +63436,15 @@ var registerFill = (fill) => {
   }
   return pos;
 };
-var registerNumberFmt = (format) => {
-  format = _.utf8_encode(format);
-  if (numberFormatMap[format]) {
-    return numberFormatMap[format];
+var registerNumberFmt = (format2) => {
+  format2 = _.utf8_encode(format2);
+  if (numberFormatMap[format2]) {
+    return numberFormatMap[format2];
   }
-  let pos = registeredNumberFmts.findIndex((currentFormat) => currentFormat.formatCode === format);
+  let pos = registeredNumberFmts.findIndex((currentFormat) => currentFormat.formatCode === format2);
   if (pos === -1) {
     pos = registeredNumberFmts.length + 164;
-    registeredNumberFmts.push({ formatCode: format, numFmtId: pos });
+    registeredNumberFmts.push({ formatCode: format2, numFmtId: pos });
   } else {
     pos = registeredNumberFmts[pos].numFmtId;
   }
@@ -78019,6 +78071,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;
@@ -80457,44 +80564,73 @@ function generateHTMLString({
         if (exportedDocument.querySelector(".ag-header-container") && showTableHeaderOnEveryPage) {
           const tableHeaderStylesElement = exportedDocument.createElement("style");
           tableHeaderStylesElement.innerHTML = `
+            /* Original header styles */
             .ag-header-container {
               height: ${TABLE_HEADER_HEIGHT}px;
               background: ${colors.gray96};
               border-bottom: 1px solid #d6dadc;
-              break-before: page;
+            }
+            /* Cloned header styles */
+            .paginated-header {
+              height: ${TABLE_HEADER_HEIGHT}px;
+              background: ${colors.gray96};
+              border-bottom: 1px solid #d6dadc;
+              /* Ensure cloned headers start on a new page */
+              page-break-before: always;
             }
           `;
           exportedDocument.head.appendChild(tableHeaderStylesElement);
-          const tableHeader = exportedDocument.querySelector(".ag-header-container").cloneNode(true);
+          const tableHeaderElement = exportedDocument.querySelector(
+            ".ag-header-container"
+          );
+          if (!tableHeaderElement) {
+            return reject(new Error("Table header container not found."));
+          }
+          const tableHeader = tableHeaderElement.cloneNode(true);
+          tableHeader.classList.add("paginated-header");
           const tableRowsContainer = exportedDocument.querySelector(
             ".ag-center-cols-container"
           );
-          const totalRows = tableRowsContainer.children.length;
-          const maxPageContentHeight = pageHeight - pageFormat.marginInPixels.top - pageFormat.marginInPixels.bottom;
-          let pageContentHeight = TABLE_HEADER_HEIGHT;
-          let currentPage = 1;
-          for (let index = 0; index < totalRows; index++) {
-            const getScaledRowHeight = (row3) => {
-              const scale = pageHeight / tableWidth;
-              let rowHeight2 = Number(row3.style.height.replace("px", ""));
-              if (scale < 1) {
-                rowHeight2 *= scale;
+          if (!tableRowsContainer) {
+            console.error("Table rows container not found.");
+            return;
+          }
+          const allRows = Array.from(
+            tableRowsContainer.children
+          );
+          tableRowsContainer.innerHTML = "";
+          const maxPageContentHeight = pageHeight - (pageFormat.marginInPixels?.top ?? DEFAULT_PAGE_MARGIN) - (pageFormat.marginInPixels?.bottom ?? DEFAULT_PAGE_MARGIN) - TABLE_HEADER_HEIGHT;
+          let currentPageContentHeight = 0;
+          let rowsInCurrentPage = [];
+          let isFirstPage = true;
+          const appendPage = () => {
+            if (rowsInCurrentPage.length > 0) {
+              if (!isFirstPage) {
+                tableRowsContainer.appendChild(tableHeader.cloneNode(true));
+              } else {
+                isFirstPage = false;
               }
-              return rowHeight2;
-            };
-            const row2 = tableRowsContainer.children[index + currentPage - 1];
-            const rowHeight = getScaledRowHeight(row2);
-            if (pageContentHeight + rowHeight >= maxPageContentHeight) {
-              tableRowsContainer.insertBefore(
-                tableHeader.cloneNode(true),
-                row2
+              rowsInCurrentPage.forEach(
+                (row2) => tableRowsContainer.appendChild(row2)
               );
-              currentPage += 1;
-              pageContentHeight = TABLE_HEADER_HEIGHT;
-            } else {
-              pageContentHeight += rowHeight;
+              rowsInCurrentPage = [];
+              currentPageContentHeight = 0;
             }
-          }
+          };
+          allRows.forEach((row2) => {
+            let rowHeight = parseFloat(row2.style.height.replace("px", "")) || row2.offsetHeight;
+            const scale = pageHeight / tableWidth;
+            if (scale < 1) {
+              rowHeight *= scale;
+            }
+            if (currentPageContentHeight + rowHeight > maxPageContentHeight) {
+              appendPage();
+              isFirstPage = false;
+            }
+            rowsInCurrentPage.push(row2);
+            currentPageContentHeight += rowHeight;
+          });
+          appendPage();
         }
         resolve(exportedDocument.getElementsByTagName("html")[0].outerHTML);
       }, 2e3);
@@ -80540,6 +80676,7 @@ var useTableApi = ({
   columnApi,
   columnDefinitions,
   gridApi,
+  groupDefaultExpanded,
   setLoadingStatus,
   wrapperRef
 }) => {
@@ -80731,10 +80868,33 @@ var useTableApi = ({
   const setSearchValue = React76.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.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.useCallback((loading, message = "") => {
     setLoadingStatus({
       loading,
@@ -80795,6 +80955,7 @@ var useTableApi = ({
           adjustRowDragIcon(gridApi, columnApi);
         });
       }
+      setExpandCollapseRow(gridApi, config, groupDefaultExpanded);
     },
     [columnApi, gridApi, internalSetRowHeight, filterStorage.setSelectedFilters]
   );
@@ -80886,7 +81047,8 @@ var useTableApi = ({
       columnApi,
       rowHeight,
       filterStorage,
-      rowSelectionRef
+      rowSelectionRef,
+      groupDefaultExpanded
     }),
     [columnApi, gridApi, rowHeight, filterStorage]
   );
@@ -81154,7 +81316,6 @@ function buildPartialTableApi({
     focusField && gridApi?.setFocusedCell(rowIndex, focusField);
   };
   return {
-    getVisibleRowNodes,
     applyTransaction,
     applyServerSideTransaction,
     collapseAll,
@@ -81169,6 +81330,7 @@ function buildPartialTableApi({
     getSelectedRows: getSelectedRows2,
     getServerSideSelectionState,
     getTableConfiguration,
+    getVisibleRowNodes,
     refreshCells,
     setPinnedBottomRowData,
     setRowData,
@@ -81286,6 +81448,12 @@ var DataTable = ({
   const [rowHeight, setRowHeight] = React76.useState(
     initialTableConfig?.rowHeight || rowSize.md
   );
+  const expandCollapseStateRef = React76.useRef(
+    initialTableConfig?.groupRowState || {
+      expandedRoutes: [],
+      collapsedRoutes: []
+    }
+  );
   const rowHeightRef = React76.useRef(
     initialTableConfig?.rowHeight || rowSize.md
   );
@@ -81331,12 +81499,14 @@ var DataTable = ({
       if (localStoragePersistenceKey) {
         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
       });
@@ -81445,6 +81615,7 @@ var DataTable = ({
         onServerSideDataRequest,
         onTableConfigChange: internalOnTableConfigChange,
         rowSelectionRef,
+        expandCollapseStateRef,
         rowHeight,
         searchStorage,
         selectedGroupIndex,
@@ -81546,8 +81717,10 @@ var Table = (props) => {
     columnDefinitions: internalTableContext.columnDefinitions,
     gridApi,
     setLoadingStatus,
-    wrapperRef
+    wrapperRef,
+    groupDefaultExpanded: props.groupDefaultExpanded
   });
+  const initialTableConfig = internalTableContext.initialTableConfig;
   React76.useImperativeHandle(internalTableContext.tableRef, () => tableApi, [
     tableApi
   ]);
@@ -82054,6 +82227,34 @@ var Table = (props) => {
       document.getElementsByClassName("ag-body-viewport")[0]?.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) => {
     internalTableContext.setGridApi(params.api);
     internalTableContext.setColumnApi(params.columnApi);
@@ -82080,13 +82281,26 @@ var Table = (props) => {
   };
   const internalRowGroupOpened = React76.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.useCallback(
     (params) => {
@@ -82238,6 +82452,8 @@ var Table = (props) => {
             alwaysAggregateAtRootLevel: !onSSDR,
             autoGroupColumnDef: decoratedAutoGroupColDef,
             cacheBlockSize: props.paginationPageSize || defaultPaginationPageSize,
+            isGroupOpenByDefault: isClientSideGroupOpenByDefault,
+            isServerSideGroupOpenByDefault,
             defaultColDef,
             enableGroupEdit: internalTableContext.enableGroupEditAndValidation,
             enableCellTextSelection: internalTableContext.enableCellTextSelection,