Composant d'affichage dynamique qui genere des elements HTML repetitifs (cartes, tuiles, etc.) a partir d'un template et d'une source de donnees. Se connecte a un <dsfr-data-source>, <dsfr-data-query> ou <dsfr-data-normalize> pour recevoir les donnees.

Attributs

AttributTypeDescription
sourceStringID de la source de donnees a ecouter (requis)
colsNumberNombre de colonnes dans la grille (1-6, defaut: 1)
paginationNumberNombre d'elements par page (0 = tout afficher)
emptyStringMessage quand aucune donnee (defaut: "Aucun resultat")
gapStringClasse CSS de gap pour la grille (defaut: "fr-grid-row--gutters")
uid-fieldStringChamp de donnees a utiliser comme identifiant unique par element (vide = index)
url-syncBooleanSynchronise le numero de page dans l'URL via replaceState
url-page-paramStringNom du parametre URL pour la page (defaut: "page")

Syntaxe du template

SyntaxeDescription
{{champ}}Valeur echappee (HTML-safe)
{{{champ}}}Valeur brute (non echappee)
{{champ|defaut}}Valeur avec fallback si null/undefined
{{champ:number}}Valeur avec separateurs de milliers (ex: 32073247 → 32 073 247)
{{champ:number|0}}Format number + fallback si null/undefined
{{champ.sous.cle}}Acces aux proprietes imbriquees
{{$index}}Index de l'element (0-based)
{{$uid}}Identifiant unique de l'element

Variantes

1. Cartes DSFR

Affiche les donnees sous forme de cartes DSFR dans une grille a 3 colonnes.

<dsfr-data-display source="sites" cols="3" pagination="6">
  <template>
    <div class="fr-card">
      <div class="fr-card__body">
        <div class="fr-card__content">
          <h3 class="fr-card__title">{{nom}}</h3>
          <p class="fr-card__desc">Ministere : {{ministere}}</p>
        </div>
        <div class="fr-card__footer">
          <p class="fr-badge fr-badge--sm">RGAA : {{score_rgaa}}%</p>
        </div>
      </div>
    </div>
  </template>
</dsfr-data-display>

2. Tuiles DSFR

Affiche les donnees sous forme de tuiles dans une grille a 4 colonnes.

<dsfr-data-display source="sites" cols="4">
  <template>
    <div class="fr-tile">
      <div class="fr-tile__body">
        <div class="fr-tile__content">
          <h3 class="fr-tile__title">{{nom}}</h3>
          <p class="fr-tile__detail">{{statut}}</p>
          <p class="fr-tile__desc">Score DSFR : {{score_dsfr}}%</p>
        </div>
      </div>
    </div>
  </template>
</dsfr-data-display>

3. Liste avec index

Affiche une liste simple avec l'index de chaque element via {{$index}}.

<dsfr-data-display source="sites" cols="1" pagination="5">
  <template>
    <div class="fr-callout">
      <h3 class="fr-callout__title">#{{$index}} -- {{nom}}</h3>
      <p class="fr-callout__text">
        {{ministere}} -- Score RGAA : {{score_rgaa}}%
      </p>
    </div>
  </template>
</dsfr-data-display>

4. Valeurs par defaut

Utilise la syntaxe {{champ|defaut}} pour afficher une valeur de remplacement quand un champ est absent.

<dsfr-data-display source="sites" cols="2" pagination="4">
  <template>
    <div class="fr-card fr-card--shadow">
      <div class="fr-card__body">
        <div class="fr-card__content">
          <h3 class="fr-card__title">{{nom}}</h3>
          <p class="fr-card__desc">
            Categorie : {{categorie|Non renseignee}}
          </p>
        </div>
      </div>
    </div>
  </template>
</dsfr-data-display>

5. Pagination serveur

Quand la source utilise paginate, dsfr-data-display detecte automatiquement la pagination serveur. Chaque changement de page declenche un nouvel appel API au lieu de paginer en local. Le nombre total de pages est calcule depuis les metadonnees de l'API (meta.total). 

<dsfr-data-source id="elus"
  url="https://tabular-api.data.gouv.fr/api/resources/.../data/"
  paginate page-size="12">
</dsfr-data-source>

<dsfr-data-display source="elus" cols="3" pagination="12">
  <template>
    <div class="fr-card">
      <div class="fr-card__body">
        <div class="fr-card__content">
          <h3 class="fr-card__title">{{Nom}} {{Prenom}}</h3>
          <p class="fr-card__desc">{{Commune}}</p>
        </div>
      </div>
    </div>
  </template>
</dsfr-data-display>

Comportement : en mode pagination serveur, les donnees recues sont affichees telles quelles (pas de slicing client). Le total affiche (ex: "1 743 pages") vient de meta.total / meta.page_size. La recherche et le tri ne s'appliquent qu'aux donnees de la page courante.

Conseils d'utilisation

Template : Le contenu du <template> est clone pour chaque element de donnees. Utilisez n'importe quelle structure HTML DSFR (cartes, tuiles, callouts, badges...).

Performance : Pour les grands ensembles de donnees, utilisez l'attribut pagination pour limiter le nombre d'elements rendus simultanement.

Securite : Les valeurs {{champ}} sont echappees par defaut (HTML-safe). Utilisez {{{champ}}} (triple accolades) uniquement si vous faites confiance a la source de donnees.