How do I link a Table to another Component?

If you have a Table, and would like to have a separate form to view the details of a table’s record, you need to connect the Table with the Details component. To achieve this, start with adding a Table and loading data into it

The next step is to add a Details component. By default, it is connected to the previous Action, that’s why you’ll see the same fields there as in the Table.

Then, connect the component with the Table to see the Product info on the Details form upon a click on a certain Table’s record. Click on the Details and remove a default Action populated in the Data property field. Instead, we need to specify the value of the selected Table row. This can be done by using the variable selectedRow.data

Populate an object instead of the action into the Data property field following the pattern tableName.selectedRow.data - in our case that would be {{ ui.productsTable.selectedRow.data }}. Note that you can start typing selected - the autocomplete will suggest you all the available options

For further details on how to connect the components check out this guide