Composant de tableau de données avec fonctionnalites de recherche, filtrage, tri, pagination et export CSV. Se connecte a un <dsfr-data-source> pour recevoir les données dynamiquement.

Attributs

Les anciens noms francais (colonnes, recherche, filtres, tri, server-tri) restent lus en alias deprecies (#300).

Événements : le composant n'émet pas d'événement custom ; il participe au data-bridge en consommateur (abonnement à la source) et émet des commandes dsfr-data-source-command (page, orderBy) en pagination/tri serveur.

En attente d'un filtre

Sur une page d'exploration, l'amont peut porter require-where (<dsfr-data-source> ou <dsfr-data-query>) et ne rien émettre tant qu'aucun filtre n'est posé — un tableau de 19 000 lignes que personne ne lira ne part pas. Le tableau rend alors le texte de idle-message (« Choisissez un filtre pour afficher les données » par défaut) à la place du message « aucune donnée » : rien n'a été demandé, aucune requête n'est revenue vide. Le mécanisme est décrit sur dsfr-data-source.

Classe CSS pilotée par une colonne

Colorer une cellule selon sa valeur ne se fait pas dans le tableau : la règle est une donnée, elle se calcule en amont. cell-class relie une colonne affichée à une colonne de classes produite par le compute de dsfr-data-normalize.

<dsfr-data-normalize id="calc" source="src"
  compute="alerte = when taux >= 50 then 'seuil-ok' else 'seuil-bas'">
</dsfr-data-normalize>

<dsfr-data-list source="calc"
  columns="commune:Commune, taux:Taux (%)"
  cell-class="taux:alerte">
</dsfr-data-list>

<style>.seuil-bas { color: var(--text-default-error); }</style>

Plusieurs paires se séparent par des virgules ; cell-class="taux" seul classe la cellule par sa propre valeur. Seuls les identifiants CSS sont retenus. Quand la colonne de classes n'est pas affichée, sa valeur est ajoutée à la cellule en texte pour les lecteurs d'écran : l'information n'est jamais portée par la seule couleur.

Filtrer d'un clic sur une ligne

Un tableau sert souvent de sélecteur : on clique une ligne, et les graphiques de la page se recentrent sur elle. refine-on-click nomme le champ dont la valeur de la ligne cliquée devient un filtre eq. Une colonne de sélection est ajoutée en tête du tableau : un bouton par ligne, atteignable au clavier et dont l'état est annoncé (aria-pressed) — la couleur de la ligne n'est jamais la seule marque.

<dsfr-data-context id="ctx" sources="src"></dsfr-data-context>
<dsfr-data-context-tags for="ctx"></dsfr-data-context-tags>

<dsfr-data-list
  source="src"
  columns="departement:Département, total:Total"
  refine-on-click="departement"
  context="ctx"
  label="Département">
</dsfr-data-list>

Premier clic = filtre, second clic sur la même ligne = retrait, clic sur une autre ligne = remplacement. Avec context (recommandé), le tableau s'enregistre comme filtre du dsfr-data-context : diffusion à toutes ses sources cibles au dialecte de chacune, tag supprimable, URL portée par le contexte, et label donne son libellé au tag. Sans context, la clause part directement à source — sans tag ni URL, et le tableau se filtre lui-même, ne gardant que la ligne cliquée jusqu'au second clic.

Variantes

<dsfr-data-list
  source="sites"
  columns="nom:Nom du site, ministere:Ministere, score_rgaa:RGAA (%)">
</dsfr-data-list>

<dsfr-data-list
  source="sites"
  columns="nom:Nom du site, ministere:Ministere, score_rgaa:RGAA (%)"
  search>
</dsfr-data-list>

<dsfr-data-list
  source="sites"
  columns="nom:Nom du site, ministere:Ministere, statut:Statut, score_rgaa:RGAA (%)"
  filters="ministere,statut">
</dsfr-data-list>

<dsfr-data-list
  source="sites"
  columns="nom:Nom du site, ministere:Ministere, score_rgaa:RGAA (%)"
  sort="score_rgaa:desc">
</dsfr-data-list>

<dsfr-data-list
  source="sites"
  columns="nom:Nom du site, ministere:Ministere, score_rgaa:RGAA (%)"
  pagination="5">
</dsfr-data-list>

<dsfr-data-list
  source="sites"
  columns="nom:Nom du site, ministere:Ministere, score_rgaa:RGAA (%)"
  export="csv">
</dsfr-data-list>

<dsfr-data-list
  source="sites"
  columns="nom:Nom du site, ministere:Ministere, score_rgaa:RGAA (%), score_dsfr:DSFR (%), statut:Statut, certificat_valide:Certificat"
  search
  filters="ministere,statut"
  sort="score_rgaa:desc"
  pagination="10"
  export="csv">
</dsfr-data-list>

<dsfr-data-source id="rappels"
  api-type="opendatasoft"
  dataset-id="rappelconso-v2-gtin-trie"
  base-url="https://data.economie.gouv.fr"
  server-side
  paginate page-size="20">
</dsfr-data-source>

<dsfr-data-list source="rappels"
  columns="modeles_ou_references:Produit, categorie_produit:Catégorie, marque_produit:Marque"
  search
  sort="date_publication:desc"
  pagination="20">
</dsfr-data-list>

Conseils d'utilisation