@m4l/components 9.4.13 → 9.4.15

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(

package/components/datagrids/views/TableView/subcomponents/Settings/subcomponents/ColumnsConfig/ColumnsConfig.js

@@ -8,17 +8,24 @@ import { v as ColumnsConfigWrapperStyled, w as ColumnsConfigDataGridStyled, x as
 import { D as DICTIONARY } from "../../../../../../dictionary.js";
 import { C as ColumnInteractiveCheckFormatter } from "../../../../../../formatters/ColumnInteractiveCheckFormatter/formatter.js";
 function getRowsFromColumnsConfig(columnsConfig, columns) {
-  return columnsConfig.filter((cConfig) => !cConfig.hidden).map(
-    (cConfig) => ({
+  return columnsConfig.filter((cConfig) => !cConfig.hidden).map((cConfig) => {
+    const originalColumn = columns.find((c) => c.key === cConfig.key);
+    const isGroupable = originalColumn?.groupable === true;
+    const isGroupedNow = cConfig.grouped === true;
+    return {
       key: cConfig.key,
       name: columns?.find((c) => c.key === cConfig.key)?.name ?? "",
       visible: cConfig.visible === void 0 ? true : cConfig.visible,
       frozen: cConfig.frozen === void 0 ? false : cConfig.frozen,
+      grouped: isGroupedNow,
+      // Checkbox habilitado solo si groupable=true
+      groupable: isGroupable,
       originalIndex: cConfig.originalIndex,
       originalFrozen: cConfig.originalFrozen,
-      originalVisible: cConfig.originalVisible
-    })
-  );
+      originalVisible: cConfig.originalVisible,
+      originalGrouped: cConfig.originalGrouped ?? false
+    };
+  });
 }
 const getAlignClass = (align) => {
   const cellClass = align !== void 0 ? `rdg-cell-align-${align}` : "";
@@ -51,8 +58,8 @@ const ColumnsConfig = forwardRef(
       onClickIntro: handleIntro,
       current: divRef.current
     }));
-    const columnsdata_grid = useMemo(
-      () => [
+    const columnsdata_grid = useMemo(() => {
+      const baseColumns = [
         {
           key: "name",
           name: getLabel(DICTIONARY.SETTINGS_COLUMN_NAME),
@@ -64,7 +71,7 @@ const ColumnsConfig = forwardRef(
         {
           key: "originalIndex",
           name: getLabel(DICTIONARY.SETTINGS_COLUMN_POSITION),
-          width: 50,
+          width: 70,
           type: "number",
           ...getAlignClass("center")
         },
@@ -84,9 +91,24 @@ const ColumnsConfig = forwardRef(
           renderCell: ColumnInteractiveCheckFormatter,
           ...getAlignClass("center")
         }
-      ],
-      [getLabel]
-    );
+      ];
+      const hasGroupableColumns = columns.some(
+        (col) => col.groupable === true || col.grouped === true
+      );
+      if (hasGroupableColumns) {
+        baseColumns.push({
+          key: "grouped",
+          name: getLabel(DICTIONARY.SETTINGS_COLUMN_GROUP),
+          width: 80,
+          type: "boolean",
+          renderCell: ColumnInteractiveCheckFormatter,
+          // disabledKey hace que el checkbox esté deshabilitado cuando groupable=false
+          disabledKey: "groupable",
+          ...getAlignClass("center")
+        });
+      }
+      return baseColumns;
+    }, [getLabel, columns]);
     const checkAll = () => {
       setRows(rows.map((row) => ({ ...row, visible: true })));
     };
@@ -99,13 +121,16 @@ const ColumnsConfig = forwardRef(
           ...row,
           visible: row.originalVisible,
           frozen: row.originalFrozen,
+          grouped: row.originalGrouped,
           index: row.originalIndex
         })).sort((a, b) => a.index - b.index)
       );
     };
     useEffect(() => {
       if (isInit === false) {
-        setRows(getRowsFromColumnsConfig(columnsConfig, columns));
+        setRows(
+          getRowsFromColumnsConfig(columnsConfig, columns)
+        );
       }
       setIsInit(false);
     }, [columnsConfig]);
