Table de données

Les tables de données doivent soutenir le balayage, le tri, le filtrage et la comparaison répétée. Gardez les libellés de colonnes stables, exposez la direction du tri et évitez de cacher les données essentielles derrière des mises en page décoratives.

Quand l’utiliser#

• Une table soutient le balayage, le tri, le filtrage et la comparaison répétée; gardez les libellés de colonnes stables, exposez la direction du tri et évitez de cacher les données essentielles derrière des mises en page décoratives
• Utilisez le wrapper de table partagé dès qu’une table doit offrir un tri interactif
• Lorsqu’une page de type tableau expose des filtres actifs, utilisez le partiel partagé de rangée de filtres plutôt que les classes de tags de métadonnées — les filter chips changent les lignes visibles; les tags de métadonnées décrivent seulement le contenu
• Gardez les largeurs de colonnes cohérentes entre tables répétées — préférez des utilitaires de largeur explicites sur les en-têtes et les cellules correspondantes, et utilisez fixed: true lorsque plusieurs tables sur la même page doivent s’aligner visuellement

Implémentation#

{{ partial "data-page/table-wrap.html" (dict "minWidth" "56rem" "sortable" true "fixed" true) }}
    <thead>…</thead>
    <tbody>…</tbody>
{{ partial "data-page/table-wrap.html" (dict "mode" "close") }}

<div class="overflow-x-auto border-y border-line" style="--data-table-min-width: 56rem;" tabindex="0" role="region" aria-label="Table défilante">
  <table class="w-full min-w-[var(--data-table-min-width)] table-fixed border-collapse text-left text-sm" data-sortable-table>
    <thead>
      <tr class="border-b border-line">
        <th scope="col" aria-sort="ascending">
          <button class="table-sort-button" type="button" data-table-sort="name">Nom</button>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr data-table-row>
        <td data-sort-value="2026-08-11">2026.08.11</td>
      </tr>
    </tbody>
  </table>
</div>

Le partiel Hugo est layouts/partials/data-page/table-wrap.html, appelé une fois pour ouvrir le wrapper de défilement et la <table>, puis une fois avec mode: "close" pour les fermer. Le wrapper lui-même porte tabindex="0", role="region" et le libellé i18n dataTableScrollRegion, pour que les personnes au clavier puissent l’atteindre et la faire défiler indépendamment du contenu de la table; la portée des <th> est fixée par la page appelante, pas par le partiel, puisque seule la page qui rédige la ligne sait si un en-tête nomme une colonne (scope="col", le cas courant) ou une ligne (scope="row", utilisé quand la première cellule d’une ligne identifie cette ligne, comme sur la table du registre Starfleet). Le comportement de tri se trouve dans assets/js/site.js (initTableLists); les affordances de tri et les symboles de direction se trouvent dans assets/css/site.css. L’archive des conférences précède ce contrat et utilise un comportement parallèle (initTalksArchive avec les attributs data-talks-*) sur les mêmes classes visuelles.

Options#

Accessibilité#

• Le composant est une vraie <table> avec <thead> et <tbody> dans un <div> défilant; fournissez caption pour que les lecteurs d’écran aient un nom de table — le partiel la rend comme <caption> masquée visuellement
• Chaque <th> porte scope="col" ou scope="row", fixé par la page appelante, pour que les lecteurs d’écran annoncent à quelle colonne ou ligne une cellule appartient plutôt que de se fier à la position implicite du <th> dans <thead>
• Le wrapper de défilement porte tabindex="0", role="region" et le libellé i18n dataTableScrollRegion, pour que les personnes au clavier seul puissent atteindre et faire défiler des tables larges même sans cellule pouvant recevoir le focus à l’intérieur
• Les en-têtes de tri sont de vrais <button type="button"> dans les cellules <th> : Tab atteint chacun, et Entrée ou Espace relance le tri, sans gestion de touches particulière
• initTableLists maintient aria-sort à jour — ascending, descending ou none — sur chaque en-tête de colonne <th>, où ARIA définit l’attribut; il ne place pas aria-sort sur le bouton imbriqué
• Évitez d’utiliser une table pour la mise en page — <table> annonce la structure de lignes et de colonnes aux lecteurs d’écran; les grilles décoratives relèvent du CSS