> 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-de/experience-components/ax-data-table.md).

# AX - Datentabelle

## Übersicht

**AX - Datentabelle** ist eine Experience-Cloud-Komponente, die Ihre Salesforce-Datensätze in einer interaktiven Tabelle auf Experience-Sites-Seiten (früher Community Cloud) anzeigt.

Verwenden Sie sie, um Portalbenutzern gefilterte Datensätze mit vollständiger Kontrolle über Spalten, Sortierung, Suche und Paginierung anzuzeigen. Abrufen von Datensätzen aus beliebigen Standard- oder benutzerdefinierten Objekten und externen Benutzern ermöglichen, Daten anzuzeigen, zu suchen und mit für ihr Konto oder Profil relevanten Daten zu interagieren.

Perfekt für Kundenportale, die die Bestellhistorie anzeigen, Partnerportale, die die Bestellhistorie anzeigen, Partnerportale, die freigegebene Datensätze anzeigen, oder Self-Service-Sites, auf denen Benutzer ihre eigenen Daten finden und anzeigen müssen.

{% hint style="success" %}
Die Avonni-Datentabelle ist eine [reaktive Datenkomponente](/experience-cloud/experience-cloud-de/erste-schritte/reactive-components.md)
{% endhint %}

## Erste Schritte

Verwenden Sie dieses einfache Tutorial, um die Grundlagen der Datentabellenkomponente zu lernen und mit der Umsetzung Ihrer Anwendungsfälle zu beginnen.

{% @arcade/embed url="<https://app.arcade.software/share/oAo6XOMWRBc7Vn4Y9XNd>" flowId="oAo6XOMWRBc7Vn4Y9XNd" %}

## Anleitungen

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Erstellen Sie auf der Datentabelle eine Schaltfläche zum Exportieren</strong></td><td><a href="/spaces/dHOej9Pd5IxJNGEJMZKW/pages/5u7NY8IG7F8KC9xYxSSb">/spaces/dHOej9Pd5IxJNGEJMZKW/pages/5u7NY8IG7F8KC9xYxSSb</a></td></tr><tr><td><strong>Datentabelle konfigurieren</strong></td><td><a href="/spaces/dHOej9Pd5IxJNGEJMZKW/pages/7lv0HK9VpCriTFHSx1Yz">/spaces/dHOej9Pd5IxJNGEJMZKW/pages/7lv0HK9VpCriTFHSx1Yz</a></td></tr><tr><td><strong>Salesforce-CMS-Dateien in einer Datentabelle anzeigen</strong></td><td><a href="/pages/6ce70b8121e840b6af46cad88a8d4e1cfcb977cf">/pages/6ce70b8121e840b6af46cad88a8d4e1cfcb977cf</a></td></tr></tbody></table>

## Konfiguration

### Datenquelle

Im Abschnitt Datenquelle verbinden Sie die Avonni-Datentabelle mit Ihren Salesforce-Daten. Sie haben zwei Optionen.

<table><thead><tr><th>Typ der Datenquelle</th><th width="250.33333333333331">Beschreibung</th><th>Anwendungsfall</th></tr></thead><tbody><tr><td><strong>Manuell</strong></td><td>Daten manuell in die Datentabelle eingeben.</td><td>Ideal für nicht-dynamische Daten, Tests und Demos.</td></tr><tr><td><strong>Abfrage</strong></td><td>Erstellen Sie eine Abfrage, um die Tabelle automatisch mit Salesforce-Daten zu füllen.</td><td>Geeignet für dynamische, Echtzeit- und große Datensätze.</td></tr><tr><td><strong>CMS-Sammlung</strong></td><td>Zeigen Sie Ihre CMS-Sammlungen nahtlos in Datentabellen an, um Inhalte dynamisch zu aktualisieren.</td><td>Erstellen Sie automatisch aktualisierte Ressourcenlisten oder Nachrichten-Feeds.</td></tr></tbody></table>

<figure><img src="/files/90c4b52cf46fec385b23f9083ea4b535be2349cb" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Im Abfragemodus werden die Daten in Chargen von 25 Datensätzen angezeigt, um eine optimale Site-Performance zu gewährleisten.
{% endhint %}

### Datenzuordnung

Im Abschnitt Datenzuordnungen erwecken Sie Ihre Datentabelle zum Leben, indem Sie ihre Spalten definieren und anpassen.

