@m4l/components 9.4.12 → 9.4.14

package/components/datagrids/icons.d.ts

@@ -20,6 +20,7 @@ export declare const pathIcons: {
     freezeColumn: string;
     unfreezeColumn: string;
     hideColumn: string;
+    groupColumn: string;
     viewTable: string;
     viewCards: string;
     info: string;
@@ -28,4 +29,8 @@ export declare const pathIcons: {
     smartphone: string;
     internet: string;
     edit: string;
+    group: string;
+    removeGroup: string;
+    groupUp: string;
+    groupDown: string;
 };

package/components/datagrids/icons.js

@@ -24,7 +24,11 @@ const pathIcons = {
   viewCards: "frontend/components/data_grid/assets/icons/card.svg",
   info: "frontend/components/data_grid/assets/icons/info.svg",
   expanded: "frontend/components/data_grid/assets/icons/expanded.svg",
-  edit: "frontend/components/EditLabel/assets/icons/pencil.svg"
+  edit: "frontend/components/EditLabel/assets/icons/pencil.svg",
+  group: "frontend/components/data_grid/assets/icons/group.svg",
+  removeGroup: "frontend/components/data_grid/assets/icons/remove_group.svg",
+  groupUp: "frontend/components/data_grid/assets/icons/group_up.svg",
+  groupDown: "frontend/components/data_grid/assets/icons/group_down.svg"
 };
 export {
   pathIcons as p

package/components/datagrids/index.d.ts

@@ -1,7 +1,8 @@
 export { DataGrid } from './components/DataGridMain';
+export { TreeDataGrid } from './components/TreeDataGrid';
 export * from './formatters';
 export type { Column, RenderEditCellProps, RenderCellProps, } from 'react-data-grid';
-export type { RowKey, ChangeConfig, ChangeUserColumn, RowActionsGetter, RowKeyGetter, } from './types';
+export type { RowKey, ChangeConfig, ChangeUserColumn, RowActionsGetter, RowKeyGetter, TreeProps, TreeDataGridProps, } from './types';
 export type { IGridConfigExtended, BaseConfigColumn, } from './contexts/DataGridContext/types';
 export type { IGridConfig } from './helpers/persistence/getColumnsWidth/types';
 export { getDataGridComponentsDictionary } from './dictionary';

package/components/datagrids/slots/DataGridEnum.d.ts

@@ -53,7 +53,9 @@ export declare enum TableSlots {
     editorCellWrapper = "editorCellWrapper",
     editablePlaceholder = "editablePlaceholder",
     editLabel = "editLabel",
-    iconButtonEdit = "iconButtonEdit"
+    iconButtonEdit = "iconButtonEdit",
+    defaultRenderGroupCellRoot = "defaultRenderGroupCellRoot",
+    defaultRenderGroupCellText = "defaultRenderGroupCellText"
 }
 export declare enum TextEditorSlots {
     inputTexEditor = "inputTexEditor"

package/components/datagrids/slots/DataGridEnum.js

@@ -57,6 +57,8 @@ var TableSlots = /* @__PURE__ */ ((TableSlots2) => {
   TableSlots2["editablePlaceholder"] = "editablePlaceholder";
   TableSlots2["editLabel"] = "editLabel";
   TableSlots2["iconButtonEdit"] = "iconButtonEdit";
+  TableSlots2["defaultRenderGroupCellRoot"] = "defaultRenderGroupCellRoot";
+  TableSlots2["defaultRenderGroupCellText"] = "defaultRenderGroupCellText";
   return TableSlots2;
 })(TableSlots || {});
 var TextEditorSlots = /* @__PURE__ */ ((TextEditorSlots2) => {

package/components/datagrids/slots/DataGridSlot.d.ts

@@ -97,3 +97,5 @@ export declare const ControlNavigateStyled: import('@emotion/styled').StyledComp
  * ****************
  */
 export declare const ColumnIconFormatterStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const DefaultRenderGroupCellRootStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;
+export declare const DefaultRenderGroupCellTextStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;

package/components/datagrids/slots/DataGridSlot.js

@@ -1,7 +1,7 @@
 import { styled } from "@mui/material/styles";
 import { MenuList, InputBase } from "@mui/material";
 import { D as DATAGRID_PREFIX_NAME } from "../constants.js";
-import { D as DataGridSlots, T as TextEditorSlots, A as ActionsSlots, C as ControlNavigateSlots, b as TableSlots, R as RowsCountSlots, a as ColumnsConfigSlots, c as ColumnIconFormatterSlots } from "./DataGridEnum.js";
+import { T as TextEditorSlots, D as DataGridSlots, b as TableSlots, A as ActionsSlots, C as ControlNavigateSlots, R as RowsCountSlots, a as ColumnsConfigSlots, c as ColumnIconFormatterSlots } from "./DataGridEnum.js";
 import { d as dataGridStyles } from "../Datagrid.styles.js";
 import { I as Icon } from "../../Icon/Icon.js";
 import { C as Card } from "../../Card/Card.js";
@@ -231,6 +231,14 @@ styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: ColumnIconFormatterSlots.columnIconFormatter
 })(dataGridStyles.columnIconFormatter);
+const DefaultRenderGroupCellRootStyled = styled("span", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.defaultRenderGroupCellRoot
+})(dataGridStyles.defaultRenderGroupCellRoot);
+const DefaultRenderGroupCellTextStyled = styled("span", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.defaultRenderGroupCellText
+})(dataGridStyles.defaultRenderGroupCellText);
 export {
   ActionsRootStyled as A,
   TableContainerStyled as B,
@@ -250,10 +258,12 @@ export {
   MenuListStyled as P,
   HeaderRenderClickStyled as Q,
   RowsCountRootStyled as R,
-  CheckboxCellWrapperStyled as S,
+  DefaultRenderGroupCellRootStyled as S,
   TextToggleCardButtonStyled as T,
+  DefaultRenderGroupCellTextStyled as U,
   ValueColumnStyled as V,
   WrapperSkeletonStyled as W,
+  CheckboxCellWrapperStyled as X,
   ControlNavigateStyled as a,
   RowsCountLabelStyled as b,
   RowsCountValueStyled as c,

package/components/datagrids/types.d.ts

@@ -39,6 +39,18 @@ declare module 'react-data-grid' {
         formatter?: (props: any) => JSX.Element;
         /** @deprecated Usa renderEditCell en lugar de editor. Este atributo será removido en una futura versión. */
         editor?: Maybe<(props: RenderEditCellProps<TRow, TSummaryRow>) => ReactNode>;
+        /**
+         * Si true, la columna puede ser agrupada/desagrupada por el usuario.
+         * Solo aplica para TreeDataGrid.
+         */
+        groupable?: boolean;
+        /**
+         * Si true, la columna está agrupada por defecto.
+         * - Con `groupable: true`: el usuario puede cambiar la agrupación.
+         * - Sin `groupable` o `groupable: false`: agrupación estática, no se puede cambiar.
+         * Solo aplica para TreeDataGrid.
+         */
+        grouped?: boolean;
     }
 }
 export declare type RowKey = string | number;
@@ -319,3 +331,43 @@ export type DataGridOwnerState<TRow, TSummaryRow, TKey extends RowKey = RowKey>
 };
 export type DataGridSlotsType = DataGridSlots | TextEditorSlots | ActionsSlots | RowsCountSlots | ColumnsConfigSlots | TableSlots | ControlNavigateSlots | ColumnIconFormatterSlots;
 export type DataGridStyles = OverridesStyleRules<DataGridSlotsType, typeof DATAGRID_PREFIX_NAME, Theme>;
+/**
+ * Props específicas de TreeDataGrid (de react-data-grid)
+ * Estas props controlan la funcionalidad de agrupación jerárquica.
+ *
+ * NOTA: groupBy se calcula automáticamente desde columnsConfig.grouped
+ * ordenadas por groupOrder. El desarrollador define grouped/groupable en columns.
+ */
+export interface TreeProps<TRow> {
+    /**
+     * Función que agrupa las filas por una columna.
+     *
+     * OPCIONAL: Si no se pasa, usa un rowGrouper genérico que agrupa
+     * por el valor directo de la columna (row[columnKey]).
+     *
+     * Solo necesitas pasar un rowGrouper personalizado si quieres
+     * transformar los valores antes de agrupar, por ejemplo:
+     * - Agrupar fechas por mes ("Enero 2024")
+     * - Agrupar números por rango ("$40k - $60k")
+     * @see defaultRowGrouper en helpers/defaultRowGrouper
+     */
+    rowGrouper?: (rows: readonly TRow[], columnKey: string) => Record<string, readonly TRow[]>;
+    /** IDs de grupos expandidos */
+    expandedGroupIds?: ReadonlySet<unknown>;
+    /** Callback cuando cambian los grupos expandidos */
+    onExpandedGroupIdsChange?: (expandedGroupIds: Set<unknown>) => void;
+}
+/**
+ * Props completas de TreeDataGrid.
+ * Extiende DataGridProps pero sin cardsViewConfig ni defaultViewMode
+ * ya que TreeDataGrid solo soporta vista de tabla.
+ */
+export interface TreeDataGridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Omit<DataGridProps<TRow, TSummaryRow, TKey>, 'cardsViewConfig' | 'defaultViewMode'>, TreeProps<TRow> {
+}
+/**
+ * Props para TableView con soporte opcional para TreeDataGrid
+ */
+export type TableViewProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> = GridProps<TRow, TSummaryRow, TKey> & {
+    /** Props para TreeDataGrid. Si se pasan, usa TreeDataGrid en lugar de DataGrid */
+    treeProps?: TreeProps<TRow>;
+};

package/components/datagrids/views/CardsView/hooks/useProcessedColumns/useProcessedColumns.d.ts

@@ -47,4 +47,6 @@ export declare function useProcessedColumns<TRow, TSummaryRow>(columns: readonly
     customSort?: ((a: TRow, b: TRow) => number) | undefined;
     formatter?: ((props: any) => JSX.Element) | undefined;
     editor?: import('@m4l/core').Maybe<(props: import('react-data-grid').RenderEditCellProps<TRow, TSummaryRow>) => import('react').ReactNode>;
+    groupable?: boolean;
+    grouped?: boolean;
 }[];

package/components/datagrids/views/CardsView/hooks/useProcessedColumns/useProcessedColumns.js

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
-import { d as DATAGRID_SELECT_COLUMN_KEY, e as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../../constants.js";
+import { SELECT_COLUMN_KEY } from "react-data-grid";
+import { d as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../../constants.js";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 function useProcessedColumns(columns, options = {}) {
   const { applyVisibilityFilter = true } = options;
@@ -10,7 +11,7 @@ function useProcessedColumns(columns, options = {}) {
   );
   return useMemo(() => {
     const processedColumns = columns.filter((column) => {
-      if (column.key === DATAGRID_SELECT_COLUMN_KEY || column.key === DATAGRID_ACTIONS_COLUMN_KEY) {
+      if (column.key === SELECT_COLUMN_KEY || column.key === DATAGRID_ACTIONS_COLUMN_KEY) {
         return false;
       }
       if (!applyVisibilityFilter) {

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

@@ -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,