Tableau

Présentation tabulaire pour suivis de dossiers, listes réglementaires et données chiffrées. Encapsulez le tableau dans bj-table-wrapper pour autoriser le défilement horizontal sur mobile sans casser la mise en page. Largeurs fixes : bj-table--layout-fixed (prop Vue fixedLayout) — pas de classe bj-table--fixed.

Tableau par défaut

Référence	Intitulé	Statut	Date
BJ-2025-0142	Demande de passeport biométrique	En instruction	20/03/2025
BJ-2025-0189	Autorisation d’occupation du domaine public	Complété	17/03/2025
BJ-2025-0201	Certificat de non-gage	En attente de pièces	14/03/2025
BJ-2025-0167	Extrait du bulletin n°2 du casier judiciaire	Refusé	09/03/2025

<div class="bj-table-wrapper">
  <table class="bj-table">
    <thead>
      <tr>
        <th scope="col">Référence</th>
        <th scope="col">Intitulé</th>
        <th scope="col">Statut</th>
        <th scope="col">Date</th>
      </tr>
    </thead>
    <tbody>…</tbody>
  </table>
</div>

Tableau bordé

bj-table--bordered encadre cellules et en-têtes pour une lecture plus nette sur fond clair.

Référence	Intitulé	Statut	Date
BJ-2025-0142	Demande de passeport biométrique	En instruction	20/03/2025
BJ-2025-0189	Autorisation d’occupation du domaine public	Complété	17/03/2025
BJ-2025-0201	Certificat de non-gage	En attente de pièces	14/03/2025
BJ-2025-0167	Extrait du bulletin n°2 du casier judiciaire	Refusé	09/03/2025

<table class="bj-table bj-table--bordered">…</table>

Tableau rayé

bj-table--striped alterne le fond des lignes du corps pour faciliter le repérage des lignes sur de longues listes.

Référence	Intitulé	Statut	Date
BJ-2025-0142	Demande de passeport biométrique	En instruction	20/03/2025
BJ-2025-0189	Autorisation d’occupation du domaine public	Complété	17/03/2025
BJ-2025-0201	Certificat de non-gage	En attente de pièces	14/03/2025
BJ-2025-0167	Extrait du bulletin n°2 du casier judiciaire	Refusé	09/03/2025

<table class="bj-table bj-table--striped">…</table>

Colonnes à largeur fixe

bj-table--layout-fixed applique table-layout: fixed pour stabiliser les colonnes sur des tableaux avec beaucoup de texte.

Référence	Intitulé long poussant les autres colonnes	Statut
BJ-2025-0142	Demande de passeport biométrique avec texte supplémentaire pour tester le comportement des largeurs.	En instruction
BJ-2025-0189	Autorisation d’occupation du domaine public	Complété

<div class="bj-table-wrapper">
  <table class="bj-table bj-table--layout-fixed">
    <thead>…</thead>
    <tbody>…</tbody>
  </table>
</div>

Combinaisons bordé / rayé / fixe

Les modificateurs bj-table--bordered, bj-table--striped et bj-table--layout-fixed sont indépendants et cumulables.

Réf.	Libellé	État
A-101	Dossier bordé, rayé, largeurs fixes	OK
A-102	Combinaison des trois modificateurs	OK
A-103	Ligne paire (fond rayé)	Vue

<table class="bj-table bj-table--bordered bj-table--striped bj-table--layout-fixed">
  <thead>…</thead>
  <tbody>…</tbody>
</table>

Tableau avec légende

La balise <caption> résume le contenu du tableau pour tous les utilisateurs, y compris ceux qui naviguent au lecteur d’écran.

Dossiers déposés au guichet unique - mars 2025
Référence	Intitulé	Statut	Date
BJ-2025-0142	Demande de passeport biométrique	En instruction	20/03/2025
BJ-2025-0189	Autorisation d’occupation du domaine public	Complété	17/03/2025

<table class="bj-table">
  <caption>Dossiers déposés au guichet unique - mars 2025</caption>
  <thead>…</thead>
  <tbody>…</tbody>
</table>

Tableau interactif (tri, filtre, pagination)

Ajoutez data-bj-table sur le wrapper, data-bj-table-sort sur les en-têtes triables, data-bj-table-filter sur un champ de recherche, et data-bj-table-paginate="5" pour paginer.

Référence	Intitulé	Statut	Date
BJ-2025-0142	Demande de passeport biométrique	En instruction	20/03/2025
BJ-2025-0189	Autorisation d'occupation du domaine public	Complété	17/03/2025
BJ-2025-0201	Certificat de non-gage	En attente	14/03/2025
BJ-2025-0167	Extrait du bulletin n°2 du casier judiciaire	Refusé	09/03/2025
BJ-2025-0210	Demande de permis de construire	En instruction	22/03/2025
BJ-2025-0215	Inscription au registre du commerce	Complété	23/03/2025
BJ-2025-0220	Demande de carte nationale d'identité	En attente	18/03/2025
BJ-2025-0225	Certificat de naissance	Complété	15/03/2025

<div data-bj-table data-bj-table-paginate="5">
  <div class="bj-table__header">
    <input type="text" class="bj-table__search" data-bj-table-filter placeholder="Rechercher…" />
    <span class="bj-table__count"></span>
  </div>
  <table class="bj-table bj-table--sortable">
    <thead>
      <tr>
        <th scope="col" data-bj-table-sort>Référence</th>
        <th scope="col" data-bj-table-sort>Intitulé</th>
        …
      </tr>
    </thead>
    <tbody>…</tbody>
  </table>
  <div class="bj-table__footer"></div>
</div>

Classes CSS

Classe	Description
`bj-table-wrapper`	Conteneur avec défilement horizontal - à utiliser pour le responsive sans réduire la lisibilité des colonnes.
`bj-table`	Tableau de base du design system.
`bj-table--bordered`	Bordures visibles sur cellules et en-têtes.
`bj-table--striped`	Lignes du corps en alternance de fond.
`bj-table--layout-fixed`	Largeurs de colonnes fixes (table-layout: fixed).
`bj-table--sortable`	À combiner avec <code>data-bj-table-sort</code> sur les en-têtes : styles des colonnes triables.
`bj-table--no-caption`	Masque visuellement la légende tout en la conservant pour l’accessibilité (équivalent sr-only).
`bj-table__header`	Zone au-dessus du tableau (filtre, compteur) — utilisée par le script tableau interactif.
`bj-table__footer`	Zone sous le tableau (pagination) — remplie par le script interactif.
`bj-table__search`	Champ de recherche avec <code>data-bj-table-filter</code>.
`bj-table__count`	Compteur de lignes mis à jour par le script interactif.