Selecting rows in plasmic table and showing data in a modal

Hi guys! Hope you are doing well!

Basically I have a table component (react table, using plasmic studio), I would like to select a row, open a Modal filling my inputs with specific data (accordingly with the selected row).

Using “Table props” I activated “Select rows?” and in the “Row key” I filled with: “table → selectedRowKey”

Also, in table interactions (on row clicked), I am updating a state value (I created a state value called $state.rowSeletect" and passed “$state.table.selectedRowKey”

While running my app it seems the interaction (clicking in a row) does not work after the first click (first selected row). My state did not receive any other value after the first click.

Why? Visually, the row is selected (color changes) but my state keeps always the initial value (value of the first click)

I appreciate if somebody could help me.

I am enjoying plasmic so much!
Thanks!

I think the issue here is the value assigned to the “Row key” prop in Table.

The “Row key” prop should be a column name (e.g. “product_id”). It means that when a row is selected, it finds a column called “product_id” and assigns its value to “table → selectedRowKey”. So if the selected row’s product_id is 123, “table → selectedRowKey” becomes 123.

Now in your case, you’re setting “Row key” to “table → selectedRowKey”. When you select a row, “table → selectedRowKey” becomes 123. The next time you select a row, it thinks 123 is a column name, and since there isn’t a column called 123, it never updates “table → selectedRowKey”.

Hope that answers your question. Glad you are enjoying your experience with Plasmic.

1 Like

Hi sarah_ahmed!

I have tested and you helped me! It worked, thanks.

I am facing difficulties with my Modal right now.
When I selected the row, I have the index and can open my modal loading my fields correctly for the first time.

When I select another row and open the modal for the second time, all the inputs of my form were not updated (I see the previous loaded values).

Is it probably because my modal->form is rendered once and fills the “data fields” just for the first time? I am not sure if I am doing in the best way, in the data fields I have set the initial value using $state.table.data[rowIndex].“field”

Can you help me how to work properly in this situation or advise me how to handle better form props?
I am using the “component mode / simplified”.

Thanks again!

In Modal → Form → Settings tab → Data prop, set the following:


Screenshot 2024-03-12 at 2.16.04 PM

Can you confirm that you have set the Lookup field (as seen in the screenshot) correctly?

You can also check the video tutorial on forms available on Youtube for a more detailed explanation of this: Creating forms | Learn Plasmic

1 Like

Sarah
I was able to make it work.
Thanks for your help!

Also, plasmic videos helped me to test and learn other things.