How to access the data of a clicked row when the multiple selection option is enabled?

Hi everyone, I have been having some problems with the following scenario:

Context: I have a table that has the multiple select option enabled and I need to click on a row button to display a modal window in which I have access to the information of the row that was clicked.

Problem: When the multiple selection option is activated and the modal window is activated it takes as reference the last selected row and not the row that was clicked.

Retool table

Solutions I have tried: I have been reviewing these articles and trying the different solutions they propose but none of them work, besides I tried to activate the modal using the native action buttons of the table instead of a column but I still have the same problem.

I hope you can help me :slight_smile:

@Kaizen Welcome to the forum!
I think it depends on what you are trying to do.
Do you want to have each row's User name appear in the modal?
If so I think you would need to, upon each time you select a row, build an array of user names in a temp state, and then upon clicking any row, read the value of the temp state and display it in the modal.

@ScottR The idea would be to have access to all the data of the row that is clicked, I made the example with the name of the user to give to understand the problem.

As for the solution you propose, when the multiple selection option is enabled, if I click on a row that is not selected I have no way to get (or I do not know how to do it? ) the data of the row that was clicked because the table only registers that the selected row is the last one that was selected in the multiple options and for that reason it takes the data of that row instead of the one that was clicked, in the gif that I attached you can notice that the name of the user of the last selected row is shown instead of the name of the user of the row that was just clicked.

I am calling a js query to apply the selected rows of the table to a temp variable: (Note that you do NOT have to set a temp state it's only useful if you need to manage the data AFTER selecting it in the original table)
Screenshot 2023-07-18 at 1.06.59 PM

Though you could simply select Run script in the event handler and add that one line.... for the Row seelect Change event

Then add another event handler for OnClick to open Modal
Then in the modal pull that data from the temp variable2.value

Oh, looks good, thanks for taking the time to check it out.

But I notice you are using the legacy version of the table, can that solution be applied in the new version of the table component?

@ScottR I don't think it will work because the data you are showing are the ones you selected from the table but if you had a button in each row that would open the modal with the data of the row you CLICKED (as in the example I gave) there would be the problem I exposed in the description of my post. I will keep trying other options and I will update the thread in case I find something or have any specific doubt.

@Kaizen I am confused, I thought you wanted to select multiple rows in a table and then open a modal that would contain all of the data in the selected rows?

Perhaps use an action button in each row?

I have done this in the past whereby I have not used an Event handler in the table but have a button modal outside the table and only showing that modal button when a row is selected. This way the OnClick event doesn't conflict with the selection of the row or rows.


In that way it can work for what I need, thank you very much @ScottR

1 Like