> 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).

# Tables de données liées

## Maintenir les tables synchronisées

Imaginez que vous avez deux tables sur votre page :

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

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

## **Comment le mettre en œuvre**

### **La table des comptes**

* Faites glisser le composant Avonni Data Table
* Assurez-vous d'avoir attribué à cette table le nom API `accountsDatatable`.
* Configurez la source de données en utilisant la requête de source de données
* Sélectionnez l'objet Accounts
* Configurez les correspondances de données pour créer des colonnes

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

### **La table des contacts**

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

### **Le résultat**

* Les utilisateurs parcourent leur liste de comptes dans la table des comptes.
* Ils cliquent sur un compte.
* La table 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.