[Context Menu] How to implement for table rows
Reactive icon
Forge component by Sara Skov
Application Type

This component is beautiful.  I'm really hoping there is a way it can be utilized for calling Client Actions at a row level.  

If the whole table is put into the ContentContext area, trying to do something like getting the current row's Id will always return the of the first row, regardless of which row is actually right-clicked.

Using multiple component instances for individual table row cells partially works, but there are unclickable spaces between cell text. Also, this leads to unnecessary duplication.

Is there a way to target a particular row of a Reactive table?

This is a neat little module, thank you for bringing my attention to it! I will be sure to use it in the future!

After some discovery, I managed to get it working for the function I think you are hoping to use it for...

It works well on lists, because you can wrap the ListItems in the component which makes the entire list item clickable. It can then pass the context along.

Unfortunately the same cannot be done on tables, and you can only wrap things in each individual cell.

I suppose it is possible to put the component into a block, pass whatever ID type you want into the component, and allow manipulation that way, and then just wrap every item in the table in that block. You would want to do this so that you didn't end up with 20 different versions of the menu on a single page due to the need for one for each table cell.

In the attached demo, you can click into any list item and perform tasks on that user (we pass the UserID.) You can see that the ID changes when you click on different users.

The demo I've uploaded should get you started and able to move forward with your project! Feel free to modify the logic and implement for your use case.

If this post was helpful, please don't forget to mark it as the solution so future developers can also benefit from the method.

RAD Manage

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.