> 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-data-table.md). # AX - Tableau de données ## Aperçu **AX - Tableau de données** est un composant Experience Cloud qui affiche vos enregistrements Salesforce dans un tableau interactif sur les pages des sites Experience (anciennement Community Cloud). Utilisez-le pour montrer aux utilisateurs du portail des ensembles de données filtrés avec un contrôle complet sur les colonnes, le tri, la recherche et la pagination. Récupérez des enregistrements à partir de n'importe quel objet standard ou personnalisé et permettez aux utilisateurs externes de consulter, rechercher et interagir avec les données pertinentes pour leur compte ou leur profil. Parfait pour les portails clients qui affichent l'historique des commandes, les portails partenaires qui affichent l'historique des commandes, les portails partenaires qui présentent des enregistrements partagés, ou les sites en libre-service où les utilisateurs doivent trouver et consulter leurs propres données. {% hint style="success" %} Le tableau de données Avonni est un [Composant de données réactif](/experience-cloud/experience-cloud-fr/premiers-pas/reactive-components.md) {% endhint %} ## Premiers pas Utilisez ce tutoriel simple pour apprendre les bases du composant Tableau de données et commencer à créer vos cas d'utilisation. {% @arcade/embed url="" flowId="oAo6XOMWRBc7Vn4Y9XNd" %} ## Tutoriels
Créer un bouton Exporter vers sur le Tableau de données/spaces/dHOej9Pd5IxJNGEJMZKW/pages/5u7NY8IG7F8KC9xYxSSb
Configuration du Tableau de données/spaces/dHOej9Pd5IxJNGEJMZKW/pages/7lv0HK9VpCriTFHSx1Yz
Affichage des fichiers Salesforce CMS dans un Tableau de données/pages/95f5170ef83434336d2304b0f5e6dfb075786df1
## Configuration ### Source de données La section Source de données est l'endroit où vous connectez le Tableau de données Avonni à vos données Salesforce. Vous avez deux options.
Type de source de donnéesDescriptionCas d'utilisation
ManuelSaisissez manuellement des données dans le tableau de données.Idéal pour des données non dynamiques, des tests et des démonstrations.
RequêteCréez une requête pour remplir automatiquement le tableau avec des données Salesforce.Adapté aux jeux de données dynamiques, en temps réel et volumineux.
Collection CMSAffichez de manière fluide vos collections CMS dans des tableaux de données pour des mises à jour de contenu dynamiques.Créez des listes de ressources ou des flux d'actualités se mettant à jour automatiquement.
{% hint style="info" %} En mode Requête, les données sont affichées par lots de 25 enregistrements afin de maintenir des performances optimales du site. {% endhint %} ### Mappage des données Vous donnez vie à votre tableau de données dans la section Mappages de données en définissant et en personnalisant ses colonnes.
Partage du modèle de données avec le Tableau de données Avonni **Respect des règles de partage des données Salesforce :** * **Respect des paramètres de l'organisation :** Les composants Avonni respectent pleinement les configurations de partage de données et les paramètres d'accès existants de votre organisation Salesforce. * **Politique de non-interférence :** Ces composants ne modifient ni n'affectent en aucune manière vos règles de partage de données préétablies. * **Visibilité et accès contrôlés :** La possibilité de consulter et d'interagir avec les enregistrements via les composants Avonni est régie par les paramètres de partage et les autorisations utilisateur définis par votre organisation
#### Ajout de colonnes * Cliquez sur le bouton « Ajouter des colonnes » pour sélectionner des champs de votre source de données à afficher comme colonnes dans le tableau de données.
* Cette section détermine quelles données sont visibles et comment elles sont organisées dans votre tableau. * Cliquez sur une colonne pour accéder à toutes les propriétés de cette colonne spécifique.
#### Configuration des propriétés des colonnes * **Type de données :** Ajustez le type d'affichage du champ (par exemple texte, nombre, date) pour garantir une représentation correcte des données. * **Lien automatique :** Activez la liaison des données de cellule vers d'autres enregistrements ou URL pour une navigation rapide. * **Attributs de cellule :** Personnalisez l'alignement des cellules et les icônes pour créer un tableau plus intuitif et visuellement attrayant. * **Modifiable :** Décidez si une colonne doit être modifiable directement dans le tableau. * **Filtrable et recherchable :** Activez le filtrage et la recherche par colonne pour une gestion efficace des données. * **Masquée :** Choisissez de masquer certaines colonnes, ce qui est utile pour les données sensibles ou moins pertinentes. * **Triable :** Permettez aux utilisateurs de trier les données selon la colonne spécifiée. * **Masquer les actions par défaut :** Choisissez de masquer les actions prédéfinies pour un rendu plus épuré. * **Retour à la ligne du texte :** Activez le retour à la ligne du texte pour une meilleure lisibilité dans les colonnes étroites. * **Définir la largeur de la colonne :** Spécifiez la largeur de chaque colonne pour obtenir une mise en page équilibrée et organisée. #### Ajout d'actions de ligne Voici un tutoriel interactif guidé sur l'ajout d'actions de ligne au Tableau de données. {% @arcade/embed url="" flowId="db617gnzKCL8QA22aziq" %} ### Paramètres de base **Masquer l'en-tête du tableau** * Cette option vous permet de supprimer l'en-tête du tableau pour un aspect plus épuré et minimaliste.
**Masquer les colonnes de cases à cocher** * Activez ce paramètre pour masquer les colonnes de cases à cocher, généralement utilisées pour la sélection de lignes dans des scénarios multi-actions.
**Afficher la colonne de numéros de ligne** * Activez cette option pour afficher une colonne qui numérote chaque ligne, ce qui est utile pour référencer facilement les données. ### Configuration de l'en-tête **Titre et légende** * Personnalisez l'en-tête avec un titre et une légende pour fournir un contexte ou un résumé des données du tableau. **Nom et taille de l'icône** * Améliorez l'en-tête avec une icône, en sélectionnant son type et sa taille pour un accent visuel. **Est joint** * Ce paramètre détermine si l'en-tête est visuellement relié au corps du tableau, ce qui affecte la conception globale. **Actions de l'en-tête** * Configurez des actions (ajout, suppression ou fonctions personnalisées) accessibles directement depuis l'en-tête du tableau.
### Boutons d'action dans l'en-tête * Implémentez des boutons d'action dans l'en-tête du tableau pour ajouter de nouveaux enregistrements, exporter des données ou effectuer d'autres actions personnalisées, améliorant ainsi l'interaction et l'efficacité des utilisateurs.
#### Configurer l'interaction sur le bouton Configurez l'interaction lorsque les utilisateurs appuient sur le bouton d'action de l'en-tête dans la section « Au clic ». Pour comprendre comment fonctionne l'interaction « Naviguer », [cliquez ici](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/navigate.md) pour plus d'informations.
#### Tutoriel {% 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 %} ### Attributs de pagination * Configurez les paramètres de pagination, tels que le nombre d'éléments par page et le style de pagination, pour gérer la manière dont les données sont affichées et parcourues dans les grands tableaux. {% hint style="info" %} En mode Requête, les données sont affichées par lots de 25 enregistrements pour maintenir des performances optimales du site. Par conséquent, la mise en place de la pagination peut être utile. {% endhint %}
### Configuration du moteur de recherche * **Espace réservé :** Définissez un texte d'espace réservé pour la zone de recherche afin d'indiquer aux utilisateurs ce qu'ils peuvent rechercher. * **Position :** Choisissez la position de la zone de recherche dans la mise en page du tableau pour une accessibilité optimale. * **Valeur de recherche par défaut :** Prédéfinissez une valeur de recherche pour filtrer les données du tableau au chargement. {% hint style="info" %} Pour afficher la zone de recherche, au moins une colonne doit être marquée comme « Recherchable ». {% endhint %}

