> 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-fr/tutoriels/reactive-components/linked-data-tables.md).

# Tableaux de données liés

## Synchroniser les tables

Imaginez que vous ayez deux tables sur votre page :

1. **Tableau des comptes :** Cette table (`accountsDatatable`) répertorie tous vos comptes clients.
2. **Tableau des contacts :** Cette table (`contactsDatatable`) répertorie toutes les personnes de contact associées à 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 précis* .

## **Comment le mettre en place**

### **Le tableau des comptes**

* Faites glisser le composant de tableau de données Avonni
* 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 de requête
* Sélectionnez l’objet Accounts
* Configurez les mappages de données pour créer des colonnes

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

### **Le tableau des contacts**

* Ce tableau est également configuré et affiche tous vos contacts.
* Allez à la section « Data Source » dans les 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 quel que soit le champ qui relie les contacts aux comptes)
  * Opérateur : `Égale à`
  * 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 tables synchronisées et offre une expérience utilisateur fluide et intuitive.


---

# 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-fr/tutoriels/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.