[data grid] Add slot for the column header

[mwardGresham]

Order ID 💳

45466

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

I cant find a way to get access to the anchored cell (blue outlined selected cell) in the datagrid e.g. onAnchorCellChange

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[cherniavskii]

Hey @mwardGresham
Could you describe what you're trying to achieve?
Thanks!

[mwardGresham]

Hello
We are looking to get an event when a cell is focused, to then get the column and row position and value. You have onCellFocusOut but no onCellFocus, is there a reason for this?

We're trying to get a context menu on our grid, it has to work for both the cells and header cells, but right clicking on cells doesn't cause onCellClick or onColumnHeaderClick to fire, we've seen the demo provided here (https://mui.com/x/react-data-grid/components/#row) but couldn't get it to work for cell headers and also doesn't return the row/header position of the selection.

Thanks

[mwardGresham]

Any update on this so we can progress?

[cherniavskii]

Hey @mwardGresham

We are looking to get an event when a cell is focused, to then get the column and row position and value

You can use componentsProps.cell.onFocus:
https://codesandbox.io/s/modest-nova-bih4ch?file=/demo.tsx

but right clicking on cells doesn't cause onCellClick or onColumnHeaderClick to fire

This is expected. You have to use componentsProps.cell.onContextMenu to get the context menu event on the cells:
https://codesandbox.io/s/serverless-snow-2qgtec?file=/demo.tsx
For the column headers, I'm afraid it's not possible to subscribe to the contextMenu event right now.
We can add onColumnHeaderContextMenu prop to support it

[m4theushw]

we've seen the demo provided here (https://mui.com/x/react-data-grid/components/#row) but couldn't get it to work for cell headers and also doesn't return the row/header position of the selection.

Could you describe more the problem with the row position? In the demo you have the row ID.

For the column headers, I'm afraid it's not possible to subscribe to the contextMenu event right now.

Instead of adding a specific prop for the event, it's best to add a slot for the column header. It would also unlock developers to implement header filters like #4934 (comment) in their side.

[mwardGresham]

A slot for the column header in components props would solve our issue I think, if that could be added?
The row position is no longer an issue thanks

[mwardGresham]

Hello, is it possible for us to get any ETA on this?

[cherniavskii]

Hey @mwardGresham
Could you try using renderHeader for capturing the context menu event in the column header?
https://codesandbox.io/s/relaxed-minsky-yl8tws?file=/demo.tsx
Would that work for you?

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.