<details>

<summary>Freigabe des Datenmodells mit der Avonni-Datentabelle</summary>

**Einhaltung der Salesforce-Datenfreigaberegeln:**

* **Berücksichtigung der Org-Einstellungen:** Avonni-Komponenten entsprechen vollständig den vorhandenen Datenfreigabekonfigurationen und Zugriffseinstellungen Ihrer Salesforce-Organisation.
* **Nicht-Eingriff-Richtlinie:** Diese Komponenten ändern oder beeinflussen Ihre bereits festgelegten Datenfreigaberegeln in keiner Weise.
* **Kontrollierte Sichtbarkeit und Zugriff:** Die Möglichkeit, Datensätze über Avonni-Komponenten anzuzeigen und mit ihnen zu interagieren, wird durch die von Ihrer Organisation definierten Freigabeeinstellungen und Benutzerberechtigungen gesteuert

</details>

#### Spalten hinzufügen

* Klicken Sie auf die Schaltfläche „Spalten hinzufügen“, um Felder aus Ihrer Datenquelle auszuwählen und sie als Spalten in der Datentabelle anzuzeigen.

<figure><img src="/files/696eb2b6dbc3477ac3d197eb7bbb0b455a96a507" alt=""><figcaption></figcaption></figure>

* Dieser Abschnitt bestimmt, welche Daten sichtbar sind und wie sie in Ihrer Tabelle angeordnet werden.
* Klicken Sie auf eine Spalte, um auf alle Eigenschaften für diese spezielle Spalte zuzugreifen.

<figure><img src="/files/4230c417ca2cedd2a261bcd49c53b3504a6da015" alt=""><figcaption></figcaption></figure>

#### Spalteneigenschaften konfigurieren

* **Datentyp:** Passen Sie den Anzeigetyp des Feldes an (z. B. Text, Zahl, Datum), um eine korrekte Datendarstellung sicherzustellen.
* **Verlinken:** Aktivieren Sie die Verknüpfung von Zelleninhalten mit anderen Datensätzen oder URLs für eine schnelle Navigation.
* **Zellattribute:** Passen Sie die Ausrichtung und die Symbole der Zellen an, um eine intuitivere und optisch ansprechendere Tabelle zu erstellen.
* **Bearbeitbar:** Legen Sie fest, ob eine Spalte direkt in der Tabelle bearbeitbar sein soll.
* **Filterbar und durchsuchbar:** Aktivieren Sie das Filtern und Suchen pro Spalte für eine effiziente Datenverwaltung.
* **Ausgeblendet:** Wählen Sie aus, bestimmte Spalten auszublenden, was für sensible oder weniger relevante Daten nützlich ist.
* **Sortierbar:** Ermöglichen Sie Benutzern, Daten nach der angegebenen Spalte zu sortieren.
* **Standardaktionen ausblenden:** Wählen Sie aus, voreingestellte Aktionen auszublenden, um ein saubereres Erscheinungsbild zu erhalten.
* **Text umbrechen:** Aktivieren Sie den Textumbruch für eine bessere Lesbarkeit in schmalen Spalten.
* **Spaltenbreite festlegen:** Geben Sie die Breite jeder Spalte an, um ein ausgewogenes und übersichtliches Layout zu erzielen.

#### Zeilenaktionen hinzufügen

Hier ist ein geführtes interaktives Tutorial zum Hinzufügen von Zeilenaktionen zur Datentabelle.

{% @arcade/embed url="<https://app.arcade.software/share/db617gnzKCL8QA22aziq>" flowId="db617gnzKCL8QA22aziq" %}

### Grundeinstellungen

**Tabellenkopf ausblenden**

* Mit dieser Option können Sie den Tabellenkopf entfernen, um ein saubereres und minimalistisches Erscheinungsbild zu erhalten.

<figure><img src="/files/3da0673e96460d3e6f738f35cd18c3dee30aec0b" alt=""><figcaption></figcaption></figure>

**Checkbox-Spalten ausblenden**

* Aktivieren Sie diese Einstellung, um die Checkbox-Spalten auszublenden, die typischerweise für die Zeilenauswahl in Multiaktionsszenarien verwendet werden.

<figure><img src="/files/4db37d094e7f09617062f6194b2187bbd5afed9b" alt=""><figcaption></figcaption></figure>

**Spalte mit Zeilennummern anzeigen**

