Passer au contenu principal

Présentation du composant Table

Le composant Table vous permet de créer des tables dans vos applications, du simple affichage de données aux tables complexes qui gèrent de grands ensembles de données avec des fonctionnalités avancées telles que la recherche et le filtrage. L’implémentation du composant est modulaire, ce qui vous permet de sélectionner les fonctionnalités nécessaires à votre application tout en excluant celles qui sont inutiles. Le composant fournit un ensemble de composants composables de base qui peuvent être facilement étendus ou personnalisés. Il permet de créer des implémentations simples pour les cas d’utilisation de base, mais offre également la flexibilité requise pour les cas complexes.

Jutro Design System propose les différents composants nécessaires pour gérer la structure des tables (en-têtes, lignes, colonnes), la pagination et les états des tables. Il facilite également l'implémentation de fonctionnalités supplémentaires, complémentaires à la solution de base. Par exemple, lors de l’implémentation du tri, les en-têtes de colonne comprennent les indicateurs de tri, mais c'est au développeur d’implémenter la fonction de tri des données pour se connecter au rappel fourni.

Pour faciliter l’implémentation et servir de référence, les exemples fournis incluent certaines de ces fonctionnalités supplémentaires, qui utilisent du code personnalisé ou la bibliothèque de table TanStack. Les fonctionnalités présentées dans les exemples fournis sont les suivantes :

  • Titre et sous-titre : en-tête décrivant le contenu de la table.
  • Commandes de la table : un ensemble de commandes permettant de manipuler l’affichage des données, tels que la recherche et les filtres.
  • Actions de la table : ensemble de boutons qui exécutent une opération sur l’ensemble de données de la table, comme l’ajout d’un nouvel enregistrement ou l’exportation de données.
  • En-têtes de colonne : étiquettes pour chaque colonne qui identifient le type de données. Les en-têtes peuvent également inclure une fonctionnalité de tri.
  • Lignes de données : ensemble complet de cellules représentant un élément ou un enregistrement unique. Les lignes peuvent inclure des commandes de sélection sous la forme de cases à cocher.
  • Actions relatives aux lignes : ensemble d’actions dans la dernière colonne qu’un utilisateur peut effectuer sur une ligne individuelle.
  • Pagination : commandes qui permettent aux utilisateurs de naviguer entre les pages de données et d’ajuster le nombre de lignes affichées par page.
  • États de la table : retour visuel clair fourni lorsque la table ne peut pas afficher de lignes de données, parce qu'elle est toujours en cours de chargement, qu’il manque des données ou qu’une erreur s’est produite.

Composants​

Une partie de la solution de composant de table est un ensemble de composants Jutro que vous pouvez utiliser pour créer votre implémentation de table. Les composants sont conçus pour permettre l’implémentation de fonctionnalités supplémentaires non couvertes par eux-mêmes, telles que la recherche, le filtrage et le tri.

Structure​

La structure de la table est construite à l’aide d’un ensemble de composants qui définissent la disposition de la table et l’organisation du contenu. Ces composants ont été conçus pour veiller au respect des exigences en matière d’accessibilité, et fournir un ensemble de propriétés et de fonctions de rappel en vue d'activer des fonctionnalités supplémentaires. Ces composants sont notamment les suivants :

  • Table, qui est le conteneur principal de la table, assurant la structure et la disposition.
  • TableHeader, qui définit la section d’en-tête de la table.
  • HeaderRow, qui définit une ligne unique dans l’en-tête de la table, contenant plusieurs cellules d’en-tête.
  • HeaderCell, qui représente une cellule d’en-tête unique dans une ligne.
  • TableBody, qui définit la section du corps de la table, contenant les lignes de données.
  • BodyRow, qui représente une ligne unique de la table, contenant plusieurs cellules.
  • BodyCell, qui représente une cellule unique dans une ligne, contenant des données ou des éléments interactifs.

Ces composants doivent être imbriqués de manière appropriée pour créer une structure de table valide.

