Vue de table
Présentation
La vue Table est un mécanisme permettant d'afficher et de manipuler de grands ensembles de données.
Quand l'utiliser
- Vous devez présenter des données complexes à l'utilisateur.
- L'ordre dans lequel les données sont présentées a une importance et l'utilisateur a le contrôle sur le tri des données.
- L'utilisateur doit comparer des données de même type entre différentes cellules.
Quand ne pas l'utiliser
- L'ordre de présentation des données n'est pas aussi important que les données elles-mêmes. Utilisez plutôt des vues Fiche ou des vues Liste.
- Le cas d'utilisation ne nécessite pas de comparer des données. Utilisez plutôt des vues Fiche ou des vues Liste.
- Lorsque vous traitez de petites quantités de données, la quantité d'espace blanc est excessive. Utilisez plutôt des vues Fiche ou des vues Liste.
Structure
- Titre (obligatoire) : donne une brève indication de l'objet de la vue Table, avec une ligne facultative indiquant le nombre de lignes dans la vue.
- Commandes de la table (facultatif) : comprend un ensemble de commandes permettant de manipuler l'affichage des données. Ne confondez pas les commandes de table avec les actions de table.
Filtre de recherche (facultatif) : permet de filtrer l'ensemble de données en recherchant des mots-clés.****
Configurateur (facultatif) : permet de masquer ou d'afficher des colonnes de table.****
Filtre (facultatif) : inclut un ensemble avancé de mécanismes permettant de filtrer l'ensemble de données en fonction de divers paramètres.****
- Actions de table (facultatif) : permet d'effectuer des actions sur l'ensemble de données, soit sur l'ensemble entier, soit sur des ensembles de données sélectionnés à partir de la table. Les actions de table sont les suivantes :
- Action principale (facultatif) : utilisez cette option pour réaliser l’action principale sur la table. Une table ne peut avoir qu’une seule action principale.
- Action secondaire (facultatif) : utilisez cette option pour les actions de support.
- Action tertiaire (facultatif) : utilisez cette option pour les actions de suppression ou moins importantes.
- Menu de dépassement (facultatif) : utilisez le menu de dépassement pour afficher davantage d’actions associées aux données de la table.
- En-têtes de colonne (obligatoire) : fournit une étiquette pour chaque colonne de données, ainsi que le mécanisme de tri des données dans chaque colonne.
- Lignes de données (obligatoire) : affiche les données associées à la table.
- Commandes de pagination (facultatif) : permet d'ajuster la densité d'affichage et de naviguer entre les pages.
Contenu de la table
Colonnes
- Toutes les cellules d'une colonne doivent contenir le même type de données. Par exemple, ne mélangez pas une valeur de date avec une valeur de statut dans une même colonne.
- Utilisez les icônes uniquement pour fournir un contexte supplémentaire aux cellules. L'utilisation des icônes pour toutes les cellules d'une colonne doit être cohérente : soit toutes les cellules ont des icônes, soit aucune d'entre elles n'en a. Utilisez uniquement des icônes courantes et facilement reconnaissables pour les icônes qui n'ont pas de texte d'accompagnement.
- La dernière colonne d'une table est réservée aux actions de ligne. Ces actions peuvent être présentées sous la forme d'icônes, de boutons d'action ou d'un menu de dépassement. Veillez à ce que le type et l'occurrence soient cohérents dans la colonne.
- Pour une meilleure lisibilité, limitez les colonnes à 8 par table si possible et fournissez une option de configuration utilisateur pour ajouter ou supprimer des colonnes si nécessaire.
- Les colonnes peuvent être redimensionnées en fonction des préférences de l'utilisateur.
Lignes
- Chaque ligne représente un enregistrement ou un objet et ses détails associés.
- La cellule principale (identifiant) d'une ligne est l'élément d'information clé qui ancre l'ensemble de données.
- Les lignes peuvent avoir des commandes de sélection comme la case d'option pour la sélection unique et la case à cocher pour la sélection multiple.
- Dans les lignes qui permettent le développement intégré, l'icône de développement apparaît juste après la commande de sélection. Cliquez sur ce bouton pour ouvrir et fermer le développement intégré.
- Les actions doivent toujours être disponibles. Lorsque le défilement horizontal est appelé, la colonne Actions est gelée.
Instructions pour l’affichage des actions dans les tables
Utilisation d’icônes
Vous ne pouvez utiliser des icônes pour des actions que si elles sont globalement reconnues et sans ambiguïté. Par exemple :
- L’icône de la corbeille représente l’action de suppression.
- L’icône du crayon représente l’action de modification.
S’il y a un risque de confusion, utilisez une étiquette de texte ou associez l’icône au texte.
Gestion des actions au niveau des lignes
Pour que les tables restent propres et conviviales et qu'elles puissent être analysées facilement, gérez judicieusement l’affichage des actions au niveau des lignes. Le nombre et la fréquence de ces actions déterminent si elles sont affichées directement dans la table ou placées dans un menu de dépassement. Utilisez ce guide rapide pour conserver une table propre et conviviale :
Lorsqu’il existe une action dans la table
Affichez l’étiquette complète dans la table.
Cette table affiche une seule action avec son étiquette complète pour plus de clarté.
Lorsqu’il existe deux actions dans la table
- Si les deux sont utilisées de la même manière, affichez les deux.
- Si une action est beaucoup plus utilisée et qu’une interface utilisateur plus propre est nécessaire, affichez l’action principale et déplacez l’autre action vers le menu de dépassement.
Cette table affiche 2 actions, car elles sont toutes les deux utilisées de la même manière.
Cette table affiche uniquement l’action principale, avec l’action secondaire dans le menu de dépassement pour une interface plus propre.
Lorsqu’il existe au moins trois actions dans la table
- S’il existe une action principale, affichez-la et déplacez les autres actions dans le menu de dépassement.
- Si plusieurs actions sont souvent utilisées, affichez les deux premières actions et déplacez les autres dans le menu de dépassement.
Cette table met en évidence l’action principale, avec des actions supplémentaires dans le menu de dépassement.
Cette table affiche les deux actions les plus fréquemment utilisées, avec les autres dans le menu de dépassement.
Fonctionnalités de la vue Table
État vide et état de chargement
- Lorsqu'il n'y a pas de données à afficher ou lorsque les conditions empêchent l'affichage des données, utilisez l'état vide pour informer les utilisateurs. Le message doit clairement indiquer le problème et les moyens de le résoudre.
- Lorsque des données sont extraites, utilisez l'état de chargement pour informer les utilisateurs. Le message doit clairement indiquer que les données sont en cours de chargement et expliquer pourquoi l'utilisateur attend.
- Les boutons d'actions peuvent être utilisés pour déclencher le rechargement d'une page si nécessaire.
Exemple d'état vide d'une vue Table
Exemple d'état de chargement d'une vue Table
Réactivité
La vue Table est totalement réactive pour les tablettes et les appareils mobiles. Les cellules peuvent être supprimées, réorganisées ou combinées d'une manière pertinente pour les utilisateurs. Dans les cas d'utilisation axés mobile, les vues de fiche fonctionnent mieux qu'un écran purement réactif.
De gauche à droite : vue Table sur les appareils de format moyen (tablette), vue Table sur les appareils de petit format (mobile) et vue Fiche pour les utilisations « mobile-first ».
Filtres de table
Les filtres permettent de manipuler des ensembles de données spécifiques. Le filtrage peut être effectué via le panneau de filtrage, les différents en-têtes de colonnes servant de filtres. Il existe également un filtre de recherche, dans lequel les utilisateurs peuvent affiner l'ensemble de données en saisissant un mot-clé.
Paramètres de table
Les paramètres de table aident les utilisateurs à masquer ou afficher des colonnes et à les réorganiser en fonction de leurs préférences.
Totaux dans la table
Les totaux aident les utilisateurs à comprendre rapidement la somme des données importantes d’une table. La façon dont vous affichez les totaux dépend de la pagination de la table et du type de total requis. Pour garantir la clarté et la cohérence, utilisez ce guide :
Lorsque la table n’a pas de pagination (table d’une seule page)
- Ajoutez une ligne en bas de la table qui affiche la somme totale des colonnes de données pertinentes.
- L’étiquette de cette ligne peut être tout simplement « Total », car toutes les données sont visibles.
Lorsque la table comporte une pagination
- Total pour les lignes visibles uniquement (par page) : utilisez l’étiquette « Total (par page) ». Ceci est utile pour comprendre les données page par page.
- Total pour toutes les données (total général sur toutes les pages) : utilisez l’étiquette « Total (toutes les pages) » pour refléter l’ensemble complet de données. Cela est utile lorsque les utilisateurs ont besoin d’une vue d’ensemble et pas seulement de la page actuelle.
- Vous pouvez montrer les deux si nécessaire, il suffit de les étiqueter clairement.
Cette table indique le total pour la page en cours, intitulé « Total (par page) » pour plus de clarté.
Cette table affiche le total de toutes les pages, intitulé « Total (toutes les pages) » afin de fournir une synthèse globale.
Lorsque les totaux sont calculés dynamiquement
- Si les totaux sont mis à jour en fonction des filtres ou du tri, assurez-vous que la valeur est mise à jour correctement.
- Pour les ensembles de données volumineux, affichez un composant de chargeur lors du recalcul des totaux.
Lors de l’affichage de plusieurs totaux dans une table
- Étiquetez clairement les totaux de la façon suivante : « Total (par page) » ou « Total (toutes les pages) ».
- Respectez l'alignement de la colonne appropriée.
- Si votre table contient plusieurs totaux, regroupez ces totaux les uns à côté des autres.
Les totaux sont clairement étiquetés et alignés, les totaux multiples étant regroupés.
Lorsque la table contient des actions
La colonne d’action doit toujours se trouver à l'emplacement le plus à droite.
La colonne d’action est positionnée à l’extrême droite pour des raisons de cohérence.
Lorsque la table comprend une ligne avec des ajustements
Une ligne d’ajustements permet de présenter de manière transparente les modifications ou corrections appliquées aux valeurs d’origine. Son objectif principal est de clarifier les différences entre les totaux calculés à l’origine et les totaux finaux, en aidant les utilisateurs à identifier et à comprendre facilement les changements ou les divergences influençant les résultats globaux des données.
Une ligne d’ajustements met en évidence les modifications, clarifiant ainsi les différences entre les totaux d’origine et finaux.
En-tête de colonne collant
Avec cette option, les en-têtes de colonne restent en place lorsque l'utilisateur fait défiler l'écran verticalement.
Lignes extensibles
Les lignes extensibles sont utiles lorsque seuls des détails minimes doivent être affichés et qu'il est important de conserver le contexte de la table dans son ensemble. Par exemple, lorsque vous comparez différents ensembles de données. La ligne extensible sélectionnée affiche la vue détaillée et peut être réduite si elle n'est plus pertinente.
Cliquez sur l'icône de développement pour afficher plus de détails sur une ligne.
Redimensionnement des colonnes
- Le comportement par défaut des colonnes est qu'elles se réduisent pour s'adapter à l'en-tête, à l'exception de la dernière colonne, qui se développe pour remplir le reste du conteneur. Cela préserve la proximité des informations pour faciliter l'analyse par l'utilisateur.
- Au fur et à mesure que les autres colonnes s'agrandissent, la dernière colonne rétrécit jusqu'à ce qu'elle atteigne la largeur minimale. Au-delà de ce point, la dernière colonne est repoussée au-delà de la zone visible de la table et le défilement horizontal est appelé.
- Une fois redimensionnée, une largeur de colonne est conservée jusqu'à ce que l'utilisateur la modifie ou la réinitialise sur la valeur par défaut.
Maintenez et déplacez l'indicateur de glissement pour redimensionner une colonne.
Ressources
Téléchargez un fichier ZIP contenant tous les derniers modèles Jutro et commencez à concevoir des expériences.