* Aktivieren Sie dies, um eine Spalte anzuzeigen, die jede Zeile nummeriert, was für eine einfache Datenreferenz nützlich ist.

### Kopfzeilenkonfiguration

**Titel und Beschriftung**

* Passen Sie den Kopfbereich mit einem Titel und einer Beschriftung an, um Kontext oder Zusammenfassungsinformationen zu den Tabellendaten bereitzustellen.

**Symbolname und -größe**

* Erweitern Sie den Kopfbereich mit einem Symbol, indem Sie Typ und Größe für eine visuelle Hervorhebung auswählen.

**Ist verbunden**

* Diese Einstellung bestimmt, ob der Kopfbereich visuell mit dem Tabellenkörper verbunden ist, was das Gesamtdesign beeinflusst.

**Kopfzeilenaktionen**

* Konfigurieren Sie Aktionen (hinzufügen, löschen oder benutzerdefinierte Funktionen), die direkt über den Tabellenkopf zugänglich sind.

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

### Aktionsschaltflächen im Kopfbereich

* Implementieren Sie Aktionsschaltflächen im Tabellenkopf zum Hinzufügen neuer Datensätze, zum Exportieren von Daten oder für andere benutzerdefinierte Aktionen, um die Benutzerinteraktion und Effizienz zu verbessern.

<figure><img src="/files/169e3764cc0dab08defe2626bd27ee8c3146a2a7" alt=""><figcaption></figcaption></figure>

#### Die Interaktion für die Schaltfläche konfigurieren

Konfigurieren Sie die Interaktion, wenn Benutzer im Abschnitt „On Click“ auf die Kopfzeilen-Aktionsschaltfläche klicken. Um zu verstehen, wie die Interaktion „Navigate“ funktioniert, [klicken Sie hier](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/navigate.md) für weitere Informationen.

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

#### Tutorial

{% content-ref url="/spaces/dHOej9Pd5IxJNGEJMZKW/pages/5u7NY8IG7F8KC9xYxSSb" %}
[Create an Export To button on the Data Table](/projects/experience-cloud-components/create-an-export-to-button-on-the-data-table.md)
{% endcontent-ref %}

### Paginierungsattribute

* Konfigurieren Sie Paginierungseinstellungen wie die Anzahl der Elemente pro Seite und den Paginierungsstil, um zu steuern, wie Daten in größeren Tabellen angezeigt und navigiert werden.

{% hint style="info" %}
Im Abfragemodus werden Daten in Sätzen von 25 Datensätzen angezeigt, um die Site-Performance optimal zu halten. Daher kann die Einrichtung der Paginierung sinnvoll sein.
{% endhint %}

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

### Suchkonfiguration

* **Platzhalter:** Legen Sie einen Platzhaltertext für das Suchfeld fest, um Benutzern Hinweise darauf zu geben, wonach sie suchen können.
* **Position:** Wählen Sie die Position des Suchfelds innerhalb des Tabellenlayouts für optimale Zugänglichkeit.
* **Standard-Suchwert:** Legen Sie einen Suchwert im Voraus fest, um die Tabellendaten beim Laden zu filtern.

{% hint style="info" %}
Um das Suchfeld anzuzeigen, muss mindestens eine Spalte als „Searchable“ markiert sein.
{% endhint %}

<div><figure><img src="/files/d8711876fee434c6b48bbe86b1416dc99f2668aa" alt=""><figcaption></figcaption></figure> <figure><img src="/files/0f2f7f88f97700fc17f7cfa927ee3191865efef5" alt=""><figcaption><p>Mindestens eine Spalte muss auf „Searchable“ gesetzt sein, um das Suchfeld anzuzeigen.</p></figcaption></figure></div>

### Einstellungsreferenz

#### Allgemein

**Tabellenkopf ausblenden** blendet den Tabellenkopf aus, **Tabellenrahmen ausblenden** blendet zusätzlich die Tabellenrahmen aus (nur wenn **Tabellenkopf ausblenden** ebenfalls aktiviert ist), und **Checkbox-Spalte ausblenden** entfernt die Spalte, die für Zeilenauswahl-Checkboxen verwendet wird. **Spalte mit Zeilennummern anzeigen** zeigt eine Spalte mit Zeilennummern an, und **Versatz der Zeilennummer** legt die Startnummer für diese Nummerierung fest.

