@m4l/components 9.4.9 → 9.4.10-JT14012026.beta.1

package/components/datagrids/views/TableView/TableView.js

@@ -1,10 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState, useRef, useEffect } from "react";
-import DataGrid from "react-data-grid";
+import DataGrid, { TreeDataGrid } from "react-data-grid";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { B as TableContainerStyled, y as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
 import { u as useSortColumnsRows } from "./hooks/useSortColumnsRows/useSortColumnsRows.js";
+import { g as getGroupBy } from "./helpers/getGroupBy/getGroupBy.js";
+import { d as defaultRowGrouper } from "./helpers/defaultRowGrouper/defaultRowGrouper.js";
 import { u as useHeaderMenuActions } from "./hooks/useHeaderMenuActions/useHeaderMenuActions.js";
 import { f as filterHeight } from "./subcomponents/SelectColumn/SelectColumn.js";
 import { H as HeaderRenderClick } from "./subcomponents/HeaderRenderClick/HeaderRenderClick.js";
@@ -21,6 +23,7 @@ function TableView(props) {
     onSelectedRowsChange,
     defaultColumnOptions: defaultColumnOptionsProp,
     focusOnRowKey,
+    treeProps,
     ...restProps
   } = props;
   const renderCheckbox = (formatterProps) => {
@@ -61,8 +64,16 @@ function TableView(props) {
     currentRowHeightVariant,
     size,
     sortColumns,
-    setSortColumns
+    setSortColumns,
+    columnsConfig
   } = useDataGrid();
+  const groupBy = useMemo(() => {
+    if (!treeProps) {
+      return [];
+    }
+    return getGroupBy(columnsConfig);
+  }, [columnsConfig, treeProps]);
+  const rowGrouper = treeProps?.rowGrouper ?? defaultRowGrouper;
   const ref_data_grid = useRef(null);
   const [popoverState, setPopoverState] = useState({
     anchorEl: null,
@@ -150,7 +161,34 @@ function TableView(props) {
     {
       ownerState: { size, currentRowHeightVariant, currentRowHeight },
       children: [
-        /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: treeProps ? /* @__PURE__ */ jsx(
+          TreeDataGrid,
+          {
+            className: "rdg-light",
+            ref: ref_data_grid,
+            headerRowHeight: activeFilters ? currentRowHeaderHeight + filterHeight : currentRowHeaderHeight,
+            columns: finalColumns,
+            sortColumns,
+            onSortColumnsChange: handleSortColumnsChange,
+            onColumnResize,
+            rows: finalRows,
+            onRowsChange,
+            selectedRows,
+            onSelectedRowsChange,
+            onCellClick,
+            rowHeight: currentRowHeight,
+            rowKeyGetter,
+            renderers: {
+              renderCheckbox
+            },
+            defaultColumnOptions,
+            groupBy,
+            rowGrouper,
+            expandedGroupIds: treeProps.expandedGroupIds,
+            onExpandedGroupIdsChange: treeProps.onExpandedGroupIdsChange,
+            ...restProps
+          }
+        ) : /* @__PURE__ */ jsx(
           DataGrid,
           {
             className: "rdg-light",

package/components/datagrids/views/TableView/helpers/defaultRowGrouper/defaultRowGrouper.d.ts

@@ -0,0 +1,28 @@
+/**
+ * RowGrouper genérico por defecto.
+ *
+ * Se usa cuando NO pasas un rowGrouper personalizado al TreeDataGrid.
+ * Agrupa las filas usando el valor directo de la columna.
+ *
+ * Ideal para agrupar por campos de texto como:
+ * - Departamento
+ * - Estado
+ * - Ubicación
+ * @param rows - Todas las filas de la tabla
+ * @param columnKey - El nombre de la columna por la que agrupar (ej: 'department')
+ * @returns Un objeto donde cada llave es un valor único y cada valor es un array de filas
+ * @example
+ * const rows = [
+ *   { id: 1, name: 'Juan', department: 'Ventas' },
+ *   { id: 2, name: 'María', department: 'Tecnología' },
+ *   { id: 3, name: 'Pedro', department: 'Ventas' },
+ * ];
+ *
+ * const groups = defaultRowGrouper(rows, 'department');
+ * // Resultado:
+ * // {
+ * //   'Ventas': [Juan, Pedro],
+ * //   'Tecnología': [María]
+ * // }
+ */
+export declare const defaultRowGrouper: <TRow>(rows: readonly TRow[], columnKey: string) => Record<string, readonly TRow[]>;

package/components/datagrids/views/TableView/helpers/defaultRowGrouper/defaultRowGrouper.js

@@ -0,0 +1,15 @@
+const defaultRowGrouper = (rows, columnKey) => {
+  const groups = {};
+  for (const row of rows) {
+    const rawValue = row[columnKey];
+    const groupKey = String(rawValue ?? "");
+    if (!groups[groupKey]) {
+      groups[groupKey] = [];
+    }
+    groups[groupKey].push(row);
+  }
+  return groups;
+};
+export {
+  defaultRowGrouper as d
+};

package/components/datagrids/views/TableView/helpers/defaultRowGrouper/defaultRowGrouper.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/datagrids/views/TableView/helpers/defaultRowGrouper/index.d.ts

@@ -0,0 +1 @@
+export { defaultRowGrouper } from './defaultRowGrouper';

package/components/datagrids/views/TableView/helpers/defaultRowGrouper/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/views/TableView/helpers/getGroupBy/getGroupBy.d.ts

@@ -0,0 +1,20 @@
+import { IConfigColumn } from '../../../../contexts/DataGridContext/types';
+/**
+ * Calcula el array de keys de columnas que deben agruparse.
+ *
+ * Esta función:
+ * 1. Filtra las columnas que tienen grouped: true
+ * 2. Las ordena por groupOrder (menor = primer nivel de agrupación)
+ * 3. Retorna un array con las keys de esas columnas
+ * @param columnsConfig - Array de configuración de columnas del DataGrid
+ * @returns Array de keys de columnas ordenadas por nivel de agrupación
+ * @example
+ * // Si columnsConfig tiene:
+ * // - department: { grouped: true, groupOrder: 0 }
+ * // - team: { grouped: true, groupOrder: 1 }
+ * // - name: { grouped: false }
+ *
+ * const groupBy = getGroupBy(columnsConfig);
+ * // Resultado: ['department', 'team']
+ */
+export declare const getGroupBy: (columnsConfig: IConfigColumn[]) => string[];

package/components/datagrids/views/TableView/helpers/getGroupBy/getGroupBy.js

@@ -0,0 +1,13 @@
+const getGroupBy = (columnsConfig) => {
+  const groupedColumns = columnsConfig.filter(
+    (column) => column.grouped === true
+  );
+  const sortedColumns = groupedColumns.sort(
+    (columnA, columnB) => (columnA.groupOrder ?? 0) - (columnB.groupOrder ?? 0)
+  );
+  const groupByKeys = sortedColumns.map((column) => column.key);
+  return groupByKeys;
+};
+export {
+  getGroupBy as g
+};

package/components/datagrids/views/TableView/helpers/getGroupBy/getGroupBy.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/datagrids/views/TableView/helpers/getGroupBy/index.d.ts

@@ -0,0 +1 @@
+export { getGroupBy } from './getGroupBy';

package/components/datagrids/views/TableView/helpers/getGroupBy/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/views/TableView/helpers/index.d.ts

@@ -1 +1,3 @@
 export { getDragHeaderRenderer } from './getDragHeaderRenderer';
+export { getGroupBy } from './getGroupBy';
+export { defaultRowGrouper } from './defaultRowGrouper';

package/components/datagrids/views/TableView/hooks/useHeaderMenuActions/useHeaderMenuActions.js

@@ -123,6 +123,24 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSo
       columnKey
     });
   }, [columnKey, column, externalFilterSettings]);
+  const canGroup = useMemo(() => {
+    if (!columnKey || !column) {
+      return false;
+    }
+    return column.groupable === true;
+  }, [columnKey, column]);
+  const isGrouped = useMemo(() => {
+    if (!columnKey) {
+      return false;
+    }
+    const colConfig = columnsConfig.find((c) => c.key === columnKey);
+    return colConfig?.grouped === true;
+  }, [columnKey, columnsConfig]);
+  const hasGroupableColumns = useMemo(() => {
+    return finalColumns.some(
+      (col) => col.groupable === true || col.grouped === true
+    );
+  }, [finalColumns]);
   const isAddFilterDisabled = useMemo(() => {
     if (!columnKey || !column) {
       return true;
@@ -229,6 +247,44 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSo
         disabled: isAddFilterDisabled
       }
     ] : [];
+    const toggleGrouped = (grouped) => {
+      if (!columnKey) {
+        return;
+      }
+      const currentGroupedColumns = columnsConfig.filter((c) => c.grouped);
+      const newGroupOrder = grouped ? currentGroupedColumns.length : 0;
+      const next = columnsConfig.map(
+        (c) => c.key === columnKey ? {
+          ...c,
+          grouped,
+          groupOrder: grouped ? newGroupOrder : c.groupOrder
+        } : c
+      );
+      onChangeColumnsConfig("table", next);
+    };
+    const groupActions = hasGroupableColumns ? [
+      {
+        type: "menuItem",
+        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.group}`,
+        label: getLabel(DICTIONARY.GROUP_BY_COLUMN),
+        dataTestId: "group-add",
+        onClick: () => {
+          toggleGrouped(true);
+        },
+        disabled: !canGroup || isGrouped
+      },
+      {
+        type: "menuItem",
+        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.removeGroup}`,
+        label: getLabel(DICTIONARY.REMOVE_GROUP_COLUMN),
+        dataTestId: "group-remove",
+        onClick: () => {
+          toggleGrouped(false);
+        },
+        // Solo deshabilitado si no está agrupada O si es una agrupación estática (groupable=false)
+        disabled: !isGrouped || !canGroup
+      }
+    ] : [];
     const baseActions = [
       {
         type: "menuItem",
@@ -246,9 +302,10 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSo
         dataTestId: "hide-column"
       }
     ];
-    return [...sortActions, ...filterAction, ...baseActions];
+    return [...sortActions, ...filterAction, ...groupActions, ...baseActions];
   }, [
     columnKey,
+    column,
     canSort,
     canSortExternally,
     hasExternalSortAsc,
@@ -258,8 +315,12 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSo
     toggleFrozen,
     toggleVisible,
     columnsConfig,
+    onChangeColumnsConfig,
     externalSortSettings,
     externalFilterSettings,
+    hasGroupableColumns,
+    canGroup,
+    isGrouped,
     host_static_assets,
     environment_assets,
     getLabel,

package/components/datagrids/views/TableView/hooks/useSortColumnsRows/useSortColumnsRows.js

@@ -1,9 +1,11 @@
+import { jsx } from "react/jsx-runtime";
 import { useState, useEffect, useMemo } from "react";
 import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
-import { d as DATAGRID_SELECT_COLUMN_KEY } from "../../../../constants.js";
+import { SELECT_COLUMN_KEY } from "react-data-grid";
 import { g as getDragHeaderRenderer } from "../../helpers/getDragHeaderRenderer/getDragHeaderRenderer.js";
 import { S as SkeletonFormatter } from "../../subcomponents/SkeletonFormatter/SkeletonFormatter.js";
 import { a as filterColumnClassName, S as SelectColumn } from "../../subcomponents/SelectColumn/SelectColumn.js";
+import { R as RenderGroupCell } from "../../subcomponents/RenderGroupCell/RenderGroupCell.js";
 import { A as ActionsColumn } from "../../subcomponents/ActionsColumn/ActionsColumn.js";
 import { R as RadioSelectColumn } from "../../subcomponents/RadioSelectColumn/RadioSelectColumn.js";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
@@ -18,7 +20,6 @@ function getComparator(columns, sortColumn) {
     return column.customSort;
   }
   switch (typeOrder) {
-    //Si el tipo de dato de la columna es un numerico, retorna una función de ordenamiento numérica
     case "number":
       return (a, b) => {
         try {
@@ -27,7 +28,6 @@ function getComparator(columns, sortColumn) {
           return -1;
         }
       };
-    //Por defecto retorna una función de ordenamiento de string
     default:
       return (a, b) => {
         try {
@@ -39,6 +39,12 @@ function getComparator(columns, sortColumn) {
   }
 }
 const getColumIndex = (key, columnsConfig) => columnsConfig.findIndex((columnConfig) => columnConfig.key === key);
+const findKeyInColumns = (key, columns) => {
+  const index = columns.findIndex(
+    (column) => key === column.key && column.hidden === false
+  );
+  return index !== -1;
+};
 const getInOrderColumns = (columns, hasCheckedRows, checkedRowsMultiple, columnsConfig, columnsWidths, rowActionsGetter) => {
   let filteredSortedColumns = columns.filter((column) => {
     const columnConfigIndex = getColumIndex(column.key, columnsConfig);
@@ -100,12 +106,6 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
   );
   const isSkeleton = useModuleSkeleton();
   const { activeFilters, filters } = useFilters();
-  const findKeyInColumns = (key, cols) => {
-    const index = cols.findIndex(
-      (column) => key === column.key && column.hidden === false
-    );
-    return index !== -1;
-  };
   useEffect(() => {
     setColumns(
       getInOrderColumns(
@@ -124,7 +124,17 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
     if (JSON.stringify(finalSortedColumns) !== JSON.stringify(sortColumns)) {
       setSortColumns(finalSortedColumns);
     }
-  }, [sourceColumns, columnsConfig, rowActionsGetter]);
+  }, [
+    sourceColumns,
+    columnsConfig,
+    rowActionsGetter,
+    checkedRows,
+    onCheckedRowsChange,
+    checkedRowsMultiple,
+    columnsWidths,
+    sortColumns,
+    setSortColumns
+  ]);
   const finalColumns = useMemo(() => {
     const DragAndDropHeaderRenderer = getDragHeaderRenderer(
       (sourceKey, targetKey) => onChangeColumnsOrder("table", sourceKey, targetKey),
@@ -139,7 +149,7 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
         cellClass,
         headerCellClass: cellClass
       };
-      if (newColumn.key === DATAGRID_SELECT_COLUMN_KEY || newColumn.isDraggable !== void 0 && newColumn.isDraggable === false) {
+      if (newColumn.key === SELECT_COLUMN_KEY || newColumn.isDraggable !== void 0 && newColumn.isDraggable === false) {
         return newColumn;
       }
       if (isSkeleton) {
@@ -161,6 +171,20 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
         newColumn.headerCellClass = `${newColumn.headerCellClass} ${filterColumnClassName}`.trim();
       }
       newColumn.renderHeaderCell = DragAndDropHeaderRenderer;
+      const columnConfig = columnsConfig.find((cfg) => cfg.key === c.key);
+      const isGroupedInConfig = columnConfig?.grouped === true;
+      const originalColumn = sourceColumns.find((col) => col.key === c.key);
+      const hasCustomGroupCell = originalColumn?.renderGroupCell !== void 0;
+      if (isGroupedInConfig) {
+        const customGroupCell = hasCustomGroupCell ? originalColumn?.renderGroupCell : void 0;
+        newColumn.renderGroupCell = (cellProps) => /* @__PURE__ */ jsx(
+          RenderGroupCell,
+          {
+            ...cellProps,
+            customRenderGroupCell: customGroupCell
+          }
+        );
+      }
       return newColumn;
     });
   }, [
@@ -168,7 +192,9 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
     columns,
     activeFilters,
     onChangeColumnsOrder,
-    popoverHandlers
+    popoverHandlers,
+    columnsConfig,
+    sourceColumns
   ]);
   const finalRows = useMemo(() => {
     const nextRows = sourceRows.filter((r) => {
@@ -226,7 +252,7 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
       return 0;
     });
     return nextRows;
-  }, [sourceRows, sortColumns, filters]);
+  }, [sourceRows, sortColumns, filters, columns]);
   return { finalColumns, sortColumns, setSortColumns, finalRows };
 };
 export {

package/components/datagrids/views/TableView/subcomponents/ActionsColumn/ActionsColumn.js

@@ -1,5 +1,5 @@
 import { jsx, Fragment } from "react/jsx-runtime";
-import { f as DATAGRID_SEMANTIC_WIDTHS, e as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../../constants.js";
+import { e as DATAGRID_SEMANTIC_WIDTHS, d as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../../constants.js";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 import { M as MenuActions } from "../../../../../MenuActions/MenuActions.js";
 function ActionsFormatter(props) {

package/components/datagrids/views/TableView/subcomponents/HeaderRenderClick/HeaderRenderClick.js

@@ -6,7 +6,7 @@ import { P as MenuListStyled, Q as HeaderRenderClickStyled } from "../../../../s
 import { M as MenuDivider } from "../../../../../mui_extended/MenuDivider/MenuDivider.js";
 import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
-import { g as DATAGRID_HEADER_RENDER_CLICK_KEY } from "../../../../constants.js";
+import { f as DATAGRID_HEADER_RENDER_CLICK_KEY } from "../../../../constants.js";
 import { u as useFilters } from "../../../../hooks/shared/useFilters/useFilters.js";
 function HeaderRenderClick(props) {
   const {

package/components/datagrids/views/TableView/subcomponents/RadioSelectColumn/RadioSelectColumn.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { d as DATAGRID_SELECT_COLUMN_KEY } from "../../../../constants.js";
+import { SELECT_COLUMN_KEY } from "react-data-grid";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 import { R as RadioFormatter } from "./subcomponents/RadioFormatter/RadioFormatter.js";
 function RadioSelectGroupFormatter(_props) {
@@ -28,7 +28,7 @@ function RadioSelectColumnHeaderRenderer(_props) {
   return null;
 }
 const RadioSelectColumn = {
-  key: DATAGRID_SELECT_COLUMN_KEY,
+  key: SELECT_COLUMN_KEY,
   name: "",
   width: 32,
   minWidth: 32,

package/components/datagrids/views/TableView/subcomponents/RenderGroupCell/RenderGroupCell.d.ts

@@ -0,0 +1,10 @@
+import { RenderGroupCellComponentProps } from './types';
+/**
+ * Componente para renderizar las celdas de grupo en TreeDataGrid.
+ * Siempre muestra un icono de expansión/colapso al inicio.
+ * Si se proporciona customRenderGroupCell, renderiza ese contenido después del icono.
+ * De lo contrario, muestra el texto del grupo (groupKey).
+ * Respeta la alineación de la columna (align: left | center | right).
+ * @param props - Props de react-data-grid para grupo + customRenderGroupCell opcional
+ */
+export declare function RenderGroupCell<TRow>(props: RenderGroupCellComponentProps<TRow>): import("react/jsx-runtime").JSX.Element;

package/components/datagrids/views/TableView/subcomponents/RenderGroupCell/RenderGroupCell.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useEnvironment } from "@m4l/core";
+import { p as pathIcons } from "../../../../icons.js";
+import { I as Icon } from "../../../../../Icon/Icon.js";
+import { S as DefaultRenderGroupCellRootStyled, U as DefaultRenderGroupCellTextStyled } from "../../../../slots/DataGridSlot.js";
+import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
+function RenderGroupCell(props) {
+  const { groupKey, isExpanded, toggleGroup, column, customRenderGroupCell, ...restProps } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { size, currentRowHeightVariant } = useDataGrid();
+  const iconPath = isExpanded ? pathIcons.groupDown : pathIcons.groupUp;
+  const fullIconPath = `${host_static_assets}/${environment_assets}/${iconPath}`;
+  const align = column.align;
+  const originalProps = {
+    groupKey,
+    isExpanded,
+    toggleGroup,
+    column,
+    ...restProps
+  };
+  return /* @__PURE__ */ jsxs(DefaultRenderGroupCellRootStyled, { ownerState: { align }, onClick: toggleGroup, children: [
+    /* @__PURE__ */ jsx(
+      Icon,
+      {
+        src: fullIconPath,
+        size,
+        ariaLabel: isExpanded ? "Colapsar grupo" : "Expandir grupo"
+      }
+    ),
+    customRenderGroupCell ? customRenderGroupCell(originalProps) : /* @__PURE__ */ jsx(DefaultRenderGroupCellTextStyled, { ownerState: { currentRowHeightVariant }, children: String(groupKey) })
+  ] });
+}
+export {
+  RenderGroupCell as R
+};

package/components/datagrids/views/TableView/subcomponents/RenderGroupCell/RenderGroupCell.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/datagrids/views/TableView/subcomponents/RenderGroupCell/index.d.ts

@@ -0,0 +1,2 @@
+export { RenderGroupCell } from './RenderGroupCell';
+export type { RenderGroupCellComponentProps } from './types';

package/components/datagrids/views/TableView/subcomponents/RenderGroupCell/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/views/TableView/subcomponents/RenderGroupCell/types.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { RenderGroupCellProps } from 'react-data-grid';
+/**
+ * Props para RenderGroupCell que permiten contenido personalizado.
+ */
+export interface RenderGroupCellComponentProps<TRow> extends RenderGroupCellProps<TRow> {
+    /**
+     * Función opcional para renderizar contenido personalizado después del icono.
+     * Si se proporciona, se renderiza en lugar del texto por defecto (groupKey).
+     */
+    customRenderGroupCell?: (props: RenderGroupCellProps<TRow>) => ReactNode;
+}

package/components/datagrids/views/TableView/subcomponents/SelectColumn/SelectColumn.js

@@ -1,21 +1,49 @@
 import { jsx } from "react/jsx-runtime";
-import { useRowSelection, SelectCellFormatter } from "react-data-grid";
-import { d as DATAGRID_SELECT_COLUMN_KEY } from "../../../../constants.js";
+import { SELECT_COLUMN_KEY, SelectCellFormatter } from "react-data-grid";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 const filterColumnClassName = "filter-cell";
 const filterHeight = 35;
+function getAllChildRowIds(childRows, rowKeyGetter) {
+  const ids = [];
+  for (const row of childRows) {
+    if ("childRows" in row && Array.isArray(row.childRows)) {
+      ids.push(...getAllChildRowIds(row.childRows, rowKeyGetter));
+    } else {
+      ids.push(rowKeyGetter(row));
+    }
+  }
+  return ids;
+}
 function SelectGroupFormatter(props) {
-  const { isRowSelected, onRowSelectionChange } = useRowSelection();
+  const { checkedRows, onCheckedRowsChange, rowKeyGetter } = useDataGrid();
+  const { childRows } = props;
+  const childRowIds = getAllChildRowIds(childRows, rowKeyGetter);
+  const selectedCount = childRowIds.filter((id) => checkedRows?.has(id)).length;
+  const totalCount = childRowIds.length;
+  const allChildrenChecked = totalCount > 0 && selectedCount === totalCount;
+  const someChildrenChecked = selectedCount > 0 && selectedCount < totalCount;
   const onChange = (checked) => {
-    onRowSelectionChange({ row: props.row, checked, isShiftClick: false });
+    if (!onCheckedRowsChange) {
+      return;
+    }
+    const newCheckedRows = new Set(checkedRows);
+    if (checked) {
+      childRowIds.forEach((id) => newCheckedRows.add(id));
+    } else {
+      childRowIds.forEach((id) => newCheckedRows.delete(id));
+    }
+    onCheckedRowsChange(newCheckedRows);
   };
-  const cellFormater = SelectCellFormatter({
-    value: isRowSelected,
-    tabIndex: props.tabIndex,
-    onChange,
-    "aria-label": "Select Group"
-  });
-  return cellFormater;
+  return /* @__PURE__ */ jsx(
+    SelectCellFormatter,
+    {
+      value: allChildrenChecked,
+      indeterminate: someChildrenChecked,
+      tabIndex: props.tabIndex,
+      onChange,
+      "aria-label": "Select Group"
+    }
+  );
 }
 function SelectFormatter(props) {
   const { checkedRows, onCheckedRowsChange, rowKeyGetter } = useDataGrid();
@@ -40,26 +68,30 @@ function SelectFormatter(props) {
 }
 const SelectColumnHeaderRenderer = (props) => {
   const { rows, rowKeyGetter, onCheckedRowsChange, checkedRows } = useDataGrid();
+  const selectedCount = checkedRows?.size ?? 0;
+  const totalCount = rows.length;
+  const allRowsChecked = totalCount > 0 && selectedCount === totalCount;
+  const someRowsChecked = selectedCount > 0 && selectedCount < totalCount;
   const onAllRowsCheckedChange = (checked) => {
     if (!onCheckedRowsChange) {
       return;
     }
     if (checked) {
-      onCheckedRowsChange(new Set(rows.map((r) => rowKeyGetter(r))));
+      onCheckedRowsChange(new Set(rows.map((row) => rowKeyGetter(row))));
     } else {
       onCheckedRowsChange(/* @__PURE__ */ new Set());
     }
   };
-  const allRowsChecked = rows.length === checkedRows?.size;
   return SelectCellFormatter({
     "aria-label": "Select All",
     tabIndex: props.tabIndex,
     value: allRowsChecked,
+    indeterminate: someRowsChecked,
     onChange: onAllRowsCheckedChange
   });
 };
 const SelectColumn = {
-  key: DATAGRID_SELECT_COLUMN_KEY,
+  key: SELECT_COLUMN_KEY,
   name: "",
   width: 32,
   minWidth: 32,

package/components/datagrids/views/TableView/subcomponents/Settings/hooks/useModalSettings/useModalSettings.js

@@ -11,13 +11,24 @@ import { u as useDataGrid } from "../../../../../../hooks/shared/useDataGrid/use
 import { W as WindowBase } from "../../../../../../../WindowBase/WindowBase.js";
 import { A as ActionCancel } from "../../../../../../../CommonActions/components/ActionCancel/ActionCancel.js";
 import { A as ActionIntro } from "../../../../../../../CommonActions/components/ActionIntro/ActionIntro.js";
+const BASE_MODAL_WIDTH = 520;
+const GROUP_COLUMN_WIDTH = 80;
 const useModalSettings = (size, columns) => {
   const { openModal, closeModal } = useModal();
-  const { columnsConfig, onChangeColumnsConfig, currentRowHeight, classes } = useDataGrid();
+  const {
+    columnsConfig,
+    onChangeColumnsConfig,
+    currentRowHeight,
+    classes
+  } = useDataGrid();
   const { getLabel } = useModuleDictionary();
   const { host_static_assets, environment_assets } = useEnvironment();
   const isMobile = useIsMobile();
   const ref = useRef(null);
+  const hasGroupableColumns = columns.some(
+    (col) => col.groupable === true || col.grouped === true
+  );
+  const modalWidth = hasGroupableColumns ? BASE_MODAL_WIDTH + GROUP_COLUMN_WIDTH : BASE_MODAL_WIDTH;
   const onCloseSettings = useCallback(() => {
     closeModal();
   }, [closeModal]);
@@ -31,7 +42,7 @@ const useModalSettings = (size, columns) => {
   };
   const onClickSettings = () => {
     openModal({
-      initialWidth: 500,
+      initialWidth: modalWidth,
       initialHeight: 680,
       fullScreen: isMobile,
       window: /* @__PURE__ */ jsx(