@m4l/components 9.4.13 → 9.4.15-BE20260120

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

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useState, useImperativeHandle, useMemo, useEffect } from "react";
-import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { useModuleDictionary } from "@m4l/core";
 import DataGrid from "react-data-grid";
 import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
-import { p as pathIcons } from "../../../../../../icons.js";
 import { v as ColumnsConfigWrapperStyled, w as ColumnsConfigDataGridStyled, x as ColumnsConfigSelColumnsStyled, y as TableWrapperDataGridStyled, z as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
 import { D as DICTIONARY } from "../../../../../../dictionary.js";
+import { ArrowChevronUpOutlined, ArrowChevronMdUpOutlined, ArrowChevronDownOutlined, ArrowChevronMdDownOutlined, ActionsMultiCheckOutlined, ActionsCheckIndeterminateOutlined, ArrowRestoreOutlined } from "@m4l/icons";
 import { C as ColumnInteractiveCheckFormatter } from "../../../../../../formatters/ColumnInteractiveCheckFormatter/formatter.js";
 function getRowsFromColumnsConfig(columnsConfig, columns) {
   return columnsConfig.filter((cConfig) => !cConfig.hidden).map(
@@ -48,7 +48,6 @@ const ColumnsConfig = forwardRef(
       () => /* @__PURE__ */ new Set()
     );
     const divRef = useRef(null);
-    const { host_static_assets, environment_assets } = useEnvironment();
     useImperativeHandle(ref, () => ({
       onClickIntro: handleIntro,
       current: divRef.current
@@ -234,7 +233,7 @@ const ColumnsConfig = forwardRef(
             onClick: handleMoveFirst,
             "aria-label": "move first place",
             disabled: rowSelectedIndex < 1,
-            icon: `${host_static_assets}/${environment_assets}/${pathIcons.moveFirstPlace}`
+            icon: /* @__PURE__ */ jsx(ArrowChevronUpOutlined, {})
           }
         ),
         /* @__PURE__ */ jsx(
@@ -244,7 +243,7 @@ const ColumnsConfig = forwardRef(
             onClick: () => handleMoveUpDownd(-1),
             "aria-label": "move up place",
             disabled: rowSelectedIndex < 1,
-            icon: `${host_static_assets}/${environment_assets}/${pathIcons.moveUpPlace}`
+            icon: /* @__PURE__ */ jsx(ArrowChevronMdUpOutlined, {})
           }
         ),
         /* @__PURE__ */ jsx(
@@ -254,7 +253,7 @@ const ColumnsConfig = forwardRef(
             onClick: handleMoveLast,
             "aria-label": "move last place",
             disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
-            icon: `${host_static_assets}/${environment_assets}/${pathIcons.moveLastPlace}`
+            icon: /* @__PURE__ */ jsx(ArrowChevronDownOutlined, {})
           }
         ),
         /* @__PURE__ */ jsx(
@@ -264,7 +263,7 @@ const ColumnsConfig = forwardRef(
             onClick: () => handleMoveUpDownd(1),
             "aria-label": "move down place",
             disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
-            icon: `${host_static_assets}/${environment_assets}/${pathIcons.moveDownPlace}`
+            icon: /* @__PURE__ */ jsx(ArrowChevronMdDownOutlined, {})
           }
         ),
         /* @__PURE__ */ jsx(
@@ -273,7 +272,7 @@ const ColumnsConfig = forwardRef(
             tooltip: getLabel(DICTIONARY.SETTINGS_VISIBLE_ALL),
             onClick: checkAll,
             "aria-label": "check visible all",
-            icon: `${host_static_assets}/${environment_assets}/${pathIcons.checkAll}`
+            icon: /* @__PURE__ */ jsx(ActionsMultiCheckOutlined, {})
           }
         ),
         /* @__PURE__ */ jsx(
@@ -282,7 +281,7 @@ const ColumnsConfig = forwardRef(
             tooltip: getLabel(DICTIONARY.SETTINGS_NO_VISIBLE_ALL),
             onClick: unCheckAll,
             "aria-label": "un check all",
-            icon: `${host_static_assets}/${environment_assets}/${pathIcons.uncheckAll}`
+            icon: /* @__PURE__ */ jsx(ActionsCheckIndeterminateOutlined, {})
           }
         ),
         /* @__PURE__ */ jsx(
@@ -291,7 +290,7 @@ const ColumnsConfig = forwardRef(
             tooltip: getLabel(DICTIONARY.SETTINGS_RESTORE),
             onClick: restoreAll,
             "aria-label": "Restore columns",
-            icon: `${host_static_assets}/${environment_assets}/${pathIcons.restoreColumns}`
+            icon: /* @__PURE__ */ jsx(ArrowRestoreOutlined, {})
           }
         )
       ] })

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

@@ -1,7 +1,7 @@
-import { DataGridProps } from 'react-data-grid';
-import { GridProps, RowKey } from '../../types';
+import { RowKey, TableViewProps } from '../../types';
 /**
  * Componente que renderiza la tabla con las filas y columnas
- * Acepta todos los props de DataGrid y prioriza las configuraciones personalizadas
+ * Acepta todos los props de DataGrid y prioriza las configuraciones personalizadas.
+ * Si se proporcionan treeProps, renderiza TreeDataGrid en lugar de DataGrid.
  */
-export declare function TableView<TRow, TSummaryRow, TKey extends RowKey = RowKey>(props: GridProps<TRow, TSummaryRow, TKey> & Omit<DataGridProps<TRow, TSummaryRow>, keyof GridProps<TRow, TSummaryRow, TKey>>): import("react/jsx-runtime").JSX.Element;
+export declare function TableView<TRow, TSummaryRow, TKey extends RowKey = RowKey>(props: TableViewProps<TRow, TSummaryRow, TKey>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,7 @@
-import { useMemo, useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { ActionsFilterOutlined } from "@m4l/icons";
 import { D as DICTIONARY } from "../../../../dictionary.js";
 import { p as pathIcons } from "../../../../icons.js";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
@@ -14,13 +16,16 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSo
   } = useDataGrid();
   const { host_static_assets, environment_assets } = useEnvironment();
   const { getLabel } = useModuleDictionary();
-  const executeSortChange = (newSortColumns) => {
-    if (handleSortFromPopover) {
-      handleSortFromPopover(newSortColumns);
-    } else {
-      setSortColumns(newSortColumns);
-    }
-  };
+  const executeSortChange = useCallback(
+    (newSortColumns) => {
+      if (handleSortFromPopover) {
+        handleSortFromPopover(newSortColumns);
+      } else {
+        setSortColumns(newSortColumns);
+      }
+    },
+    [handleSortFromPopover, setSortColumns]
+  );
   const column = useMemo(() => {
     return finalColumns.find((c) => c.key === columnKey);
   }, [columnKey, finalColumns]);
@@ -123,6 +128,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;
@@ -217,18 +240,33 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSo
         disabled: externalSortSettings ? !hasAnySortApplied || !isRemovable : !(isAsc || isDesc)
       }
     ];
-    const filterAction = externalFilterSettings ? [
-      {
-        type: "menuItem",
-        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.filter2}`,
-        label: getLabel(DICTIONARY.ADD_FILTER_COLUMN),
-        dataTestId: "filter-add",
-        onClick: () => {
-          addExternalFilter();
-        },
-        disabled: isAddFilterDisabled
+    const filterAction = externalFilterSettings ? [{ type: "menuItem", startIcon: /* @__PURE__ */ jsx(ActionsFilterOutlined, {}), label: getLabel(DICTIONARY.ADD_FILTER_COLUMN), dataTestId: "filter-add", onClick: () => {
+      addExternalFilter();
+    }, 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,7 +284,7 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSo
         dataTestId: "hide-column"
       }
     ];
-    return [...sortActions, ...filterAction, ...baseActions];
+    return [...sortActions, ...filterAction, ...groupActions, ...baseActions];
   }, [
     columnKey,
     canSort,
@@ -258,13 +296,22 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSo
     toggleFrozen,
     toggleVisible,
     columnsConfig,
+    onChangeColumnsConfig,
     externalSortSettings,
     externalFilterSettings,
+    hasGroupableColumns,
+    canGroup,
+    isGrouped,
     host_static_assets,
     environment_assets,
     getLabel,
     isAddFilterDisabled,
-    executeSortChange
+    executeSortChange,
+    addExternalFilter,
+    clearLocalSort,
+    isAsc,
+    isDesc,
+    isRemovable
   ]);
 }
 export {

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";
@@ -39,6 +41,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 +108,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 +126,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 +151,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 +173,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 +194,9 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
     columns,
     activeFilters,
     onChangeColumnsOrder,
-    popoverHandlers
+    popoverHandlers,
+    columnsConfig,
+    sourceColumns
   ]);
   const finalRows = useMemo(() => {
     const nextRows = sourceRows.filter((r) => {
@@ -226,7 +254,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;
+}