# Listes

Une `list` dessine une entrée par enregistrement, à partir d'un gabarit que vous déclarez. Tout ce qui touche à la présentation vit sous `listDisplay` ; ce qui est récupéré, et en quelle quantité, appartient à `dataSource`.

| Propriété     | Description                                                                                    |
| ------------- | ---------------------------------------------------------------------------------------------- |
| `dataSource`  | Les enregistrements dessinés. Voir [Liaison de données](/fr/docs/pages-data-binding).          |
| `listDisplay` | Le gabarit d'entrée et le comportement de pagination : `itemTemplate`, `loadMore`, `maxItems`. |

```yaml
tables:
  - name: articles
    fields:
      - { name: title, type: single-line-text }
      - { name: published_at, type: datetime }
pages:
  - name: Articles
    path: /articles
    components:
      - type: list
        dataSource:
          table: articles
          sort: [{ field: published_at, direction: desc }]
          limit: 20
        listDisplay:
          itemTemplate:
            title: '$record.title'
            metadata: [{ field: published_at, format: relative-date }]
          loadMore: button
```

`itemTemplate` accepte `title`, `subtitle`, `image`, `badge` et `metadata`, où `metadata` est un tableau de `{ field, format }` rendu dans le pied de l'entrée.

## La pagination regarde la liaison, pas l'affichage

La taille de page vient de `dataSource.limit` : elle fixe combien d'enregistrements contient la première page, et chaque appui sur « Charger plus » ajoute une page de cette taille.

`loadMore: button` affiche le contrôle qui fait cet ajout. Sur une liaison `dataSource.system`, il n'apparaît que si cette liaison déclare aussi `totalKey` **et** que le point d'entrée y répond par un nombre — sans cela, le total rapporté est la longueur de la page elle-même, et il ne reste donc jamais rien à charger.

`maxItems` plafonne le nombre d'enregistrements que la liste **dessine**. Cela ne change pas ce qui est récupéré — une page est du transport, un plafond de l'affichage —, si bien qu'une liste arrivée à son plafond masque le contrôle « Charger plus » : tout ce que la page suivante apporterait serait coupé à l'arrivée. Pour récupérer moins d'enregistrements, réglez plutôt `dataSource.limit`.

## Trois clés sont acceptées puis ignorées

Dit ici plutôt que laissé à la découverte : `loadMore: infinite`, `highlight` et `divider` n'ont **aucun effet**. Chacune se décode proprement et ne change rien, si bien qu'une liste déclarant `loadMore: infinite` pagine exactement comme une liste n'en déclarant aucune.

Elles sont documentées parce qu'une clé non lue est la configuration la plus difficile à déboguer : elle valide, elle s'affiche, et le comportement qu'elle nomme n'arrive jamais. S'il vous faut un défilement infini aujourd'hui, `loadMore: button` est ce qui existe.

## Pages connexes

- [Liaison de données](/fr/docs/pages-data-binding) — `dataSource`, ses filtres, ses tris et sa `limit`.
- [Galeries](/fr/docs/data-components-galleries) — le même principe, en grille de cartes.