@m4l/components 9.4.6-BE20260111-beta.1 → 9.4.6-BE20260120

package/components/datagrids/formatters/ColumnImageFormatter/useColumnImage.d.ts

@@ -6,4 +6,5 @@ import { ColumnImageFormatterProps } from './types';
  */
 export declare const useColumnImage: <TRow>(props: ColumnImageFormatterProps<TRow>) => {
     formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    renderGroupCell: (groupProps: import('react-data-grid').RenderGroupCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
 };

package/components/datagrids/formatters/ColumnImageFormatter/useColumnImage.js

@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect, useMemo } from "react";
 import { deepEqual } from "fast-equals";
 import { C as ColumnImageFormatter } from "./formatter.js";
+import { C as ColumnImageGroupFormatter } from "./ColumnImageGroupFormatter.js";
 const useColumnImage = (props) => {
   const [stateProps, setStateProps] = useState(props);
   const refProps = useRef({ ...props });
@@ -12,7 +13,8 @@ const useColumnImage = (props) => {
   }, [props]);
   return useMemo(
     () => ({
-      formatter: ColumnImageFormatter(stateProps)
+      formatter: ColumnImageFormatter(stateProps),
+      renderGroupCell: ColumnImageGroupFormatter(stateProps)
     }),
     [stateProps]
   );

package/components/datagrids/formatters/ColumnInteractiveCheckFormatter/formatter.d.ts

@@ -1,6 +1,17 @@
 import { ColumnInteractiveCheckFormatterProps } from './types';
 /**
  * ColumnInteractiveCheckFormatter: Es un formateador de columna booleano que permite la interacción directa
- * (camnbiar el checked) sin la necesidad de entrar en edición como lo hace un editor
+ * (cambiar el checked) sin la necesidad de entrar en edición como lo hace un editor.
+ *
+ * Soporta la propiedad opcional `disabledKey` en la columna, que indica qué campo del row
+ * determina si el checkbox está deshabilitado. Si el valor de ese campo es `false`,
+ * el checkbox se deshabilita.
+ * @example
+ * // Columna con checkbox siempre habilitado
+ * { key: 'visible', name: 'Visible', renderCell: ColumnInteractiveCheckFormatter }
+ * @example
+ * // Columna con checkbox condicionalmente deshabilitado
+ * { key: 'grouped', name: 'Agrupar', renderCell: ColumnInteractiveCheckFormatter, disabledKey: 'groupable' }
+ * // El checkbox se deshabilita cuando row.groupable === false
  */
 export declare function ColumnInteractiveCheckFormatter<Row>(props: ColumnInteractiveCheckFormatterProps<Row>): import("react/jsx-runtime").JSX.Element;

package/components/datagrids/formatters/ColumnInteractiveCheckFormatter/formatter.js

