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

Attributs

AttributTypeDescription
sourceStringID de la source de données a ecouter (requis)
colsNumberNombre de colonnes dans la grille (1-6, défaut: 1)
paginationNumberNombre d'elements par page (0 = tout afficher)
emptyStringMessage quand aucune donnee (défaut: "Aucun resultat")
gapStringClasse CSS de gap pour la grille (défaut: "fr-grid-row--gutters")
uid-fieldStringChamp de données 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 (défaut: "page")

Syntaxe du template

SyntaxeDescription
{{champ}}Valeur echappee (HTML-safe)
{{{champ}}}Valeur brute (non echappee)
{{champ|défaut}}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.clé}}Acces aux proprietes imbriquees
{{$index}}Index de l'element (0-based)
{{$uid}}Identifiant unique de l'element

Variantes

1. Cartes DSFR

Affiche les données 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 données 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 défaut

Utilise la syntaxe {{champ|défaut}} 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">
            Catégorie : {{catégorie|Non renseignee}}
          </p>
        </div>
      </div>
    </div>
  </template>
</dsfr-data-display>

5. Pagination serveur

Quand la source utilise paginate, dsfr-data-display détecté 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 données 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 données de la page courante.

Conseils d'utilisation

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

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

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