diff --git a/docs/data/data-grid/events/events.json b/docs/data/data-grid/events/events.json index 935d9560a69a8..a2831d2974c28 100644 --- a/docs/data/data-grid/events/events.json +++ b/docs/data/data-grid/events/events.json @@ -127,6 +127,14 @@ "event": "MuiEvent>", "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>", + "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 index 5ec4bde002d73..1667cca1371e9 100644 --- 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) => 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 index 3495fff530f2e..cc714abf8fba2 100644 --- 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) => 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 index a00ba2cb6ebd8..3fd158be8aa04 100644 --- 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) => 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 index 66fb60f7bef3c..28635d8a0a7f6 100644 --- 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 index 978a1ab42b33c..6423bffb2f056 100644 --- 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 index 9c28109e2519d..9cf3ea258f2a7 100644 --- 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 index 2299884dbfa88..fe7edf11922e4 100644 --- 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} 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 index 766e52ceea879..61d2eaf0dfd65 100644 --- 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} 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 index e2bb8529b9dc3..72a2bb43cb78f 100644 --- 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} 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 index bfd22a0b5dbeb..b4e4b71957c83 100644 --- 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 index 2e2dc6ce1495e..c146675378834 100644 --- 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 index 0ffc296f66fdb..b323518b8963b 100644 --- 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; }; + /** + * Fired when the user attempts to open a context menu in the column header. + */ + columnHeaderContextMenu: { + params: GridColumnHeaderParams; + event: React.MouseEvent; + }; /** * 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 index 4f7cde8b3b5f2..a2056191fcc8f 100644 --- 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; + /** + * Callback fired when a contextmenu event comes from a column header element. + * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]]. + * @param {MuiEvent} 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]].