Tableaux

Table de base (dans une card)

Pattern standard pour toutes les listes de données. Toujours envelopper dans une card avec overflow-x-auto pour le responsive.

<div class="card bg-base-100 shadow-sm border border-base-200">
  <div class="overflow-x-auto">
    <table class="table">
      <thead>
        <tr>
          <th>Référence</th>
          <th>Produit</th>
          <th>Fournisseur</th>
          <th>Statut</th>
          <th class="text-right">Qté</th>
        </tr>
      </thead>
      <tbody>
        <tr class="hover">
          <td class="font-mono text-xs">STTU755-BLK-M</td>
          <td>Creator T-Shirt</td>
          <td>Stanley/Stella</td>
          <td><span class="badge badge-primary badge-sm">Validé</span></td>
          <td class="text-right font-medium">250</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Table compacte

Ajouter table-sm pour les données denses ou les tableaux imbriqués dans des cards de détail.

<!-- table-sm pour les données denses -->
<table class="table table-sm">
  ...
</table>

Lignes cliquables

Quand toute la ligne pointe vers le détail d'un enregistrement, ajouter cursor-pointer sur le tr. Combiner avec hover pour le retour visuel.

<!-- cursor-pointer sur le tr, hover déjà géré par DaisyUI -->
<tr class="hover cursor-pointer" onclick="window.location='/commandes/241'">
  <td class="font-mono text-xs font-bold text-mc-navy">CMD-0241</td>
  <td>Scouts de Namur ASBL</td>
  <td><span class="badge badge-warning badge-sm">En attente</span></td>
  <td class="text-right font-medium">€ 1 240</td>
</tr>

Actions inline (colonne droite)

Placer les actions en dernière colonne, alignées à droite. Limiter à 2 actions visibles maximum — regrouper le reste dans un dropdown.

<td class="text-right">
  <a href="/produits/123" class="text-primary hover:underline text-sm font-medium mr-3">Voir</a>
  <a href="/produits/123/edit" class="text-base-content/40 hover:text-base-content text-sm">Éditer</a>
</td>

Cellules spéciales

Trois conventions de formatage à appliquer systématiquement selon le type de données.

<!-- SKUs, références, codes -->
<td class="font-mono text-xs">STTU755-BLK-M</td>

<!-- Quantités, prix, montants -->
<td class="text-right font-medium">1 250</td>

<!-- Statut avec badge -->
<td><span class="badge badge-primary badge-sm">Validé</span></td>

État vide (table sans résultats)

Ne jamais laisser un tbody vide. Toujours afficher icône + titre + corps + CTA si une action est possible.

<tbody>
  <tr>
    <td colspan="5">
      <div class="flex flex-col items-center py-12 text-center">
        <svg class="w-10 h-10 text-base-content/20 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
            d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16
               0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0
               01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
        </svg>
        <p class="font-accent font-bold text-sm text-mc-navy mb-1">Aucun produit trouvé</p>
        <p class="text-xs text-base-content/40">Modifiez vos filtres ou ajoutez un produit.</p>
      </div>
    </td>
  </tr>
</tbody>

Règles