# Verknüpfte Datentabellen

## Tabellen synchron halten

Stellen Sie sich vor, Sie haben zwei Tabellen auf Ihrer Seite:

1. **Konten-Tabelle:** Diese Tabelle (`accountsDatatable`) listet alle Ihre Kundenkonten auf.
2. **Kontakt-Tabelle:** Diese Tabelle (`contactsDatatable`) listet alle Kontaktpersonen für Ihre Konten auf.

**Das Ziel:** Wenn Sie ein Konto in der Konten-Tabelle auswählen, soll sich die Kontakt-Tabelle automatisch aktualisieren und nur die Kontakte für *jenes spezielle* Konto anzeigen.

## **So setzen Sie es um**

### **Die Konten-Tabelle**

* Ziehen Sie die Avonni Data Table Komponente
* Stellen Sie sicher, dass Sie dieser Tabelle den API-Namen gegeben haben `accountsDatatable`.
* Konfigurieren Sie die Datenquelle mithilfe der Query Data Source
* Wählen Sie das Accounts-Objekt
* Konfigurieren Sie die Datenzuordnungen, um Spalten zu erstellen

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

### **Die Kontakt-Tabelle**

* Auch diese Tabelle ist eingerichtet und zeigt alle Ihre Kontakte.
* Gehen Sie im Einstellungsbereich der Tabelle zum Abschnitt „Data Source“.&#x20;
* Wählen Sie die Option „Query Data Source“.&#x20;
* Wählen Sie das Objekt, das Ihre Kontaktinformationen enthält (z. B. „Contact“).
* Fügen Sie eine Filterbedingung hinzu:
  * Feld: `Account Id` (oder welches Feld auch immer Kontakte mit Konten verknüpft)
  * Operator: `Gleich`
  * Wert: `{{accountsDatatable.selectedRecord.Id}}`
    * Dieser Ausdruckscode sagt der Kontakt-Tabelle, nur Kontakte anzuzeigen, deren Account-ID mit der ID der ausgewählten Zeile in der Konten-Tabelle übereinstimmt.
* Erstellen Sie Spalten, indem Sie Felder hinzufügen.

### **Das Ergebnis**

* Benutzer durchsuchen ihre Kontoliste in der Konten-Tabelle.
* Sie klicken auf ein Konto.
* Die Kontakt-Tabelle wird sofort aktualisiert und zeigt nur die Kontakte an, die mit dem ausgewählten Konto verknüpft sind.

Dies hält Ihre Tabellen synchron und sorgt für ein reibungsloses, intuitives Benutzererlebnis.