@m4l/components 9.2.64 → 9.2.65-JT17072025.beta.1

package/components/DataGrid/formatters/ColumnDateFormatter/formatter.d.ts

@@ -1,5 +1,6 @@
 import { ColumnDateFormatterProps } from './types';
+import { RenderCellProps } from 'react-data-grid';
 /**
  * Function to format a date in a column of a DataGrid
  */
-export declare function ColumnDateFormatter<TRow>(props: ColumnDateFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;
+export declare function ColumnDateFormatter<TRow>(props: ColumnDateFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/formatters/ColumnDateFormatter/formatter.js

@@ -1,19 +1,28 @@
 import { jsx } from "react/jsx-runtime";
 import { getPropertyByString } from "@m4l/core";
 import React from "react";
-import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
 import { D as DateFormatter } from "../../../formatters/DateFormatter/DateFormatter.js";
 function ColumnDateFormatter(props) {
   const { fieldValue, presentationType, Component = React.Fragment } = props;
-  return (obProps) => {
-    const valueMaybeDateStringNumber = getPropertyByString(obProps, getFieldValueWithRow(fieldValue));
+  return (formatterProps) => {
+    const valueMaybeDateStringNumber = getPropertyByString(
+      formatterProps.row,
+      fieldValue
+    );
     let fixedValue;
     if (typeof valueMaybeDateStringNumber === "string" || typeof valueMaybeDateStringNumber === "number" || valueMaybeDateStringNumber instanceof Date) {
       fixedValue = valueMaybeDateStringNumber;
     } else {
       fixedValue = "";
     }
-    return /* @__PURE__ */ jsx(DateFormatter, { presentationType, value: fixedValue, Component });
+    return /* @__PURE__ */ jsx(
+      DateFormatter,
+      {
+        presentationType,
+        value: fixedValue,
+        Component
+      }
+    );
   };
 }
 export {

package/components/DataGrid/formatters/ColumnDateFormatter/useColumnDate.d.ts

@@ -8,7 +8,7 @@ export declare const useCustomDateFilter: <TRow>(props: ColumnDateFormatterProps
  * customFilter and customSort of a date column
  */
 export declare const useColumnDate: <TRow>(props: ColumnDateFormatterProps<TRow>) => {
-    formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
+    formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

package/components/DataGrid/formatters/ColumnIconFormatter/formatter.d.ts

@@ -1,6 +1,7 @@
 import { ColumnIconFormatterProps } from './types';
+import { RenderCellProps } from 'react-data-grid';
 /**
  * Function to format an icon in a column of a DataGrid
  * @template TRow - Tipo de datos de la fila
  */
-export declare function ColumnIconFormatter<TRow>(props: ColumnIconFormatterProps<TRow>): (rowData: TRow) => JSX.Element;
+export declare function ColumnIconFormatter<TRow>(props: ColumnIconFormatterProps<TRow>): (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/formatters/ColumnIconFormatter/formatter.js

@@ -2,8 +2,8 @@ import { r as renderMultipleIcons } from "./helpers/renderMultipleIcons.js";
 import { r as renderIcon } from "./helpers/renderIcon.js";
 function ColumnIconFormatter(props) {
   const { getIconProps } = props;
-  return (rowData) => {
-    const iconProps = getIconProps(rowData);
+  return (renderProps) => {
+    const iconProps = getIconProps(renderProps.row);
     if (Array.isArray(iconProps)) {
       return renderMultipleIcons(iconProps);
     }

package/components/DataGrid/formatters/ColumnIconFormatter/useColumnIcon.d.ts

@@ -4,5 +4,5 @@ import { ColumnIconFormatterProps } from './types';
  * el formatter de la columna
  */
 export declare const useColumnIcon: <TRow>(props: ColumnIconFormatterProps<TRow>) => {
-    formatter: (rowData: TRow) => JSX.Element;
+    formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
 };

package/components/DataGrid/formatters/ColumnInteractiveCheckFormatter/types.d.ts

@@ -1,2 +1,2 @@
-import { FormatterProps as RDGFormatterProps } from 'react-data-grid';
-export type ColumnInteractiveCheckFormatterProps<Row> = RDGFormatterProps<Row>;
+import { RenderCellProps } from 'react-data-grid';
+export type ColumnInteractiveCheckFormatterProps<Row> = RenderCellProps<Row>;

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

@@ -1,5 +1,6 @@
 import { ColumnNestedValueFormatterProps } from './types';
+import { RenderCellProps } from 'react-data-grid';
 /**
  * Function to format a nested value in a column of a DataGrid
  */
-export declare function ColumnNestedValueFormatter<TRow>(props: ColumnNestedValueFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;
+export declare function ColumnNestedValueFormatter<TRow>(props: ColumnNestedValueFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -4,7 +4,7 @@ import { ColumnNestedValueFormatterProps } from './types';
  * of the column for ColumnNestedValueFormatter.
  */
 export declare const useColumnNestedValue: <TRow>(props: ColumnNestedValueFormatterProps<TRow>) => {
-    formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
+    formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string) => any;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

package/components/DataGrid/formatters/ColumnPointsFormatter/formatter.d.ts

@@ -1,5 +1,6 @@
 import { ColumnPointsFormatterProps } from './types';
+import { RenderCellProps } from 'react-data-grid';
 /**
  * Formatter for column points in DataGrid
  */
-export declare function ColumnPointsFormatter<TRow>(props: ColumnPointsFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;
+export declare function ColumnPointsFormatter<TRow>(props: ColumnPointsFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/formatters/ColumnPointsFormatter/formatter.js

@@ -1,13 +1,21 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { P as PointsFormatter } from "../../../formatters/PointsFormatter/PointsFormatter.js";
-import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
 function ColumnPointsFormatter(props) {
   const { Component = React.Fragment } = props;
-  const fieldValue = getFieldValueWithRow(props.fieldValue);
-  const fieldUnit = getFieldValueWithRow(props.fieldUnit);
-  return (obProps) => {
-    return /* @__PURE__ */ jsx(PointsFormatter, { obProps, ...props, fieldValue, fieldUnit, Component });
+  const fieldValue = props.fieldValue;
+  const fieldUnit = props.fieldUnit;
+  return (formatterProps) => {
+    return /* @__PURE__ */ jsx(
+      PointsFormatter,
+      {
+        obProps: formatterProps.row,
+        ...props,
+        fieldValue,
+        fieldUnit,
+        Component
+      }
+    );
   };
 }
 export {

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

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

package/components/DataGrid/formatters/ColumnPriceFormatter/formatter.d.ts

@@ -1,5 +1,6 @@
 import { ColumnPriceFormatterProps } from './types';
+import { RenderCellProps } from 'react-data-grid';
 /**
  * Formatter for column price in DataGrid
  */
-export declare function ColumnPriceFormatter<TRow>(props: ColumnPriceFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;
+export declare function ColumnPriceFormatter<TRow>(props: ColumnPriceFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/formatters/ColumnPriceFormatter/formatter.js

@@ -1,12 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { P as PriceFormatter } from "../../../formatters/PriceFormatter/PriceFormatter.js";
-import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
 function ColumnPriceFormatter(props) {
   const { Component = React.Fragment } = props;
-  const fieldValue = getFieldValueWithRow(props.fieldValue);
-  return (obProps) => {
-    return /* @__PURE__ */ jsx(PriceFormatter, { obProps, ...props, fieldValue, Component });
+  const fieldValue = props.fieldValue;
+  return (formatterProps) => {
+    return /* @__PURE__ */ jsx(
+      PriceFormatter,
+      {
+        obProps: formatterProps.row,
+        ...props,
+        fieldValue,
+        Component
+      }
+    );
   };
 }
 export {

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

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

package/components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.d.ts

@@ -1,4 +1,4 @@
-import { FormatterProps } from 'react-data-grid';
+import { RenderCellProps } from 'react-data-grid';
 import { ColumnSetCheckFormatterProps } from './types';
 import { RowKey } from '../../types';
 /**
@@ -6,4 +6,4 @@ import { RowKey } from '../../types';
  * acualizando un Set/Setter por medio de un hook generico el cual es invocado con el argumento field para ,
  * sin la necesidad de entrar en edición como lo hace un editor
  */
-export declare function ColumnSetCheckFormatter<Row, TKey extends RowKey = RowKey>(parameters: ColumnSetCheckFormatterProps<Row, TKey>): (props: FormatterProps<Row>) => import("react/jsx-runtime").JSX.Element;
+export declare function ColumnSetCheckFormatter<Row, TKey extends RowKey = RowKey>(parameters: ColumnSetCheckFormatterProps<Row, TKey>): (props: RenderCellProps<Row>) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.js

@@ -23,7 +23,7 @@ function ColumnSetCheckFormatter(parameters) {
       {
         value: checkedRows.has(rowKeyGetter(row)) || false,
         disabled,
-        isCellSelected: props.isCellSelected,
+        tabIndex: props.tabIndex,
         onChange,
         "aria-label": "Select"
       }

package/components/DataGrid/formatters/ColumnSetCheckFormatter/useColumnSetCheck.d.ts

@@ -5,7 +5,7 @@ import { ColumnSetCheckFormatterProps } from './types';
  * Returns formatter, customFilter and customSort.
  */
 export declare const useColumnSetCheck: <TRow, TKey extends RowKey = RowKey>(props: ColumnSetCheckFormatterProps<TRow, TKey>) => {
-    formatter: (props: import('react-data-grid').FormatterProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    formatter: (props: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: TKey) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

package/components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.d.ts

@@ -1,5 +1,6 @@
 import { ColumnUncertaintyFormatterProps } from './types';
+import { RenderCellProps } from 'react-data-grid';
 /**
  * Formatter for column uncertainty in DataGrid
  */
-export declare function ColumnUncertaintyFormatter<TRow>(props: ColumnUncertaintyFormatterProps<TRow>): (obProps: any) => import("react/jsx-runtime").JSX.Element;
+export declare function ColumnUncertaintyFormatter<TRow>(props: ColumnUncertaintyFormatterProps<TRow>): (formatterProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.js

@@ -1,14 +1,23 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
 import { U as UncertaintyFormatter } from "../../../formatters/UncertaintyFormatter/UncertaintyFormatter.js";
 function ColumnUncertaintyFormatter(props) {
   const { Component = React.Fragment } = props;
-  const fieldValue = getFieldValueWithRow(props.fieldValue);
-  const fieldSymbol = getFieldValueWithRow(props.fieldSymbol);
-  const fieldUnit = getFieldValueWithRow(props.fieldUnit);
-  return (obProps) => {
-    return /* @__PURE__ */ jsx(UncertaintyFormatter, { obProps, ...props, fieldValue, fieldSymbol, fieldUnit, Component });
+  const fieldValue = props.fieldValue;
+  const fieldSymbol = props.fieldSymbol;
+  const fieldUnit = props.fieldUnit;
+  return (formatterProps) => {
+    return /* @__PURE__ */ jsx(
+      UncertaintyFormatter,
+      {
+        obProps: formatterProps.row,
+        ...props,
+        fieldValue,
+        fieldSymbol,
+        fieldUnit,
+        Component
+      }
+    );
   };
 }
 export {

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

@@ -4,7 +4,7 @@ import { ColumnUncertaintyFormatterProps } from './types';
  * the filter and the customSort of the uncertainty column.
  */
 export declare const useColumnUncertanity: <TRow>(props: ColumnUncertaintyFormatterProps<TRow>) => {
-    formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
+    formatter: (formatterProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
     customFilter: (row: TRow, value: string) => boolean;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

package/components/DataGrid/index.d.ts

@@ -1,6 +1,6 @@
 export { DataGrid } from './DataGrid';
 export * from './formatters';
-export type { Column, EditorProps, FormatterProps } from 'react-data-grid';
+export type { Column, RenderEditCellProps, RenderCellProps } from 'react-data-grid';
 export type { RowKey, ChangeUserColumn } from './types';
 export { getDataGridComponentsDictionary } from './dictionary';
 export { TextEditor, NumberEditor } from './subcomponents/editors/TextEditor';

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Settings/subcomponents/ColumnsConfig/index.js

@@ -62,7 +62,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
         name: getLabel(DICTIONARY.SETTINGS_COLUMN_VISIBLE),
         width: 80,
         type: "boolean",
-        formatter: ColumnInteractiveCheckFormatter,
+        renderCell: ColumnInteractiveCheckFormatter,
         ...getAlignClass("center")
       },
       {
@@ -70,7 +70,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
         name: getLabel(DICTIONARY.SETTINGS_COLUMNS_FROZEN),
         width: 80,
         type: "boolean",
-        formatter: ColumnInteractiveCheckFormatter,
+        renderCell: ColumnInteractiveCheckFormatter,
         ...getAlignClass("center")
       }
     ],
@@ -176,7 +176,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
   const onInternalRowsChange = (newRows) => {
     setRows(newRows);
   };
-  const onRowClick = (row) => {
+  const onCellClick = ({ row }) => {
     if (selRows.has(row.key)) {
       return;
     }
@@ -196,9 +196,8 @@ const ColumnsConfig = forwardRef((props, ref) => {
           onRowsChange: onInternalRowsChange,
           selectedRows: selRows,
           onSelectedRowsChange: onInternalSelectedRowsChange,
-          onRowClick,
+          onCellClick,
           rowKeyGetter: (row) => row.key,
-          cellNavigationMode: "CHANGE_ROW",
           defaultColumnOptions: { resizable: true, sortable: true }
         }
       ) })

package/components/DataGrid/subcomponents/Table/hooks/getDragHeaderRenderer.d.ts

@@ -1,9 +1,9 @@
 import { FunctionComponent } from 'react';
-import { HeaderRendererProps } from 'react-data-grid';
+import { RenderHeaderCellProps } from 'react-data-grid';
 /**
  * Función encargada de retornar el componente de renderizado de cabecera con la capacidad de arrastrar columnas
  * @param handleColumnsReorder - Función que se ejecuta al reordenar columnas
  */
 export declare const getDragHeaderRenderer: <TRow, TSummaryRow>(handleColumnsReorder: (sourceKey: string, targetKey: string) => void, options?: {
     openPopover?: (anchorEl: HTMLElement, columnKey: string) => void;
-}) => FunctionComponent<HeaderRendererProps<TRow, TSummaryRow>>;
+}) => FunctionComponent<RenderHeaderCellProps<TRow, TSummaryRow>>;

package/components/DataGrid/subcomponents/Table/hooks/useHeaderMenuActions.d.ts

@@ -1,6 +1,6 @@
-import { Column } from 'react-data-grid';
+import { Column, SortColumn } from 'react-data-grid';
 import { MenuAction } from '../subcomponents/HeaderRenderClick/types';
 /**
  * Función que retorna las acciones del menu del header de la columna
  */
-export declare function useHeaderMenuActions<Trow, TSummaryRow>(columnKey: string | null, finalColumns: readonly Column<Trow, TSummaryRow>[], defaultSortable: boolean): MenuAction[];
+export declare function useHeaderMenuActions<Trow, TSummaryRow>(columnKey: string | null, finalColumns: readonly Column<Trow, TSummaryRow>[], defaultSortable: boolean, handleSortFromPopover?: (newSortColumns: SortColumn[]) => void): MenuAction[];

package/components/DataGrid/subcomponents/Table/hooks/useHeaderMenuActions.js

@@ -3,7 +3,7 @@ import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { D as DICTIONARY } from "../../../dictionary.js";
 import { p as pathIcons } from "../../../icons.js";
-function useHeaderMenuActions(columnKey, finalColumns, defaultSortable) {
+function useHeaderMenuActions(columnKey, finalColumns, defaultSortable, handleSortFromPopover) {
   const {
     columnsConfig,
     onChangeColumnsConfig,
@@ -14,6 +14,13 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable) {
   } = useDataGrid();
   const { host_static_assets, environment_assets } = useEnvironment();
   const { getLabel } = useModuleDictionary();
+  const executeSortChange = (newSortColumns) => {
+    if (handleSortFromPopover) {
+      handleSortFromPopover(newSortColumns);
+    } else {
+      setSortColumns(newSortColumns);
+    }
+  };
   const column = useMemo(() => {
     return finalColumns.find((c) => c.key === columnKey);
   }, [columnKey, finalColumns]);
@@ -66,8 +73,9 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable) {
     if (!columnKey) {
       return;
     }
-    setSortColumns((prev) => prev.filter((s) => s.columnKey !== columnKey));
-  }, [columnKey, setSortColumns]);
+    const newSortColumns = sortColumns.filter((s) => s.columnKey !== columnKey);
+    executeSortChange(newSortColumns);
+  }, [columnKey, sortColumns, executeSortChange]);
   const hasAnySortApplied = useMemo(() => {
     return Boolean(currentSort);
   }, [currentSort]);
@@ -153,7 +161,7 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable) {
           if (externalSortSettings) {
             addExternalSort("asc");
           } else {
-            setSortColumns([
+            executeSortChange([
               {
                 columnKey,
                 direction: "ASC"
@@ -175,7 +183,7 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable) {
           if (externalSortSettings) {
             addExternalSort("desc");
           } else {
-            setSortColumns([
+            executeSortChange([
               {
                 columnKey,
                 direction: "DESC"
@@ -255,7 +263,8 @@ function useHeaderMenuActions(columnKey, finalColumns, defaultSortable) {
     host_static_assets,
     environment_assets,
     getLabel,
-    isAddFilterDisabled
+    isAddFilterDisabled,
+    executeSortChange
   ]);
 }
 export {

package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.js

@@ -17,7 +17,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 {
@@ -26,7 +25,6 @@ function getComparator(columns, sortColumn) {
           return -1;
         }
       };
-    //Por defecto retorna una función de ordenamiento de string
     default:
       return (a, b) => {
         try {
@@ -139,16 +137,24 @@ const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
         return newColumn;
       }
       if (isSkeleton) {
-        newColumn.headerRenderer = SkeletonFormatter;
-        newColumn.formatter = SkeletonFormatter;
+        newColumn.renderHeaderCell = SkeletonFormatter;
+        newColumn.renderCell = SkeletonFormatter;
+        newColumn.renderEditCell = SkeletonFormatter;
+      } else {
+        if (newColumn.formatter && !newColumn.renderCell) {
+          newColumn.renderCell = newColumn.formatter;
+        }
+        if (newColumn.editor && !newColumn.renderEditCell) {
+          newColumn.renderEditCell = newColumn.editor;
+        }
       }
-      if (newColumn.headerRenderer) {
-        newColumn.withinHeaderRenderer = newColumn.headerRenderer;
+      if (newColumn.renderHeaderCell) {
+        newColumn.withinHeaderRenderer = newColumn.renderHeaderCell;
       }
       if ((newColumn?.withFilter === void 0 || newColumn.withFilter === true) && activeFilters) {
         newColumn.headerCellClass = `${newColumn.headerCellClass} ${filterColumnClassName}`.trim();
       }
-      newColumn.headerRenderer = DragAndDropHeaderRenderer;
+      newColumn.renderHeaderCell = DragAndDropHeaderRenderer;
       return newColumn;
     });
   }, [

package/components/DataGrid/subcomponents/Table/index.d.ts

@@ -1,5 +1,7 @@
+import { DataGridProps } from 'react-data-grid';
 import { GridProps, RowKey } from '../../types';
 /**
  * Componente que renderiza la tabla con las filas y columnas
+ * Acepta todos los props de DataGrid y prioriza las configuraciones personalizadas
  */
-export declare function Table<TRow, TSummaryRow, TKey extends RowKey = RowKey>(props: GridProps<TRow, TSummaryRow, TKey>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<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;

package/components/DataGrid/subcomponents/Table/index.js

@@ -18,8 +18,19 @@ function Table(props) {
     onRowsChange,
     rowKeyGetter,
     selectedRows,
-    onSelectedRowsChange
+    onSelectedRowsChange,
+    defaultColumnOptions: defaultColumnOptionsProp,
+    ...restProps
   } = props;
+  const renderCheckbox = (formatterProps) => {
+    return /* @__PURE__ */ jsx(
+      CheckboxFormatter,
+      {
+        ...formatterProps,
+        tabIndex: formatterProps.tabIndex
+      }
+    );
+  };
   const { finalColumns, finalRows } = useSortColumnsRows(
     columns,
     rows,
@@ -55,7 +66,18 @@ function Table(props) {
     anchorEl: null,
     columnKey: null
   });
-  const onRowClick = (row) => {
+  const [allowSortChange, setAllowSortChange] = useState(false);
+  const handleSortColumnsChange = (newSortColumns) => {
+    if (allowSortChange) {
+      setSortColumns(newSortColumns);
+      setAllowSortChange(false);
+    }
+  };
+  const handleSortFromPopover = (newSortColumns) => {
+    setAllowSortChange(true);
+    setSortColumns(newSortColumns);
+  };
+  const onCellClick = ({ row }) => {
     if (selectedRows && onSelectedRowsChange) {
       if (selectedRows.entries().next().value) {
         if (selectedRows.entries().next().value?.[1] === rowKeyGetter(row)) {
@@ -90,11 +112,16 @@ function Table(props) {
   const onColumnResize = (idx, width) => {
     onChangeColumnWidth(finalColumns[idx].key, width);
   };
-  const defaultColumnOptions = { resizable: true, sortable: true };
+  const defaultColumnOptions = {
+    resizable: true,
+    sortable: true,
+    ...defaultColumnOptionsProp || {}
+  };
   const menuActions = useHeaderMenuActions(
     popoverState.columnKey,
     finalColumns,
-    defaultColumnOptions.sortable
+    Boolean(defaultColumnOptions.sortable),
+    handleSortFromPopover
   );
   return /* @__PURE__ */ jsx(TableContainerStyled, { id: "WrapperTable", children: /* @__PURE__ */ jsxs(TableWrapperDataGridStyled, { ownerState: { size }, children: [
     /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsx(
@@ -105,18 +132,20 @@ function Table(props) {
         headerRowHeight: activeFilters ? currentRowHeaderHeight + filterHeight : currentRowHeaderHeight,
         columns: finalColumns,
         sortColumns,
-        onSortColumnsChange: setSortColumns,
+        onSortColumnsChange: handleSortColumnsChange,
         onColumnResize,
         rows: finalRows,
         onRowsChange,
         selectedRows,
         onSelectedRowsChange,
-        onRowClick,
+        onCellClick,
         rowHeight: currentRowHeight,
         rowKeyGetter,
-        cellNavigationMode: "LOOP_OVER_ROW",
-        components: { checkboxFormatter: CheckboxFormatter },
-        defaultColumnOptions
+        renderers: {
+          renderCheckbox
+        },
+        defaultColumnOptions,
+        ...restProps
       }
     ) }),
     popoverState.columnKey && popoverState.anchorEl instanceof HTMLDivElement && /* @__PURE__ */ jsx(

package/components/DataGrid/subcomponents/Table/subcomponents/ActionsColumn.js

@@ -35,7 +35,7 @@ const ActionsColumn = {
   sortable: false,
   frozen: true,
   type: "custom",
-  formatter: ActionsFormatter
+  renderCell: ActionsFormatter
 };
 function getActionLabel() {
   return "";

package/components/DataGrid/subcomponents/Table/subcomponents/CheckboxFormatter.d.ts

@@ -1,2 +1,2 @@
-import { CheckboxFormatterProps } from 'react-data-grid';
-export declare const CheckboxFormatter: import('react').ForwardRefExoticComponent<CheckboxFormatterProps & import('react').RefAttributes<HTMLInputElement>>;
+import { RenderCheckboxProps } from 'react-data-grid';
+export declare const CheckboxFormatter: import('react').ForwardRefExoticComponent<RenderCheckboxProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.d.ts

@@ -1,5 +1,5 @@
-import { HeaderRendererProps } from 'react-data-grid';
-interface DraggableHeaderRendererProps<TRow> extends HeaderRendererProps<TRow> {
+import { RenderHeaderCellProps } from 'react-data-grid';
+interface DraggableHeaderRendererProps<TRow> extends RenderHeaderCellProps<TRow> {
     onColumnsReorder: (sourceKey: string, targetKey: string) => void;
     openPopover?: (anchorEl: HTMLElement, columnKey: string) => void;
 }