# Linked Data Tables

## Keeping Tables in Sync

Imagine you have two tables on your page:

1. **Accounts Table:** This table (`accountsDatatable`) lists all your customer accounts.
2. **Contacts Table:** This table (`contactsDatatable`) lists all the contact people for your accounts.

**The Goal:** When you select an account in the Accounts Table, you want the Contacts Table to automatically update and show only the contacts for *that specific* account.

## **How to Make It Happen**

### **The Accounts Table**

* Drag the Avonni Data Table Component
* Make sure you've given this table the API name `accountsDatatable`.
* Configure the Data Source by using the Query Data Source
* Select the Accounts object
* Configure the Data Mappings to create columns

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

### **The Contacts Table**

* This table is also set up, showing all your contacts.
* Go to the "Data Source" section in the table's settings.
* Choose the "Query Data Source" option.
* Select the object that holds your contact information (e.g., "Contact").
* Add a filter condition:
  * Field: `Account Id` (or whichever field links contacts to accounts)
  * Operator: `Equals`
  * Value: `{{accountsDatatable.selectedRecord.Id}}`
    * This expression code tells the Contacts Table to show only contacts whose Account ID matches the ID of the selected row in the Accounts Table.
* Create columns by adding fields.

### **The Result**

* Users browse their account list in the Accounts Table.
* They click on an account.
* The Contacts Table instantly updates to show only the contacts associated with that chosen account.

This keeps your tables in sync and provides a smooth, intuitive user experience.


---

# 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/experience-cloud/tutorials/reactive-components/linked-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.