# Linking a Table to a Form/Detail

While building your app, you can use multiple components in UI Bakery, and the best thing is that you can link them to share data and state between them. In this article, we'll explore two of the most common scenarios of linking components.

{% hint style="success" %}
Here, we talk about [Table](/reference/working-with-components/table.md), [Form](/reference/working-with-components/form.md), and [Detail](/reference/working-with-components/detail.md) components.
{% endhint %}

## **Linking a Table to a Detail component**

Let’s say you have a Table and you would like to have a separate form to view the **details** of a specific record from the table. That means you need to connect the Table with the **Detail** component. 

In our example, we will use a *Products* table and we will add a *Detail* component to display product details. Let's dive in!

### To link Table and Detail:

1. Start by adding a **Table** to your working area.
2. Next, you need to [load your data](/build-from-scratch/getting-started/load-data.md) and then [bind](/build-from-scratch/getting-started/bind-data-to-ui.md) it to the Table.
3. Now,  you can add a **Detail** component. \
   By default, it is connected to the previous Action, that’s why you’ll see the same fields as in the previous dataset.
4. Remove this default action from the **Data** field of the **Detail** component.
5. Instead, specify the value of the selected Table row - use the `selectedRow.data` variable.

{% hint style="info" %}
Start typing `ui...` - the autocomplete will suggest all the available options.
{% endhint %}

As simple as that! Now you can check the result - product details will change as you select different records in the Table.

{% @arcade/embed flowId="4FzyuBTIr4XYLGonrV6k" url="<https://app.arcade.software/share/4FzyuBTIr4XYLGonrV6k>" %}

## **Linking a Table to a Form component**

Let's say you have a *Products* table and you would like to have a separate **form**, where you could both see and update record details. In this case, you could use a **Form** component instead of a Detail one. Let’s dive into how you can do that!

### To link Table and Form:

1. Start by adding a **Form** component to the working area.

{% hint style="info" %}
If you're starting anew, check out the [previous instruction](#to-link-table-and-detail) and repeat **steps 1-2** first.
{% endhint %}

2. In its **Data** field, specify the value of the selected Table row - use the `selectedRow.data` variable.

Done! The Table and Form are now linked and have the same structure. If you click on a Table row, the row values will appear in the Form.

If you want to customize it even further to be able to update record details from the form and send it back to the data source, then be sure to check out this [page](/build-from-scratch/getting-started/send-a-form.md).

<figure><img src="/files/XrjERkNHD7XklxGpA7Di" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.uibakery.io/concepts/components/work-with-components/linking-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.