Au moins une colonne doit être définie sur « Recherchable » pour afficher la zone de recherche.

### Référence des paramètres #### Général **Masquer l'en-tête du tableau** masque l'en-tête du tableau, **Masquer les bordures du tableau** masque également les bordures du tableau (uniquement lorsque **Masquer l'en-tête du tableau** est également activé), et **Masquer la colonne de cases à cocher** supprime la colonne utilisée pour les cases à cocher de sélection des lignes. **Afficher la colonne de numéros de ligne** affiche une colonne de numéros de ligne, et **Décalage du numéro de ligne** définit le numéro de départ de cette numérotation. **Sélection maximale de lignes** limite le nombre maximal de lignes pouvant être sélectionnées, **Valeur clé des lignes à sélection désactivée** répertorie les valeurs des champs clés des lignes, séparées par des virgules, qui doivent être désactivées pour la sélection, **Afficher le nombre d'éléments sélectionnés** affiche le nombre d'éléments actuellement sélectionnés, et **Masquer la barre inférieure** masque la barre inférieure, généralement utilisée pour les actions et l'affichage d'informations. **Lecture seule** rend le tableau non interactif, en interdisant les modifications ou les sélections. **Autoriser la modification sur toutes les colonnes**, **Autoriser le filtrage sur toutes les colonnes**, **Autoriser la recherche sur toutes les colonnes**, **Autoriser le tri sur toutes les colonnes**et **Autoriser le retour à la ligne sur toutes les colonnes** active la modification, le filtrage, la recherche, le tri et le retour à la ligne du texte sur chaque colonne, et **Masquer les actions par défaut** masque les actions prédéfinies comme modifier ou supprimer. **Retour à la ligne dans l'en-tête du tableau** met les longs libellés d'en-tête à la ligne au lieu de les tronquer. **Mode de largeur des colonnes** choisit `fixe` ou `automatique` des largeurs de colonnes, **Largeur max./min. de colonne** définit des limites de largeur, **Nombre maximal de lignes pour le retour à la ligne du texte** limite le nombre de lignes pour le texte renvoyé à la ligne dans les cellules, **Redimensionnement de colonne désactivé** désactive le redimensionnement des colonnes, et **Incrément de redimensionnement** définit l'incrément de redimensionnement. **Sens de tri trié/par défaut** définit le sens de tri initial (`croissant` ou `décroissant`), et **Afficher la valeur triée par** affiche la colonne actuellement utilisée pour le tri. **Titre/légende de l'en-tête** définit le titre et la légende de l'en-tête, **Nom/taille de l'icône de l'en-tête** ajoute une icône d'en-tête avec une taille choisie, et **L'en-tête est joint** relie visuellement l'en-tête au corps du tableau. **Masquer/désactiver les actions de l'en-tête**, **Boutons d'actions visibles de l'en-tête**et **Actions de l'en-tête** contrôlent la visibilité, le nombre et la définition des boutons d'action de l'en-tête. #### Pagination et recherche **Afficher la pagination** active ou désactive l'affichage des contrôles de pagination, et **Nombre d'éléments par page** définit combien d'éléments apparaissent par page. Le **Conteneur de pastilles** l'option affiche un conteneur pour les éléments sélectionnés, souvent utilisé avec la sélection de lignes. Pour la recherche, **Espace réservé** définit le texte d'espace réservé du champ de recherche, **Position** définit la position de la barre de recherche, et **Valeur de recherche par défaut** la préremplit avec une valeur par défaut. #### Filtrage et source de données **Options de filtrage** configure le filtrage pour l'afficher sous forme de popover pour chaque colonne. **Source de données** sélectionne entre `manuel` et `requête` pour renseigner les données du tableau, et **Colonnes** définit et ajoute les colonnes du tableau, en personnalisant les propriétés et le comportement de chaque colonne. ## Style {% tabs %} {% tab title="En-tête" %} | Nom | Description | | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------- | | **Couleur de fond** | Définit la couleur de fond de l'en-tête. | | **Couleur de bordure** | Définit la couleur de la bordure de l'en-tête. | | **Taille de la bordure** | Ajuste l'épaisseur de la bordure. | | **Style de bordure** | Sélectionne le style (plein, pointillé, tirets, etc.) de la bordure. | | **Rayon de bordure** | Arrondit les coins de l'en-tête. | | **Couleur de la bordure inférieure (est joint)** | Spécifie la couleur de la bordure inférieure lorsque l'en-tête est visuellement joint au corps du tableau. | | **Taille de la bordure inférieure (est joint)** | Détermine l'épaisseur de la bordure inférieure jointe. | | **Style de la bordure inférieure (est joint)** | Définit le style de la bordure inférieure jointe. | | **Marge intérieure et marge extérieure** | Contrôle l'espacement à l'intérieur (marge intérieure) et à l'extérieur (marge extérieure) de l'en-tête. | | {% endtab %} | | {% tab title="Titre de l'en-tête" %} | Nom | Description | | -------------------- | ------------------------------------------------------------------ | | **Couleur** | Définit la couleur du texte du titre. | | **Taille de police** | Ajuste la taille du texte du titre. | | **Poids de police** | Modifie le caractère gras du texte du titre. | | **Style de police** | Applique un style spécifique (italique, normal) au texte du titre. | | {% endtab %} | | {% tab title="Légende de l'en-tête" %} | Nom | Description | | -------------------- | -------------------------------------------- | | **Couleur** | Définit la couleur du texte de la légende. | | **Taille de police** | Ajuste la taille du texte de la légende. | | **Poids de police** | Contrôle l'épaisseur du texte de la légende. | | **Style de police** | Définit le style du texte de la légende. | | {% endtab %} | | {% tab title="Icône de l'en-tête" %} | Nom | Description | | ----------------------------------------- | -------------------------------------------------------------------- | | **Couleur de fond** | Définit la couleur de fond de l'icône. | | **Couleur de premier plan** | Modifie la couleur de l'icône elle-même. | | **Utilitaire de couleur de premier plan** | Ajuste la couleur utilitaire pour le contraste ou la mise en valeur. | | **Rayon de bordure** | Arrondit les coins de l'icône pour un aspect plus doux. | | {% endtab %} | | {% tab title="Conteneur de pastilles" %} | Nom | Description | | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | | **Couleur de fond/passage de la pastille** | Définit la couleur de fond des éléments de pastille, avec une couleur différente au survol. | | **Couleur du texte de la pastille/passage de la pastille** | Modifie la couleur du texte à l'intérieur de la pastille, avec une couleur différente au survol. | | **Hauteur de ligne de la pastille** | Ajuste la hauteur de ligne dans la pastille pour l'alignement du texte. | | {% endtab %} | | {% tab title="Avatar" %} | Nom | Description | | --------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Ajustement de l'objet de l'image d'avatar** | Détermine comment l'image de l'avatar doit s'adapter à son conteneur. Les options incluent « fill », « contain », « cover », « none » et « scale-down ». | | {% endtab %} | | {% tab title="Boutons de pagination" %} | Nom | Description | | ----------------------- | ----------------------------------------------------------------------------------------------------------------- | | **Paramètres de style** | Personnalise l'apparence des boutons de pagination, y compris les propriétés de couleur, de taille et de bordure. | | {% endtab %} | | {% tab title="Pied de page" %} | Nom | Description | | ------------------------ | ------------------------------------------------- | | **Couleur de fond** | Définit la couleur de fond du pied de page. | | **Couleur de bordure** | Définit la couleur de la bordure du pied de page. | | **Taille de la bordure** | Ajuste l'épaisseur de la bordure. | | **Style de bordure** | Sélectionne le style de la bordure. | | **Rayon de bordure** | Arrondit les coins du pied de page. | | {% endtab %} | | | {% endtabs %} | | ## Cas d'utilisation ### Exemple 1 : liste de comptes enrichie et contacts associés {% @arcade/embed url="" flowId="sxcJn4NliMFN6qTRk5Mi" %} Offrez à vos partenaires une manière puissante et intuitive d'explorer les données des comptes, avec une recherche intégrée, des filtres et un panneau de contacts en temps réel qui se met à jour au fur et à mesure de leur navigation. *** #### **Ce que vous obtiendrez** * **Liste de comptes recherchable et filtrable :** Permettez aux partenaires de trouver rapidement des comptes par nom ou secteur grâce aux contrôles de recherche et de filtrage intégrés. * **Enregistrements liés en ligne :** Rendez les noms de comptes cliquables afin que les partenaires puissent accéder directement aux pages de détail des enregistrements. * **Panneau de contacts associés en temps réel :** Affichez un second tableau qui se met automatiquement à jour pour montrer les contacts liés au compte sélectionné. * **Résultats paginés :** Gardez une interface épurée et performante en limitant le nombre d'enregistrements visibles par page. *** #### **Avant de commencer** * **Mise en page à deux colonnes :** Assurez-vous que votre page de liste de comptes dans Experience Builder dispose déjà d'une mise en page à deux colonnes prête à recevoir les deux composants. *** #### **Comment le configurer** {% stepper %} {% step %} #### **Ajoutez le premier AX - Datatable à votre page** * Faites glisser un composant AX - Datatable dans la colonne de gauche de votre page de liste de comptes dans Experience Builder. {% endstep %} {% step %} #### **Choisir une source de données** * Sélectionnez **Requête Comptes** comme source de données pour ce composant. {% endstep %} {% step %} #### **Définissez vos mappages de données** * Ajoutez les colonnes suivantes : Nom, Secteur, Owner.FullName et Téléphone. * Activez **Lien automatique** sur la colonne Nom afin que les noms de comptes deviennent des liens cliquables. * Définissez **Secteur** comme champ de filtre. * Définissez **Nom** comme champ de recherche. {% endstep %} {% step %} #### **Configurez le composant** * Définissez le **Nom API** sur `AccountsTable`. * Définissez **Sélection maximale de lignes** sur `1` afin qu'un seul compte puisse être sélectionné à la fois. * Activez la pagination et définissez le **Nombre maximal d'enregistrements** sur `10`. {% endstep %} {% step %} #### **Personnalisez l'en-tête** * Définissez le **Titre de l'en-tête** sur `Comptes`. * Définissez le **Icône de l'en-tête** sur `standard:account_info`. {% endstep %} {% step %} #### **Ajoutez le second AX - Datatable à votre page** * Faites glisser un second composant AX - Datatable dans la colonne de droite de la même page. {% endstep %} {% step %} #### **Choisir une source de données pour le tableau des contacts** * Sélectionnez **Requête Contacts** comme source de données. * Ajoutez un filtre pour que **AccountId** soit égal à `{{AccountsTable.selectedRecord.Id}}`; cela relie les résultats de ce tableau au compte actuellement sélectionné. {% endstep %} {% step %} #### **Définissez vos mappages de données** * Ajoutez les colonnes suivantes : Nom et Titre. {% endstep %} {% step %} #### **Configurez le composant** * Définissez le **Nom API** sur `relatedContactsTable`. {% endstep %} {% step %} #### **Personnalisez l'en-tête** * Définissez le **Titre de l'en-tête** sur `Contacts associés`. * Définissez le **Icône de l'en-tête** sur `standard:contact`. {% endstep %} {% step %} #### **Prévisualisez votre page** * Cliquez sur Prévisualiser dans Experience Builder, sélectionnez une ligne de compte et confirmez que le tableau Contacts associés se met à jour dynamiquement pour refléter l’enregistrement sélectionné. {% endstep %} {% endstepper %} *** #### **Liens** {% content-ref url="/pages/a2bada4c0d3a0b32a35da201e10a981fbd6c5dd6" %} [Tables de données liées](/experience-cloud/experience-cloud-fr/tutoriels/reactive-components/linked-data-tables.md) {% endcontent-ref %} *** ### Exemple 2 : Opportunités associées sur une page de compte {% @arcade/embed url="" flowId="tZa89LmaWt8n5CoQhwB8" %} Offrez aux utilisateurs commerciaux une vue d’ensemble de chaque opportunité liée à un compte, exactement là où ils en ont besoin, sans jamais quitter la page d’enregistrement. *** #### **Ce que vous obtiendrez** * **Vue client 360 plus riche :** Affichez les données clés des opportunités directement sur la page de compte afin que les utilisateurs commerciaux aient une vue complète en un seul endroit. * **Pages d’enregistrement entièrement empilées :** Créez des pages denses et riches en informations qui éliminent le besoin de passer d’un onglet ou d’un objet à l’autre pour travailler sur un pipeline. *** #### **Avant de commencer** * **Page d’enregistrement du compte avec les composants existants :** Assurez-vous que votre page d’enregistrement du compte dans Experience Builder inclut déjà les détails de l’enregistrement, une bannière et une disposition en colonnes, prêts à accueillir le nouveau composant. *** #### **Comment le configurer** {% stepper %} {% step %} #### **Ajoutez AX - Datatable à votre page Compte** * Faites glisser un composant AX - Datatable sur votre page d’enregistrement du compte dans Experience Builder. {% endstep %} {% step %} #### **Choisir une source de données** * Sélectionnez **Interroger les opportunités** comme source de données pour ce composant. {% endstep %} {% step %} #### **Définissez vos mappages de données** * Ajoutez les colonnes suivantes : Nom, Étape et Montant. * Activez **Lien automatique** sur la colonne Nom afin que les noms des opportunités deviennent des liens cliquables. {% endstep %} {% step %} #### **Configurez le composant** * Définissez le **Nom API** sur `RelatedOpportunities`. * Ajoutez un filtre pour que **AccountId** soit égal à `{!Item.id}`, en limitant les résultats au compte actuellement affiché. {% endstep %} {% step %} #### **Personnalisez l'en-tête** * Définissez le **Titre de l'en-tête** sur `Opportunités`. * Définissez le **Style d’en-tête** sur `Titre 2`. * Définissez le **Icône de l'en-tête** sur `standard:opportunity`. {% endstep %} {% step %} #### **Prévisualisez votre page** * Cliquez sur Prévisualiser dans Experience Builder et accédez à un enregistrement de compte pour confirmer que seules les opportunités liées à ce compte apparaissent dans le tableau. {% 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-fr/experience-components/ax-data-table.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.