> 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-tree-grid.md).

# AX - Baumraster

**AX - Baumraster** ist eine Experience-Cloud-Komponente, die hierarchische Daten in einer Baumstruktur auf Experience-Sites-Seiten (früher Community Cloud) anzeigt, mit erweiterbaren und einklappbaren Zeilen sowie optionaler Zeilenauswahl.

## Übersicht

Verwenden Sie das Baumraster, um Parent-Child-Daten — wie Konten und die zugehörigen Kontakte, Kategorien und Unterkategorien oder beliebige verschachtelte Datensätze — in einer einzigen Tabelle darzustellen, in der Benutzer Zeilen erweitern und einklappen können, um in die Hierarchie einzutauchen. Jede Spalte wird einem Feld aus Ihrer Datenquelle zugeordnet, und Zeilen können ausgewählt, sortiert und paginiert werden.

## Konfiguration

Fügen Sie die Komponente in Experience Builder zu Ihrer Seite hinzu und konfigurieren Sie sie anschließend im Eigenschaftsbereich rechts.

### Datenquelle

Im Abschnitt „Datenquelle“ verbinden Sie das Baumraster mit Ihren Daten. Es sind zwei Quellentypen verfügbar.

| Typ der Datenquelle | Beschreibung                                                                              | Anwendungsfall                                     |
| ------------------- | ----------------------------------------------------------------------------------------- | -------------------------------------------------- |
| **Manuell**         | Geben Sie die Zeilen und ihre Spalten direkt im Builder ein.                              | Ideal für nicht dynamische Daten, Tests und Demos. |
| **Abfrage**         | Erstellen Sie eine Abfrage, die Salesforce-Objektfelder den Spalten der Tabelle zuordnet. | Geeignet für dynamische Echtzeitdaten.             |

### Datenzuordnung

Definieren Sie die Spalten der Tabelle, indem Sie jede einzelne einem Feld aus der ausgewählten Datenquelle zuordnen. Für jede Spalte können Sie Folgendes festlegen:

* **Feld:** das Quellfeld, an das die Spalte gebunden ist (bei Abfragequellen wählen Sie das Objektfeld oder ein benutzerdefiniertes Feld aus).
* **Bezeichnung:** der Text, der in der Spaltenüberschrift angezeigt wird — überschreiben Sie bei Bedarf die Standardbezeichnung mit einer benutzerdefinierten.
* **Datentyp:** wie der Wert formatiert wird (z. B. Text, Zahl, Währung, Datum, Prozent, URL, Boolesch oder Avatar), mit typspezifischen Attributen für den gewählten Typ.
* **Sortierbar:** ob Benutzer die Tabelle nach dieser Spalte sortieren können.
* **Text umbrechen:** ob langer Zelltext umgebrochen statt abgeschnitten wird.
* **Ausgeblendet:** ob die Spalte ausgeblendet ist.
* **Anfangsbreite:** die anfängliche Breite der Spalte.
* **Zellenattribute:** die Ausrichtung des Inhalts sowie ein optionales Zellensymbol und dessen Position.

### Allgemein

**API-Name** ist eine eindeutige Kennung zur Referenzierung der Komponente (3–30 Zeichen; Buchstaben, Ziffern, Unterstriche und Bindestriche).

**Tabellenkopf ausblenden** entfernt die Kopfzeile der Tabelle und **Kontrollkästchenspalte ausblenden** entfernt die Spalte für die Zeilenauswahl. **Anzahl ausgewählter Elemente anzeigen** zeigt die Anzahl der aktuell ausgewählten Zeilen an.

**Zeilennummernspalte anzeigen** fügt eine Spalte hinzu, die jede Zeile nummeriert, und **Versatz der Zeilennummern** legt die Startnummer für diese Nummerierung fest.

### Kopfzeile

**Kopfzeilentitel** und **Kopfzeilenuntertitel** fügen einen Titel und einen unterstützenden Untertitel über der Tabelle hinzu; **Textstil des Kopfzeilentitels** und **Textstil des Kopfzeilenuntertitels** legen den Textstil der jeweiligen Elemente fest (ein Überschrift- oder Absatzstil). **Name des Kopfzeilensymbols** fügt neben dem Titel ein Symbol hinzu, und **Größe des Kopfzeilensymbols** legt seine Größe fest. **Kopfzeile ist verbunden** entfernt den unteren Rahmenradius und Schatten der Kopfzeile, sodass sie bündig mit der darunterliegenden Tabelle abschließt.

### Spaltenbreiten

**Modus der Spaltenbreiten** wählt `feste` oder `automatische` Spaltenbreiten. **Maximale Spaltenbreite** und **Minimale Spaltenbreite** legen Sie die Breitenlimits fest, und **Spaltenanpassung deaktiviert** deaktiviert das manuelle Anpassen der Spaltenbreite.

### Symbol zum Ein-/Ausklappen von Zeilen

Legen Sie die Symbole fest, die zum Erweitern und Reduzieren einer Zeile verwendet werden: **Erweitert** wird angezeigt, wenn eine Zeile geöffnet ist, und **Reduziert** wenn sie geschlossen ist. Beide akzeptieren einen Symbolnamen des Lightning Design System.

### Kopfzeilenaktionen

Konfigurieren Sie Aktionsschaltflächen, die in der Tabellenkopfzeile angezeigt werden. Jede Aktion hat eine **Bezeichnung**, einen **Symbolname**, einen Hover- **Titel**, und **Alternativtext** für das Symbol der Schaltfläche. Konfigurieren Sie in deren **Bei Klick** -Abschnitt, was jede Schaltfläche bewirkt — siehe die [Navigieren](/experience-cloud/experience-cloud-de/eigenschaften-panel/interactions/navigate.md) -Interaktion für das Verhalten. **Sichtbare Schaltflächen für Kopfzeilenaktionen** legt fest, wie viele Aktionsschaltflächen angezeigt werden, bevor der Rest in ein Menü zusammengeklappt wird.

### Paginierung

**Anzahl der Elemente pro Seite** legt fest, wie viele zusätzliche Zeilen jeweils geladen werden, während der Benutzer durch die Daten blättert.

### Sortierung

**Standard-Sortierrichtung** legt die Richtung fest (`aufsteigend` oder `absteigend`), die angewendet wird, wenn eine Spalte zum ersten Mal sortiert wird.

## Styling

{% tabs %}
{% tab title="Größe" %}
Steuert die Abmessungen der Komponente.
{% endtab %}

{% tab title="Rand" %}
Steuert den äußeren Abstand um die Komponente.
{% endtab %}

{% tab title="Innenabstand" %}
Steuert den inneren Abstand der Komponente.
{% endtab %}

{% tab title="Flow-Dialog" %}
Steuert das Erscheinungsbild der Komponente, wenn sie in einem Flow-Dialog angezeigt wird.
{% endtab %}

{% tab title="Flow-Panel" %}
Steuert das Erscheinungsbild der Komponente, wenn sie in einem Flow-Panel angezeigt wird.
{% endtab %}
{% endtabs %}


---

# 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-tree-grid.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.