Données

Tableau

stableClasses hb-table-wrap hb-table hb-table-foot hb-table--sticky hb-table--dense hb-table-touch hb-cell-title hb-cell-sub num mono selVuetify 2 v-data-table dense (habillée par vuetify.scss)Vuetify 3 v-data-table density="compact"

Quand l'utiliser

Pour des données homogènes à comparer ligne à ligne : produits, factures, relevés. Pour des entrées hétérogènes à lire une à une (tâches, commentaires), une liste. Dans une application Vuetify avec tri, pagination et sélection, v-data-table : elle reçoit le même habillage.

Produit	PLU	Quantité	Montant HT	État
Moules bouchot PomonaDLC 08/11	164	12,500 kg	60,00 €	Conforme
Saumon entier Marée OcéaneDLC 10/11	210	8,200 kg	107,42 €	À vérifier
Sans nom Pomona	318	4,000 kg	40,80 €	Écart de poids
3 produits		24,700 kg	208,22 €

1 sélectionné

Code

<div class="hb-table-wrap">
  <table class="hb-table">
    <thead><tr><th class="sel"><input type="checkbox" class="hb-check" aria-label="Tout sélectionner"></th><th aria-sort="ascending">Produit</th><th aria-sort="none">PLU</th><th class="num" aria-sort="none">Quantité</th><th class="num" aria-sort="none">Montant HT</th><th>État</th></tr></thead>
    <tbody>
      <tr aria-selected="true"><td class="sel"><input type="checkbox" class="hb-check" checked aria-label="Sélectionner"></td><td><div class="hb-cell-title">Moules bouchot</div><div class="hb-cell-sub"><span>Pomona</span><span>DLC 08/11</span></div></td><td class="mono">164</td><td class="num">12,500 kg</td><td class="num">60,00 €</td><td><span class="hb-badge hb-badge-success">Conforme</span></td></tr>
      <tr><td class="sel"><input type="checkbox" class="hb-check" aria-label="Sélectionner"></td><td><div class="hb-cell-title">Saumon entier</div><div class="hb-cell-sub"><span>Marée Océane</span><span>DLC 10/11</span></div></td><td class="mono">210</td><td class="num">8,200 kg</td><td class="num">107,42 €</td><td><span class="hb-badge hb-badge-warning">À vérifier</span></td></tr>
      <tr><td class="sel"><input type="checkbox" class="hb-check" aria-label="Sélectionner"></td><td><div class="hb-cell-title hb-cell-title--empty">Sans nom</div><div class="hb-cell-sub"><span>Pomona</span></div></td><td class="mono">318</td><td class="num">4,000 kg</td><td class="num">40,80 €</td><td><span class="hb-badge hb-badge-danger">Écart de poids</span></td></tr>
    </tbody>
    <tfoot><tr><td></td><td>3 produits</td><td></td><td class="num">24,700 kg</td><td class="num">208,22 €</td><td></td></tr></tfoot>
  </table>
  <div class="hb-table-foot"><span>1 sélectionné</span><button class="hb-btn hb-btn-sm">Exporter</button></div>
</div>

Cellules

Classe	Usage
`hb-cell-title` + `hb-cell-sub`	libellé principal et une ligne de métadonnées séparées par des points
`num`	nombre : à droite, tabulaire, demi-gras ; l'unité dans la cellule
`mono`	code PLU, EAN, identifiant
`sel`	colonne de case à cocher, 22 px
`hb-badge`	état, jamais un texte coloré seul

Options

Tri : aria-sort="ascending|descending|none" sur le <th> ; la flèche et la couleur suivent, l'application trie.
Sélection : aria-selected="true" sur la ligne, fond métier doux.
hb-table--sticky : en-tête collant dans un hb-table-wrap à hauteur bornée. hb-table--dense : lignes de 30 px pour crm-front. hb-table-touch : 48 px hors densité touch.
Totaux dans un <tfoot> ; compte, sélection et export dans hb-table-foot.
Pagination sous le tableau : voir Pagination. Au-delà de 50 lignes sans pagination, v-data-table avec v-virtual-scroll.

Téléphone

Un tableau ne se replie pas : hb-table-wrap défile horizontalement, les deux premières colonnes doivent suffire à identifier la ligne. Pour un écran pensé mobile, une liste simple.