Les composants de la structure de table prennent entièrement en charge les attributs colspan et rowspan, ce qui vous permet de créer des cellules qui couvrent plusieurs colonnes ou lignes. Cela permet d’obtenir des mises en page de table complexes, telles que des en-têtes groupés, des cellules de données fusionnées et une présentation hiérarchique des données.

Pour en savoir plus sur les composants de structure de table, reportez-vous aux cahiers des charges des composants correspondants.

Pagination​

La fonctionnalité de pagination des tables est implémentée à l’aide du composant Pagination, qui fournit des commandes permettant de parcourir les pages de données et d’ajuster le nombre de lignes affichées par page. Le composant inclut des propriétés et des fonctions de rappel qui vous permettent de gérer l’état de la pagination et les interactions utilisateur.

Pour en savoir plus sur le composant Pagination, reportez-vous aux cahiers des charges des composants correspondants.

États​

La fonctionnalité d’états de la table est implémentée à l’aide d’un ensemble de composants qui fournissent un retour visuel lorsque la table ne peut pas afficher de lignes de données, parce qu'elle est toujours en cours de chargement ou qu’il manque des données. Ces composants sont notamment les suivants :

  • TableLoader, qui affiche un indicateur de chargement et un message lorsque la table récupère des données.
  • TableEmptyState, qui affiche un message configurable lorsqu’il n’y a aucune ligne à afficher dans la table. Ce composant prend également en charge un bouton d’action facultatif pour donner aux utilisateurs la possibilité d’effectuer une action, comme le rechargement d’une table.

Pour en savoir plus sur les composants d'états de la table, reportez-vous aux cahiers des charges des composants correspondants.

Extension du composant Table​

Le composant Table est conçu pour être étendu avec des fonctionnalités supplémentaires, telles que la recherche, le tri, les actions de ligne, etc. Ces fonctionnalités ne sont pas implémentées dans le cadre des composants Jutro, mais elles peuvent être ajoutées via un code React personnalisé ou des bibliothèques externes. Les composants de table fournissent des propriétés et des fonctions de rappel qui vous permettent d’implémenter ces fonctionnalités sur la base des exigences de votre application. Ils garantissent également que les tables équipées de fonctionnalités supplémentaires respectent les normes d’accessibilité.

La documentation des composants de table comprend des exemples qui montrent comment implémenter des fonctionnalités supplémentaires. Tous les exemples sont développés avec et sans intégration de TanStack Table, ce qui vous permet de mieux évaluer l’approche qui répond le mieux aux exigences de votre application.

Pour en savoir plus sur les exemples, reportez-vous à la section Exemples.

Extension avec du code React personnalisé​

Vous pouvez étendre le composant Table en écrivant du code React personnalisé qui utilise les propriétés et les fonctions de rappel fournies par les composants Jutro. Cette approche vous permet d'implémenter des fonctionnalités spécifiques adaptées aux besoins de votre application et de garder le contrôle sur le comportement et l’apparence de la table.

Ces exemples servent de point de départ aux développeurs soucieux d'améliorer leurs implémentations de tables avec des fonctionnalités supplémentaires en utilisant du code React personnalisé. Ces exemples réutilisent des icônes et des composants Jutro, de sorte que lorsque vous les suivez, vous êtes sûr que la fonctionnalité implémentée est cohérente avec Jutro Design System.

Intégration avec des bibliothèques externes​

Le composant Table est conçu pour fonctionner de manière transparente avec ou sans bibliothèques externes, telles que TanStack Table. Cette approche permet aux développeurs d’améliorer les implémentations de table en intégrant des fonctionnalités composables issues de bibliothèques populaires ou d’utiliser les composants de table sans dépendances externes. Dans les exemples illustrant les implémentations des fonctionnalités de table, vous pouvez voir comment les intégrations de TanStack Table peuvent être appliquées. Bien que TanStack Table soit utilisé dans les exemples, vous pouvez intégrer d’autres bibliothèques qui répondent mieux aux besoins de votre application.

