> 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 Experience Sites (anciennement Community Cloud). Utilisez-le pour montrer aux utilisateurs du portail des jeux de données filtrés avec un contrôle total sur les colonnes, le tri, la recherche et la pagination. Récupérez des enregistrements depuis n’importe quel objet standard ou personnalisé et permettez aux utilisateurs externes de consulter, rechercher et interagir avec des données pertinentes pour leur compte ou leur profil. Idéal pour les portails clients qui affichent l’historique des commandes, les portails partenaires qui affichent l’historique des commandes, les portails partenaires affichant des enregistrements partagés, ou les sites en libre-service où les utilisateurs doivent trouver et consulter leurs propres données. {% hint style="success" %} La Data Table 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 Data Table et commencer à créer vos cas d’usage. {% @arcade/embed url="" flowId="oAo6XOMWRBc7Vn4Y9XNd" %} *** ## Tutoriels
Créer un bouton « Export To » sur la Data Table/spaces/dHOej9Pd5IxJNGEJMZKW/pages/5u7NY8IG7F8KC9xYxSSb
Configuration de la Data Table/spaces/dHOej9Pd5IxJNGEJMZKW/pages/7lv0HK9VpCriTFHSx1Yz
Affichage des fichiers Salesforce CMS dans une Data Table/pages/95f5170ef83434336d2304b0f5e6dfb075786df1
*** ## Connectez votre Data Table aux données Salesforce ### Source de données La section Source de données est l’endroit où vous connectez la Data Table Avonni à vos données Salesforce. Vous avez deux options.
Type de source de donnéesDescriptionCas d’utilisation
Source de données manuelleSaisissez manuellement les données dans la table de données.Idéal pour les données non dynamiques, les tests et les démonstrations.
RequêteCréez une requête pour remplir automatiquement la table avec les 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 Data Tables pour des mises à jour dynamiques du contenu.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 %} ### Configuration du mappage des données Vous donnez vie à votre table de données dans la section Mappage des données en définissant et personnalisant ses colonnes.
Partage du modèle de données avec Avonni Data Table **Respect des règles de partage de données Salesforce :** * **Respect des paramètres de l’organisation :** Les composants Avonni sont entièrement conformes aux configurations de partage de données et aux paramètres d’accès existants de votre organisation Salesforce. * **Politique de non-ingérence :** Ces composants ne modifient ni n’affectent en aucune façon vos règles de partage de données préétablies. * **Visibilité et accès contrôlés :** La possibilité de consulter des enregistrements et d’interagir avec eux 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 « Add Columns » pour sélectionner les champs de votre source de données à afficher comme colonnes dans la table 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 de colonne * **Type de données :** Ajustez le type d’affichage du champ (par ex. texte, nombre, date) afin d’assurer une représentation correcte des données. * **Créer un lien :** Autorisez 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 plus attrayant visuellement. * **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é :** Choisissez de masquer certaines colonnes, utile pour les données sensibles ou moins pertinentes. * **Triable :** Autorisez les utilisateurs à trier les données par 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 :** Indiquez 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 à la Data Table. {% @arcade/embed url="" flowId="db617gnzKCL8QA22aziq" %} *** ## Autres paramètres de configuration ### 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 rendu 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 des 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 afin de fournir un contexte ou un résumé des données du tableau. **Nom et taille de l’icône** * Enrichissez l’en-tête avec une icône, en sélectionnant son type et sa taille pour un impact 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 les actions (ajout, suppression ou fonctions personnalisées) directement accessibles depuis l’en-tête du tableau.
### Boutons d’action dans l’en-tête * Mettez en place 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 utilisateur et l’efficacité.
#### Configurez 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 « On Click ». Pour comprendre le fonctionnement de l’interaction « Navigate », [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, afin de gérer l’affichage et la navigation des données dans les grands tableaux. {% hint style="info" %} En mode Requête, les données sont affichées par ensembles de 25 enregistrements afin de maintenir des performances optimales du site. Par conséquent, la configuration de la pagination peut être utile. {% endhint %}
### Configuration du moteur de recherche * **Texte indicatif :** Définissez un texte indicatif pour le champ de recherche afin d’orienter les utilisateurs sur ce qu’ils peuvent rechercher. * **Position :** Choisissez l’emplacement du champ 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 le champ de recherche, au moins une colonne doit être marquée comme « Searchable ». {% endhint %}