**Maximale Zeilenauswahl** begrenzt die maximale Anzahl auswählbarer Zeilen, **Schlüsselwert der Zeilen mit deaktivierter Auswahl** listet die durch Kommas getrennten Schlüssel-Feldwerte der Zeilen auf, die für die Auswahl deaktiviert werden sollen, **Anzahl ausgewählter Elemente anzeigen** zeigt die Anzahl der aktuell ausgewählten Elemente an, und **Untere Leiste ausblenden** blendet die untere Leiste aus, die typischerweise für Aktionen und die Anzeige von Informationen verwendet wird.

**Schreibgeschützt** macht die Tabelle nicht interaktiv und verbietet Bearbeitungen oder Auswahlen. **Bearbeiten auf allen Spalten erlauben**, **Filtern auf allen Spalten erlauben**, **Suche auf allen Spalten erlauben**, **Sortieren auf allen Spalten erlauben**, und **Textumbruch auf allen Spalten erlauben** aktivieren Sie Bearbeitung, Filterung, Suche, Sortierung und Textumbruch für jede Spalte, und **Standardaktionen ausblenden** blendet vordefinierte Aktionen wie Bearbeiten oder Löschen aus. **Tabellenkopf umbrechen** bricht lange Kopfzeilenbeschriftungen um, statt sie abzuschneiden.

**Modus der Spaltenbreiten** wählt `fest` oder `automatisch` Spaltenbreiten, **Max./Min. Spaltenbreite** legt Breitenbegrenzungen fest, **Maximale Zeilen beim Textumbruch** begrenzt die Anzahl der Zeilen für umbrochenen Zellentext, **Spaltenänderung deaktiviert** schaltet die Größenänderung von Spalten aus, und **Änderungsschritt** legt den Schritt für die Größenänderung fest.

**Sortierte/Standard-Sortierrichtung** legt die anfängliche Sortierrichtung fest (`asc` oder `desc`), und **Nach Wert sortiert anzeigen** zeigt an, welche Spalte derzeit zum Sortieren verwendet wird.

**Kopfzeilen-Titel/Beschriftung** legt den Kopfzeilentitel und die Beschriftung fest, **Name/Größe des Kopfzeilensymbols** fügt ein Kopfzeilensymbol in einer gewählten Größe hinzu, und **Kopfzeile ist verbunden** verbindet die Kopfzeile visuell mit dem Tabellenkörper. **Kopfzeilenaktionen ausblenden/deaktivieren**, **Sichtbare Kopfzeilen-Aktionsschaltflächen**, und **Kopfzeilenaktionen** steuern die Sichtbarkeit, Anzahl und Definition der Kopfzeilen-Aktionsschaltflächen.

#### Paginierung und Suche

**Paginierung anzeigen** schaltet die Anzeige der Paginierungssteuerelemente um, und **Anzahl der Elemente pro Seite** legt fest, wie viele Elemente pro Seite angezeigt werden. Das **Pill-Container** zeigt einen Container für ausgewählte Elemente an, der häufig bei der Zeilenauswahl verwendet wird.

Für die Suche, **Platzhalter** legt den Platzhaltertext des Suchfelds fest, **Position** definiert die Position der Suchleiste, und **Standard-Suchwert** füllt sie vorab mit einem Standardwert.

#### Filterung und Datenquelle

**Filteroptionen** konfigurieren Sie die Filterung so, dass sie für jede Spalte als Popover angezeigt wird. **Datenquelle** wählt zwischen `manuell` und `Abfrage` zum Befüllen der Tabellendaten, und **Spalten** definiert und fügt die Spalten der Tabelle hinzu und passt die Eigenschaften und das Verhalten jeder Spalte an.

## Gestaltung

{% tabs %}
{% tab title="Kopfzeile" %}

