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.

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.

- 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.

- 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.

- 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.

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

Notez que data-timeline est l'îlot Gantt lié aux données ; le timeline simple des composants d'affichage est une liste structurelle statique avec un rail, et n'accepte aucune source de données.

Pages connexes

• Tables et listes — data-table, list, data-form.
• Graphiques et KPI — les visualisations agrégées.
• Liaison de données — dataSource, filtres, pagination.
• Interactions et sauvegarde automatique — les actions invoquées par ces composants.
• Composants d'affichage — le timeline non lié aux données.