Tableau

جدولTable

Stablesrc/dsm/components/table.tsx

Le tableau présente des données structurées en lignes et colonnes — indicateurs, listes de démarches, résultats de recherche. Il défile horizontalement sur petit écran et prend en charge le tri, le zébrage, l'affichage compact et l'en-tête figé.

Import

import { Table } from "@/dsm/components/table";

Exemples

Par défaut

Un tableau simple avec légende et colonne numérique.

LTR

Démarches les plus consultées cette semaine
Démarche	Ministère	Délai moyen
Renouvellement de la CNIE	Intérieur	5 jours
Extrait d'acte de naissance	Intérieur	48 heures
Carte grise	Équipement et Eau	3 jours
Attestation fiscale	Économie et Finances	24 heures

Variantes

Comparaison des styles zébré et bordé + compact.

LTR

Zébrée

Population des principales villes (RGPH 2024)
Ville	Région	Population
Casablanca	Casablanca-Settat	3 359 818
Rabat	Rabat-Salé-Kénitra	577 827
Fès	Fès-Meknès	1 112 072
Marrakech	Marrakech-Safi	928 850
Tanger	Tanger-Tétouan-Al Hoceïma	947 952

Bordée et compacte

Population des principales villes (RGPH 2024)
Ville	Région	Population
Casablanca	Casablanca-Settat	3 359 818
Rabat	Rabat-Salé-Kénitra	577 827
Fès	Fès-Meknès	1 112 072
Marrakech	Marrakech-Safi	928 850
Tanger	Tanger-Tétouan-Al Hoceïma	947 952

Démarches les plus demandées

Cas réel : tri interactif, en-tête figé et zébrage.

LTR

Démarches les plus demandées, par volume mensuel
Démarche	Ministère
Renouvellement de la CNIE	Intérieur	412 000	5 j
Extrait d'acte de naissance	Intérieur	356 000	2 j
Casier judiciaire (extrait B3)	Justice	187 300	4 j
Carte grise (changement de propriétaire)	Équipement et Eau	128 500	3 j
Attestation fiscale	Économie et Finances	94 200	1 j
Duplicata du permis de conduire	Équipement et Eau	41 800	7 j

Usage

Quand l'utiliser

Utilisez un tableau pour comparer plusieurs valeurs numériques ou catégorielles ligne par ligne.
Ajoutez `caption` pour décrire le contenu du tableau, y compris quand `captionHidden` la réserve aux lecteurs d'écran.
Utilisez `TableSortButton` lorsque l'utilisateur bénéficie réellement de trier une colonne (volumes, dates, montants).

Quand ne pas l'utiliser

N'utilisez pas un tableau pour une simple liste à une colonne : une liste HTML classique suffit et se lit plus facilement au clavier.
Évitez plus de 6 à 7 colonnes visibles simultanément : regroupez ou renvoyez le détail vers une page dédiée.

Accessibilité & langues

Accessibilité

`TableHeader` pose `scope="col"` automatiquement ; associez toujours vos données à un en-tête explicite.
`TableSortButton` place `aria-sort` sur la cellule d'en-tête parente (`ascending`/`descending`) et porte un libellé caché annonçant l'action de tri suivante.
Le défilement horizontal reste accessible au clavier via la tabulation naturelle du conteneur `overflow-x-auto`.

RTL & multilingue

Les bordures de colonnes (`bordered`) et l'alignement des cellules numériques (`text-end`) s'inversent automatiquement grâce aux propriétés logiques.
Le sens du défilement horizontal suit `dir` sans configuration additionnelle.

Propriétés

Table

Propriété	Type	Défaut	Description
caption	ReactNode	—	Légende du tableau.
captionHidden	boolean	false	Masque visuellement la légende (reste accessible).
zebra	boolean	false	Alterne le fond des lignes du corps.
dense	boolean	false	Réduit le padding vertical des cellules.
bordered	boolean	false	Ajoute un cadre et des séparateurs de colonnes.
stickyHeader	boolean	false	Fige l'en-tête pendant le défilement vertical du conteneur.
containerClassName	string	—	Classes appliquées au conteneur de défilement.

TableHeader / TableCell

Propriété	Type	Défaut	Description
numeric	boolean	false	Aligne le contenu à la fin, en chiffres tabulaires.

TableSortButton

Propriété	Type	Défaut	Description
direction	"none" \| "asc" \| "desc"	none	État de tri courant de la colonne.
onSort	() => void	—	Appelé au clic, à vous de faire évoluer `direction` et les données.
numeric	boolean	false	Aligne le bouton contre la fin de l'en-tête `numeric`.