> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/tutorial/reactive-components/linked-data-tables.md).

# Tabelle dati collegate

## Mantenere le tabelle sincronizzate

Immagina di avere due tabelle sulla tua pagina:

1. **Tabella Account:** Questa tabella (`accountsDatatable`) elenca tutti i tuoi account cliente.
2. **Tabella Contatti:** Questa tabella (`contactsDatatable`) elenca tutti i contatti per i tuoi account.

**L'obiettivo:** Quando selezioni un account nella Tabella Account, vuoi che la Tabella Contatti si aggiorni automaticamente e mostri solo i contatti per *quel* account.

## **Come realizzarlo**

### **La Tabella Account**

* Trascina il componente Avonni Data Table
* Assicurati di aver assegnato a questa tabella il nome API `accountsDatatable`.
* Configura l'origine dati utilizzando Query Data Source
* Seleziona l'oggetto Account
* Configura le mappature dei dati per creare colonne

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

### **La Tabella Contatti**

* Anche questa tabella è configurata e mostra tutti i tuoi contatti.
* Vai alla sezione "Data Source" nelle impostazioni della tabella.
* Scegli l'opzione "Query Data Source".
* Seleziona l'oggetto che contiene le informazioni dei contatti (ad es., "Contact").
* Aggiungi una condizione di filtro:
  * Campo: `ID Account` (o qualunque campo colleghi i contatti agli account)
  * Operatore: `Uguale a`
  * Valore: `{{accountsDatatable.selectedRecord.Id}}`
    * Questo codice di espressione indica alla Tabella Contatti di mostrare solo i contatti il cui ID account corrisponde all'ID della riga selezionata nella Tabella Account.
* Crea colonne aggiungendo campi.

### **Il risultato**

* Gli utenti consultano l'elenco dei propri account nella Tabella Account.
* Fanno clic su un account.
* La Tabella Contatti si aggiorna istantaneamente per mostrare solo i contatti associati a quell'account scelto.

In questo modo le tabelle restano sincronizzate e l'esperienza utente risulta fluida e intuitiva.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/tutorial/reactive-components/linked-data-tables.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.