# Tabelle dati collegate

## Mantenere le tabelle sincronizzate

Immagina di avere due tabelle nella tua pagina:

1. **Tabella Account:** Questa tabella (`accountsDatatable`) elenca tutti i tuoi account cliente.
2. **Tabella Contatti:** Questa tabella (`contactsDatatable`) elenca tutte le persone di contatto 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 *quell'* account specifico.

## **Come realizzarlo**

### **La Tabella Account**

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

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FujTcn7FaNoTNp48CLr3C%2F2024-05-28_20-33-37.png?alt=media&#x26;token=e7a9df0d-1ff1-4d52-8819-525e339db4d7" alt=""><figcaption></figcaption></figure>

### **La Tabella Contatti**

* Anche questa tabella è impostata 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 di contatto (es., "Contact").
* Aggiungi una condizione di filtro:
  * Campo: `Id Account` (o quale campo collega i contatti agli account)
  * Operatore: `Uguale`
  * 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 sfogliano la lista dei loro 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.

Questo mantiene le tue tabelle sincronizzate e offre un'esperienza utente fluida e intuitiva.