Tableau
Le tableau permet de présenter une liste structurée de données textuelles et/ou numériques dans le but de simplifier l’analyse et la comparaison d’informations pour l’usager.
- Un titre, qui peut être positionné en haut (par défaut), en bas ou hors écran (balise caption) — Obligatoire
- Un bouton de tri par colonne — En option
- Une case à cocher de sélection de colonne — En option
- Une ou plusieurs données, par cellule — En option
- Une barre d’actions haute, pouvant contenir (uniquement et dans cet ordre) - le nombre de lignes sélectionnées, une barre de recherche, des boutons d’actions liés à la sélection de lignes et un contrôle segmenté — En option
- Une ligne d’en-tête de colonne — Obligatoire
- Plusieurs lignes de corps — Obligatoire
- Des bordures horizontales entre les lignes — Obligatoire
- Une barre d’actions basse, pouvant contenir (uniquement et dans cet ordre) - le nombre total de lignes du tableau, une liste déroulante, une pagination et des boutons d’actions agissants sur tout le tableau — En option
- Une colonne de sélection de ligne, toujours ferrée à gauche — En option
- Des bordure verticales entre les colonnes, uniquement obligatoire dans le cas d’un tableau complexe — En option
Variations
Tableau non scrollable
Variantes esthétiques
- Bordures horizontales (par défaut)
- Bordures horizontales et verticales
Tailles
Le tableau prend automatiquement la taille de son conteneur.
Ce conteneur peut être scrollable horizontalement. Ceci est courant sur les écrans plus petits où il peut être impossible d'afficher le tableau complet sur l'écran de l'appareil. Le conteneur est donc responsive par défaut.
Toutefois, prenez garde à ce que les informations clés soient visibles au premier coup d’œil même sur un écran de petite taille.
Par défaut, la largeur des cellules s’adapte automatiquement à leur contenu. En revanche, leur hauteur s’ajuste en 3 tailles :
- SM pour small
- MD pour medium
- LG pour large
Ainsi si la taille des composants intégrés dans les cellules ne change pas, cela vous permet toutefois de varier la densité d’affichage de votre tableau en fonction de son contenu.
États
Etat par défaut
Ligne sélectionnée
Personnalisation
Le tableau n’est pas personnalisable.
Toutefois, l’ensemble des composants imbriqués (icône, pictogramme, tag, badge, bouton, lien, champ de saisie, infobulle, interrupteur et liste déroulante) peuvent être personnalisés selon leurs propres règles de personnalisation.
Par ailleurs, certains éléments sont optionnels - voir la structure du composant .