> 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/experience-components/ax-tree-grid.md). # AX - Grille arborescente **AX - Grille arborescente** est un composant Experience Cloud qui affiche des données hiérarchiques sous forme d’arborescence sur les pages Experience Sites (anciennement Community Cloud), avec des lignes extensibles et repliables et une sélection de ligne facultative. ## Vue d’ensemble Utilisez la grille arborescente pour présenter des données parent-enfant — comme des comptes et leurs contacts associés, des catégories et sous-catégories, ou tout enregistrement imbriqué — dans un tableau unique où les utilisateurs peuvent développer et réduire les lignes pour explorer la hiérarchie. Chaque colonne est associée à un champ de votre source de données, et les lignes peuvent être sélectionnées, triées et paginées. ## Configuration Ajoutez le composant à votre page dans Experience Builder, puis configurez-le depuis le panneau de propriétés à droite. ### Source de données La section Source de données est l’endroit où vous connectez la grille arborescente à vos données. Deux types de source sont disponibles. | Type de source de données | Description | Cas d’utilisation | | ------------------------- | --------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | | **Manuel** | Saisissez directement les lignes et leurs colonnes dans le générateur. | Idéal pour des données non dynamiques, des tests et des démonstrations. | | **Requête** | Créez une requête qui associe les champs d’un objet Salesforce aux colonnes du tableau. | Adapté aux données dynamiques en temps réel. | ### Mappage des données Définissez les colonnes du tableau en associant chacune d’elles à un champ de la source de données sélectionnée. Pour chaque colonne, vous pouvez définir : * **Champ :** le champ source auquel la colonne est liée (pour les sources de requête, choisissez le champ de l’objet ou un champ personnalisé). * **Libellé :** le texte affiché dans l’en-tête de la colonne — remplacez la valeur par défaut par un libellé personnalisé si nécessaire. * **Type de données :** la manière dont la valeur est mise en forme (par exemple texte, nombre, devise, date, pourcentage, URL, booléen ou avatar), avec des attributs spécifiques au type choisi. * **Triable :** indique si les utilisateurs peuvent trier le tableau par cette colonne. * **Retour à la ligne du texte :** indique si le texte long des cellules passe à la ligne au lieu d’être tronqué. * **Masqué :** indique si la colonne est masquée. * **Largeur initiale :** la largeur de départ de la colonne. * **Attributs de cellule :** l’alignement du contenu et, en option, une icône de cellule et sa position. ### Général **Nom de l’API** est un identifiant unique utilisé pour référencer le composant (3 à 30 caractères ; lettres, chiffres, traits de soulignement et tirets). **Masquer l’en-tête du tableau** supprime la ligne d’en-tête du tableau, et **Masquer la colonne de cases à cocher** supprime la colonne utilisée pour la sélection des lignes. **Afficher le nombre d’éléments sélectionnés** affiche le nombre de lignes actuellement sélectionnées. **Afficher la colonne des numéros de ligne** ajoute une colonne qui numérote chaque ligne, et **Décalage du numéro de ligne** définit le numéro de départ pour cette numérotation. ### En-tête **Titre de l’en-tête** et **Légende de l’en-tête** ajoutent un titre et une légende d’appui au-dessus du tableau ; **Style du texte du titre de l’en-tête** et **Style du texte de la légende de l’en-tête** définissent le style du texte de chacun (style de titre ou de paragraphe). **Nom de l’icône de l’en-tête** ajoute une icône à côté du titre, et **Taille de l’icône de l’en-tête** définit sa taille. **L’en-tête est joint** supprime le rayon et l’ombre de la bordure inférieure de l’en-tête afin qu’il s’aligne parfaitement avec le tableau en dessous. ### Largeurs des colonnes **Mode des largeurs des colonnes** choisit des largeurs de colonnes `fixes` ou `automatiques` . **Largeur maximale de colonne** et **Largeur minimale de colonne** définissent les limites de largeur, et **Redimensionnement de colonne désactivé** désactive le redimensionnement manuel des colonnes. ### Icône d’ouverture/fermeture de ligne Définissez les icônes utilisées pour développer et réduire une ligne : **Développée** est affichée lorsqu’une ligne est ouverte, et **Réduite** lorsqu’elle est fermée. Les deux acceptent le nom d’une icône Lightning Design System. ### Actions de l’en-tête Configurez les boutons d’action qui apparaissent dans l’en-tête du tableau. Chaque action comporte un **Libellé**, un **Nom de l’icône**, un **Titre**au survol, et **Texte alternatif** pour l’icône du bouton. Configurez ce que fait chaque bouton dans sa section **Au clic** — voir l’interaction [Naviguer](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/navigate.md) pour comprendre leur comportement. **Boutons d’actions visibles de l’en-tête** définit combien de boutons d’action sont affichés avant que les autres ne se replient dans un menu. ### Pagination **Nombre d’éléments par page** définit le nombre de lignes supplémentaires chargées à la fois lorsque l’utilisateur parcourt les pages des données. ### Tri **Direction de tri par défaut** définit la direction (`asc` ou `desc`) appliquée lorsqu’une colonne est triée pour la première fois. ## Style {% tabs %} {% tab title="Taille" %} Contrôle les dimensions du composant. {% endtab %} {% tab title="Marge" %} Contrôle l’espacement extérieur autour du composant. {% endtab %} {% tab title="Rembourrage" %} Contrôle l’espacement intérieur du composant. {% endtab %} {% tab title="Boîte de dialogue Flow" %} Contrôle l’apparence du composant lorsqu’il est affiché dans une boîte de dialogue Flow. {% endtab %} {% tab title="Panneau Flow" %} Contrôle l’apparence du composant lorsqu’il est affiché dans un panneau Flow. {% 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-fr/experience-components/ax-tree-grid.md?ask=&goal= ``` `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.