# Tableaux de données liés

## Garder les tableaux synchronisés

Imaginez que vous avez deux tableaux sur votre page :

1. **Tableau des comptes :** Ce tableau (`accountsDatatable`) répertorie tous vos comptes clients.
2. **Tableau des contacts :** Ce tableau (`contactsDatatable`) répertorie toutes les personnes de contact pour vos comptes.

**L'objectif :** Lorsque vous sélectionnez un compte dans le tableau des comptes, vous souhaitez que le tableau des contacts se mette automatiquement à jour et n'affiche que les contacts pour *ce* compte.

## **Comment le réaliser**

### **Le tableau des comptes**

* Faites glisser le composant Avonni Data Table
* Assurez-vous d'avoir donné à ce tableau le nom d'API `accountsDatatable`.
* Configurez la source de données en utilisant la source de données Query Data Source
* Sélectionnez l'objet Accounts
* Configurez les mappages de données pour créer des colonnes

<figure><img src="https://3803934262-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>

### **Le tableau des contacts**

* Ce tableau est également configuré et affiche tous vos contacts.
* Allez dans la section "Data Source" des paramètres du tableau.
* Choisissez l'option "Query Data Source".
* Sélectionnez l'objet qui contient vos informations de contact (par ex. « Contact »).
* Ajoutez une condition de filtre :
  * Champ : `Id du compte` (ou le champ qui relie les contacts aux comptes)
  * Opérateur : `Égal à`
  * Valeur : `{{accountsDatatable.selectedRecord.Id}}`
    * Ce code d'expression indique au tableau des contacts d'afficher uniquement les contacts dont l'ID de compte correspond à l'ID de la ligne sélectionnée dans le tableau des comptes.
* Créez des colonnes en ajoutant des champs.

### **Le résultat**

* Les utilisateurs parcourent leur liste de comptes dans le tableau des comptes.
* Ils cliquent sur un compte.
* Le tableau des contacts se met instantanément à jour pour n'afficher que les contacts associés à ce compte choisi.

Cela maintient vos tableaux synchronisés et offre une expérience utilisateur fluide et intuitive.