# Master-Detail Relationship with Data Tables

## Overview

This tutorial demonstrates how to create a classic *master-detail* relationship between two Avonni [Data Table](/dynamic-components/components/data-table.md) components. You'll build a component where:

* One Data Table (the "master") displays a list of Accounts.
* A second Data Table (the "detail") displays Contacts *related to the currently selected Account*.

<figure><img src="/files/0guTnpdTsSGvFEvOTgnt" alt=""><figcaption></figcaption></figure>

Setting up a reactive filter on the data source of the detail table is key. This filter dynamically updates based on the selected row in the master table, ensuring that only the relevant Contacts are displayed. This creates a seamless and interactive user experience.&#x20;

We will be following those steps:

* Set up the account table, also called the master table.
* Set up the contact table, the details one.
* Create the reactive filter to link those two tables.
* Test

## Guided Steps

{% stepper %}
{% step %}

#### **Set Up the Accounts Data Table (Mast**

* Add an Avonni Data Table component to your page.
* Configure its data source to display a list of Accounts (using a Query).
  {% endstep %}

{% step %}

#### **Set Up the Contacts Data Table (Detail**

* Add another Avonni Data Table component to your page.
* Configure its data source to display Contacts (using the **Avonni Query Data Source**).

{% hint style="success" %}

## Handy Tip

You can use a [column component](/dynamic-components/components/columns.md) to display your two data tables side by side.
{% endhint %}
{% endstep %}

{% step %}

#### **Create the Reactive Filter**

* **Add a Filter Condition:**
  * **Field:** Select the `AccountId` field on the Contact object (or the field linking Contacts to Accounts).
  * **Operator:** Choose `equals`.
  * **Value:** *Do not enter a fixed value.* Instead, reference the selected Account's ID:

    ```
    !AccountsTable.firstSelectedRow.Id
    ```

    * **Explanation:**
      * `!AccountsTable`: Your Accounts Data Table component (use the API *name*).
      * `.firstSelectedRow`: The currently selected row in the Accounts table.
      * `.Id`: The `Id` field from that selected row.
  * Make sure to use the correct names for the component and field.

<figure><img src="/files/E4BFeU36Fr4N06avfwYw" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### **Test the Reactivity**

* Preview your page.
* Select different Accounts in the Accounts Data Table. The Contacts Data Table should automatically update.
  {% endstep %}
  {% endstepper %}


---

# 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.avonnicomponents.com/dynamic-components/tutorials/reactive-components/data-relationships/master-detail-relationship-with-data-tables.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.