# Tableaux, calendriers et chronologies

Quatre composants prennent les mêmes enregistrements qu'afficherait une table et les organisent autrement que par ordre de lignes — par carte, par colonne, par date, par intervalle. Les quatre se lient via le module partagé [`dataSource`](/fr/docs/pages-data-binding).

## `gallery`

Une grille de cartes responsive.

| Propriété      | Description                                                                       |
| -------------- | --------------------------------------------------------------------------------- |
| `dataSource`   | Liaison de table.                                                                 |
| `gridColumns`  | Nombre de colonnes par point de rupture — `{ mobile, sm, md, lg, xl }`, de 1 à 6. |
| `galleryCard`  | Configuration de la carte (voir ci-dessous).                                      |
| `layout`       | `grid` (lignes uniformes) ou `masonry` (hauteurs variables).                      |
| `emptyMessage` | Affiché quand rien ne correspond.                                                 |

| Propriété de `galleryCard` | Description                                                           |
| -------------------------- | --------------------------------------------------------------------- |
| `coverImage`               | URL de l'image de couverture, généralement une référence `$record.*`. |
| `aspectRatio`              | Rapport de la couverture, p. ex. `4:3`, `16:9`, `1:1`.                |
| `children`                 | Composants rendus dans le corps de la carte.                          |
| `hoverOverlay`             | `{ children }` rendus par-dessus la carte au survol.                  |
| `onClick`                  | Action invoquée au clic sur la carte.                                 |

```yaml
- type: gallery
  dataSource: { table: products }
  gridColumns: { mobile: 1, md: 2, lg: 3 }
  layout: masonry
  galleryCard:
    coverImage: '$record.photo'
    aspectRatio: '4:3'
    children:
      - { type: text, tag: h3, content: '$record.name' }
```

## `kanban`

Un tableau regroupant les enregistrements en colonnes selon la valeur d'un champ, avec glisser-déposer entre elles.

| Propriété            | Description                                                                                     |
| -------------------- | ----------------------------------------------------------------------------------------------- |
| `dataSource`         | Liaison de table.                                                                               |
| `kanbanGroupBy`      | `{ field }` — le champ dont les valeurs deviennent les colonnes.                                |
| `card`               | Configuration de la carte (voir ci-dessous).                                                    |
| `drag`               | `{ enabled, persistAction }` — si les cartes se déplacent, et ce qui enregistre le déplacement. |
| `colorField`         | Champ pilotant la couleur d'accent de colonne.                                                  |
| `emptyColumnMessage` | Affiché dans une colonne sans carte.                                                            |

| Propriété de `card` | Description                                                                                                             |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| `children`          | Composants rendus dans le corps de la carte.                                                                            |
| `coverImage`        | URL de l'image de couverture de la carte.                                                                               |
| `colorField`        | Champ dont la valeur fixe la couleur de la carte.                                                                       |
| `footer`            | Entrées `{ field, format }` du pied de carte. `format` vaut `relative-date`, `short-date`, `avatar`, `badge` ou `text`. |
| `onClick`           | Action invoquée au clic sur la carte.                                                                                   |

```yaml
- type: kanban
  dataSource: { table: tasks }
  kanbanGroupBy: { field: status }
  drag: { enabled: true }
  card:
    children: [{ type: text, content: '$record.title' }]
    footer: [{ field: assignee, format: avatar }, { field: due_date, format: short-date }]
```

## `calendar`

Un calendrier mensuel, hebdomadaire ou journalier d'enregistrements datés. Les correspondances de champs se situent au premier niveau — seule la gestion des clics vit sous `calendarEvent` et `calendarInteraction`.

| Propriété                                      | Description                                                  |
| ---------------------------------------------- | ------------------------------------------------------------ |
| `dataSource`                                   | Liaison de table.                                            |
| `dateField`                                    | Champ fournissant le début de chaque événement.              |
| `endDateField`                                 | Champ fournissant sa fin, pour les événements qui durent.    |
| `labelField`                                   | Champ rendu comme libellé de l'événement.                    |
| `colorField`                                   | Champ dont la valeur fixe la couleur de l'événement.         |
| `defaultView`                                  | `month`, `week` ou `day`.                                    |
| `maxEventsPerDay`                              | Plafond avant qu'une cellule ne se replie en « +N autres ».  |
| `calendarEvent.onEventClick`                   | Action invoquée au clic sur un événement.                    |
| `calendarInteraction.onDateClick`              | Action invoquée au clic sur une date ou un créneau vide.     |
| `calendarInteraction.timeSlotInterval`         | Durée d'un créneau en minutes pour les vues semaine et jour. |
| `calendarInteraction.showCurrentTimeIndicator` | Trace un trait à l'heure courante.                           |

```yaml
- type: calendar
  dataSource: { table: bookings }
  dateField: starts_at
  endDateField: ends_at
  labelField: customer_name
  defaultView: week
  calendarInteraction: { timeSlotInterval: 30, showCurrentTimeIndicator: true }
```

## `data-timeline`

Une vue de type Gantt pour les enregistrements qui occupent un intervalle plutôt qu'un instant. Son schéma est délibérément minimal — `dataSource` plus `props` — et les correspondances de champs se lisent dans `props` :

| Clé de `props` | Description                                                           |
| -------------- | --------------------------------------------------------------------- |
| `startField`   | **Obligatoire au rendu.** Champ fournissant le début de chaque barre. |
| `endField`     | Champ fournissant sa fin.                                             |
| `labelField`   | Champ rendu comme libellé de la barre.                                |
| `groupBy`      | Champ dont les valeurs deviennent les lignes de la chronologie.       |
| `colorField`   | Champ dont la valeur fixe la couleur de la barre.                     |
| `defaultZoom`  | `day`, `week`, `month`, `quarter` ou `year`.                          |

```yaml
- type: data-timeline
  dataSource: { table: phases }
  props:
    startField: starts_on
    endField: ends_on
    labelField: name
    groupBy: workstream
    defaultZoom: month
```

:::callout
**Ces clés de `props` ne sont pas validées par le schéma.** Un `startFeild` mal orthographié passe la validation et le composant affiche son état d'erreur au lieu d'une chronologie. Vérifiez l'orthographe ici plus attentivement qu'ailleurs.
:::

Notez que `data-timeline` est l'îlot Gantt lié aux données ; le `timeline` simple des [composants d'affichage](/fr/docs/display-components) est une liste structurelle statique avec un rail, et n'accepte aucune source de données.

## Pages connexes

- [Tables et listes](/fr/docs/data-components) — `data-table`, `list`, `data-form`.
- [Graphiques et KPI](/fr/docs/data-components-charts) — les visualisations agrégées.
- [Liaison de données](/fr/docs/pages-data-binding) — `dataSource`, filtres, pagination.
- [Interactions et sauvegarde automatique](/fr/docs/interactions) — les actions invoquées par ces composants.
- [Composants d'affichage](/fr/docs/display-components) — le `timeline` non lié aux données.