Composants de données

Les composants de données rendent les enregistrements de vos tables. Chacun se lie à une table via le module partagé dataSource (table, filter, sort, pagination, mode) et rend les enregistrements correspondants sous forme de table, liste, galerie, tableau kanban, calendrier, graphique, KPI ou chronologie. Les champs d'enregistrement sont référencés avec $record.<field> dans les modèles. Voir Présentation des pages → Liaison de données pour le contrat dataSource complet.

components:
  - type: data-table
    dataSource: { table: tasks, sort: [{ field: due_date, direction: asc }] }
    columns:
      - { field: title, sortable: true }
      - { field: status, format: badge }
      - { field: due_date, format: relative-date }

`data-table`

Une table riche en fonctionnalités avec tri, filtrage, regroupement, sélection, actions groupées, résumés et édition en ligne.

Propriété	Description
`dataSource`	Liaison de table (filtre/tri appliqués côté serveur avec logique AND).
`view`	Nom d'une vue de table enregistrée pour hériter des filtres, tris et champs visibles.
`columns`	Définitions de colonnes (voir ci-dessous). Générées automatiquement à partir des champs de table si omises.
`filter`	Conditions de filtre supplémentaires empilées par-dessus les filtres de vue.
`sort`	Règles de tri par défaut (état initial, ou appliquées quand aucun tri de vue n'existe).
`rowHeight`	Préréglage de hauteur de ligne (défaut : `medium`).
`striped`	Couleurs de lignes alternées (défaut : `false`).
`bordered`	Afficher les bordures de cellules (défaut : `false`).
`rowNumbers`	Afficher une colonne de numéros de ligne (défaut : `false`).
`emptyMessage`	Message affiché lorsqu'aucun enregistrement ne correspond.
`toolbar`	Contrôles de barre d'outils — p. ex. `{ columnVisibility: true }` pour afficher une bascule de visibilité de colonnes.
`selection`	Configuration de sélection de lignes (voir ci-dessous).
`bulkActions`	Actions disponibles lorsque des lignes sont sélectionnées (voir ci-dessous).
`groupBy`	Configuration de regroupement de lignes (voir ci-dessous).
`summary`	Ligne de résumé avec calculs d'agrégats (voir ci-dessous).
`autoSave`	Comportement de sauvegarde de l'édition en ligne — voir Interactivité et scripts → Sauvegarde automatique.

`columns`

Chaque entrée définit une colonne.

Propriété	Description
`field`	Nom du champ de la table source de données.
`label`	Remplacement du libellé d'en-tête (par défaut le nom d'affichage du champ).
`width`	Largeur de colonne en pixels.
`minWidth`	Largeur minimale de colonne en pixels.
`align`	Alignement du texte : `left` (défaut), `center`, `right`.
`format`	Remplacement du format d'affichage pour le rendu de cellule (p. ex. `badge`, `currency`, `relative-date`).
`pinned`	Épingler la colonne au côté gauche de la table.
`sortable`	Autoriser le tri sur cette colonne (défaut : `true`).
`filterable`	Autoriser le filtrage sur cette colonne (défaut : `true`).
`editable`	Autoriser l'édition en ligne (par défaut les permissions de la table).
`hidden`	Visibilité de la colonne (défaut : `true` = visible).
`conditionalStyles`	Règles `{ when: { operator: value }, className }` appliquant des classes Tailwind quand une condition de cellule est remplie.
`actions`	Boutons d'action (p. ex. modifier/supprimer) avec `label`, `icon` et un message de confirmation (prend en charge `{count}`).

`selection`

Propriété	Description
`mode`	`none` (défaut), `single`, ou `multiple`.
`showCheckbox`	Afficher une colonne de cases à cocher (défaut : `true` quand le mode est `multiple`).

`bulkActions`

Propriété	Description
`label`	Libellé du bouton d'action groupée.
`icon`	Nom d'icône Lucide (p. ex. `truck`, `trash`).
`confirm`	Message du dialogue de confirmation ; prend en charge `{count}` pour le nombre de lignes sélectionnées.
`action`	L'action invoquée sur les lignes sélectionnées.

`groupBy`

Propriété	Description
`field`	Champ par lequel regrouper les lignes.
`direction`	Direction de tri des groupes (défaut : `asc`).
`collapsed`	Démarrer les groupes repliés (défaut : `false`).
`hideEmpty`	Masquer les groupes vides (défaut : `false`).

`summary`

Propriété	Description
`field`	Champ sur lequel calculer le résumé.
`aggregate`	Fonction d'agrégat (`sum`, `avg`, `count`, `min`, `max`).

`list`

Une liste verticale d'enregistrements, chacun rendu à partir d'un modèle utilisant des références $record.*.

Propriété	Description
`dataSource`	Liaison de table.
`template.title`	Texte principal (référence `$record.*`).
`template.subtitle`	Texte secondaire.
`template.image`	URL d'image (référence `$record.*`).
`template.badge`	Texte de badge.
`template.meta`	Champs de métadonnées affichés dans le pied de l'élément (`field` + `format`).
`pagination`	`button` (Charger plus) ou `infinite` (chargement au défilement).
`highlightSearch`	Surligner les termes de recherche correspondants (défaut : `false`).
`divided`	Afficher des séparateurs entre les éléments (défaut : `false`).
`maxItems`	Nombre maximal d'éléments à afficher.
`emptyMessage`	Message lorsqu'aucun résultat de recherche ne correspond.

