dsfr-data-list - Composants

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

Attributs

Attribut	Type	Description
`source`	String	ID du `<dsfr-data-source>` a ecouter (requis)
`colonnes`	String	Colonnes a afficher : `"key:Label, key2:Label2"`
`recherche`	Boolean	Afficher le champ de recherche
`filtres`	String	Colonnes filtrables : `"col1,col2"`
`tri`	String	Tri par defaut : `"col:asc"` ou `"col:desc"`
`pagination`	Number	Nombre d'elements par page (0 = pas de pagination)
`export`	String	Formats d'export disponibles : `"csv"`
`server-tri`	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.

Variantes

1. Tableau simple

Affiche uniquement les donnees dans un tableau sans fonctionnalites supplementaires.

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

2. Tableau + recherche

Ajoute un champ de recherche pour filtrer les donnees en temps reel.

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

3. Tableau + filtres

Ajoute des menus deroulants pour filtrer par colonne specifique.

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

4. Tableau + tri

Definit un tri par defaut et permet de trier en cliquant sur les en-tetes.

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

5. Tableau + pagination

Divise les donnees en pages pour une meilleure lisibilite.

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

6. Tableau + export CSV

Ajoute un bouton pour exporter les donnees au format CSV.

<dsfr-data-list
  source="sites"
  colonnes="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"
  colonnes="nom:Nom du site, ministere:Ministere, score_rgaa:RGAA (%), score_dsfr:DSFR (%), statut:Statut, certificat_valide:Certificat"
  recherche="true"
  filtres="ministere,statut"
  tri="score_rgaa:desc"
  pagination="10"
  export="csv">
</dsfr-data-list>

8. Pagination serveur

Quand la source utilise paginate, dsfr-data-list detecte 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"
  colonnes="modeles_ou_references:Produit, categorie_produit:Categorie, marque_produit:Marque"
  recherche="true"
  tri="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 donnees 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 donnees, 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.

Accessibilite : Le composant inclut automatiquement les attributs ARIA necessaires pour les lecteurs d'ecran.