DataTable
À quoi il sert
DataTable écrit un jeu de données en tableau : en-têtes associés, valeurs manquantes dites, filtres de séries sans JavaScript.
Quand l’utiliser
- Donner l’équivalent texte exact d’un graphique : toutes les valeurs, au même format que les étiquettes.
- Laisser le lecteur masquer des séries (cases à cocher) pour comparer deux colonnes.
- Afficher un tableau complet par défaut : sans filtre, ou si le navigateur ignore :has(), rien n’est masqué.
Quand ne pas l’utiliser
- Pour montrer une tendance : utiliser LineChart ou Sparkline, le tableau en est le complément.
- Avec plus de six séries : le build échoue avec chart.too-many-series ; regrouper en amont.
- Pour filtrer les lignes ou trier : ce composant ne masque que des colonnes, sans JavaScript.
- Avec un jeu invalide : le build échoue avec le code dataset.* correspondant.
Exemples
Visites mensuelles avec quatre mois manquants| Mois | Visites (visites) |
|---|
| 1 janvier 2025 | 820 |
|---|
| 1 février 2025 | 790 |
|---|
| 1 mars 2025 | 880 |
|---|
| 1 avril 2025 | donnée manquante |
|---|
| 1 mai 2025 | donnée manquante |
|---|
| 1 juin 2025 | 980 |
|---|
| 1 juillet 2025 | 870 |
|---|
| 1 août 2025 | 810 |
|---|
| 1 septembre 2025 | donnée manquante |
|---|
| 1 octobre 2025 | 1 180 |
|---|
| 1 novembre 2025 | 1 240 |
|---|
| 1 décembre 2025 | 1 190 |
|---|
Visites par source, sans filtre| Mois | Recherche (visites) | Direct (visites) | Référents (visites) |
|---|
| 1 janvier 2025 | 410 | 260 | 150 |
|---|
| 1 février 2025 | 400 | 250 | 140 |
|---|
| 1 mars 2025 | 450 | 270 | 160 |
|---|
| 1 avril 2025 | 480 | 290 | 170 |
|---|
| 1 mai 2025 | 520 | 310 | 180 |
|---|
| 1 juin 2025 | 500 | 300 | 180 |
|---|
| 1 juillet 2025 | 430 | 270 | 170 |
|---|
| 1 août 2025 | 400 | 250 | 160 |
|---|
| 1 septembre 2025 | 540 | 320 | 190 |
|---|
| 1 octobre 2025 | 600 | 350 | 230 |
|---|
| 1 novembre 2025 | 640 | 380 | 220 |
|---|
| 1 décembre 2025 | 610 | 360 | 220 |
|---|
---
import DataTable from '@paulperigault/astro/DataTable.astro';
---
<DataTable id="trafic" title="Visites par source en 2025" dataset={trafic} />
Variantes
Recommandation d’usage
Placer le tableau sous le graphique qu’il double. Les filtres n’agissent que sur lui : ils ne redessinent pas le graphique.
Limites connues
- Les filtres masquent des colonnes, pas des lignes ; au plus six séries.
- Un navigateur sans :has() ignore les cases : le tableau reste complet.
Accessibilité
Clavier
- Chaque filtre est une case à cocher native : Tab pour l’atteindre, Espace pour la basculer.
- La région du tableau est focalisable et défile au clavier.
- Cibles des cases : 24 px de haut au moins (WCAG 2.5.8).
Lecteur d’écran
- Le tableau porte une légende (caption) et la région a le même nom accessible.
- Les colonnes de séries sont des th scope="col", l’abscisse des th scope="row".
- Une colonne masquée par un filtre est retirée de l’arbre d’accessibilité : le groupe de filtres, nommé par sa légende, dit lesquelles sont affichées.
Garanti par le composant
- Une valeur manquante est écrite (« donnée manquante »), jamais omise ni mise à zéro.
- Tableau complet sans action : toutes les cases sont cochées au chargement.
- Zéro JavaScript, aucune animation, aucun attribut style ; colonnes de 120 px au moins, la région défile au lieu de couper les mots.
À la charge de l’intégrateur
- Donner un id unique par page (lettres, chiffres, tirets) : il relie chaque case à son libellé.
- Nommer les séries par ce qu’elles mesurent : ce libellé est celui du filtre et de l’en-tête.
- Le masquage repose sur :has() ; les navigateurs sans :has() affichent le tableau complet.
Propriétés
Propriétés de DataTable| Propriété | Type | Défaut | Description |
|---|
| id (obligatoire) | string | — | Préfixe unique des ids des cases à cocher : lettres, chiffres et tirets. |
|---|
| title (obligatoire) | string | — | Légende du tableau, nom accessible de sa région défilante. |
|---|
| dataset (obligatoire) | unknown | — | Jeu de données (`schema: 1`) : validé, sinon le build échoue avec le code d'erreur. |
|---|
| locale | string | 'fr' | Locale des nombres et des dates. Défaut : `fr`. |
|---|
| filters | boolean | true | Filtres de séries (défaut : oui s'il y a deux séries ou plus). |
|---|
| filtersLabel | string | 'Séries affichées' | Légende du groupe de filtres. |
|---|
| class | string | — | Réservé au placement du composant dans son parent. |
|---|
Jetons utilisés
--pp-color-muted--pp-size-target-min--pp-space-3xs--pp-space-s--pp-space-xs
Preuves et décisions