| Name                                           | Beschreibung                                                                                            |
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| **Hintergrundfarbe**                           | Legt die Farbe des Kopfzeilenhintergrunds fest.                                                         |
| **Rahmenfarbe**                                | Definiert die Farbe des Kopfzeilenrahmens.                                                              |
| **Rahmenstärke**                               | Passt die Stärke des Rahmens an.                                                                        |
| **Rahmenstil**                                 | Wählt den Stil (durchgezogen, gepunktet, gestrichelt usw.) des Rahmens.                                 |
| **Rahmenradius**                               | Rundet die Ecken der Kopfzeile ab.                                                                      |
| **Farbe des unteren Rahmens (ist verbunden)**  | Gibt die Farbe des unteren Rahmens an, wenn die Kopfzeile visuell mit dem Tabellenkörper verbunden ist. |
| **Stärke des unteren Rahmens (ist verbunden)** | Bestimmt die Stärke des verbundenen unteren Rahmens.                                                    |
| **Stil des unteren Rahmens (ist verbunden)**   | Legt den Stil für den verbundenen unteren Rahmen fest.                                                  |
| **Innen- und Außenabstand**                    | Steuert den Abstand innerhalb (Padding) und außerhalb (Margin) der Kopfzeile.                           |
| {% endtab %}                                   |                                                                                                         |

{% tab title="Kopfzeilentitel" %}

| Name              | Beschreibung                                                        |
| ----------------- | ------------------------------------------------------------------- |
| **Farbe**         | Legt die Farbe des Titeltexts fest.                                 |
| **Schriftgröße**  | Passt die Größe des Titeltexts an.                                  |
| **Schriftstärke** | Ändert die Fettung des Titeltexts.                                  |
| **Schriftstil**   | Wendet einen bestimmten Stil (kursiv, normal) auf den Titeltext an. |
| {% endtab %}      |                                                                     |

{% tab title="Kopfzeilenbeschriftung" %}

| Name              | Beschreibung                                |
| ----------------- | ------------------------------------------- |
| **Farbe**         | Definiert die Farbe des Beschriftungstexts. |
| **Schriftgröße**  | Passt die Größe des Beschriftungstexts an.  |
| **Schriftstärke** | Steuert die Stärke des Beschriftungstexts.  |
| **Schriftstil**   | Legt den Stil des Beschriftungstexts fest.  |
| {% endtab %}      |                                             |

{% tab title="Kopfzeilensymbol" %}

| Name                         | Beschreibung                                                        |
| ---------------------------- | ------------------------------------------------------------------- |
| **Hintergrundfarbe**         | Legt die Hintergrundfarbe des Symbols fest.                         |
| **Vordergrundfarbe**         | Ändert die Farbe des Symbols selbst.                                |
| **Vordergrund-Farb-Utility** | Passt die Hilfsfarbe für Kontrast oder Hervorhebung an.             |
| **Rahmenradius**             | Rundet die Ecken des Symbols für ein weicheres Erscheinungsbild ab. |
| {% endtab %}                 |                                                                     |

{% tab title="Pill-Container" %}

| Name                              | Beschreibung                                                                                    |
| --------------------------------- | ----------------------------------------------------------------------------------------------- |
| **Pillen-Hintergrundfarbe/Hover** | Legt die Hintergrundfarbe der Pillen-Elemente fest, mit einer anderen Farbe beim Darüberfahren. |
| **Pillen-Textfarbe/Hover**        | Ändert die Textfarbe innerhalb der Pille, mit einer anderen Farbe beim Darüberfahren.           |
| **Pillen-Zeilenhöhe**             | Passt die Zeilenhöhe innerhalb der Pille für die Textausrichtung an.                            |
| {% endtab %}                      |                                                                                                 |

{% tab title="Avatar" %}

| Name                                  | Beschreibung                                                                                                                                |
| ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| **Objektanpassung des Avatar-Bildes** | Bestimmt, wie das Avatar-Bild in seinen Container passen soll. Zu den Optionen gehören 'fill', 'contain', 'cover', 'none' und 'scale-down'. |
| {% endtab %}                          |                                                                                                                                             |

{% tab title="Paginierungsschaltflächen" %}

| Name                         | Beschreibung                                                                                                        |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| **Gestaltungseinstellungen** | Passt das Erscheinungsbild der Paginierungsschaltflächen an, einschließlich Farb-, Größen- und Rahmeneigenschaften. |
| {% endtab %}                 |                                                                                                                     |

{% tab title="Fußzeile" %}

| Name                 | Beschreibung                                   |
| -------------------- | ---------------------------------------------- |
| **Hintergrundfarbe** | Legt die Farbe des Fußzeilenhintergrunds fest. |
| **Rahmenfarbe**      | Definiert die Farbe des Fußzeilenrahmens.      |
| **Rahmenstärke**     | Passt die Stärke des Rahmens an.               |
| **Rahmenstil**       | Wählt den Stil des Rahmens aus.                |
| **Rahmenradius**     | Rundet die Ecken der Fußzeile ab.              |
| {% endtab %}         |                                                |
| {% endtabs %}        |                                                |

