@m4l/components 9.2.60-19062025.beta.1 → 9.2.60-J18062025.beta.1

package/components/DataGrid/slots/DataGridSlot.js

@@ -1,5 +1,5 @@
 import { styled } from "@mui/material/styles";
-import { InputBase } from "@mui/material";
+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, b as TableSlots, C as ControlNavigateSlots, R as RowsCountSlots, a as ColumnsConfigSlots } from "./DataGridEnum.js";
 import { d as dataGridStyles } from "../Datagrid.styles.js";
@@ -88,6 +88,22 @@ const ContentModalSettingStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,
   slot: TableSlots.contentModalSetting
 })(dataGridStyles.contentModalSetting);
+const HeaderRenderClickStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.headerRenderClick
+})(dataGridStyles.headerRenderClick);
+const MenuListStyled = styled(MenuList, {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.menuList
+})(dataGridStyles.menuList);
+const ButtonHeaderActionsStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.buttonHeaderActions
+})(dataGridStyles.buttonHeaderActions);
+const NameColumnIconStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.nameColumnIcon
+})(dataGridStyles.nameColumnIcon);
 const InputTextEditorStyled = styled("input", {
   name: DATAGRID_PREFIX_NAME,
   slot: TextEditorSlots.inputTexEditor
@@ -98,10 +114,13 @@ const ControlNavigateStyled = styled("div", {
 })(dataGridStyles.controlNavigate);
 export {
   ActionsRootStyled as A,
+  ButtonHeaderActionsStyled as B,
   CustomHeaderStyled as C,
   DataGridRootStyled as D,
   HeaderInputBaseStyled as H,
   IconSearchStyled as I,
+  MenuListStyled as M,
+  NameColumnIconStyled as N,
   RowsCountRootStyled as R,
   TableWrapperDataGridStyled as T,
   WrapperSkeletonStyled as W,
@@ -119,5 +138,6 @@ export {
   TableContainerStyled as l,
   DraggableHeaderRootStyled as m,
   DraggableWrapperInputBaseStyled as n,
-  InputTextEditorStyled as o
+  HeaderRenderClickStyled as o,
+  InputTextEditorStyled as p
 };

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Filter/index.js

@@ -4,12 +4,20 @@ import { u as useFilters } from "../../../../hooks/useFilters.js";
 import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
 import { p as pathIcons } from "../../../../icons.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
+import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
 function Filter() {
   const { activeFilters, setActiveFilters } = useFilters();
   const { host_static_assets, environment_assets } = useEnvironment();
   const { getLabel } = useModuleDictionary();
+  const { externalFilterSettings } = useDataGrid();
   const toggleIcon = () => {
-    setActiveFilters(!activeFilters);
+    if (externalFilterSettings) {
+      externalFilterSettings.onChange?.({
+        action: "openPopoverMenuFields"
+      });
+    } else {
+      setActiveFilters(!activeFilters);
+    }
   };
   return /* @__PURE__ */ jsx(
     IconButton,

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

@@ -4,4 +4,6 @@ import { HeaderRendererProps } 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) => FunctionComponent<HeaderRendererProps<TRow, TSummaryRow>>;
+export declare const getDragHeaderRenderer: <TRow, TSummaryRow>(handleColumnsReorder: (sourceKey: string, targetKey: string) => void, options?: {
+    openPopover?: (anchorEl: HTMLElement, columnKey: string) => void;
+}) => FunctionComponent<HeaderRendererProps<TRow, TSummaryRow>>;

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

@@ -1,8 +1,15 @@
 import { jsx } from "react/jsx-runtime";
 import { D as DraggableHeaderRenderer } from "../subcomponents/DraggableHeaderRenderer.js";
-const getDragHeaderRenderer = (handleColumnsReorder) => {
+const getDragHeaderRenderer = (handleColumnsReorder, options) => {
   function HeaderRenderer(props) {
-    return /* @__PURE__ */ jsx(DraggableHeaderRenderer, { ...props, onColumnsReorder: handleColumnsReorder });
+    return /* @__PURE__ */ jsx(
+      DraggableHeaderRenderer,
+      {
+        ...props,
+        onColumnsReorder: handleColumnsReorder,
+        openPopover: options?.openPopover
+      }
+    );
   }
   return HeaderRenderer;
 };

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

@@ -0,0 +1,6 @@
+import { Column } 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[];

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

@@ -0,0 +1,259 @@
+import { useMemo, useCallback } from "react";
+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) {
+  const {
+    columnsConfig,
+    onChangeColumnsConfig,
+    setSortColumns,
+    sortColumns,
+    externalSortSettings,
+    externalFilterSettings
+  } = useDataGrid();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { getLabel } = useModuleDictionary();
+  const column = useMemo(() => {
+    return finalColumns.find((c) => c.key === columnKey);
+  }, [columnKey, finalColumns]);
+  const canSort = useMemo(() => {
+    if (!columnKey) {
+      return false;
+    }
+    return column?.sortable !== false ? defaultSortable : false;
+  }, [columnKey, column, defaultSortable]);
+  const canSortExternally = useMemo(() => {
+    if (!columnKey || !externalSortSettings) {
+      return false;
+    }
+    return externalSortSettings.sortsColumns.includes(columnKey);
+  }, [columnKey, externalSortSettings]);
+  const currentSort = useMemo(() => {
+    if (!columnKey || !externalSortSettings?.sortsApplied) {
+      return;
+    }
+    return externalSortSettings.sortsApplied.find(
+      (s) => s.columnKey === columnKey
+    );
+  }, [columnKey, externalSortSettings?.sortsApplied]);
+  const hasExternalSortAsc = useMemo(() => {
+    return currentSort?.direction === "asc";
+  }, [currentSort]);
+  const hasExternalSortDesc = useMemo(() => {
+    return currentSort?.direction === "desc";
+  }, [currentSort]);
+  const isAsc = useMemo(
+    () => Boolean(
+      columnKey && sortColumns.some(
+        (s) => s.columnKey === columnKey && s.direction === "ASC"
+      )
+    ),
+    [columnKey, sortColumns]
+  );
+  const isDesc = useMemo(
+    () => Boolean(
+      columnKey && sortColumns.some(
+        (s) => s.columnKey === columnKey && s.direction === "DESC"
+      )
+    ),
+    [columnKey, sortColumns]
+  );
+  const clearLocalSort = useCallback(() => {
+    if (!columnKey) {
+      return;
+    }
+    setSortColumns((prev) => prev.filter((s) => s.columnKey !== columnKey));
+  }, [columnKey, setSortColumns]);
+  const hasAnySortApplied = useMemo(() => {
+    return Boolean(currentSort);
+  }, [currentSort]);
+  const toggleFrozen = useCallback(() => {
+    if (!columnKey) {
+      return;
+    }
+    const next = columnsConfig.map(
+      (c) => c.key === columnKey ? { ...c, frozen: !c.frozen } : c
+    );
+    onChangeColumnsConfig(next);
+  }, [columnKey, columnsConfig, onChangeColumnsConfig]);
+  const toggleVisible = useCallback(() => {
+    if (!columnKey) {
+      return;
+    }
+    const next = columnsConfig.map(
+      (c) => c.key === columnKey ? { ...c, visible: !c.visible } : c
+    );
+    onChangeColumnsConfig(next);
+  }, [columnKey, columnsConfig, onChangeColumnsConfig]);
+  const addExternalSort = useCallback(
+    (direction) => {
+      if (!columnKey || !column || column?.type === "custom") {
+        return null;
+      }
+      externalSortSettings?.onChange({
+        action: "add",
+        columnKey,
+        direction
+      });
+    },
+    [columnKey, column, externalSortSettings]
+  );
+  const isRemovable = useMemo(() => {
+    return currentSort?.removable;
+  }, [currentSort]);
+  const addExternalFilter = useCallback(() => {
+    if (!columnKey || !column) {
+      return null;
+    }
+    externalFilterSettings?.onChange({
+      action: "add",
+      columnKey
+    });
+  }, [columnKey, column, externalFilterSettings]);
+  const isAddFilterDisabled = useMemo(() => {
+    if (!columnKey || !column) {
+      return true;
+    }
+    if (column.type === "custom") {
+      return true;
+    }
+    const isInFilterColumns = externalFilterSettings?.filterColumns.some(
+      (filter) => filter.name === columnKey
+    );
+    if (!isInFilterColumns) {
+      return true;
+    }
+    const isFilterApplied = externalFilterSettings?.filtersApplied.some(
+      (filter) => filter.columnKey === columnKey && filter.isValid
+    );
+    const isFilterMultiple = externalFilterSettings?.filterColumns.find(
+      (filter) => filter.name === columnKey
+    )?.multiple;
+    return isFilterApplied && !isFilterMultiple;
+  }, [columnKey, column, externalFilterSettings]);
+  return useMemo(() => {
+    if (!columnKey) {
+      return [];
+    }
+    const sortActions = [
+      {
+        type: "menuItem",
+        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.sortAsc}`,
+        label: getLabel(DICTIONARY.ORDER_ASC_COLUMN),
+        dataTestId: "sort-ascending",
+        /**
+         * Función que agrega un sort externo en modo ascendente
+         */
+        onClick: () => {
+          if (externalSortSettings) {
+            addExternalSort("asc");
+          } else {
+            setSortColumns([
+              {
+                columnKey,
+                direction: "ASC"
+              }
+            ]);
+          }
+        },
+        disabled: !canSort || (externalSortSettings ? !canSortExternally || hasExternalSortAsc : isAsc)
+      },
+      {
+        type: "menuItem",
+        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.sortDesc}`,
+        label: getLabel(DICTIONARY.ORDER_DESC_COLUMN),
+        dataTestId: "sort-descending",
+        /**
+         * Función que agrega un sort externo en modo descendente
+         */
+        onClick: () => {
+          if (externalSortSettings) {
+            addExternalSort("desc");
+          } else {
+            setSortColumns([
+              {
+                columnKey,
+                direction: "DESC"
+              }
+            ]);
+          }
+        },
+        disabled: !canSort || (externalSortSettings ? !canSortExternally || hasExternalSortDesc : isDesc)
+      },
+      {
+        type: "menuItem",
+        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.removeSort}`,
+        label: getLabel(DICTIONARY.REMOVE_ORDER_COLUMN),
+        dataTestId: "sort-remove",
+        /**
+         * Función que elimina el sort externo
+         */
+        onClick: () => {
+          if (columnKey) {
+            if (externalSortSettings && isRemovable) {
+              externalSortSettings.onChange({
+                action: "remove",
+                columnKey
+              });
+              return;
+            } else {
+              clearLocalSort();
+            }
+          }
+        },
+        disabled: externalSortSettings ? !hasAnySortApplied || !isRemovable : !(isAsc || isDesc)
+      }
+    ];
+    const filterAction = externalFilterSettings ? [
+      {
+        type: "menuItem",
+        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.filter}`,
+        label: getLabel(DICTIONARY.ADD_FILTER_COLUMN),
+        dataTestId: "filter-add",
+        onClick: () => {
+          addExternalFilter();
+        },
+        disabled: isAddFilterDisabled
+      }
+    ] : [];
+    const baseActions = [
+      {
+        type: "menuItem",
+        startIcon: columnsConfig.find((c) => c.key === columnKey)?.frozen ? `${host_static_assets}/${environment_assets}/${pathIcons.unfreezeColumn}` : `${host_static_assets}/${environment_assets}/${pathIcons.freezeColumn}`,
+        label: columnsConfig.find((c) => c.key === columnKey)?.frozen ? getLabel(DICTIONARY.UNFREEZE_COLUMN) : getLabel(DICTIONARY.FREEZE_COLUMN),
+        onClick: toggleFrozen,
+        disabled: !columnsConfig.find((c) => c.key === columnKey)?.visible,
+        dataTestId: "toggle-freeze"
+      },
+      {
+        type: "menuItem",
+        startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.hideColumn}`,
+        label: getLabel(DICTIONARY.HIDE_COLUMN),
+        onClick: toggleVisible,
+        dataTestId: "hide-column"
+      }
+    ];
+    return [...sortActions, ...filterAction, ...baseActions];
+  }, [
+    columnKey,
+    canSort,
+    canSortExternally,
+    hasExternalSortAsc,
+    hasExternalSortDesc,
+    hasAnySortApplied,
+    addExternalSort,
+    toggleFrozen,
+    toggleVisible,
+    columnsConfig,
+    externalSortSettings,
+    externalFilterSettings,
+    host_static_assets,
+    environment_assets,
+    getLabel,
+    isAddFilterDisabled
+  ]);
+}
+export {
+  useHeaderMenuActions as u
+};

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

@@ -1,11 +1,13 @@
-import { Column, SortColumn } from 'react-data-grid';
+import { Column } from 'react-data-grid';
 /**
  * Hook encargado de ordenar datos de las columnas y las filas.
  * Se utiliza para ordenar las columnas y las filas de un DataGrid.
  */
-export declare const useSortColumnsRows: <TRow, TSummaryRow>(sourceColumns: readonly Column<TRow, TSummaryRow>[], sourceRows: readonly TRow[]) => {
+export declare const useSortColumnsRows: <TRow, TSummaryRow>(sourceColumns: readonly Column<TRow, TSummaryRow>[], sourceRows: readonly TRow[], popoverHandlers?: {
+    openPopover?: (anchorEl: HTMLElement, columnKey: string) => void;
+}) => {
     finalColumns: readonly Column<TRow, TSummaryRow>[];
-    sortColumns: readonly SortColumn[];
-    setSortColumns: import('react').Dispatch<import('react').SetStateAction<readonly SortColumn[]>>;
+    sortColumns: import('react-data-grid').SortColumn[];
+    setSortColumns: import('react').Dispatch<import('react').SetStateAction<import('react-data-grid').SortColumn[]>>;
     finalRows: readonly TRow[];
 };

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

@@ -6,7 +6,7 @@ import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
 import { u as useFilters } from "../../../hooks/useFilters.js";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 import { S as SkeletonFormatter } from "../subcomponents/SkeletonFormatter/index.js";
-import { c as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
+import { d as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
 function getComparator(columns, sortColumn) {
   const column = columns.find((d) => d.key === sortColumn);
   let typeOrder = "string";
@@ -43,15 +43,13 @@ const getInOrderColumns = (columns, hasCheckedRows, columnsConfig, columnsWidths
     const columnConfigIndex = getColumIndex(column.key, columnsConfig);
     const visible = columnConfigIndex > -1 ? columnsConfig[columnConfigIndex].visible : true;
     return !column.hidden && visible;
-  }).sort(
-    (a, b) => {
-      let indexA = getColumIndex(a.key, columnsConfig);
-      indexA = indexA === -1 ? columnsConfig.length : indexA;
-      let indexB = getColumIndex(b.key, columnsConfig);
-      indexB = indexB === -1 ? columnsConfig.length : indexB;
-      return indexA - indexB;
-    }
-  ).map((columnSorted) => {
+  }).sort((a, b) => {
+    let indexA = getColumIndex(a.key, columnsConfig);
+    indexA = indexA === -1 ? columnsConfig.length : indexA;
+    let indexB = getColumIndex(b.key, columnsConfig);
+    indexB = indexB === -1 ? columnsConfig.length : indexB;
+    return indexA - indexB;
+  }).map((columnSorted) => {
     const columnConfigIndex = getColumIndex(columnSorted.key, columnsConfig);
     return {
       ...columnSorted,
@@ -83,21 +81,26 @@ const getAligByType = (columnType) => {
   }
   return "left";
 };
-const useSortColumnsRows = (sourceColumns, sourceRows) => {
+const useSortColumnsRows = (sourceColumns, sourceRows, popoverHandlers) => {
   const {
     columnsConfig,
     columnsWidths,
     onChangeColumnsOrder,
     rowActionsGetter,
     checkedRows,
-    onCheckedRowsChange
+    onCheckedRowsChange,
+    sortColumns,
+    setSortColumns
   } = useDataGrid();
-  const [columns, setColumns] = useState(() => []);
-  const [sortColumns, setSortColumns] = useState([]);
+  const [columns, setColumns] = useState(
+    () => []
+  );
   const isSkeleton = useModuleSkeleton();
   const { activeFilters, filters } = useFilters();
   const findKeyInColumns = (key, cols) => {
-    const index = cols.findIndex((column) => key === column.key && column.hidden === false);
+    const index = cols.findIndex(
+      (column) => key === column.key && column.hidden === false
+    );
     return index !== -1;
   };
   useEffect(() => {
@@ -119,7 +122,12 @@ const useSortColumnsRows = (sourceColumns, sourceRows) => {
     }
   }, [sourceColumns, columnsConfig, rowActionsGetter]);
   const finalColumns = useMemo(() => {
-    const DragAndDropHeaderRenderer = getDragHeaderRenderer(onChangeColumnsOrder);
+    const DragAndDropHeaderRenderer = getDragHeaderRenderer(
+      onChangeColumnsOrder,
+      {
+        openPopover: popoverHandlers?.openPopover
+      }
+    );
     return columns.map((c) => {
       const cellClass = c.align !== void 0 ? `rdg-cell-align-${c.align}` : `rdg-cell-align-${getAligByType(c.type)}`;
       const newColumn = {
@@ -143,7 +151,13 @@ const useSortColumnsRows = (sourceColumns, sourceRows) => {
       newColumn.headerRenderer = DragAndDropHeaderRenderer;
       return newColumn;
     });
-  }, [isSkeleton, columns, activeFilters, onChangeColumnsOrder]);
+  }, [
+    isSkeleton,
+    columns,
+    activeFilters,
+    onChangeColumnsOrder,
+    popoverHandlers
+  ]);
   const finalRows = useMemo(() => {
     const nextRows = sourceRows.filter((r) => {
       if (!filters || filters.size === 0) {
@@ -154,7 +168,10 @@ const useSortColumnsRows = (sourceColumns, sourceRows) => {
       for (let i = 0; i < filters.size; i++) {
         const entry = iterator.next().value;
         const columnKey = entry?.[0] ?? "";
-        const columnFilter = entry?.[1] ?? { value: "", customFilter: void 0 };
+        const columnFilter = entry?.[1] ?? {
+          value: "",
+          customFilter: void 0
+        };
         let valCell;
         const valueMaybeString = getPropertyByString(r, columnKey);
         let fixedValue;

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

@@ -1,5 +1,5 @@
-import { jsx } from "react/jsx-runtime";
-import { useRef, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState, useRef, useEffect } from "react";
 import DataGrid from "react-data-grid";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
@@ -9,15 +9,52 @@ import { u as useSortColumnsRows } from "./hooks/useSortColumnsRows.js";
 import { u as useFilters } from "../../hooks/useFilters.js";
 import { u as useDataGrid } from "../../hooks/useDataGrid.js";
 import { l as TableContainerStyled, T as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
+import { u as useHeaderMenuActions } from "./hooks/useHeaderMenuActions.js";
+import { H as HeaderRenderClick } from "./subcomponents/HeaderRenderClick/HeaderRenderClick.js";
 function Table(props) {
-  const { columns, rows, onRowsChange, rowKeyGetter, selectedRows, onSelectedRowsChange } = props;
-  const { finalColumns, sortColumns, setSortColumns, finalRows } = useSortColumnsRows(
+  const {
     columns,
-    rows
+    rows,
+    onRowsChange,
+    rowKeyGetter,
+    selectedRows,
+    onSelectedRowsChange
+  } = props;
+  const { finalColumns, finalRows } = useSortColumnsRows(
+    columns,
+    rows,
+    useMemo(
+      () => ({
+        /**
+         * Función que abre el menú de acciones para una columna
+         */
+        openPopover: (anchorEl, columnKey) => {
+          if (anchorEl instanceof HTMLDivElement) {
+            setPopoverState({
+              anchorEl,
+              columnKey
+            });
+          }
+        }
+      }),
+      []
+    )
   );
   const { activeFilters } = useFilters();
-  const { onChangeColumnWidth, setRowsCount, currentRowHeight, currentRowHeaderHeight, size } = useDataGrid();
+  const {
+    onChangeColumnWidth,
+    setRowsCount,
+    currentRowHeight,
+    currentRowHeaderHeight,
+    size,
+    sortColumns,
+    setSortColumns
+  } = useDataGrid();
   const ref_data_grid = useRef(null);
+  const [popoverState, setPopoverState] = useState({
+    anchorEl: null,
+    columnKey: null
+  });
   const onRowClick = (row) => {
     if (selectedRows && onSelectedRowsChange) {
       if (selectedRows.entries().next().value) {
@@ -32,11 +69,17 @@ function Table(props) {
   useEffect(() => {
     let columnIndice = 0;
     for (const column of finalColumns) {
-      const index = sortColumns.findIndex((sortColumn) => column.key === sortColumn.columnKey);
+      const index = sortColumns.findIndex(
+        (sortColumn) => column.key === sortColumn.columnKey
+      );
       if (index !== -1) {
-        ref_data_grid.current?.element?.querySelector(`[role="columnheader"][aria-colindex="${columnIndice + 1}"]`)?.setAttribute("aria-columnsort", `${sortColumns[index].direction}`);
+        ref_data_grid.current?.element?.querySelector(
+          `[role="columnheader"][aria-colindex="${columnIndice + 1}"]`
+        )?.setAttribute("aria-columnsort", `${sortColumns[index].direction}`);
       } else {
-        ref_data_grid.current?.element?.querySelector(`[role="columnheader"][aria-colindex="${columnIndice + 1}"]`)?.removeAttribute("aria-columnsort");
+        ref_data_grid.current?.element?.querySelector(
+          `[role="columnheader"][aria-colindex="${columnIndice + 1}"]`
+        )?.removeAttribute("aria-columnsort");
       }
       columnIndice++;
     }
@@ -47,31 +90,51 @@ function Table(props) {
   const onColumnResize = (idx, width) => {
     onChangeColumnWidth(finalColumns[idx].key, width);
   };
-  const onChangeSort = (newSortColumns) => {
-    setSortColumns(newSortColumns);
-  };
-  return /* @__PURE__ */ jsx(TableContainerStyled, { id: "WrapperTable", children: /* @__PURE__ */ jsx(TableWrapperDataGridStyled, { ownerState: { size }, children: /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsx(
-    DataGrid,
-    {
-      className: "rdg-light",
-      ref: ref_data_grid,
-      headerRowHeight: activeFilters ? currentRowHeaderHeight + filterHeight : currentRowHeaderHeight,
-      columns: finalColumns,
-      sortColumns,
-      onSortColumnsChange: onChangeSort,
-      onColumnResize,
-      rows: finalRows,
-      onRowsChange,
-      selectedRows,
-      onSelectedRowsChange,
-      onRowClick,
-      rowHeight: currentRowHeight,
-      rowKeyGetter,
-      cellNavigationMode: "LOOP_OVER_ROW",
-      components: { checkboxFormatter: CheckboxFormatter },
-      defaultColumnOptions: { resizable: true, sortable: true }
-    }
-  ) }) }) });
+  const defaultColumnOptions = { resizable: true, sortable: true };
+  const menuActions = useHeaderMenuActions(
+    popoverState.columnKey,
+    finalColumns,
+    defaultColumnOptions.sortable
+  );
+  return /* @__PURE__ */ jsx(TableContainerStyled, { id: "WrapperTable", children: /* @__PURE__ */ jsxs(TableWrapperDataGridStyled, { ownerState: { size }, children: [
+    /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsx(
+      DataGrid,
+      {
+        className: "rdg-light",
+        ref: ref_data_grid,
+        headerRowHeight: activeFilters ? currentRowHeaderHeight + filterHeight : currentRowHeaderHeight,
+        columns: finalColumns,
+        sortColumns,
+        onSortColumnsChange: setSortColumns,
+        onColumnResize,
+        rows: finalRows,
+        onRowsChange,
+        selectedRows,
+        onSelectedRowsChange,
+        onRowClick,
+        rowHeight: currentRowHeight,
+        rowKeyGetter,
+        cellNavigationMode: "LOOP_OVER_ROW",
+        components: { checkboxFormatter: CheckboxFormatter },
+        defaultColumnOptions
+      }
+    ) }),
+    popoverState.columnKey && popoverState.anchorEl instanceof HTMLDivElement && /* @__PURE__ */ jsx(
+      HeaderRenderClick,
+      {
+        externalOpen: popoverState.anchorEl,
+        onOpen: (open) => {
+          if (!open) {
+            setPopoverState({
+              anchorEl: null,
+              columnKey: null
+            });
+          }
+        },
+        menuActions
+      }
+    )
+  ] }) });
 }
 export {
   Table as T

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

@@ -1,7 +1,7 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 import { useTheme } from "@mui/material";
-import { d as DATAGRID_SEMANTIC_WIDTHS, e as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../constants.js";
+import { e as DATAGRID_SEMANTIC_WIDTHS, f as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../constants.js";
 import { M as MenuActions } from "../../../../MenuActions/MenuActions.js";
 function ActionsFormatter(props) {
   const { rowActionsGetter } = useDataGrid();

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

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