@@ -173,6 +198,7 @@ const ColumnsConfig = forwardRef(
       );
     };
     const handleIntro = () => {
+      const groupedRows = rows.filter((row) => row.grouped);
       const newColumnsConfig = columnsConfig.map((columnConfig) => {
         const newColumnConfig = { ...columnConfig };
         if (!columnConfig.hidden) {
@@ -182,11 +208,19 @@ const ColumnsConfig = forwardRef(
             newColumnConfig.frozen = columnConfigRow.frozen;
           }
           const rowIndex = rows.findIndex(
-            (row) => row.key === columnConfig.key
+            (currentRow) => currentRow.key === columnConfig.key
           );
           if (rowIndex > -1) {
             newColumnConfig.index = rowIndex;
           }
+          const rowWithGroupConfig = rows.find((currentRow) => currentRow.key === columnConfig.key);
+          if (rowWithGroupConfig) {
+            newColumnConfig.grouped = rowWithGroupConfig.grouped;
+            const groupOrderIndex = groupedRows.findIndex(
+              (groupedRow) => groupedRow.key === columnConfig.key
+            );
+            newColumnConfig.groupOrder = groupOrderIndex > -1 ? groupOrderIndex : rowIndex;
+          }
         }
         return newColumnConfig;
       }).sort((a, b) => getRowIndex(a) - getRowIndex(b));

package/components/datagrids/views/TableView/subcomponents/Settings/subcomponents/ColumnsConfig/types.d.ts

@@ -2,27 +2,49 @@ import { DataGridContextProps, IConfigColumn } from '../../../../../../contexts/
 import { GridProps } from '../../../../../../types';
 import { Column } from 'react-data-grid';
 export interface Row {
+    /** Key única de la columna */
     key: string;
+    /** Nombre visible de la columna */
     name: string;
+    /** Si la columna está visible */
     visible: boolean;
+    /** Si la columna está congelada */
     frozen: boolean;
+    /** Si la columna está agrupada actualmente */
+    grouped: boolean;
+    /** Si la columna PUEDE ser agrupada (está en groupColumns) */
+    groupable: boolean;
+    /** Ancho de la columna */
     width: number;
+    /** Índice actual de la columna */
     index: number;
+    /** Índice original de la columna */
     originalIndex: number;
+    /** Visibilidad original de la columna */
     originalVisible: boolean;
+    /** Estado congelado original de la columna */
     originalFrozen: boolean;
+    /** Estado agrupado original de la columna */
+    originalGrouped: boolean;
 }
 export type ColumnsConfigRef = {
     onClickIntro: () => void;
     current: HTMLDivElement | null;
 };
 export interface ConfigProps {
+    /** Función para cerrar el modal de configuración */
     onCloseSettings: () => void;
+    /** Columnas del DataGrid */
     columns: readonly Column<any, any>[];
+    /** Configuración actual de las columnas */
     columnsConfig: IConfigColumn[];
+    /** Callback para cambiar la configuración de columnas */
     onChangeColumnsConfig: (newColumnsConfig: IConfigColumn[]) => void;
+    /** Altura de las filas en el grid interno del modal */
     rowHeight: number;
+    /** Clases CSS personalizadas */
     classes: DataGridContextProps<unknown, unknown>['classes'];
+    /** Tamaño del componente */
     size: GridProps<unknown, unknown>['size'];
 }
 export interface CheckFormatterProps {

package/components/datagrids/views/adapters/CheckboxCellAdapter/CheckboxCellAdapter.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useContext } from "react";
 import { SelectCellFormatter } from "react-data-grid";
-import { S as CheckboxCellWrapperStyled } from "../../../slots/DataGridSlot.js";
+import { X as CheckboxCellWrapperStyled } from "../../../slots/DataGridSlot.js";
 import { a as DataGridContext } from "../../../contexts/DataGridContext/DataGridContext.js";
 import { R as RadioFormatter } from "../../TableView/subcomponents/RadioSelectColumn/subcomponents/RadioFormatter/RadioFormatter.js";
 import { C as CheckboxFormatter } from "../../TableView/subcomponents/CheckboxFormatter/CheckboxFormatter.js";

package/components/extended/React-Resizable/Resizable/slots/ResizableSlots.d.ts

@@ -1,4 +1,4 @@
 import { Resizable } from 'react-resizable';
-export declare const RootStyled: import('@emotion/styled').StyledComponent<Pick<import('react-resizable').ResizableProps, "height" | "width" | "className" | "children" | "onResize" | "resizeHandles" | "handle" | "handleSize" | "lockAspectRatio" | "minConstraints" | "maxConstraints" | "onResizeStop" | "onResizeStart" | "draggableOpts" | "transformScale" | "axis"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {
+export declare const RootStyled: import('@emotion/styled').StyledComponent<Pick<import('react-resizable').ResizableProps, "children" | "resizeHandles" | "height" | "width" | "className" | "onResize" | "handle" | "handleSize" | "lockAspectRatio" | "minConstraints" | "maxConstraints" | "onResizeStop" | "onResizeStart" | "draggableOpts" | "transformScale" | "axis"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {
     ref?: import('react').Ref<Resizable> | undefined;
 }>;

package/components/extended/React-Resizable/ResizableBox/slots/ResizableBoxSlots.d.ts

@@ -1,4 +1,4 @@
 import { ResizableBox } from 'react-resizable';
-export declare const RootStyled: import('@emotion/styled').StyledComponent<Pick<import('react-resizable').ResizableBoxProps, "height" | "width" | "className" | "style" | "children" | "onResize" | "resizeHandles" | "handle" | "handleSize" | "lockAspectRatio" | "minConstraints" | "maxConstraints" | "onResizeStop" | "onResizeStart" | "draggableOpts" | "transformScale" | "axis"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {
+export declare const RootStyled: import('@emotion/styled').StyledComponent<Pick<import('react-resizable').ResizableBoxProps, "children" | "resizeHandles" | "height" | "width" | "className" | "style" | "onResize" | "handle" | "handleSize" | "lockAspectRatio" | "minConstraints" | "maxConstraints" | "onResizeStop" | "onResizeStart" | "draggableOpts" | "transformScale" | "axis"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {
     ref?: import('react').Ref<ResizableBox> | undefined;
 }>;