# 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="/files/0c63aa185e497784d9ebee100ad6870dcd6e98d4" 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.


---

# 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/experience-cloud-it/tutorial/componenti-reattivi/tabelle-dati-collegate.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.