Context Menu on a table head

[Chrisdo82]

Hello,

I have a question about the correct use of the context menu within a table. I want to open the context menu by right clicking on the elements in the table head. In this context menu the visibility of the columns can be set. With each click on a ContextMenu.CheckboxItem the context menu should remain open.

If I put the ContextMenu.Root and ContextMenu.Content outside the table render and the trigger around the th elements, then the context menu is not displayed below the mouse pointer as desired, but at the top left starting from the table (left: 0, top: 0). However, the ContextMenu remains open when I click on the items to hide the columns.

If I render it inside the th element, then it works as desired, but the context menu does not stay open when I click on an item, because the th element is no longer rendered.

Shown here as an example: https://codesandbox.io/s/autumn-wood-vny154

Does anyone have an idea how to solve this problem?

Thanks in advance

[mello-r]

I just played around. I think the problem could be that you are rendering multiple ContextMenu.Trigger. If you put the ContextMenu.Trigger around the thead it seems to work: https://codesandbox.io/s/mystifying-lehmann-18z7t1

[Chrisdo82]

thanks a lot. I completely overlooked the asChild prop.