Au moins une colonne doit être définie sur « Searchable » pour afficher le champ de recherche.

## Paramètres {% tabs %} {% tab title="🎛️ Général" %} | Nom | Description | | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | | **Masquer l’en-tête du tableau** | Basculez pour masquer l’en-tête du tableau | | **Masquer la colonne de cases à cocher** | Supprimez la colonne utilisée pour les cases à cocher de sélection de lignes | | **Afficher la colonne des numéros de ligne** | Afficher une colonne montrant le numéro de ligne | | **Décalage du numéro de ligne** | Définissez le numéro de départ pour la numérotation des lignes | | **Sélection maximale de lignes** | Limitez le nombre maximum de lignes pouvant être sélectionnées | | **Masquer la barre inférieure** | Masquez la barre inférieure, généralement utilisée pour les actions et l’affichage d’informations | | **Afficher le nombre d’éléments sélectionnés** | Affichez le nombre d’éléments actuellement sélectionnés | | **Lecture seule** | Rendez le tableau non interactif, en interdisant toute modification ou sélection | | **Autoriser la modification sur toutes les colonnes** | Activez la modification pour toutes les colonnes | | **Autoriser le filtrage sur toutes les colonnes** | Activez les options de filtrage pour toutes les colonnes | | **Autoriser le retour à la ligne sur toutes les colonnes** | Autorisez le retour à la ligne du texte dans toutes les colonnes | | **Masquer les actions par défaut** | Masquez les actions prédéfinies comme modifier ou supprimer | | **Mode de largeur des colonnes** | Choisissez entre « fixed » et « auto » pour le réglage de la largeur des colonnes | | **Largeur max./min. des colonnes** | Définissez des limites maximales et minimales pour les largeurs de colonnes | | **Nombre maximal de lignes pour le retour à la ligne** | Définissez le nombre maximal de lignes pour le retour à la ligne du texte dans les cellules | | **Redimensionnement des colonnes désactivé** | Désactivez la possibilité de redimensionner les colonnes | | **Pas de redimensionnement** | Définissez l’incrément pour le redimensionnement des colonnes | | **Direction de tri triée/par défaut** | Choisissez « asc » ou « desc » pour la direction de tri initiale | | **Afficher la valeur de tri** | Afficher quelle colonne est actuellement utilisée pour le tri | | **Titre/caption de l’en-tête** | Définissez un titre et une légende pour l’en-tête du tableau | | **Nom/taille de l’icône de l’en-tête** | Ajoutez une icône à l’en-tête avec une taille personnalisable | | **L’en-tête est relié** | Choisissez de relier visuellement l’en-tête au corps du tableau | | **Masquer/désactiver les actions de l’en-tête** | Contrôlez la visibilité et l’interactivité des actions de l’en-tête | | **Boutons d’action visibles de l’en-tête** | Précisez quels boutons d’action sont visibles dans l’en-tête | | **Actions de l’en-tête** | Ajoutez des actions personnalisées à l’en-tête du tableau | | {% endtab %} | | {% tab title="⏩️ Pagination et recherche" %} ### Attributs de pagination | Nom | Description | | ------------------------------ | ------------------------------------------------ | | **Afficher la pagination** | Basculez l’affichage des contrôles de pagination | | **Nombre d’éléments par page** | Définissez combien d’éléments afficher par page | ### Options du conteneur de pastilles * Afficher un conteneur pour les éléments sélectionnés, souvent utilisé avec la sélection de lignes. ### Options du moteur de recherche | Nom | Description | | ---------------------------------- | -------------------------------------------------------------- | | **Texte indicatif** | Définissez un texte indicatif pour le champ de recherche | | **Position** | Définissez la position de la barre de recherche | | **Valeur de recherche par défaut** | Préremplissez la barre de recherche avec une valeur par défaut | | {% endtab %} | | {% tab title="🗄️ Filtrage et source de données" %} | Nom | Description | | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------- | | **Options de filtrage** | Configurez le filtrage pour qu’il s’affiche sous forme de popover pour chaque colonne. | | **Source de données** | Choisissez entre « manual » et « query » pour remplir les données du tableau. | | **Colonnes** | Définissez et ajoutez des colonnes à la table de données, en personnalisant les propriétés et le comportement de chaque colonne. | | {% endtab %} | | {% tab title="🎨 Style" %} ### En-tête | Nom | Description | | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------- | | **Couleur d’arrière-plan** | Définit la couleur de l’arrière-plan de l’en-tête. | | **Couleur de la 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é, tireté, etc.) de la bordure. | | **Rayon de bordure** | Arrondit les coins de l’en-tête. | | **Couleur de la bordure inférieure (est relié)** | Spécifie la couleur de la bordure inférieure lorsque l’en-tête est visuellement relié au corps du tableau. | | **Taille de la bordure inférieure (si joint)** | Détermine l’épaisseur de la bordure inférieure reliée. | | **Style de la bordure inférieure (si joint)** | Définit le style de la bordure inférieure reliée. | | **Espacement intérieur et marge** | Contrôle l’espacement intérieur (padding) et extérieur (margin) de l’en-tête. | ### 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. | | **Graisse de police** | Modifie l’épaisseur du texte du titre. | | **Style de police** | Applique un style spécifique (italique, normal) au texte du titre. | ### 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. | | **Graisse 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. | ### Icône de l’en-tête | Nom | Description | | ----------------------------------------- | -------------------------------------------------------------------- | | **Couleur d’arrière-plan** | Définit la couleur d’arrière-plan 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. | ### Conteneur de pastilles | Nom | Description | | ----------------------------------------------------- | -------------------------------------------------------------------------------------------------- | | **Couleur d’arrière-plan de la pastille / au survol** | Définit la couleur d’arrière-plan des éléments de pastille, avec une couleur différente au survol. | | **Couleur du texte de la pastille / au survol** | 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 à l’intérieur de la pastille pour l’alignement du texte. | ### Avatar | Nom | Description | | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Ajustement de l’objet de l’image de l’avatar** | Détermine comment l’image de l’avatar doit s’adapter à son conteneur. Les options incluent « fill », « contain », « cover », « none » et « scale-down ». | ### Boutons de pagination | Nom | Description | | ----------------------- | ----------------------------------------------------------------------------------------------------------------- | | **Paramètres de style** | Personnalise l’apparence des boutons de pagination, y compris la couleur, la taille et les propriétés de bordure. | ### Pied de page | Nom | Description | | -------------------------- | ----------------------------------------------------- | | **Couleur d’arrière-plan** | Définit la couleur de l’arrière-plan du pied de page. | | **Couleur de la 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 %} | | ## Exemples de cas d’utilisation ### Exemple 1 : Liste de comptes améliorée et contacts associés {% @arcade/embed url="" flowId="sxcJn4NliMFN6qTRk5Mi" %} Offrez à vos partenaires un moyen puissant et intuitif d’explorer les données des comptes, avec recherche intégrée, filtrage et panneau de contacts en direct qui se met à jour au fil de leur navigation. *** #### **Ce que vous obtiendrez** * **Liste de comptes recherchable et filtrable :** Permettez aux partenaires de trouver rapidement des comptes par nom ou par secteur grâce aux contrôles de recherche et de filtrage intégrés. * **Enregistrements liés en ligne :** Rendez les noms des comptes cliquables afin que les partenaires puissent accéder directement aux pages de détail des enregistrements. * **Panneau de contacts associés en direct :** Affichez un second tableau qui se rafraîchit automatiquement pour montrer les contacts liés au compte sélectionné. * **Résultats paginés :** Gardez l’interface claire et performante en limitant le nombre d’enregistrements visibles par page. *** #### **Avant de commencer** * **Mise en page à deux colonnes :** Assurez-vous que votre page Liste des 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 la première AX - Datatable à votre page** * Faites glisser un composant AX - Datatable dans la colonne de gauche de votre page Liste des comptes dans Experience Builder. {% endstep %} {% step %} #### **Choisissez une source de données** * Sélectionnez **Requêter les comptes** comme source de données pour ce composant. {% endstep %} {% step %} #### **Définissez vos mappages de données** * Ajoutez les colonnes suivantes : Name, Industry, Owner.FullName et Phone. * Activer **Créer un lien** sur la colonne Name afin que les noms des comptes deviennent des liens cliquables. * Définir **Secteur d’activité** comme champ de filtre. * Définir **Nom** comme champ de recherche. {% endstep %} {% step %} #### **Configurez le composant** * Définissez le **nom API** sur `AccountsTable`. * Définir **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 la deuxième AX - Datatable à votre page** * Faites glisser un deuxième composant AX - Datatable dans la colonne de droite de la même page. {% endstep %} {% step %} #### **Choisissez une source de données pour le tableau des contacts** * Sélectionnez **Requêter les contacts** comme source de données. * Ajoutez un filtre de sorte que **AccountId** égal à `{{AccountsTable.selectedRecord.Id}}`, en reliant les résultats de ce tableau au compte actuellement sélectionné. {% endstep %} {% step %} #### **Définissez vos mappages de données** * Ajoutez les colonnes suivantes : Name et Title. {% 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 %} #### **Aperçu de votre page** * Cliquez sur Aperçu 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" %} [Tableaux de données liés](/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, directement là où ils en ont besoin, sans jamais quitter la page de l’enregistrement. *** #### **Ce que vous obtiendrez** * **Vue client 360 plus riche :** Affichez les données clés des opportunités directement sur la page Compte afin que les utilisateurs commerciaux aient une vue complète en un seul endroit. * **Pages d’enregistrement complètes :** Créez des pages denses et riches en informations qui évitent d’avoir à passer d’un onglet ou d’un objet à l’autre pour gérer un pipeline. *** #### **Avant de commencer** * **Page d’enregistrement de compte avec composants existants :** Assurez-vous que votre page d’enregistrement de compte dans Experience Builder inclut déjà les détails de l’enregistrement, une bannière et une mise en page en colonnes prête à accueillir le nouveau composant. *** #### **Comment le configurer** {% stepper %} {% step %} #### **Ajoutez la AX - Datatable à votre page Compte** * Faites glisser un composant AX - Datatable sur votre page d’enregistrement de compte dans Experience Builder. {% endstep %} {% step %} #### **Choisissez une source de données** * Sélectionnez **Requêter les opportunités** comme source de données pour ce composant. {% endstep %} {% step %} #### **Définissez vos mappages de données** * Ajoutez les colonnes suivantes : Name, Stage et Amount. * Activer **Créer un lien** sur la colonne Name 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 de sorte que **AccountId** égal à `{!Item.id}`, en limitant les résultats au compte actuellement consulté. {% endstep %} {% step %} #### **Personnalisez l’en-tête** * Définissez le **Titre de l’en-tête** sur `Opportunités`. * Définissez le **Style de l’en-tête** sur `Titre 2`. * Définissez le **Icône de l’en-tête** sur `standard:opportunity`. {% endstep %} {% step %} #### **Aperçu de votre page** * Cliquez sur Aperçu 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: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-data-table.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.