# 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.` dans les modèles. Voir [Présentation des pages → Liaison de données](/fr/docs/pages-overview#liaison-de-données) pour le contrat `dataSource` complet. ```yaml 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](/fr/docs/table-views) 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](/fr/docs/interactivity-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](/fr/docs/forms-overview) et [Contrôles de formulaire](/fr/docs/form-controls). | 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`. | ```yaml - 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](/fr/docs/pages-overview) — liaison `dataSource`, filtres, pagination, cadrage `$currentUser`. - [Présentation des tables](/fr/docs/tables-overview) — les modèles de données que ces composants rendent. - [Vues](/fr/docs/table-views) — filtres/tris enregistrés réutilisés via `data-table.view`. - [Contrôles de formulaire](/fr/docs/form-controls) — composants d'entrée individuels. - [Formulaires](/fr/docs/forms-overview) — définitions de formulaires autonomes. - [Interactivité et scripts](/fr/docs/interactivity-scripts) — sauvegarde automatique pour l'édition en ligne.