Tableaux de données

Problème

Afficher beaucoup de lignes (transactions, mouvements) sans perdre en lisibilité ni en performance. Les montants doivent s'aligner verticalement pour permettre le scan rapide.

Composants utilisés

• AccountTransactionsFilters — barre de filtres (recherche, dates, catégories)
• Rows sur mesure (pas de <table> HTML dans l'app — layout via flex/grid pour le contrôle du dark mode)

Structure d'une ligne

<div className="grid grid-cols-[1fr_auto_auto] items-center gap-4 py-3 border-b border-[var(--color-border)]">
  <div>
    <p className="text-sm font-medium">{label}</p>
    <p className="text-xs text-muted">{category}</p>
  </div>
  <p className="text-xs text-muted">{date}</p>
  <p className="text-sm font-semibold tabular-nums">{amount}</p>
</div>

Règles

• tabular-nums obligatoire sur les colonnes de montants (voir Typographie)
• Tri : indicateur visuel (flèche) sur la colonne active ; cliquable sur l'en-tête
• Filtres au-dessus du tableau, dans une sticky bar si liste longue
• Pagination côté serveur si > 100 lignes
• Row hover : hover:bg-[var(--color-surface-hover)] — feedback subtil
• Zebra stripes : à éviter (cassent le scan vertical) ; préférer des séparateurs fins

Densité

Densité	Hauteur ligne	Usage
Compacte	40–48 px	Liste transactions, historique
Confortable	56–72 px	Liste comptes (avec infos riches)

À ne pas faire

• Afficher un montant sans tabular-nums dans une colonne
• Tronquer silencieusement un long libellé (utiliser title + ellipsis)
• Charger les 10 000 transactions d'un coup — paginer ou virtualiser

Voir aussi

• Financial display
• Typography