[data grid] Context menu in column headers

[trbagley-gresham]

Summary

Enhanced API for grid header customisation.

Examples

Related issue:
#6691

Motivation

We'd like to show the context menu when right clicking on a column header rather than clicking on the menu icon (three vertical dots). This would involve adding an onContextMenu event handler to each header which would open the filter panel. A frequent recommendation is to make use of the renderHeader property of GridColDef; however, this does not give full control over the header as illustrated in the screenshot below:

If we add an event handler via renderHeader, only the coloured sections are clickable as opposed to the entire header.

Are there currently any props which would facilitate this? The closest implementation I have encountered can be seen in the MUI docs. If something similar to this is/was available for the header, I think it would address our requirements.

Search keywords: grid header customisation
Order ID: 45466

[cherniavskii]

Hi @trbagley-gresham
The suggested approach hear would be to pass the onContextMenu callback to the columnHeaders slot props:

const onContextMenu = React.useCallback((event: React.MouseEvent) => {
  const headerCell = (event.target as HTMLElement).closest(`[role="columnheader"]`);
  if (!headerCell) {
    return;
  }
  const field = headerCell.getAttribute('data-field');
  console.log('Context menu on column header:', field);
}, []);

// ...

<DataGrid
  rows={rows}
  columns={columns}
  slotProps={{
    columnHeaders: {
      onContextMenu,
    },
  }}
/>

But it doesn't work because of a bug on our side – we don't pass the slotProps to the columnHeaders slot in

mui-x/packages/x-data-grid/src/components/GridHeaders.tsx

Line 64 in ec2df5c

<rootProps.slots.columnHeaders

Fortunately, you can override the columnHeaders to workaround this issue, here is a working demo:
https://stackblitz.com/edit/react-qkbqyt?file=Demo.tsx
Meanwhile, I'll fix the issue on our end.

Is this what you're looking for

[trbagley-gresham]

@cherniavskii thanks for the demo, this looks promising. I did try adding an onContextMenu handler to the header by passing a custom component via the columnHeaders slot prop. The problem I ran into was that I couldn't figure out a reliable way to find the correct element. Using closest() appears to solve this.

We'll need to obtain the GridColDef for the column header from which the event was fired. I think we'll be able to achieve this by extracting the value from data-field and looking it up somehow.

[cherniavskii]

@trbagley-gresham

We'll need to obtain the GridColDef for the column header from which the event was fired. I think we'll be able to achieve this by extracting the value from data-field and looking it up somehow.

apiRef.current.getColumn would do the trick.

[trbagley-gresham]

@cherniavskii perfect, thanks!

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@trbagley-gresham: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.