dsfr-data-list - Composants

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

Attribut	Type	Description
`source`	String	ID du `<dsfr-data-source>` a ecouter (requis)
`columns`	String	Colonnes a afficher : `"key:Label, key2:Label2"`
`search`	Boolean	Afficher le champ de recherche
`filters`	String	Colonnes filtrables : `"col1,col2"`
`sort`	String	Tri par défaut : `"col:asc"` ou `"col:desc"`
`pagination`	Number	Nombre d'elements par page (0 = pas de pagination)
`export`	String	Formats d'export disponibles : `"csv"`
`url-sync`	Boolean	Synchronise le numero de page dans l'URL (replaceState)
`url-page-param`	String	Nom du parametre URL pour la page (défaut : `page`)
`server-sort`	Boolean	Deleguer le tri des colonnes au serveur via `dsfr-data-source-command` (orderBy). Les en-tetes de colonnes envoient des commandes de tri a la source amont au lieu de trier localement.

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

Variantes

1. Tableau simple

Affiche uniquement les données dans un tableau sans fonctionnalites supplementaires.

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

2. Tableau + recherche

Ajoute un champ de recherche pour filtrer les données en temps reel.

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

3. Tableau + filtres

Ajoute des menus deroulants pour filtrer par colonne spécifique.

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

4. Tableau + tri

Definit un tri par défaut et permet de trier en cliquant sur les en-tetes.

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

5. Tableau + pagination

Divise les données en pages pour une meilleure lisibilite.

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

6. Tableau + export CSV

Ajoute un bouton pour exporter les données au format CSV.

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

7. Tableau complet

Combine toutes les fonctionnalites : recherche, filtres, tri, pagination et export.

<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>

8. Pagination serveur

Quand la source utilise paginate, dsfr-data-list détecté automatiquement la pagination serveur. Chaque changement de page declenche un nouvel appel API. Le nombre total d'enregistrements et de pages vient des metadonnees de l'API.

<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>

Comportement : en mode pagination serveur, le total affiche (ex: "34 874 resultats") vient de meta.total. La recherche, le tri et les filtres ne s'appliquent qu'aux données de la page courante. Pour filtrer sur tout le dataset, utilisez les parametres API via params.

Conseils d'utilisation

Performance : Pour les grands ensembles de données, utilisez toujours la pagination pour eviter de surcharger le navigateur. Avec paginate sur dsfr-data-source, la pagination est geree cote serveur et seule la page courante est en memoire.

Accessibilité : Le composant inclut automatiquement les attributs ARIA necessaires pour les lecteurs d'écran.