@@ -2,7 +2,12 @@ import { jsx } from "react/jsx-runtime";
 import { C as CheckBox } from "../../../mui_extended/CheckBox/CheckBox.js";
 function ColumnInteractiveCheckFormatter(props) {
   const { row, onRowChange, column } = props;
+  const disabledKey = column.disabledKey;
+  const isDisabled = disabledKey ? !row[disabledKey] : false;
   const handleChange = () => {
+    if (isDisabled) {
+      return;
+    }
     const newRow = { ...row };
     newRow[column.key] = !row[column.key];
     onRowChange(newRow);
@@ -12,6 +17,7 @@ function ColumnInteractiveCheckFormatter(props) {
     {
       size: "small",
       checked: row[column.key] || false,
+      disabled: isDisabled,
       onChange: handleChange
     }
   );

package/components/datagrids/formatters/ColumnNestedValueFormatter/ColumnNestedValueGroupFormatter.d.ts

@@ -0,0 +1,14 @@
+import { ColumnNestedValueFormatterProps } from './types';
+import { RenderGroupCellProps } from 'react-data-grid';
+/**
+ * Formatter para mostrar valores anidados en filas de grupo (TreeDataGrid).
+ *
+ * Esta función es utilizada cuando el TreeDataGrid agrupa filas y necesita
+ * mostrar un valor anidado en el encabezado del grupo. Usa la primera fila
+ * del grupo (childRows[0]) como fuente de datos representativa.
+ * @param props - Propiedades del formatter que incluyen:
+ *                - fieldValue: Campo anidado a mostrar (ej: 'user.name')
+ *                - Component: Componente wrapper opcional
+ * @returns Función que recibe RenderGroupCellProps y retorna el valor formateado
+ */
+export declare function ColumnNestedValueGroupFormatter<TRow>(props: ColumnNestedValueFormatterProps<TRow>): (groupProps: RenderGroupCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/datagrids/formatters/ColumnNestedValueFormatter/ColumnNestedValueGroupFormatter.js

@@ -0,0 +1,22 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import React from "react";
+import { getPropertyByString } from "@m4l/core";
+import { g as getNullGuard } from "../../../../utils/getNullGuard.js";
+function ColumnNestedValueGroupFormatter(props) {
+  const { fieldValue, Component = React.Fragment } = props;
+  return (groupProps) => {
+    const { childRows } = groupProps;
+    if (childRows.length === 0) {
+      return /* @__PURE__ */ jsx(Fragment, { children: "-" });
+    }
+    const representativeRow = childRows[0];
+    const property = getNullGuard(
+      getPropertyByString(representativeRow, fieldValue)
+    );
+    const value = typeof property === "object" ? JSON.stringify(property) : property;
+    return /* @__PURE__ */ jsx(Component, { children: value });
+  };
+}
+export {
+  ColumnNestedValueGroupFormatter as C
+};

package/components/datagrids/formatters/ColumnNestedValueFormatter/formatter.d.ts

@@ -1,6 +1,38 @@
 import { ColumnNestedValueFormatterProps } from './types';
 import { RenderCellProps } from 'react-data-grid';
 /**
- * Function to format a nested value in a column of a DataGrid
+ * Formatter para mostrar valores de propiedades anidadas en columnas del DataGrid.
+ *
+ * Este formatter permite acceder a propiedades dentro de objetos anidados usando
+ * "dot notation" (notación de punto). Es útil cuando los datos tienen estructuras
+ * complejas y necesitas mostrar un valor específico dentro de un objeto.
+ * @param props - Configuración del formatter
+ * @param props.fieldValue - Ruta a la propiedad usando dot notation (ej: 'user.profile.name')
+ * @param props.Component - Componente opcional para envolver el valor (default: React.Fragment)
+ * @param props.defaultValue - Valor a mostrar si es null/undefined (default: '-')
+ * @returns Función formatter compatible con react-data-grid
+ * @example
+ * // Filas de ejemplo:
+ * // { id: 1, user: { profile: { name: 'Juan' } } }
+ * // { id: 2, user: { profile: { name: null } } }
+ *
+ * // Uso recomendado con hook:
+ * const nestedColumn = useColumnNestedValue<MyRow>({
+ *   fieldValue: 'user.profile.name',
+ *   defaultValue: 'Sin nombre',
+ * });
+ *
+ * const columns = [
+ *   {
+ *     key: 'userName',
+ *     name: 'Nombre',
+ *     type: 'custom',
+ *     ...nestedColumn, // Incluye formatter, customFilter y customSort
+ *   }
+ * ];
+ *
+ * // Resultado en DataGrid:
+ * // Fila 1: "Juan"
+ * // Fila 2: "Sin nombre" (porque el valor es null)
  */
 export declare function ColumnNestedValueFormatter<TRow>(props: ColumnNestedValueFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/datagrids/formatters/ColumnNestedValueFormatter/formatter.js

@@ -3,10 +3,11 @@ import { getPropertyByString } from "@m4l/core";
 import React from "react";
 import { g as getNullGuard } from "../../../../utils/getNullGuard.js";
 function ColumnNestedValueFormatter(props) {
-  const { fieldValue, Component = React.Fragment } = props;
+  const { fieldValue, Component = React.Fragment, defaultValue = "-" } = props;
   return (formatterProps) => {
     const property = getNullGuard(
-      getPropertyByString(formatterProps.row, fieldValue)
+      getPropertyByString(formatterProps.row, fieldValue),
+      defaultValue
     );
     const value = typeof property === "object" ? JSON.stringify(property) : property;
     return /* @__PURE__ */ jsx(Component, { children: value });

package/components/datagrids/formatters/ColumnNestedValueFormatter/index.d.ts

@@ -1,3 +1,4 @@
 export { ColumnNestedValueFormatter } from './formatter';
+export { ColumnNestedValueGroupFormatter } from './ColumnNestedValueGroupFormatter';
 export type { ColumnNestedValueFormatterProps } from './types';
 export { useColumnNestedValue } from './useColumnNestedValue';

package/components/datagrids/formatters/ColumnNestedValueFormatter/types.d.ts

@@ -1,5 +1,23 @@
 import { DeepKeyOf } from '../../../../utils/types';
 export interface ColumnNestedValueFormatterProps<TRow> {
-    Component?: React.ElementType;
+    /**
+     * Ruta a la propiedad anidada usando dot notation.
+     * Permite acceder a valores dentro de objetos anidados.
+     * @example
+     * // Para acceder a { user: { profile: { name: 'Juan' } } }
+     * fieldValue: 'user.profile.name' // Retorna 'Juan'
+     */
     fieldValue: DeepKeyOf<TRow>;
+    /**
+     * Componente opcional para envolver el valor renderizado.
+     * Por defecto usa React.Fragment.
+     * @example
+     * Component: Typography // Envuelve el valor en <Typography>{valor}</Typography>
+     */
+    Component?: React.ElementType;
+    /**
+     * Valor a mostrar cuando la propiedad es null o undefined.
+     * Por defecto es '-'.
+     */
+    defaultValue?: string;
 }

package/components/datagrids/formatters/ColumnNestedValueFormatter/useColumnNestedValue.d.ts

@@ -1,10 +1,43 @@
 import { ColumnNestedValueFormatterProps } from './types';
 /**
- * Function that return the formatter, customFilter and customSort
- * of the column for ColumnNestedValueFormatter.
+ * Hook para crear una columna que muestra valores de propiedades anidadas.
+ * @param props - Configuración del formatter
+ * @param props.fieldValue - Ruta a la propiedad usando dot notation (ej: 'user.profile.name')
+ * @param props.Component - Componente opcional para envolver el valor (default: React.Fragment)
+ * @param props.defaultValue - Valor a mostrar si es null/undefined (default: '-')
+ * @returns Objeto con { formatter, customFilter, customSort } para usar en la columna
+ * @example
+ * // Datos de ejemplo en el DataGrid:
+ * // [
+ * //   { id: 1, nestedValue: { value: 'Activo' } },
+ * //   { id: 2, nestedValue: { value: null } },
+ * //   { id: 3, nestedValue: { value: 'Pendiente' } },
+ * // ]
+ *
+ * // Crear la columna con el hook
+ * const nestedColumn = useColumnNestedValue<RowType>({
+ *   fieldValue: 'nestedValue.value',
+ *   defaultValue: 'N/A', // Opcional, por defecto es '-'
+ * });
+ *
+ * // Usar en la definición de columnas
+ * const columns = [
+ *   {
+ *     key: 'nestedValue',
+ *     name: 'Estado',
+ *     type: 'custom',
+ *     ...nestedColumn, // Spread incluye formatter, customFilter y customSort
+ *   }
+ * ];
+ *
+ * // Resultado en el DataGrid:
+ * // Fila 1: "Activo"
+ * // Fila 2: "N/A"     (porque el valor es null)
+ * // Fila 3: "Pendiente"
  */
 export declare const useColumnNestedValue: <TRow>(props: ColumnNestedValueFormatterProps<TRow>) => {
     formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    renderGroupCell: (groupProps: import('react-data-grid').RenderGroupCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string) => any;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

package/components/datagrids/formatters/ColumnNestedValueFormatter/useColumnNestedValue.js

@@ -1,12 +1,17 @@
 import { getPropertyByString } from "@m4l/core";
+import { C as ColumnNestedValueGroupFormatter } from "./ColumnNestedValueGroupFormatter.js";
 import { useState, useRef, useEffect, useMemo } from "react";
 import { deepEqual } from "fast-equals";
 import { g as getNullGuard } from "../../../../utils/getNullGuard.js";
 import { C as ColumnNestedValueFormatter } from "./formatter.js";
 import { g as getColumnKey } from "../../helpers/shared/getColumnKey/getColumnKey.js";
 const getCustomNestedValueFilter = (props) => {
+  const { defaultValue = "-" } = props;
   return (row, value) => {
-    const property = getNullGuard(getPropertyByString(row, props.fieldValue));
+    const property = getNullGuard(
+      getPropertyByString(row, props.fieldValue),
+      defaultValue
+    );
     if (typeof property === "object") {
       return Object.values(property).includes(value);
     }
@@ -14,10 +19,17 @@ const getCustomNestedValueFilter = (props) => {
   };
 };
 const getCustomNestedValueSort = (props) => {
+  const { defaultValue = "-" } = props;
   return (a, b) => {
     const keyWiouthRow = getColumnKey(props.fieldValue);
-    const valueA = getNullGuard(getPropertyByString(a, keyWiouthRow));
-    const valueB = getNullGuard(getPropertyByString(b, keyWiouthRow));
+    const valueA = getNullGuard(
+      getPropertyByString(a, keyWiouthRow),
+      defaultValue
+    );
+    const valueB = getNullGuard(
+      getPropertyByString(b, keyWiouthRow),
+      defaultValue
+    );
     if (typeof valueA === "object" || typeof valueB === "object" || valueA === void 0 || valueB === void 0) {
       return 0;
     }
@@ -39,11 +51,15 @@ const useColumnNestedValue = (props) => {
       setStateProps(props);
     }
   }, [props]);
-  return useMemo(() => ({
-    formatter: ColumnNestedValueFormatter(stateProps),
-    customFilter: getCustomNestedValueFilter(stateProps),
-    customSort: getCustomNestedValueSort(stateProps)
-  }), [stateProps]);
+  return useMemo(
+    () => ({
+      formatter: ColumnNestedValueFormatter(stateProps),
+      renderGroupCell: ColumnNestedValueGroupFormatter(stateProps),
+      customFilter: getCustomNestedValueFilter(stateProps),
+      customSort: getCustomNestedValueSort(stateProps)
+    }),
+    [stateProps]
+  );
 };
 export {
   useColumnNestedValue as u

package/components/datagrids/formatters/ColumnPointsFormatter/ColumnPointsGroupFormatter.d.ts

@@ -0,0 +1,15 @@
+import { ColumnPointsFormatterProps } from './types';
+import { RenderGroupCellProps } from 'react-data-grid';
+/**
+ * Formatter para mostrar puntos de calibración en filas de grupo (TreeDataGrid).
+ *
+ * Esta función es utilizada cuando el TreeDataGrid agrupa filas y necesita
+ * mostrar puntos en el encabezado del grupo. Usa la primera fila
+ * del grupo (childRows[0]) como fuente de datos representativa.
+ * @param props - Propiedades del formatter que incluyen:
+ *                - fieldValue: Campo que contiene el valor de los puntos
+ *                - fieldUnit: Campo que contiene la unidad de los puntos
+ *                - Component: Componente wrapper opcional
+ * @returns Función que recibe RenderGroupCellProps y retorna el PointsFormatter
+ */
+export declare const ColumnPointsGroupFormatter: <TRow>(props: ColumnPointsFormatterProps<TRow>) => (groupProps: RenderGroupCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/datagrids/formatters/ColumnPointsFormatter/ColumnPointsGroupFormatter.js

@@ -0,0 +1,28 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import React from "react";
+import { P as PointsFormatter } from "../../../formatters/PointsFormatter/PointsFormatter.js";
+const ColumnPointsGroupFormatter = (props) => {
+  const { Component = React.Fragment } = props;
+  const fieldValue = props.fieldValue;
+  const fieldUnit = props.fieldUnit;
+  return (groupProps) => {
+    const { childRows } = groupProps;
+    if (childRows.length === 0) {
+      return /* @__PURE__ */ jsx(Fragment, { children: "-" });
+    }
+    const representativeRow = childRows[0];
+    return /* @__PURE__ */ jsx(
+      PointsFormatter,
+      {
+        obProps: representativeRow,
+        ...props,
+        fieldValue,
+        fieldUnit,
+        Component
+      }
+    );
+  };
+};
+export {
+  ColumnPointsGroupFormatter as C
+};

package/components/datagrids/formatters/ColumnPointsFormatter/index.d.ts

@@ -1,3 +1,4 @@
 export { ColumnPointsFormatter } from './formatter';
+export { ColumnPointsGroupFormatter } from './ColumnPointsGroupFormatter';
 export type { ColumnPointsFormatterProps } from './types';
 export { useColumnPoints } from './useColumnPoints';

package/components/datagrids/formatters/ColumnPointsFormatter/useColumnPoints.d.ts

@@ -5,6 +5,7 @@ import { ColumnPointsFormatterProps } from './types';
  */
 export declare const useColumnPoints: <TRow>(props: ColumnPointsFormatterProps<TRow>) => {
     formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    renderGroupCell: (groupProps: import('react-data-grid').RenderGroupCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

package/components/datagrids/formatters/ColumnPointsFormatter/useColumnPoints.js

@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect, useMemo } from "react";
 import { deepEqual } from "fast-equals";
 import { C as ColumnPointsFormatter } from "./formatter.js";
+import { C as ColumnPointsGroupFormatter } from "./ColumnPointsGroupFormatter.js";
 import { g as getFormatPoints } from "../../../formatters/PointsFormatter/PointsFormatter.js";
 import { g as getColumnKey } from "../../helpers/shared/getColumnKey/getColumnKey.js";
 const getCustomPointsFilter = (props) => {
@@ -36,6 +37,7 @@ const useColumnPoints = (props) => {
   }, [props]);
   return useMemo(() => ({
     formatter: ColumnPointsFormatter(stateProps),
+    renderGroupCell: ColumnPointsGroupFormatter(stateProps),
     customFilter: getCustomPointsFilter(stateProps),
     customSort: getCustomPointsSort(stateProps)
   }), [stateProps]);

package/components/datagrids/formatters/ColumnPriceFormatter/ColumnPriceGroupFormatter.d.ts

@@ -0,0 +1,14 @@
+import { ColumnPriceFormatterProps } from './types';
+import { RenderGroupCellProps } from 'react-data-grid';
+/**
+ * Formatter para mostrar un precio en filas de grupo (TreeDataGrid).
+ *
+ * Esta función es utilizada cuando el TreeDataGrid agrupa filas y necesita
+ * mostrar un precio en el encabezado del grupo. Usa la primera fila
+ * del grupo (childRows[0]) como fuente de datos representativa.
+ * @param props - Propiedades del formatter que incluyen:
+ *                - fieldValue: Campo que contiene el valor del precio
+ *                - Component: Componente wrapper opcional
+ * @returns Función que recibe RenderGroupCellProps y retorna el PriceFormatter
+ */
+export declare const ColumnPriceGroupFormatter: <TRow>(props: ColumnPriceFormatterProps<TRow>) => (groupProps: RenderGroupCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/datagrids/formatters/ColumnPriceFormatter/ColumnPriceGroupFormatter.js

@@ -0,0 +1,26 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import React from "react";
+import { P as PriceFormatter } from "../../../formatters/PriceFormatter/PriceFormatter.js";
+const ColumnPriceGroupFormatter = (props) => {
+  const { Component = React.Fragment } = props;
+  const fieldValue = props.fieldValue;
+  return (groupProps) => {
+    const { childRows } = groupProps;
+    if (childRows.length === 0) {
+      return /* @__PURE__ */ jsx(Fragment, { children: "-" });
+    }
+    const representativeRow = childRows[0];
+    return /* @__PURE__ */ jsx(
+      PriceFormatter,
+      {
+        obProps: representativeRow,
+        ...props,
+        fieldValue,
+        Component
+      }
+    );
+  };
+};
+export {
+  ColumnPriceGroupFormatter as C
+};

package/components/datagrids/formatters/ColumnPriceFormatter/index.d.ts

@@ -1,3 +1,4 @@
 export { ColumnPriceFormatter } from './formatter';
+export { ColumnPriceGroupFormatter } from './ColumnPriceGroupFormatter';
 export type { ColumnPriceFormatterProps } from './types';
 export { useColumnPrice } from './useColumnPrice';

package/components/datagrids/formatters/ColumnPriceFormatter/useColumnPrice.d.ts

@@ -5,6 +5,7 @@ import { ColumnPriceFormatterProps } from './types';
  */
 export declare const useColumnPrice: <TRow>(props: ColumnPriceFormatterProps<TRow>) => {
     formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    renderGroupCell: (groupProps: import('react-data-grid').RenderGroupCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

package/components/datagrids/formatters/ColumnPriceFormatter/useColumnPrice.js

@@ -3,6 +3,7 @@ import { useFormatter } from "@m4l/graphics";
 import { getPropertyByString } from "@m4l/core";
 import { deepEqual } from "fast-equals";
 import { g as getFormatPrice } from "../../../formatters/PriceFormatter/PriceFormatter.js";
+import { C as ColumnPriceGroupFormatter } from "./ColumnPriceGroupFormatter.js";
 import { C as ColumnPriceFormatter } from "./formatter.js";
 import { g as getColumnKey } from "../../helpers/shared/getColumnKey/getColumnKey.js";
 const getCustomPriceFilter = (props) => {
@@ -51,6 +52,7 @@ const useColumnPrice = (props) => {
   }, [props]);
   return useMemo(() => ({
     formatter: ColumnPriceFormatter(stateProps),
+    renderGroupCell: ColumnPriceGroupFormatter(stateProps),
     customFilter,
     customSort: getCustomPriceSort(stateProps)
   }), [stateProps, customFilter]);

package/components/datagrids/formatters/ColumnTagsFormatter/ColumnTagsGroupFormatter.d.ts

@@ -0,0 +1,13 @@
+import { ColumnTagsFormatterProps } from './types';
+import { RenderGroupCellProps } from 'react-data-grid';
+/**
+ * Formatter para mostrar tags en filas de grupo (TreeDataGrid).
+ *
+ * Esta función es utilizada cuando el TreeDataGrid agrupa filas y necesita
+ * mostrar tags en el encabezado del grupo. Usa la primera fila
+ * del grupo (childRows[0]) como fuente de datos representativa.
+ * @param props - Propiedades del formatter que incluyen:
+ *                - fieldValue: Campo que contiene los tags
+ * @returns Función que recibe RenderGroupCellProps y retorna el TagsFormatter
+ */
+export declare const ColumnTagsGroupFormatter: <TRow>(props: ColumnTagsFormatterProps<TRow>) => (groupProps: RenderGroupCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/datagrids/formatters/ColumnTagsFormatter/ColumnTagsGroupFormatter.js

@@ -0,0 +1,21 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { getPropertyByString } from "@m4l/core";
+import { T as TagsFormatter } from "../../../formatters/TagsFormatter/TagsFormatter.js";
+const ColumnTagsGroupFormatter = (props) => {
+  const { fieldValue } = props;
+  return (groupProps) => {
+    const { childRows } = groupProps;
+    if (childRows.length === 0) {
+      return /* @__PURE__ */ jsx(Fragment, { children: "-" });
+    }
+    const representativeRow = childRows[0];
+    const tags = getPropertyByString(
+      representativeRow,
+      fieldValue.toString()
+    );
+    return /* @__PURE__ */ jsx(TagsFormatter, { tags });
+  };
+};
+export {
+  ColumnTagsGroupFormatter as C
+};

package/components/datagrids/formatters/ColumnTagsFormatter/index.d.ts

@@ -1,3 +1,4 @@
 export { ColumnTagsFormatter } from './formatter';
+export { ColumnTagsGroupFormatter } from './ColumnTagsGroupFormatter';
 export type { ColumnTagsFormatterProps } from './types';
 export { useColumnTags } from './useColumnTags';

package/components/datagrids/formatters/ColumnTagsFormatter/useColumnTags.d.ts

@@ -4,6 +4,7 @@ import { ColumnTagsFormatterProps } from './types';
  */
 export declare const useColumnTags: <TRow>(props: ColumnTagsFormatterProps<TRow>) => {
     formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    renderGroupCell: (groupProps: import('react-data-grid').RenderGroupCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

package/components/datagrids/formatters/ColumnTagsFormatter/useColumnTags.js

@@ -1,5 +1,6 @@
 import { getPropertyByString } from "@m4l/core";
 import { C as ColumnTagsFormatter } from "./formatter.js";
+import { C as ColumnTagsGroupFormatter } from "./ColumnTagsGroupFormatter.js";
 import { deepEqual } from "fast-equals";
 import { useState, useRef, useEffect, useMemo } from "react";
 import { g as getColumnKey } from "../../helpers/shared/getColumnKey/getColumnKey.js";
@@ -49,6 +50,7 @@ const useColumnTags = (props) => {
   return useMemo(
     () => ({
       formatter: ColumnTagsFormatter(stateProps),
+      renderGroupCell: ColumnTagsGroupFormatter(stateProps),
       customFilter: getCustomTagFilter(stateProps),
       customSort: getCustomTagSort(stateProps)
     }),

package/components/datagrids/formatters/ColumnUncertaintyFormatter/ColumnUncertaintyGroupFormatter.d.ts

@@ -0,0 +1,15 @@
+import { ColumnUncertaintyFormatterProps } from './types';
+import { RenderGroupCellProps } from 'react-data-grid';
+/**
+ * Formatter para mostrar valores de incertidumbre en filas de grupo (TreeDataGrid).
+ *
+ * Esta función es utilizada cuando el TreeDataGrid agrupa filas y necesita
+ * mostrar el valor de incertidumbre en el encabezado del grupo. Usa la primera fila
+ * del grupo (childRows[0]) como fuente de datos representativa.
+ * @param props - Propiedades del formatter que incluyen:
+ *                - fieldValue: Campo con los rangos de incertidumbre
+ *                - fieldSymbol: Campo con el símbolo
+ *                - fieldUnit: Campo con la unidad
+ * @returns Función que recibe RenderGroupCellProps y retorna el UncertaintyFormatter
+ */
+export declare const ColumnUncertaintyGroupFormatter: <TRow>(props: ColumnUncertaintyFormatterProps<TRow>) => (groupProps: RenderGroupCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/datagrids/formatters/ColumnUncertaintyFormatter/ColumnUncertaintyGroupFormatter.js

@@ -0,0 +1,27 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import React from "react";
+import { U as UncertaintyFormatter } from "../../../formatters/UncertaintyFormatter/UncertaintyFormatter.js";
+const ColumnUncertaintyGroupFormatter = (props) => {
+  const { Component = React.Fragment, fieldValue, fieldSymbol, fieldUnit } = props;
+  return (groupProps) => {
+    const { childRows } = groupProps;
+    if (childRows.length === 0) {
+      return /* @__PURE__ */ jsx(Fragment, { children: "-" });
+    }
+    const representativeRow = childRows[0];
+    return /* @__PURE__ */ jsx(
+      UncertaintyFormatter,
+      {
+        obProps: representativeRow,
+        ...props,
+        fieldValue: fieldValue.toString(),
+        fieldSymbol: fieldSymbol.toString(),
+        fieldUnit: fieldUnit.toString(),
+        Component
+      }
+    );
+  };
+};
+export {
+  ColumnUncertaintyGroupFormatter as C
+};

package/components/datagrids/formatters/ColumnUncertaintyFormatter/index.d.ts

@@ -1,3 +1,4 @@
 export { ColumnUncertaintyFormatter } from './formatter';
+export { ColumnUncertaintyGroupFormatter } from './ColumnUncertaintyGroupFormatter';
 export type { ColumnUncertaintyFormatterProps } from './types';
 export { useColumnUncertanity } from './useColumnUncertainty';

package/components/datagrids/formatters/ColumnUncertaintyFormatter/useColumnUncertainty.d.ts

@@ -5,6 +5,7 @@ import { ColumnUncertaintyFormatterProps } from './types';
  */
 export declare const useColumnUncertanity: <TRow>(props: ColumnUncertaintyFormatterProps<TRow>) => {
     formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    renderGroupCell: (groupProps: import('react-data-grid').RenderGroupCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

package/components/datagrids/formatters/ColumnUncertaintyFormatter/useColumnUncertainty.js

@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect, useMemo } from "react";
 import { deepEqual } from "fast-equals";
 import { g as getUncertaintyFormat } from "../../../formatters/UncertaintyFormatter/UncertaintyFormatter.js";
+import { C as ColumnUncertaintyGroupFormatter } from "./ColumnUncertaintyGroupFormatter.js";
 import { C as ColumnUncertaintyFormatter } from "./formatter.js";
 import { g as getColumnKey } from "../../helpers/shared/getColumnKey/getColumnKey.js";
 const getCustomUncertaintyFilter = (props) => {
@@ -44,6 +45,7 @@ const useColumnUncertanity = (props) => {
   }, [props]);
   return useMemo(() => ({
     formatter: ColumnUncertaintyFormatter(stateProps),
+    renderGroupCell: ColumnUncertaintyGroupFormatter(stateProps),
     customFilter: getCustomUncertaintyFilter(stateProps),
     customSort: getCustomUncertaintySort(stateProps)
   }), [stateProps]);

package/components/datagrids/helpers/shared/getInitialColumnsConfig/getInitialColumnsConfig.js

@@ -13,6 +13,7 @@ const getInitialColumnsConfig = (id, columns, viewMode, defaultConfig, viewSpeci
   return columns.map((column, index) => {
     const existingConfig = columnsConfig.find((c) => c.key === column.key);
     const columnConfigIndex = existingConfig ? columnsConfig.indexOf(existingConfig) : -1;
+    const groupedColumnsCount = columns.slice(0, index).filter((c) => c.grouped === true).length;
     const baseConfig = {
       key: column.key,
       name: typeof column.name === "string" ? column.name : String(column.name),
@@ -22,10 +23,17 @@ const getInitialColumnsConfig = (id, columns, viewMode, defaultConfig, viewSpeci
       originalIndex: index,
       originalVisible: column.visible === void 0 ? true : column.visible
     };
+    const groupingConfig = viewMode === "table" ? {
+      grouped: existingConfig?.grouped ?? column.grouped ?? false,
+      groupOrder: existingConfig?.groupOrder ?? (column.grouped ? groupedColumnsCount : index),
+      originalGrouped: column.grouped ?? false,
+      originalGroupOrder: column.grouped ? groupedColumnsCount : index
+    } : {};
     return {
       ...baseConfig,
       ...viewSpecificDefaults,
       ...originalViewSpecificDefaults,
+      ...groupingConfig,
       ...existingConfig || {}
     };
   }).sort((a, b) => a.index - b.index);