[DataGrid] Add 'onColumnHeaderContextMenu' event (#14734)

mui · Oct 8, 2024 · 3d7acb1 · 3d7acb1
1 parent c5bcfb5
commit 3d7acb1
Show file tree

Hide file tree

Showing 14 changed files with 84 additions and 0 deletions.
diff --git a/docs/data/data-grid/events/events.json b/docs/data/data-grid/events/events.json
@@ -127,6 +127,14 @@
     "event": "MuiEvent<React.MouseEvent<HTMLElement>>",
     "componentProp": "onColumnHeaderClick"
   },
+  {
+    "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
+    "name": "columnHeaderContextMenu",
+    "description": "Fired when the user attempts to open a context menu in the column header.",
+    "params": "GridColumnHeaderParams",
+    "event": "MuiEvent<React.MouseEvent<HTMLElement>>",
+    "componentProp": "onColumnHeaderContextMenu"
+  },
   {
     "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
     "name": "columnHeaderDoubleClick",

diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -308,6 +308,13 @@
         "describedArgs": ["params", "event", "details"]
       }
     },
+    "onColumnHeaderContextMenu": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>) => void",
+        "describedArgs": ["params", "event"]
+      }
+    },
     "onColumnHeaderDoubleClick": {
       "type": { "name": "func" },
       "signature": {

diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -262,6 +262,13 @@
         "describedArgs": ["params", "event", "details"]
       }
     },
+    "onColumnHeaderContextMenu": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>) => void",
+        "describedArgs": ["params", "event"]
+      }
+    },
     "onColumnHeaderDoubleClick": {
       "type": { "name": "func" },
       "signature": {

diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
@@ -221,6 +221,13 @@
         "describedArgs": ["params", "event", "details"]
       }
     },
+    "onColumnHeaderContextMenu": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>) => void",
+        "describedArgs": ["params", "event"]
+      }
+    },
     "onColumnHeaderDoubleClick": {
       "type": { "name": "func" },
       "signature": {

diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
@@ -330,6 +330,13 @@
         "details": "Additional details for this callback."
       }
     },
+    "onColumnHeaderContextMenu": {
+      "description": "Callback fired when a contextmenu event comes from a column header element.",
+      "typeDescriptions": {
+        "params": "With all properties from GridColumnHeaderParams.",
+        "event": "The event object."
+      }
+    },
     "onColumnHeaderDoubleClick": {
       "description": "Callback fired when a double click event comes from a column header element.",
       "typeDescriptions": {

diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
@@ -287,6 +287,13 @@
         "details": "Additional details for this callback."
       }
     },
+    "onColumnHeaderContextMenu": {
+      "description": "Callback fired when a contextmenu event comes from a column header element.",
+      "typeDescriptions": {
+        "params": "With all properties from GridColumnHeaderParams.",
+        "event": "The event object."
+      }
+    },
     "onColumnHeaderDoubleClick": {
       "description": "Callback fired when a double click event comes from a column header element.",
       "typeDescriptions": {

diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
@@ -230,6 +230,13 @@
         "details": "Additional details for this callback."
       }
     },
