Having two tables share one modal

[liorst]

Hi,

In my dashboard, I have two different tables that share the exact same columns but are populated based on different query conditions. When I click on a row in the table, I want a modal to open up with a form that lets you edit the fields of the selected row from that table. Currently, I have two different modals, one for each table, but they have the exact same form on them. The only different is that they have different datasources (each one has its respective table).

Is there a way to have just one modal for both of these tables to share it?

[ScottR]

You could just make the columns editable in each table...
or you can check the selectedIndex or selectedRow length when opening the modal and based on which table has a selectedIndex or selectedRow length > 0, that's what you can use. YOu can check using a ternary condition

[liorst]

Editable columns doesn't work in my situation unfortunately. I need a modal to open so I'm not sure how to connect both tables to the same modal

[ScottR]

If all fields are the same in the form, you can take the selected row value and store it in a temp variable and then read the temp variable into the form. You can use the Row select change event handler to populate the temp variable for either table...

[liorst]

can you elaborate more on what you mean by this?

[ScottR]

create a temp variable and sore yourTableName.selectedRow as it's source and make sure tables by default do not have a row selected.

In the form make sure you set the default values for the fields as the corresponding values for those fields in the variable.

And add event handlers in the modal component to clear selection of either table when the modal is closed.
dataTable row selected and variable

form default value example

modal close event handler // though the clear selection of rows can be done in other ways or at other times...

table1 selected and form