Tableau (Table)

Utilisez un tableau pour afficher des données comparables en lignes et colonnes.

attention

Ce composant nécessite une licence Pro valide en production.

Information	Valeur
Niveau	Pro
Composants Twig	dsfr:table, dsfr:table:head, dsfr:table:body, dsfr:table:row, dsfr:table:cell, dsfr:table:head:cell

Usage

• Passez les tableaux avec : ou composez les lignes avec les sous-composants.
• Les lignes doivent avoir le même nombre de cellules que les en-têtes.

Modes d'utilisation

Exemple principal

Tableau · exemple principal

<twig:dsfr:table>
  <twig:dsfr:table:head>
    <twig:dsfr:table:row>
      <twig:dsfr:table:head:cell>Nom</twig:dsfr:table:head:cell>
      <twig:dsfr:table:head:cell>Statut</twig:dsfr:table:head:cell>
    </twig:dsfr:table:row>
  </twig:dsfr:table:head>
  <twig:dsfr:table:body>
    <twig:dsfr:table:row>
      <twig:dsfr:table:cell>Alice Martin</twig:dsfr:table:cell>
      <twig:dsfr:table:cell>Actif</twig:dsfr:table:cell>
    </twig:dsfr:table:row>
  </twig:dsfr:table:body>
</twig:dsfr:table>

<twig:dsfr:table
  id="users-table"
  caption="Utilisateurs"
  :headers="['Nom', 'Statut']"
  :rows="[
    ['Alice Martin', 'Actif'],
    ['Karim Benali', 'En attente']
  ]"
/>

Composition

Cette page expose aussi les sous-composants publics suivants : dsfr:table:head, dsfr:table:body, dsfr:table:row, dsfr:table:cell, dsfr:table:head:cell. Utilisez-les quand vous devez contrôler précisément la structure Twig au lieu de passer un tableau de données.

astuce

Préférez les sous-composants publics aux include, macros ou copies de templates internes. Cela garde votre code aligné avec les évolutions du bundle.

Données

La prop headers accepte un tableau PHP/Twig. En Twig, préfixez la prop par : pour transmettre une vraie structure de données.

Syntaxe typée Twig Component

{# Le préfixe : garde le type tableau/booléen/numérique. #}
<twig:dsfr:table :headers="headers" />

Attributs HTML

Ajoutez vos attributs applicatifs directement sur le composant quand ils concernent le nœud racine rendu par le template.

Attributs pass-through

<twig:dsfr:table
  id="tableau-example"
  class="fr-mt-2w"
  data-controller="tableau"
/>

API publique

Composant	Rôle
dsfr:table	Composant principal de cette page.
dsfr:table:head	Sous-composant public utilisable en composition Twig.
dsfr:table:body	Sous-composant public utilisable en composition Twig.
dsfr:table:row	Sous-composant public utilisable en composition Twig.
dsfr:table:cell	Sous-composant public utilisable en composition Twig.
dsfr:table:head:cell	Sous-composant public utilisable en composition Twig.

Configuration

Option	Type	Défaut / requis	Valeurs et usage
id	string	Selon composant	Identifiant HTML, normalisé et utilisé par aria-controls quand nécessaire.
caption	string	Requis	Légende du tableau.
headers / rows	array|string	[]	Données tabulaires, JSON accepté.
captionVisible	bool	true	Affiche ou masque la légende.
bordered / fixedLayout / noScroll	bool	false	Variantes DSFR du tableau.
size	enum|null	null	sm, lg

Guide d'intégration

Question	Réponse
Famille DSFR	Contenu
Quand l'utiliser	Quand vous présentez, organisez ou approfondissez un contenu éditorial ou métier.
Quand éviter	Pour les contrôles de formulaire ou la navigation principale, sauf si le composant expose explicitement cette interaction.
API publique	Utilisez uniquement les composants Twig listés sur cette page : dsfr:table, dsfr:table:head, dsfr:table:body, dsfr:table:row, dsfr:table:cell, dsfr:table:head:cell.
Documentation DSFR	Consultez aussi la bibliothèque officielle : Système de Design de l'État.

Tableau : composition Twig et données headers

Variantes de tableau

• tailles disponibles via size quand le DSFR expose une variante compacte ou large.

Points de contrôle propres à ce composant

• Passez les tableaux avec : ou composez les lignes avec les sous-composants.
• Les lignes doivent avoir le même nombre de cellules que les en-têtes.
• Vérifiez un cas vide, un cas avec plusieurs entrées et un cas avec données dynamiques pour headers.
• Testez la composition avec dsfr:table:head, dsfr:table:body, dsfr:table:row, dsfr:table:cell, dsfr:table:head:cell sans copier les templates internes.
• Gardez une légende explicite et cohérente avec les colonnes affichées.

Accessibilité contenu

• Respectez la hiérarchie de titres de la page.
• Les images informatives ont un alt utile ; les images décoratives ont un alt vide.
• Les contenus masqués ou ouverts doivent rester pilotables au clavier.

Intégration Symfony/Twig pour dsfr:table

• Passez headers avec la syntaxe : pour conserver le type tableau : :headers="headers".
• Composez avec les sous-composants publics dsfr:table:head, dsfr:table:body, dsfr:table:row, dsfr:table:cell, dsfr:table:head:cell quand le rendu doit être plus précis que les props.
• Ajoutez vos attributs applicatifs (data-controller, data-action, aria-*, class) sur dsfr:table quand ils concernent son nœud racine.
• Gardez des id prévisibles pour dsfr:table, surtout dans les listes ou formulaires répétés.

Checklist de recette

• ordre de lecture cohérent
• titres dans le bon niveau
• contenu disponible sans souris
• rendu vérifié en thème clair et sombre ;
• rendu vérifié sur mobile, tablette et desktop ;
• aucune erreur dans le profiler DSFR ni dans l'inspecteur d'accessibilité du navigateur.

Erreurs fréquentes

Symptôme	Correction
Les données headers ne sont pas prises en compte	Ajoutez : devant la prop Twig : :headers.
Les classes DSFR semblent incomplètes	Utilisez les props du composant plutôt que des classes ajoutées à la main.
Un panneau, menu ou état actif ne fonctionne pas	Vérifiez que le JavaScript DSFR est chargé et que les identifiants HTML sont uniques.
Le composant rend en local mais pas en production	Vérifiez la licence avec php bin/console dsfr:license:validate.