+    "onColumnHeaderContextMenu": {
+      "description": "Callback fired when a contextmenu event comes from a column header element.",
+      "typeDescriptions": {
+        "params": "With all properties from GridColumnHeaderParams.",
+        "event": "The event object."
+      }
+    },
     "onColumnHeaderDoubleClick": {
       "description": "Callback fired when a double click event comes from a column header element.",
       "typeDescriptions": {

diff --git a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx
@@ -636,6 +636,12 @@ DataGridPremiumRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onColumnHeaderClick: PropTypes.func,
+  /**
+   * Callback fired when a contextmenu event comes from a column header element.
+   * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
+   * @param {MuiEvent<React.MouseEvent>} event The event object.
+   */
+  onColumnHeaderContextMenu: PropTypes.func,
   /**
    * Callback fired when a double click event comes from a column header element.
    * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].

diff --git a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx
@@ -563,6 +563,12 @@ DataGridProRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onColumnHeaderClick: PropTypes.func,
+  /**
+   * Callback fired when a contextmenu event comes from a column header element.
+   * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
+   * @param {MuiEvent<React.MouseEvent>} event The event object.
+   */
+  onColumnHeaderContextMenu: PropTypes.func,
   /**
    * Callback fired when a double click event comes from a column header element.
    * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].

diff --git a/packages/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/x-data-grid/src/DataGrid/DataGrid.tsx
@@ -477,6 +477,12 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onColumnHeaderClick: PropTypes.func,
+  /**
+   * Callback fired when a contextmenu event comes from a column header element.
+   * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
+   * @param {MuiEvent<React.MouseEvent>} event The event object.
+   */
+  onColumnHeaderContextMenu: PropTypes.func,
   /**
    * Callback fired when a double click event comes from a column header element.
    * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].

diff --git a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx
@@ -172,6 +172,7 @@ function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
   const mouseEventsHandlers = React.useMemo(
     () => ({
       onClick: publish('columnHeaderClick'),
+      onContextMenu: publish('columnHeaderContextMenu'),
       onDoubleClick: publish('columnHeaderDoubleClick'),
       onMouseOver: publish('columnHeaderOver'), // TODO remove as it's not used
       onMouseOut: publish('columnHeaderOut'), // TODO remove as it's not used

diff --git a/packages/x-data-grid/src/hooks/features/events/useGridEvents.ts b/packages/x-data-grid/src/hooks/features/events/useGridEvents.ts
@@ -13,6 +13,7 @@ export function useGridEvents(
     DataGridProcessedProps,
     | 'onColumnHeaderClick'
     | 'onColumnHeaderDoubleClick'
+    | 'onColumnHeaderContextMenu'
     | 'onColumnHeaderOver'
     | 'onColumnHeaderOut'
     | 'onColumnHeaderEnter'
@@ -30,6 +31,7 @@ export function useGridEvents(
   >,
 ): void {
   useGridApiOptionHandler(apiRef, 'columnHeaderClick', props.onColumnHeaderClick);
+  useGridApiOptionHandler(apiRef, 'columnHeaderContextMenu', props.onColumnHeaderContextMenu);
   useGridApiOptionHandler(apiRef, 'columnHeaderDoubleClick', props.onColumnHeaderDoubleClick);
   useGridApiOptionHandler(apiRef, 'columnHeaderOver', props.onColumnHeaderOver);
   useGridApiOptionHandler(apiRef, 'columnHeaderOut', props.onColumnHeaderOut);

diff --git a/packages/x-data-grid/src/models/events/gridEventLookup.ts b/packages/x-data-grid/src/models/events/gridEventLookup.ts
@@ -88,6 +88,13 @@ export interface GridColumnHeaderEventLookup {
     params: GridColumnHeaderParams;
     event: React.MouseEvent<HTMLElement>;
   };
+  /**
+   * Fired when the user attempts to open a context menu in the column header.
+   */
+  columnHeaderContextMenu: {
+    params: GridColumnHeaderParams;
+    event: React.MouseEvent<HTMLElement>;
+  };
   /**
    * Fired when a column header is double-clicked.
    */

diff --git a/packages/x-data-grid/src/models/props/DataGridProps.ts b/packages/x-data-grid/src/models/props/DataGridProps.ts
@@ -543,6 +543,12 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onColumnHeaderClick?: GridEventListener<'columnHeaderClick'>;
+  /**
+   * Callback fired when a contextmenu event comes from a column header element.
+   * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
+   * @param {MuiEvent<React.MouseEvent>} event The event object.
+   */
+  onColumnHeaderContextMenu?: GridEventListener<'columnHeaderContextMenu'>;
   /**
    * Callback fired when a double click event comes from a column header element.
    * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].