@m4l/components 9.2.60 → 9.2.62-B07072025beta.1

package/components/DataGrid/Datagrid.styles.js

@@ -22,7 +22,7 @@ const dataGridStyles = {
     height: "100%",
     width: "100%",
     flex: 1,
-    overflow: "auto",
+    overflow: "hidden",
     "& .rdg .MuiCheckbox-root": {
       "& > svg": {
         color: theme.vars.palette.text.secondary
@@ -60,23 +60,17 @@ const dataGridStyles = {
   /**
    * Estilos del contenedor de las acciones
    */
-  actionsRoot: ({ theme, ownerState }) => ({
+  actionsRoot: ({ theme }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
     background: theme.vars.palette.background.default,
     borderRadius: theme.vars.size.borderRadius.r1,
     gap: theme.vars.size.baseSpacings.sp1,
-    // Tamaño del contenedor
-    ...getSizeStyles(
-      theme,
-      ownerState?.size || "medium",
-      "container",
-      (size) => ({
-        minHeight: size,
-        height: size
-      })
-    ),
+    height: "fit-content",
+    ...theme.generalSettings.isMobile && {
+      minHeight: theme.vars.size.baseSpacings.sp10
+    },
     "& .mobile-menu-actions": {
       marginRight: "auto"
     }
@@ -92,7 +86,8 @@ const dataGridStyles = {
     borderRadius: theme.vars.size.borderRadius.r2,
     border: theme.vars.size.borderStroke.container,
     borderColor: theme.vars.palette?.border.disabled,
-    padding: theme.vars.size.baseSpacings.sp1
+    padding: theme.vars.size.baseSpacings.sp1,
+    boxShadow: theme.vars.customShadows?.z1
   }),
   /**
    * Estilos para el contenedor de las acciones derecho
@@ -142,7 +137,11 @@ const dataGridStyles = {
     //Se utiliza directamente el valor porque no está tokenizado
     height: "100%",
     lineHeight: theme.vars.size.baseSpacings.sp4,
-    fontSize: getTypographyStyles(theme.generalSettings.isMobile, ownerState?.size || "medium", "body").fontSize
+    fontSize: getTypographyStyles(
+      theme.generalSettings.isMobile,
+      ownerState?.size || "medium",
+      "body"
+    ).fontSize
   }),
   /**
    * Estilos para el valor de RowsCount
@@ -155,7 +154,11 @@ const dataGridStyles = {
     paddingRight: "6px",
     //No hay token para este valor
     paddingTop: theme.vars.size.baseSpacings.sp1,
-    fontSize: getTypographyStyles(theme.generalSettings.isMobile, ownerState?.size || "medium", "body").fontSize
+    fontSize: getTypographyStyles(
+      theme.generalSettings.isMobile,
+      ownerState?.size || "medium",
+      "body"
+    ).fontSize
   }),
   /**
    * Estilos para el contenedor de las columnas
@@ -576,15 +579,10 @@ const dataGridStyles = {
     padding: theme.vars.size.baseSpacings.sp1,
     gap: theme.vars.size.baseSpacings.sp1,
     borderRadius: theme.vars.size.borderRadius.r1,
-    ...getSizeStyles(
-      theme,
-      ownerState?.size || "medium",
-      "action",
-      (size) => ({
-        minHeight: size,
-        height: size
-      })
-    )
+    ...getSizeStyles(theme, ownerState?.size || "medium", "action", (size) => ({
+      minHeight: size,
+      height: size
+    }))
   }),
   /**
    * Estilos de los inputs del header para el filtro
@@ -603,15 +601,10 @@ const dataGridStyles = {
     height: "100%",
     alignItems: "center",
     "& .MuiSkeleton-root": {
-      ...getSizeStyles(
-        theme,
-        ownerState?.size || "medium",
-        "base",
-        (size) => ({
-          minHeight: `${size}!important`,
-          height: `${size}!important`
-        })
-      )
+      ...getSizeStyles(theme, ownerState?.size || "medium", "base", (size) => ({
+        minHeight: `${size}!important`,
+        height: `${size}!important`
+      }))
     }
   }),
   /**
@@ -623,6 +616,60 @@ const dataGridStyles = {
       flexDirection: "column",
       height: "100%"
     }
+  }),
+  /**
+   * Estilos para el contenedor del nombre de la columna y el icono de sort
+   */
+  nameColumnIcon: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp1,
+    position: "relative",
+    overflow: "visible"
+  }),
+  /**
+   * Estilos para el contenedor del nombre de la columna
+   */
+  nameColumn: () => ({
+    textOverflow: "ellipsis",
+    overflow: "hidden",
+    whiteSpace: "nowrap"
+  }),
+  /**
+   * Estilos para el contenedor del icono de la columna
+   */
+  iconColumn: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp1
+  }),
+  /**
+   * Estilos para el popover del header actions
+   */
+  headerRenderClick: () => ({
+    width: "fit-content"
+  }),
+  /**
+   * Estilos para el menuList del header actions
+   */
+  menuList: ({ theme }) => ({
+    padding: theme.vars.size.baseSpacings.sp3,
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp1,
+    "& > div": {
+      paddingLeft: theme.vars.size.baseSpacings.sp4,
+      paddingRight: theme.vars.size.baseSpacings.sp4
+    }
+  }),
+  /**
+   * Estilos para el contenedor del boton de acciones del header
+   */
+  buttonHeaderActions: () => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%"
   })
 };
 export {

package/components/DataGrid/constants.d.ts

@@ -2,6 +2,8 @@ export declare const DATAGRID_PREFIX_NAME = "M4LDataGrid";
 export declare const DATAGRID_SELECT_COLUMN_KEY = "M4LDataGrid-CheckedColumn";
 export declare const DATAGRID_ACTIONS_COLUMN_KEY = "M4LDataGrid-ActionsColumn";
 export declare const TEST_SKELETON = "data-skeleton";
+export declare const DATAGRID_HEADER_RENDER_CLICK_KEY = "M4LDataGrid-HeaderRenderClick";
+export declare const DATAGRID_ID_DICTIONARY = "data_grid";
 export declare enum DATAGRID_SEMANTIC_WIDTHS {
     actions = 40,
     bigChip = 190,

package/components/DataGrid/constants.js

@@ -2,6 +2,8 @@ const DATAGRID_PREFIX_NAME = "M4LDataGrid";
 const DATAGRID_SELECT_COLUMN_KEY = "M4LDataGrid-CheckedColumn";
 const DATAGRID_ACTIONS_COLUMN_KEY = "M4LDataGrid-ActionsColumn";
 const TEST_SKELETON = "data-skeleton";
+const DATAGRID_HEADER_RENDER_CLICK_KEY = "M4LDataGrid-HeaderRenderClick";
+const DATAGRID_ID_DICTIONARY = "data_grid";
 var DATAGRID_SEMANTIC_WIDTHS = /* @__PURE__ */ ((DATAGRID_SEMANTIC_WIDTHS2) => {
   DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["actions"] = 40] = "actions";
   DATAGRID_SEMANTIC_WIDTHS2[DATAGRID_SEMANTIC_WIDTHS2["bigChip"] = 190] = "bigChip";
@@ -31,7 +33,9 @@ export {
   TEST_SKELETON as T,
   DATAGRID_ROW_HEIGHTS as a,
   DATAGRID_ROW_HEADER_HEIGHTS as b,
-  DATAGRID_SELECT_COLUMN_KEY as c,
-  DATAGRID_SEMANTIC_WIDTHS as d,
-  DATAGRID_ACTIONS_COLUMN_KEY as e
+  DATAGRID_ID_DICTIONARY as c,
+  DATAGRID_SELECT_COLUMN_KEY as d,
+  DATAGRID_SEMANTIC_WIDTHS as e,
+  DATAGRID_ACTIONS_COLUMN_KEY as f,
+  DATAGRID_HEADER_RENDER_CLICK_KEY as g
 };

package/components/DataGrid/contexts/DataGridContext/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useState, useMemo, useEffect, useCallback, createContext } from "react";
+import { useState, useEffect, useMemo, useCallback, createContext } from "react";
 import { c as castMapColumnsWidthToRecord } from "../../helpers/castMapColumnsWidthToRecord.js";
 import { useFirstRender } from "@m4l/graphics";
 import { g as getComponentClasses } from "../../../../utils/getComponentSlotRoot.js";
@@ -32,10 +32,7 @@ function getColumnsConfig(id, columns, defaultUserColumns = void 0) {
     }
   }
   return columns.map((column, index) => {
-    const [columnConfig = { ...column }, columnConfigIndex] = getColumnConfigByKey(
-      column.key,
-      columnsConfig
-    );
+    const [columnConfig = { ...column }, columnConfigIndex] = getColumnConfigByKey(column.key, columnsConfig);
     return {
       key: column.key,
       name: typeof column.name === "string" ? column.name : String(column.name),
@@ -81,10 +78,16 @@ function getColumnsWidth(id, columns, defaultUserColumns) {
 function saveColumnsWidth(id, storeColumnsWidth, onChangeUserColumns) {
   if (onChangeUserColumns) {
     const columnsWidthObject = castMapColumnsWidthToRecord(storeColumnsWidth);
-    onChangeUserColumns({ reason: "columnsWidths", userConfig: columnsWidthObject });
+    onChangeUserColumns({
+      reason: "columnsWidths",
+      userConfig: columnsWidthObject
+    });
     return;
   }
-  localStorage.setItem(`${id}_columns_width`, JSON.stringify([...storeColumnsWidth]));
+  localStorage.setItem(
+    `${id}_columns_width`,
+    JSON.stringify([...storeColumnsWidth])
+  );
 }
 function saveColumnsConfig(id, columnsConfig, onChangeUserColumns) {
   if (onChangeUserColumns) {
@@ -118,26 +121,26 @@ function DataGridProvider(props) {
     onCheckedRowsChange,
     rowKeyGetter,
     onChangeUserColumns,
+    externalSortSettings: sortSettings,
+    externalFilterSettings: filterSettings,
     size
   } = props;
   const isFirstRender = useFirstRender([columns, id]);
-  const classes = getComponentClasses(
-    DATAGRID_PREFIX_NAME,
-    {
-      ...DataGridSlots,
-      ...ActionsSlots,
-      ...RowsCountSlots,
-      ...TableSlots,
-      ...TextEditorSlots,
-      ...ColumnsConfigSlots,
-      ...ControlNavigateSlots
-    }
-  );
-  const [columnsWidths, setColumnsWidths] = useState(
-    /* @__PURE__ */ new Map()
+  const classes = getComponentClasses(DATAGRID_PREFIX_NAME, {
+    ...DataGridSlots,
+    ...ActionsSlots,
+    ...RowsCountSlots,
+    ...TableSlots,
+    ...TextEditorSlots,
+    ...ColumnsConfigSlots,
+    ...ControlNavigateSlots
+  });
+  const [columnsWidths, setColumnsWidths] = useState(/* @__PURE__ */ new Map());
+  const [columnsConfig, setColumnsConfigOptions] = useState(
+    () => []
   );
-  const [columnsConfig, setColumnsConfigOptions] = useState(() => []);
   const [rowsFilterCount, setRowFilterCount] = useState(rowsCount);
+  const [sortColumns, setSortColumns] = useState([]);
   const [currentRowHeightVariant, setCurrentRowHeightVariant] = useState(() => {
     if (typeof rowHeights !== typeof rowHeaderHeights) {
       throw new Error("Must be same type rowheights and rowHeaderTypes");
@@ -161,19 +164,44 @@ function DataGridProvider(props) {
       rowHeaderHeight: typeof rowHeaderHeights !== "number" ? rowHeaderHeights[getIndexRowHeightVariant(initialRowHeightVariant)] : rowHeaderHeights
     };
   });
+  useEffect(() => {
+    const keys = new Set(columns.map((c) => c.key));
+    if (sortSettings?.sortsColumns) {
+      for (const sort of sortSettings.sortsColumns) {
+        if (!keys.has(sort)) {
+          throw new Error(
+            `DataGridProvider: Sorts incluye "${sort}", pero no existe ninguna columna con key="${sort}".`
+          );
+        }
+      }
+    }
+    if (filterSettings?.filterColumns) {
+      for (const filterField of filterSettings.filterColumns) {
+        if (!keys.has(filterField.name)) {
+          throw new Error(
+            `DataGridProvider: Fields incluye "${filterField.name}", pero no existe ninguna columna con key="${filterField.name}".`
+          );
+        }
+      }
+    }
+  }, [columns, sortSettings, filterSettings]);
   const finalRowHeights = useMemo(() => rowHeights, [rowHeights]);
   let timerSaveColumns;
   useEffect(() => {
     if (isFirstRender) {
       setColumnsWidths(getColumnsWidth(id, columns, defaultUserColumns));
-      setColumnsConfigOptions(getColumnsConfig(id, columns, defaultUserColumns));
+      setColumnsConfigOptions(
+        getColumnsConfig(id, columns, defaultUserColumns)
+      );
     }
   }, [defaultUserColumns]);
   useEffect(() => {
     if (!isFirstRender) {
       const finalColumnsConfig = [];
       for (let i = 0; i < columnsConfig.length; i++) {
-        const columnIndex = columns.findIndex((c) => c.key === columnsConfig[i]?.key);
+        const columnIndex = columns.findIndex(
+          (c) => c.key === columnsConfig[i]?.key
+        );
         if (columnIndex !== -1) {
           const column = columns[columnIndex];
           finalColumnsConfig.push({
@@ -185,11 +213,18 @@ function DataGridProvider(props) {
           });
         }
       }
-      const newColumns = columns.filter((column, index) => column.key !== columnsConfig[index]?.key);
+      const newColumns = columns.filter(
+        (column, index) => column.key !== columnsConfig[index]?.key
+      );
       if (newColumns.length > 0) {
         const colLength = finalColumnsConfig.length;
-        const newColConfig = getColumnsConfig(id, newColumns).map((columnConfig, index) => {
-          const columnIndex = columns.findIndex((c) => c.key === newColumns[index].key);
+        const newColConfig = getColumnsConfig(
+          id,
+          newColumns
+        ).map((columnConfig, index) => {
+          const columnIndex = columns.findIndex(
+            (c) => c.key === newColumns[index].key
+          );
           const column = newColumns[index];
           const indexNewCol = index + colLength;
           return {
@@ -206,7 +241,11 @@ function DataGridProvider(props) {
       if (deepEqual(columnsConfig, finalColumnsConfig)) {
         return;
       }
-      console.log("useEffect columnsConfig changed", columnsConfig, finalColumnsConfig);
+      console.log(
+        "useEffect columnsConfig changed",
+        columnsConfig,
+        finalColumnsConfig
+      );
       setColumnsConfigOptions(finalColumnsConfig);
     }
   }, [columns, id]);
@@ -223,8 +262,12 @@ function DataGridProvider(props) {
       if (sourceKey === targetKey) {
         return;
       }
-      const sourceColumnIndex = columnsConfig.findIndex((c) => c.key === sourceKey);
-      const targetColumnIndex = columnsConfig.findIndex((c) => c.key === targetKey);
+      const sourceColumnIndex = columnsConfig.findIndex(
+        (c) => c.key === sourceKey
+      );
+      const targetColumnIndex = columnsConfig.findIndex(
+        (c) => c.key === targetKey
+      );
       const reorderedColumnsConfig = [...columnsConfig];
       reorderedColumnsConfig.splice(
         targetColumnIndex,
@@ -282,6 +325,10 @@ function DataGridProvider(props) {
         onCheckedRowsChange,
         rowKeyGetter,
         onChangeUserColumns,
+        sortColumns,
+        setSortColumns,
+        externalSortSettings: sortSettings,
+        externalFilterSettings: filterSettings,
         classes,
         size
       },

package/components/DataGrid/contexts/DataGridContext/types.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import { RowKey, RowHeightVariants, GridProps } from '../../types';
 import { Maybe } from '@m4l/core';
 import { ActionsSlots, ColumnsConfigSlots, ControlNavigateSlots, DataGridSlots, RowsCountSlots, TableSlots, TextEditorSlots } from '../../slots/DataGridEnum';
+import { SortColumn } from 'react-data-grid';
 export interface BaseConfigColumn {
     key: string;
     visible: boolean;
@@ -22,7 +23,7 @@ export interface IGridConfig {
     columnsConfig: BaseConfigColumn[];
     columnsWidths: Record<RowKey, number>;
 }
-export interface DataGridProviderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<GridProps<TRow, TSummaryRow, TKey>, 'rows' | 'columns' | 'rowActionsGetter' | 'rowHeaderHeights' | 'rowHeights' | 'initialRowHeightVariant' | 'checkedRows' | 'onCheckedRowsChange' | 'rowKeyGetter' | 'onChangeUserColumns' | 'defaultUserColumns'> {
+export interface DataGridProviderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<GridProps<TRow, TSummaryRow, TKey>, 'rows' | 'columns' | 'rowActionsGetter' | 'rowHeaderHeights' | 'rowHeights' | 'initialRowHeightVariant' | 'checkedRows' | 'onCheckedRowsChange' | 'rowKeyGetter' | 'onChangeUserColumns' | 'defaultUserColumns' | 'externalSortSettings' | 'externalFilterSettings'> {
     id: number | string;
     children: ReactNode;
     rowsCount: number;
@@ -33,7 +34,7 @@ export type RowHeightState = {
     rowHeight: number;
     rowHeaderHeight: number;
 };
-export interface DataGridContextProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<DataGridProviderProps<TRow, TSummaryRow, TKey>, 'rows' | 'checkedRows' | 'onCheckedRowsChange' | 'rowHeights' | 'rowsCount' | 'rowActionsGetter' | 'rowKeyGetter' | 'onChangeUserColumns'> {
+export interface DataGridContextProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<DataGridProviderProps<TRow, TSummaryRow, TKey>, 'rows' | 'checkedRows' | 'onCheckedRowsChange' | 'rowHeights' | 'rowsCount' | 'rowActionsGetter' | 'rowKeyGetter' | 'onChangeUserColumns' | 'externalSortSettings' | 'externalFilterSettings'> {
     columnsConfig: IConfigColumn[];
     columnsWidths: Map<string, Maybe<string | number>>;
     setRowsCount: (newRowsCount: number) => void;
@@ -46,4 +47,6 @@ export interface DataGridContextProps<TRow, TSummaryRow, TKey extends RowKey = R
     onChangeColumnWidth: (columnKey: string, width: number) => void;
     classes?: Record<DataGridSlots | ActionsSlots | RowsCountSlots | TableSlots | TextEditorSlots | ColumnsConfigSlots | ControlNavigateSlots, string>;
     size: GridProps<any, any, any>['size'];
+    sortColumns: SortColumn[];
+    setSortColumns: React.Dispatch<React.SetStateAction<SortColumn[]>>;
 }

package/components/DataGrid/dictionary.d.ts

@@ -25,4 +25,12 @@ export declare const DICTIONARY: {
     SETTINGS_VISIBLE_ALL: string;
     SETTINGS_NO_VISIBLE_ALL: string;
     SETTINGS_RESTORE: string;
+    NO_ACTIONS_LABEL: string;
+    ORDER_ASC_COLUMN: string;
+    ORDER_DESC_COLUMN: string;
+    REMOVE_ORDER_COLUMN: string;
+    FREEZE_COLUMN: string;
+    UNFREEZE_COLUMN: string;
+    HIDE_COLUMN: string;
+    ADD_FILTER_COLUMN: string;
 };

package/components/DataGrid/dictionary.js

@@ -1,29 +1,38 @@
 import { g as getMenuActionsComponentsDictionary } from "../MenuActions/dictionary.js";
 import { g as getModalDictionary } from "../ModalDialog/dictionary.js";
 import { g as getPagerComponentsDictionary } from "../Pager/dicctionary.js";
+import { c as DATAGRID_ID_DICTIONARY } from "./constants.js";
 const DATAGRID_DICTIONARY_ID = "data_grid";
 function getDataGridComponentsDictionary() {
   return [DATAGRID_DICTIONARY_ID].concat(getPagerComponentsDictionary()).concat(getMenuActionsComponentsDictionary()).concat(getModalDictionary());
 }
 const DICTIONARY = {
   DENSITY_COMPACT: `${DATAGRID_DICTIONARY_ID}.density_compact`,
-  DENSITY_STANDARD: `${DATAGRID_DICTIONARY_ID}.density_standard`,
-  DENSITY_CONFORTABLE: `${DATAGRID_DICTIONARY_ID}.density_confortable`,
-  DENSITY_TOOLTIP: `${DATAGRID_DICTIONARY_ID}.tooltip_density`,
-  TOOLTIP_FILTER_HIDE: `${DATAGRID_DICTIONARY_ID}.tooltip_filter_hide`,
-  TOOLTIP_FILTER_SHOW: `${DATAGRID_DICTIONARY_ID}.tooltip_filter_show`,
-  SETTINGS_COLUMN_NAME: `${DATAGRID_DICTIONARY_ID}.settings_column_name`,
-  SETTINGS_COLUMN_POSITION: `${DATAGRID_DICTIONARY_ID}.settings_column_position`,
-  SETTINGS_COLUMN_VISIBLE: `${DATAGRID_DICTIONARY_ID}.settings_column_visible`,
-  SETTINGS_COLUMNS_FROZEN: `${DATAGRID_DICTIONARY_ID}.settings_column_frozen`,
-  SETTINGS_SEL_COLUMNS: `${DATAGRID_DICTIONARY_ID}.settings_sel_columns`,
-  SETTINGS_MOVE_FIRST: `${DATAGRID_DICTIONARY_ID}.settings_move_first`,
-  SETTINGS_MOVE_UP: `${DATAGRID_DICTIONARY_ID}.settings_move_up`,
-  SETTINGS_MOVE_LAST: `${DATAGRID_DICTIONARY_ID}.settings_move_last`,
-  SETTINGS_MOVE_DOWN: `${DATAGRID_DICTIONARY_ID}.settings_move_down`,
-  SETTINGS_VISIBLE_ALL: `${DATAGRID_DICTIONARY_ID}.settings_visible_all`,
-  SETTINGS_NO_VISIBLE_ALL: `${DATAGRID_DICTIONARY_ID}.settings_no_visible_all`,
-  SETTINGS_RESTORE: `${DATAGRID_DICTIONARY_ID}.settings_restore`
+  DENSITY_STANDARD: `${DATAGRID_ID_DICTIONARY}.density_standard`,
+  DENSITY_CONFORTABLE: `${DATAGRID_ID_DICTIONARY}.density_confortable`,
+  DENSITY_TOOLTIP: `${DATAGRID_ID_DICTIONARY}.tooltip_density`,
+  TOOLTIP_FILTER_HIDE: `${DATAGRID_ID_DICTIONARY}.tooltip_filter_hide`,
+  TOOLTIP_FILTER_SHOW: `${DATAGRID_ID_DICTIONARY}.tooltip_filter_show`,
+  SETTINGS_COLUMN_NAME: `${DATAGRID_ID_DICTIONARY}.settings_column_name`,
+  SETTINGS_COLUMN_POSITION: `${DATAGRID_ID_DICTIONARY}.settings_column_position`,
+  SETTINGS_COLUMN_VISIBLE: `${DATAGRID_ID_DICTIONARY}.settings_column_visible`,
+  SETTINGS_COLUMNS_FROZEN: `${DATAGRID_ID_DICTIONARY}.settings_column_frozen`,
+  SETTINGS_SEL_COLUMNS: `${DATAGRID_ID_DICTIONARY}.settings_sel_columns`,
+  SETTINGS_MOVE_FIRST: `${DATAGRID_ID_DICTIONARY}.settings_move_first`,
+  SETTINGS_MOVE_UP: `${DATAGRID_ID_DICTIONARY}.settings_move_up`,
+  SETTINGS_MOVE_LAST: `${DATAGRID_ID_DICTIONARY}.settings_move_last`,
+  SETTINGS_MOVE_DOWN: `${DATAGRID_ID_DICTIONARY}.settings_move_down`,
+  SETTINGS_VISIBLE_ALL: `${DATAGRID_ID_DICTIONARY}.settings_visible_all`,
+  SETTINGS_NO_VISIBLE_ALL: `${DATAGRID_ID_DICTIONARY}.settings_no_visible_all`,
+  SETTINGS_RESTORE: `${DATAGRID_ID_DICTIONARY}.settings_restore`,
+  NO_ACTIONS_LABEL: `${DATAGRID_ID_DICTIONARY}.no_actions_label`,
+  ORDER_ASC_COLUMN: `${DATAGRID_ID_DICTIONARY}.order_asc_column`,
+  ORDER_DESC_COLUMN: `${DATAGRID_ID_DICTIONARY}.order_desc_column`,
+  REMOVE_ORDER_COLUMN: `${DATAGRID_ID_DICTIONARY}.remove_order_column`,
+  FREEZE_COLUMN: `${DATAGRID_ID_DICTIONARY}.freeze_column`,
+  UNFREEZE_COLUMN: `${DATAGRID_ID_DICTIONARY}.unfreeze_column`,
+  HIDE_COLUMN: `${DATAGRID_ID_DICTIONARY}.hide_column`,
+  ADD_FILTER_COLUMN: `${DATAGRID_ID_DICTIONARY}.add_filter`
 };
 export {
   DICTIONARY as D,

package/components/DataGrid/icons.d.ts

@@ -13,4 +13,11 @@ export declare const pathIcons: {
     uncheckAll: string;
     restoreColumns: string;
     search: string;
+    sortAsc: string;
+    sortDesc: string;
+    filter2: string;
+    removeSort: string;
+    freezeColumn: string;
+    unfreezeColumn: string;
+    hideColumn: string;
 };

package/components/DataGrid/icons.js

@@ -12,7 +12,14 @@ const pathIcons = {
   checkAll: "frontend/components/data_grid/assets/icons/check_all.svg",
   uncheckAll: "frontend/components/data_grid/assets/icons/uncheck_all.svg",
   restoreColumns: "frontend/components/data_grid/assets/icons/restore_columns.svg",
-  search: "frontend/components/data_grid/assets/icons/search.svg"
+  search: "frontend/components/data_grid/assets/icons/search.svg",
+  sortAsc: "frontend/components/data_grid/assets/icons/sort_asc.svg",
+  sortDesc: "frontend/components/data_grid/assets/icons/sort_desc.svg",
+  filter2: "frontend/components/data_grid/assets/icons/filter.svg",
+  removeSort: "frontend/components/data_grid/assets/icons/eraser.svg",
+  freezeColumn: "frontend/components/data_grid/assets/icons/pin.svg",
+  unfreezeColumn: "frontend/components/data_grid/assets/icons/pin-off.svg",
+  hideColumn: "frontend/components/data_grid/assets/icons/eye-off.svg"
 };
 export {
   pathIcons as p

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

@@ -21,7 +21,13 @@ export declare enum TableSlots {
     draggableWrapperInputBase = "draggableWrapperInputBase",
     headerInputBase = "headerInputBase",
     wrapperSkeleton = "wrapperSkeleton",
-    contentModalSetting = "contentModalSetting"
+    contentModalSetting = "contentModalSetting",
+    headerRenderClick = "headerRenderClick",
+    menuList = "menuList",
+    buttonHeaderActions = "buttonHeaderActions",
+    nameColumnIcon = "nameColumnIcon",
+    iconColumn = "iconColumn",
+    nameColumn = "nameColumn"
 }
 export declare enum TextEditorSlots {
     inputTexEditor = "inputTexEditor"

package/components/DataGrid/slots/DataGridEnum.js

@@ -25,6 +25,12 @@ var TableSlots = /* @__PURE__ */ ((TableSlots2) => {
   TableSlots2["headerInputBase"] = "headerInputBase";
   TableSlots2["wrapperSkeleton"] = "wrapperSkeleton";
   TableSlots2["contentModalSetting"] = "contentModalSetting";
+  TableSlots2["headerRenderClick"] = "headerRenderClick";
+  TableSlots2["menuList"] = "menuList";
+  TableSlots2["buttonHeaderActions"] = "buttonHeaderActions";
+  TableSlots2["nameColumnIcon"] = "nameColumnIcon";
+  TableSlots2["iconColumn"] = "iconColumn";
+  TableSlots2["nameColumn"] = "nameColumn";
   return TableSlots2;
 })(TableSlots || {});
 var TextEditorSlots = /* @__PURE__ */ ((TextEditorSlots2) => {

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

@@ -44,6 +44,12 @@ export declare const DraggableWrapperInputBaseStyled: import('@emotion/styled').
 export declare const HeaderInputBaseStyled: import('@emotion/styled').StyledComponent<any, {}, {}>;
 export declare const WrapperSkeletonStyled: 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 ContentModalSettingStyled: 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 HeaderRenderClickStyled: 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 MenuListStyled: import('@emotion/styled').StyledComponent<any, {}, {}>;
+export declare const ButtonHeaderActionsStyled: 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 NameColumnIconStyled: 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 IconColumnStyled: 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 NameColumnStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 /**
  * ****************
  * Slots TextEditor

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,30 @@ 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 IconColumnStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.iconColumn
+})(dataGridStyles.iconColumn);
+const NameColumnStyled = styled("div", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.nameColumn
+})(dataGridStyles.nameColumn);
 const InputTextEditorStyled = styled("input", {
   name: DATAGRID_PREFIX_NAME,
   slot: TextEditorSlots.inputTexEditor
@@ -98,10 +122,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,
+  IconColumnStyled as I,
+  MenuListStyled as M,
+  NameColumnIconStyled as N,
   RowsCountRootStyled as R,
   TableWrapperDataGridStyled as T,
   WrapperSkeletonStyled as W,
@@ -117,7 +144,10 @@ export {
   ColumnsConfigActiosStyled as j,
   ContentModalSettingStyled as k,
   TableContainerStyled as l,
-  DraggableHeaderRootStyled as m,
-  DraggableWrapperInputBaseStyled as n,
-  InputTextEditorStyled as o
+  NameColumnStyled as m,
+  DraggableHeaderRootStyled as n,
+  DraggableWrapperInputBaseStyled as o,
+  IconSearchStyled as p,
+  HeaderRenderClickStyled as q,
+  InputTextEditorStyled as r
 };

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,