`gallery`

Une grille de cartes responsive d'enregistrements.

Propriété	Description
`dataSource`	Liaison de table.
`gridColumns`	Nombre de colonnes responsive par point de rupture (mobile, sm, md, lg, xl).
`card.image`	URL d'image de couverture ou référence `$record.*`.
`card.aspectRatio`	Ratio d'aspect de la couverture (p. ex. `4:3`, `16:9`, `1:1`).
`card.children`	Composants enfants pour le corps de la carte.
`card.overlay`	Composants rendus dans une superposition au survol de la carte.

`kanban`

Un tableau glisser-déposer regroupant les enregistrements en colonnes par valeur de champ.

Propriété	Description
`dataSource`	Liaison de table.
`groupBy`	Champ dont les valeurs deviennent les colonnes kanban.
`card.children`	Composants enfants pour le corps de la carte.
`card.image`	URL d'image ou référence `$record.*` pour la couverture de la carte.
`card.colorField`	Champ dont les valeurs définissent la couleur d'arrière-plan de la carte.
`card.footer`	Champs de métadonnées affichés dans le pied de la carte (`field` + `format`).
`dragDrop.enabled`	Activer le glisser-déposer entre les colonnes (défaut : `true`).

`calendar`

Un calendrier mois/semaine/jour d'enregistrements porteurs de dates.

Propriété	Description
`dataSource`	Liaison de table.
`mode`	Mode d'affichage : `month`, `week`, ou `day`.
`event`	Comment les enregistrements se mappent aux événements de calendrier (champs début/fin, titre, couleur).
`interaction.slotMinutes`	Intervalle de créneau horaire en minutes pour les vues semaine/jour (défaut : 60).
`interaction.nowIndicator`	Afficher une ligne à l'heure actuelle dans les vues semaine/jour.

`chart`

Une visualisation de données (barres, lignes, aires) calculée à partir d'enregistrements agrégés.

Propriété	Description
`dataSource`	Liaison de table.
`series`	Une ou plusieurs séries `{ field, color, stackGroup, fillOpacity }`. La couleur est un jeton de thème ou un hex.
`xAxis` / `yAxis`	Config d'axe — `{ field, scale, format, gridLines }`.
`aggregate`	`{ function, field, groupBy, interval }` pour les données résumées (omettre `field` pour le comptage).
`legend`	Affichage de la légende `{ position, show }`.
`tooltip`	Modèle de texte d'info-bulle (prend en charge `{label}` et `{value}`).

`kpi`

Une métrique de résumé unique (une « carte de statistique ») avec tendance et sparkline optionnelles.

Propriété	Description
`dataSource`	Liaison de table.
`aggregate`	Agrégat `{ function, field }` (omettre `field` pour le comptage).
`format`	Formatage de valeur `{ type, options }` (p. ex. `{ type: currency, options: { currency: USD } }`).
`trend`	Comparaison `{ period, direction, color, change }` par rapport à une période précédente.
`sparkline`	Mini-courbe de tendance `{ field, groupBy, interval, days }`.

`data-timeline`

Un fil chronologique d'enregistrements ordonnés par un champ date/heure. Rend chaque enregistrement comme une entrée de chronologie.

Propriété	Description
`dataSource`	Liaison de table.
`template`	Modèle d'entrée par enregistrement (références `$record.*` pour titre, corps, horodatage).
`props`	Attributs HTML supplémentaires (p. ex. `className`).

`data-form` / `form`

Un formulaire adossé à des enregistrements pour les opérations de création/mise à jour sur une table. L'action (crud) détermine s'il crée ou édite, et les champs du formulaire sont générés à partir du schéma de table (remplaçables par champ). Pour la référence complète des champs et la gestion de la soumission, voir Formulaires et Contrôles de formulaire.

| Propriété | Description | | ------------ | -------------------------------------------------------------------------------------------------------------------- | ------ | ----------------------------------------------------------- | | dataSource | Liaison de table (mode unique pour l'édition, fournissant les valeurs courantes). | | fields | Config par champ — { field, label, placeholder, readonly, disabled, default, hidden, accept, dropZone, maxFiles }. | | layout | Mode de disposition des champs (défaut : single-column). | | groups | Regrouper les champs sous un séparateur de section étiqueté ({ label, fields }). | | action | Action crud avec operation: create | update | delete, confirm, et gestionnaires onSuccess/onError. |

- type: data-form
  dataSource: { table: contacts, mode: single, param: id }
  action:
    type: crud
    operation: update
    onSuccess: { type: navigate, url: /contacts }
  fields:
    - { field: email, label: 'Email Address' }
    - { field: notes, placeholder: 'Internal notes…' }

Pages connexes

Présentation des pages — liaison dataSource, filtres, pagination, cadrage $currentUser.
Présentation des tables — les modèles de données que ces composants rendent.
Vues — filtres/tris enregistrés réutilisés via data-table.view.
Contrôles de formulaire — composants d'entrée individuels.
Formulaires — définitions de formulaires autonomes.
Interactivité et scripts — sauvegarde automatique pour l'édition en ligne.

← PreviousComposants de contenu Next →Contrôles de formulaire

Composants de données

data-table

columns

selection

bulkActions

groupBy

summary

list

gallery

kanban

calendar

chart

kpi

data-timeline

data-form / form