[DataGridPro] Add context menu support

[m4theushw]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

Upvote this issue if you want it to be implemented natively.

While there's no built-in support, this demo shows how to add a context menu using componentsProps.row (it works in the free version too).

Examples 🌈

https://www.telerik.com/kendo-react-ui/knowledge-base/grid-context-menu/ https://ag-grid.com/javascript-grid-context-menu/ https://adazzle.github.io/react-data-grid/canary/?path=/story/demos--context-menu-story

Motivation 🔦

No response

Order ID 💳 (optional)

No response

[xrawvelocity]

Hello, I've been searching through here and the docs for a solution for this but when I tried to do what that example with componentProps.row showed for the free DataGrid it doesn't seem to work in the DataGridPro. I've also been looking for a detailed look of the componentProps but so far I haven't found it.

componentsProps={{
    row: {
        onContextMenu: (e) => {
            e.preventDefault()
            console.log('it did it')
        },
    },
}}

Nothing is being console logged so I wonder if anything is spelled differently or something

[flaviendelangle]

Could you give your version of the DataGrid please ? A reproduction case would be even better. This codesandbox.io template may be a good starting point. Thank you!

[xrawvelocity]

I have "@mui/x-data-grid-pro": "^4.0.0" Just tried replicating it in codesandbox and it gave me this error: Object literal may only specify known properties, and 'row' does not exist in type 'GridSlotsComponentsProps'

https://codesandbox.io/s/long-mountain-fisd1?file=/src/Demo.tsx

Thank you for the fast response btw

[flaviendelangle]

OK, you are probably looking at the v5 documentation Here is the doc for v4 : https://v4.mui.com/components/data-grid/getting-started/

[m4theushw]

@flaviendelangle The componentsProps.row and the context menu demo is only available in v5.

@xrawvelocity You need to update to v5 as this demo requires a newer API.

[xrawvelocity]

that was it. thank you, i didn't know this was part of the beta release

[flaviendelangle]

Yes that was my point, xrawvelocity is looking at v5 doc so he found a feature that was not available in v4.

[harrycollin]

Having something like this would be really useful

[conerye]

When I add a context menu to my datagrid using the componentsProps.row it causes the detail panel to cover table rows when expanded. Is this a known issue and if yes, is there a workaround? I need to have both a detail panel and right-click menu on my table... I am using "@mui/x-data-grid-premium": "^5.14.0"

[m1daz]

Im confused, is this a premium feature? I'm a pro plan user and I seem to not be able to get this onContextMenu thing working. mui-data-grid-pro 6.8

[romgrk]

You can look at the code of that example by clicking "Show code" and copy that code.

[m1daz]

You can look at the code of that example by clicking "Show code" and copy that code.

Nevermind, it was my fault.

I was typing

row: {
     onContextMenu: () => {}
}

in the slots={} prop and not in the slotsProps={} prop.