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.

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

kanban

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

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

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

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

Colorer les enregistrements selon un champ

kanban, calendar et data-timeline acceptent chacun un colorField désignant le champ dont la valeur colore la carte, l'événement ou la barre. Les trois l'écrivent différemment, car la clé se place là où chaque composant range déjà sa configuration d'affichage :

La couleur provient des couleurs d'options déclarées sur ce champ. Seuls single-select, multi-select et status portent des déclarations d'options : eux seuls peuvent donc en fournir une.

tables:
  - name: tasks
    fields:
      - name: priority
        type: single-select
        options:
          - { value: urgent, color: '#DC2626' }
          - { value: normal, color: '#2563EB' }

- type: kanban
  dataSource: { table: tasks }
  kanbanGroupBy: { field: status }
  card:
    colorField: priority # les cartes urgent se remplissent en #DC2626, normal en #2563EB

Le texte n'est pas laissé au hasard : chaque surface dérive un premier plan à partir du remplissage — celui du noir ou du blanc qui contraste le plus — afin qu'un libellé reste lisible sur n'importe quelle teinte choisie.

Un multi-select ne se résout que tant qu'un enregistrement porte exactement une option. Une cellule qui en porte deux ou plus ne correspond à aucune déclaration unique et emprunte le chemin « sans couleur » décrit ci-dessous.

Lorsqu'une valeur ne déclare aucune couleur

Le repli diffère selon la surface, et cette différence est délibérée plutôt qu'un oubli :

Là où une teinte de palette est utilisée, elle dérive désormais de la valeur elle-même : une valeur donnée dessine toujours la même teinte. Une chronologie attribuait auparavant les teintes dans l'ordre de première apparition, si bien qu'une barre changeait de couleur au fil de la pagination ou du filtrage des enregistrements autour d'elle.

Le repli s'applique par valeur, pas par champ : un champ qui déclare des couleurs sur certaines options et en laisse d'autres nues n'envoie que les nues sur ce chemin.

Calendrier : un événement coloré est un bloc, pas une pastille

En vue mensuelle, un calendrier rend par défaut un événement horodaté sous forme de petite pastille. Une pastille est surtout du vide : une couleur qui lui est appliquée y est donc presque invisible. Un événement porteur d'une couleur est par conséquent rendu comme un bloc plein ; un événement sans couleur conserve la pastille par défaut.

Il faut s'attendre à un changement de mise en page visible sur tout calendrier mensuel qui définit colorField — les cellules de jour qui alignaient des pastilles alignent désormais des blocs pleins.

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.