## Anwendungsfälle

### Beispiel 1: Erweiterte Kontenliste und zugehörige Kontakte

{% @arcade/embed url="<https://app.arcade.software/share/sxcJn4NliMFN6qTRk5Mi>" flowId="sxcJn4NliMFN6qTRk5Mi" %}

Geben Sie Ihren Partnern eine leistungsstarke, intuitive Möglichkeit, Kontodaten zu erkunden, mit Inline-Suche, Filterung und einem Live-Kontaktbereich, der sich beim Navigieren aktualisiert.

***

#### **Was Sie erreichen werden**

* **Durchsuchbare, filterbare Kontenliste:** Ermöglichen Sie Partnern, Konten schnell anhand von Name oder Branche mit integrierten Such- und Filtersteuerelementen zu finden.
* **Inline-verlinkte Datensätze:** Machen Sie Kontonamen anklickbar, damit Partner direkt zu den Datensatzdetailseiten springen können.
* **Dynamisches Panel mit zugehörigen Kontakten:** Zeigen Sie eine zweite Tabelle an, die sich automatisch aktualisiert, um Kontakte anzuzeigen, die mit dem jeweils ausgewählten Konto verknüpft sind.
* **Paginierte Ergebnisse:** Halten Sie die Benutzeroberfläche sauber und leistungsfähig, indem Sie die sichtbaren Datensätze pro Seite begrenzen.

***

#### **Bevor Sie beginnen**

* **Zweispaltiges Seitenlayout:** Stellen Sie sicher, dass Ihre Konto-Listenseite im Experience Builder bereits über ein zweispaltiges Layout verfügt, das beide Komponenten aufnehmen kann.

***

#### **Einrichtung**

{% stepper %}
{% step %}

#### **Fügen Sie die erste AX - Datentabelle zu Ihrer Seite hinzu**

* Ziehen Sie eine AX - Datentabelle-Komponente in die linke Spalte Ihrer Konto-Listenseite im Experience Builder.
  {% endstep %}

{% step %}

#### **Wählen Sie eine Datenquelle**

* Wählen **Konten abfragen** als Datenquelle für diese Komponente.
  {% endstep %}

{% step %}

#### **Legen Sie Ihre Datenzuordnungen fest**

* Fügen Sie die folgenden Spalten hinzu: Name, Industry, Owner.FullName und Phone.
* Aktivieren Sie **Verlinken** in der Namensspalte, damit Kontonamen anklickbare Links werden.
* Legen Sie **Industry** als Filterfeld fest.
* Legen Sie **Name** als Suchfeld fest.
  {% endstep %}

{% step %}

#### **Konfigurieren Sie die Komponente**

* Legen Sie **API-Name** auf `AccountsTable`.
* Legen Sie **Maximale Zeilenauswahl** auf `1` fest, sodass jeweils nur ein Konto gleichzeitig ausgewählt werden kann.
* Aktivieren Sie die Paginierung und legen Sie die **maximale Anzahl von Datensätzen** auf `10`.
  {% endstep %}

{% step %}

#### **Passen Sie den Kopfbereich an**

* Legen Sie **Kopfzeilentitel** auf `Konten`.
* Legen Sie **Kopfzeilensymbol** auf `standard:account_info`.
  {% endstep %}

{% step %}

#### **Fügen Sie die zweite AX - Datentabelle zu Ihrer Seite hinzu**

* Ziehen Sie eine zweite AX - Datentabelle-Komponente in die rechte Spalte derselben Seite.
  {% endstep %}

{% step %}

#### **Wählen Sie eine Datenquelle für die Kontakttabelle**

* Wählen **Kontakte abfragen** als Datenquelle.
* Fügen Sie einen Filter hinzu, sodass **AccountId** gleich `{{AccountsTable.selectedRecord.Id}}`, wodurch die Ergebnisse dieser Tabelle mit dem jeweils ausgewählten Konto verknüpft werden.
  {% endstep %}

{% step %}

#### **Legen Sie Ihre Datenzuordnungen fest**

* Fügen Sie die folgenden Spalten hinzu: Name und Title.
  {% endstep %}

{% step %}