L’utilisation de bibliothèques externes présente notamment l'avantage de pouvoir exploiter leurs fonctionnalités intégrées, telles que le tri, le filtrage ou d’autres aspects de la gestion des données. Cela permet de réduire considérablement le temps et les efforts de développement, ainsi que de fournir une implémentation de table plus robuste et riche en fonctionnalités.

Exemples​

Les exemples de composants de table sont disponibles à la fois sur les pages de documentation mentionnées ci-dessus et dans Jutro Storybook. Visuellement, ils sont identiques sur les deux plates-formes, mais il existe quelques différences au niveau de la structure du code et des dépendances ; c'est en fonction de ces éléments que vous pourrez déterminer celles qui répondent le mieux à vos besoins. Les principales caractéristiques des exemples sont les suivantes :

  • Structure du code : les exemples de documentation sont conçus pour présenter une fonction singulière, et l’exemple de code utilise des dépendances et une quantité de code minimales. Les exemples de Storybook sont structurés pour faciliter l’exploration de plusieurs fonctionnalités, avec du code partagé et des dépendances organisées dans différents fichiers.
  • Tanstack Table : les exemples des deux plates-formes ont une version qui utilise Tanstack Table pour une partie de la logique de gestion des données, afin de montrer comment les bibliothèques externes peuvent être intégrées dans l’implémentation de la table.
  • Simulation de récupération de données asynchrone : les fonctionnalités généralement utilisées lorsque la table gère la récupération asynchrone des données sur les deux plates-formes disposent d'une version qui simule ce comportement, afin de montrer comment gérer les scénarios de chargement des données dans les implémentations de table. Elle s’applique aux fonctionnalités de pagination, de recherche et de tri.
  • Test d’exemples dans votre IDE : les exemples sur les pages de documentation sont présentés sous forme d’extraits de code dans le contenu de la documentation. Pour les tester dans votre IDE, copiez les extraits de code dans des fichiers d’un répertoire unique et utilisez-les. Les exemples Storybook peuvent faire référence à des fichiers qui ne sont pas disponibles dans l’onglet Code source. Leur utilisation dans votre IDE peut donc nécessiter une configuration supplémentaire.
  • Modification en direct : vous pouvez expérimenter le code et voir des résultats immédiats à l’aide de l’onglet Contrôles de la fonctionnalité de modification en direct de Storybook. Les exemples de documentation nécessitent de copier le code dans votre IDE pour apporter des modifications et les tester.

Pour explorer les exemples de composants de table, consultez les sources suivantes :

Accessibilité​

L’accessibilité est l'un des éléments clés de la conception du composant Table, qui repose sur l'implémentation du modèle de grille. Le composant offre une navigation complète au clavier, une sémantique ARIA appropriée et une compatibilité avec les lecteurs d’écran pour garantir une expérience utilisateur inclusive.

Ce composant a été validé pour répondre aux directives d’accessibilité WCAG 2.2 AA dans sa configuration de base par défaut. Il s’agit notamment de s’assurer que :

  • Le rapport de contraste des éléments textuels par rapport à leur arrière-plan est supérieur à 4.5:1.
  • Le contenu non textuel qui doit transmettre le sens (comme les icônes et les indicateurs de focus) a un rapport de contraste d’au moins 3:1 avec ses couleurs adjacentes.
  • Cet élément peut être utilisé à l’aide d’un clavier et d’une souris.
  • Le contenu est accessible à l’aide de lecteurs d’écran, tels que JAWS et VoiceOver.

La conformité de l’accessibilité dépend en définitive de la façon dont ce composant est implémenté et personnalisé. Les modifications apportées par l’auteur du contenu peuvent affecter l’accessibilité. Pour en savoir plus sur notre modèle de responsabilité partagée, consultez notre Déclaration d’accessibilité Jutro complète.