#### **Konfigurieren Sie die Komponente**

* Legen Sie **API-Name** auf `relatedContactsTable`.
  {% endstep %}

{% step %}

#### **Passen Sie den Kopfbereich an**

* Legen Sie **Kopfzeilentitel** auf `Zugehörige Kontakte`.
* Legen Sie **Kopfzeilensymbol** auf `standard:contact`.
  {% endstep %}

{% step %}

#### **Zeigen Sie eine Vorschau Ihrer Seite an**

* Klicken Sie in Experience Builder auf Vorschau, wählen Sie eine Kontoreihe aus und bestätigen Sie, dass sich die Tabelle „Related Contacts“ dynamisch aktualisiert, um den ausgewählten Datensatz widerzuspiegeln.
  {% endstep %}
  {% endstepper %}

***

#### **Links**

{% content-ref url="/pages/4790f7f569b297634520bb7d90c8c2dcb7588dab" %}
[Verknüpfte Datentabellen](/experience-cloud/experience-cloud-de/anleitungen/reactive-components/linked-data-tables.md)
{% endcontent-ref %}

***

### Beispiel 2: Zugehörige Opportunities auf einer Kontoseite

{% @arcade/embed url="<https://app.arcade.software/share/tZa89LmaWt8n5CoQhwB8>" flowId="tZa89LmaWt8n5CoQhwB8" %}

Geben Sie Vertriebsnutzern eine Ansicht aller Opportunities, die mit einem Konto verknüpft sind, auf einen Blick – direkt dort, wo sie sie benötigen, ohne jemals die Datensatzseite zu verlassen.

***

#### **Was Sie erreichen werden**

* **Umfassendere 360°-Kundensicht:** Zeigen Sie wichtige Opportunity-Daten direkt auf der Kontoseite an, damit Vertriebsnutzer das Gesamtbild an einem Ort erhalten.
* **Vollständig aufgebaute Datensatzseiten:** Erstellen Sie dichte, informationsreiche Seiten, die das Wechseln zwischen Registerkarten oder Objekten überflüssig machen, um eine Pipeline zu bearbeiten.

***

#### **Bevor Sie beginnen**

* **Kontodatensatzseite mit vorhandenen Komponenten:** Stellen Sie sicher, dass Ihre Kontodatensatzseite in Experience Builder bereits Datensatzdetails, ein Banner und ein Spaltenlayout enthält, das bereit ist, die neue Komponente aufzunehmen.

***

#### **Einrichtung**

{% stepper %}
{% step %}

#### **Fügen Sie die AX - Datatable zu Ihrer Kontoseite hinzu**

* Ziehen Sie in Experience Builder eine AX - Datatable-Komponente auf Ihre Kontodatensatzseite.
  {% endstep %}

{% step %}

#### **Wählen Sie eine Datenquelle**

* Wählen **Opportunities abfragen** als Datenquelle für diese Komponente.
  {% endstep %}

{% step %}

#### **Legen Sie Ihre Datenzuordnungen fest**

* Fügen Sie die folgenden Spalten hinzu: Name, Phase und Betrag.
* Aktivieren Sie **Verlinken** in der Namensspalte, damit Opportunity-Namen anklickbare Links werden.
  {% endstep %}

{% step %}

#### **Konfigurieren Sie die Komponente**

* Legen Sie **API-Name** auf `RelatedOpportunities`.
* Fügen Sie einen Filter hinzu, sodass **AccountId** gleich `{!Item.id}`, wodurch die Ergebnisse auf das aktuell angezeigte Konto beschränkt werden.
  {% endstep %}

{% step %}

#### **Passen Sie den Kopfbereich an**

* Legen Sie **Kopfzeilentitel** auf `Verkaufschancen`.
* Legen Sie **Kopfzeilenstil** auf `Überschrift 2`.
* Legen Sie **Kopfzeilensymbol** auf `standard:opportunity`.
  {% endstep %}

{% step %}

#### **Zeigen Sie eine Vorschau Ihrer Seite an**

* Klicken Sie in Experience Builder auf Vorschau und navigieren Sie zu einem Kontodatensatz, um zu bestätigen, dass in der Tabelle nur Opportunities angezeigt werden, die mit diesem Konto verknüpft sind.
  {% endstep %}
  {% endstepper %}


---

# 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-de/experience-components/ax-data-table.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.
