Présentation commune des fiches

Définissez presentation à la racine de TableConfig pour piloter ensemble la consultation, la création, l’édition et l’édition groupée du catalogue en React et Vue. Le défaut est un drawer à droite sur ordinateur comme sur mobile. En dessous de 768px, il occupe toute la largeur de l’écran.

const tableConfig = defineTableConfig({
  ...productConfig,
  presentation: { desktop: "drawer", mobile: "modal" },
});

Utilisez presentation: "drawer", "modal" ou "inline" pour appliquer le même choix partout. Avec l’objet, mobile reprend desktop lorsqu’il est omis. inline intègre la fiche dans la page ; ce mode est distinct de l’édition d’une cellule du tableau. La largeur par défaut est de 40rem pour le drawer desktop et de 48rem pour la modale, dans les limites de l’écran. Les largeurs explicites existantes restent prises en charge.

La surface commune utilise les tokens Shadcn de l’application, un en-tête cohérent, un contenu défilant et des actions de formulaire visibles. Modifier depuis une fiche conserve la surface ouverte. Annuler abandonne le brouillon et revient à la consultation ; une sauvegarde réussie actualise la fiche et revient à la consultation. Le brouillon et l’état des champs survivent aux changements de présentation, y compris au choix mobile. Une sauvegarde en cours empêche de fermer l’éditeur.

Migration des options de présentation

TableConfig.presentation à la racine est prioritaire sur details.presentation, FormConfig.presentation, form.presentation et form.layout.mode. Ces anciens réglages restent des solutions de repli lorsque l’option commune est absente ; déplacez votre choix à la racine pour harmoniser toutes les fiches intégrées. Le composant autonome RecordDetails et les configurations de formulaire acceptent le même objet responsive. L’éditeur groupé du catalogue utilise désormais un drawer par défaut, au lieu de l’ancienne modale desktop et du panneau inférieur mobile. Les callbacks applicatifs onBulkEdit et les dialogues imbriqués de confirmation ou de collection conservent leur propre présentation.

Une configuration ciblée

Cet exemple complet utilise le démarrage et les fichiers communs des recettes. La référence ci-dessous détaille les options et les fragments d’intégration.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const layoutConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    layoutPreset: "admin",
    density: "small",
    actionsAsIcons: false,
    enableViews: true,
    allowViewSave: true,
    enableColumnDnd: true,
    enableColumnDragDropByDefault: false,
    enableColumnResizing: true,
    enableColumnPinning: true,
    emptyState: {
      title: "No products match",
      description: "Clear filters or try another name.",
    },
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const layoutConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    layoutPreset: "admin",
    density: "small",
    actionsAsIcons: false,
    enableViews: true,
    allowViewSave: true,
    enableColumnDnd: true,
    enableColumnDragDropByDefault: false,
    enableColumnResizing: true,
    enableColumnPinning: true,
    emptyState: {
      title: "No products match",
      description: "Clear filters or try another name.",
    },
  },
});

Options de configuration

Liste des options pour le comportement de la table. Configurez-les dans votre définition de table sous table.

table: {
  allowCreate: true,
  allowEdit: true,
  allowDuplicate: true,
  allowDelete: true,
  allowBulkEdit: true,
  allowBulkDelete: true,
  allowInlineEdit: true,
  allowViewSave: true,
  allowViewSharing: false,
  showToolbar: true,
  showToolbarHeader: true,
  showClearFilters: false,
  showResetFilters: false,
  export: true,
  bulkExport: true,
  actionsAsIcons: false,
  density: 'medium',
  layoutPreset: 'default',
  displayModes: ['table'],
  defaultDisplayMode: 'table',
  kanban: {
    groupBy: 'status',
    titleColumn: 'name',
    cardColumnIds: ['brand', 'category', 'price'],
    groups: [
      { value: 'In Stock' },
      { value: 'Low Stock' },
      { value: 'Out of Stock' },
    ],
    allowDragUpdate: false,
  },
  gallery: {
    imageColumn: 'imageUrl',
    titleColumn: 'name',
    cardColumnIds: ['brand', 'category', 'price', 'status'],
    aspectRatio: 'square',
    imageFit: 'cover',
    cardSize: 'medium',
    showCardLabels: false,
  },
  emptyState: {
    show: true,
    title: 'No rows found',
    description: 'Try changing your search or filters.',
  },
  enableRowSelection: true,
  enableRowClickEdit: false,
  rowClickMode: 'default',
  enableColumnFilters: true,
  enableAdvancedFilters: false,
  enableSorting: true,
  enableGrouping: true,
  enableCalculations: false,
  enableColumnDnd: true,
  enableColumnDragDropByDefault: false,
  enableColumnResizing: false,
  enableColumnPinning: true,
  enableMultiRowSelection: true,
  enablePagination: true,
  defaultPageSize: 10,
  pageSizeOptions: [10, 20, 50, 100, 200, 500],
  preserveSelectionOnQuery: false,
  searchDebounceMs: 300,
  syncUrl: true,
  dateDisplayPreset: 'localized-short',
  inlineEdit: {
    enabled: false,
    debounceMs: 700,
    trigger: 'doubleClickEnter',
    optimistic: true,
  },
}

Options

enableRowSelection

Active les cases à cocher de sélection de lignes.

Type : boolean | Par défaut : true

enableRowClickEdit

Ouvre le drawer d'édition lors d'un clic sur une zone non interactive de la ligne.

Type : boolean | Par défaut : false

Contraintes :

• Fonctionne uniquement si allowEdit est activé.

• Incompatible avec une colonne URL configurée avec urlDisplayMode: 'row-link'.

• Incompatible avec l'inline edit (au niveau table inlineEdit ou au niveau colonne inlineEdit).

allowCreate

Affiche et active les actions de création dans l'UI de table.

Type : boolean | Par défaut : true

allowEdit

Affiche et active l'action Modifier dans le menu d'actions de ligne.

Type : boolean | Par défaut : true

allowDuplicate

Affiche et active les actions de duplication de ligne.

Type : boolean | Par défaut : true

allowDelete

Affiche et active les actions de suppression de ligne.

Type : boolean | Par défaut : true

allowBulkEdit

Affiche et active l'action d'édition de masse.

Type : boolean | Par défaut : true

allowBulkDelete

Affiche et active l'action de suppression de masse.

Type : boolean | Par défaut : true

allowInlineEdit

Autorise les interactions d'édition en ligne dans les cellules de la table.

Type : boolean | Par défaut : true

allowViewSave

Autorise la création, la mise à jour et la suppression de vues enregistrées.

Type : boolean | Par défaut : true

Mettre false quand les utilisateurs peuvent sélectionner des vues existantes mais ne doivent pas pouvoir enregistrer leurs changements. La sélection et l'application des vues restent disponibles.

allowViewSharing

Affiche l'option “Partager avec l'équipe” dans le dialog d'enregistrement de vue.

Type : boolean | Par défaut : false

Quand l'option est cochée, views.create reçoit input.isGlobal: true. Le backend reste responsable de vérifier que l'utilisateur peut réellement créer une vue partagée.

showToolbar

Affiche toute la barre d'outils de la table (recherche et boutons d'action).

Type : boolean | Par défaut : true

showToolbarHeader

Affiche le bloc d'en-tête de la barre d'outils (titre et description). Mettre false pour ne garder que recherche/actions.

Type : boolean | Par défaut : true

showClearFilters et showResetFilters

Affiche l’action d’effacement dans l’écran Filtres du menu de la vue. showClearFilters est recommandé ; showResetFilters reste un alias. L’action garde un libellé lisible en présentation compacte.

Un clic efface les filtres de colonnes, les filtres avancés et la recherche globale, puis revient à la première page. Le tri, les groupes, la disposition des colonnes, la taille de page et les vues enregistrées sont conservés. Les saisies en attente ne peuvent pas réappliquer un filtre après la réinitialisation. Nécessite showToolbar: true.

Type : boolean | Défaut : false

table: {
  showClearFilters: true,
}

Réinitialiser la vue est une action distincte dans les deux frameworks : elle restaure le snapshot enregistré, ou les réglages initiaux pour une vue temporaire.

export

Affiche Exporter dans le menu Données, à côté de Connecter et de Partager. Exporter ouvre un écran proposant le format (CSV, PDF, et Excel lorsque actions.exportFile est fourni), les lignes (toutes celles correspondantes, ou la sélection lorsque des lignes sont sélectionnées), les colonnes et les valeurs. Voir Écran d'export.

Type : boolean | Par défaut : true

exportFormats

Limite les formats proposés sur l'écran d'export. Excel ("xlsx") n'est utilisable qu'avec actions.exportFile.

Type : ("csv" | "xlsx" | "pdf")[] | Par défaut : ["csv", "pdf"] (plus "xlsx" lorsque actions.exportFile est fourni)

share

Affiche le « Copier le lien » intégré dans la ligne Partager › du menu Données. Mettez false pour masquer la ligne, par exemple lorsque l'application propose uniquement des destinations personnalisées. Sans destination de partage, Partager reste une action directe de copie du lien plutôt que d'ouvrir un écran. Les destinations personnalisées kind: "connect", listées sous leur propre ligne Connecter ›, ne sont pas concernées.

Type : boolean | Par défaut : true

schedule

Propose la planification sur les destinations de connexion qui déclarent schedule : un bouton horloge à côté du nom de la destination dans Données › Connecter ouvre la planification de la vue courante. Mettez false pour la masquer ; les destinations restent envoyables à la demande. Voir Planifier une destination de connexion.

Type : boolean | Par défaut : true

connectors

Ouvre l'écran d'envoi des destinations de connexion qui déclarent connector : cible, correspondance des colonnes, champ clé, mode, enregistrements, puis résultat. Mettez false pour masquer ces écrans ; la ligne exécute alors le run de la destination, conservez-en donc un. Voir Envoyer vers un connecteur.

Type : boolean | Par défaut : true

sync

Propose l'import et la synchronisation des connecteurs qui déclarent directions et sync : le choix du Sens (Envoyer vers / Importer depuis / Garder les deux synchronisés), la prévisualisation et Synchroniser dans l'écran du connecteur, et les sources « Depuis … » de Données › Importer. Mettez false pour ne garder que l'envoi ; push fonctionne comme avant. Voir Synchroniser depuis l'écran du connecteur.

Type : boolean | Par défaut : true

import

Propose Données › Importer (fichier CSV ou texte collé, correspondance des colonnes, vérification, puis résultat) lorsque la table peut créer des lignes, les modifier, ou importer en masse avec actions.import.importRows. Mettez false pour le masquer ; create et update continuent de fonctionner ailleurs. Voir Import.

Type : boolean | Par défaut : true

bulkExport

Affiche l'export CSV dans le menu des actions de masse. Exporte uniquement les lignes sélectionnées.

Type : boolean | Par défaut : true

actionsAsIcons

Affiche les actions de la barre d'outils de l'application (toolbarActions) sous forme d’icônes avec infobulles. Exporter et Partager sont des entrées du menu Données et ne sont pas concernés. Les menus compacts conservent toujours leurs libellés lisibles.

Type : boolean | Par défaut : false

density

Définit la densité initiale des lignes en mode table. React et Vue partagent six tailles basées sur l’échelle d’espacement standard de Tailwind :

XS reprend l’ancien espacement S. Le padding des cellules, les contrôles d’édition, les actions et les miniatures évoluent ensemble sans modifier la police. Les cibles utilisent l’unité standard de 4px, hors bordures ; le contenu multiligne ou personnalisé peut agrandir une ligne.

Type : 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'extra-extra-large' | Par défaut : 'medium'

table: {
  density: 'extra-small',
  showToolbar: true,
}

La densité se règle directement dans le menu de la vue en mode tableau. Elle est masquée en Kanban et Galerie ; son réglage est conservé lors des changements de mode.

La densité se règle directement dans le menu de la vue en mode tableau. Elle est masquée en Kanban et Galerie ; son réglage est conservé lors des changements de mode.

Bouton Ajouter et actions personnalisées

Le bouton Ajouter reste tout à droite de la barre d’outils et utilise la variante primary, avec texte ou icône seule. Les actions secondaires intégrées utilisent outline. Les valeurs de toolbarActionsPlacement (before-create, between-create-export, after-export) restent acceptées, mais ne changent plus la position des actions personnalisées, puisqu'Exporter a rejoint le menu Données. Ajouter vient après tous ces groupes.

layoutPreset

Preset de layout pour les tables orientées admin, catalogue ou preview.

Type : 'default' | 'admin' | 'catalog' | 'preview' | Par défaut : 'default'

displayModes

Modes d'affichage disponibles pour les utilisateurs. Gardez l'expérience table seule avec ['table'], ou ajoutez 'kanban' et/ou 'gallery' pour afficher un sélecteur Mode d'affichage au-dessus de la table. Le menu des vues le propose sous forme de liste déroulante ; les barres d'outils compactes et les tiroirs tactiles conservent les boutons. Ajoutez 'form' pour la vue Formulaire, proposée lorsque la table peut créer des fiches. Ajoutez 'chart' pour la vue Graphique, proposée dès que son renderer optionnel est passé dans displayModeRenderers. Ajoutez 'feed' pour la vue Fil, intégrée aux éléments de la table. Ajoutez 'filetree' pour la vue Arborescence, intégrée aux éléments de la table et proposée quand la table a une colonne parent. Ajoutez 'map' pour la vue Carte, proposée dès que son renderer optionnel est passé dans displayModeRenderers.

Type : Array<'table' | 'kanban' | 'gallery'> | Par défaut : ['table']

defaultDisplayMode

Mode d'affichage utilisé quand ni l'URL ni une vue enregistrée n'en sélectionne un.

Type : 'table' | 'kanban' | 'gallery' | Par défaut : 'table'

Le mode par défaut configuré doit être présent dans displayModes; sinon le premier mode disponible est utilisé.

kanban

Configuration du mode d'affichage Kanban.

Type :

{
  groupBy?: string;
  titleColumn?: string;
  cardColumnIds?: string[];
  showCardLabels?: boolean;
  groups?: Array<{ value: string; label?: string }>;
  allowDragUpdate?: boolean;
}

• groupBy est la colonne par défaut utilisée pour répartir les lignes en lanes.

• titleColumn est la colonne affichée comme titre de carte. La première colonne visible non système est utilisée si elle est omise.

• cardColumnIds limite les propriétés compactes affichées sur chaque carte. Si elle est omise, les colonnes visibles non système sont affichées sauf le titre et la colonne de groupement.

• showCardLabels affiche les libellés de propriétés sur les cartes. Par défaut false, donc les cartes affichent des valeurs compactes et réutilisent le rendu par type de colonne pour tags, booléens, dates, nombres et URLs.

• groups définit l'ordre préféré des lanes. Les valeurs de lignes absentes de cette liste sont ajoutées après les lanes configurées.

• allowDragUpdate autorise le déplacement des cartes entre lanes quand allowEdit est activé et qu'une action update existe.

Kanban utilise les primitives Kibo UI au-dessus de la même instance TanStack Table que le mode table : tri, filtres, sélection, actions de ligne, pagination et vues enregistrées continuent donc de fonctionner. Quand Kanban est actif, la toolbar permet de choisir la colonne de lanes, le titre, les propriétés de carte et l'affichage des libellés. Ces overrides sont stockés dans {tableId}-kanban et dans les vues enregistrées; les anciens liens {tableId}-kanbanGroupBy sont encore lus en fallback. Déplacer une carte appelle actions.update(rowId, { [groupBy]: nextValue }); votre backend reste responsable de valider les permissions et transitions d'état.

gallery

Configuration du mode d'affichage Gallery.

Type :

{
  imageColumn?: string;
  titleColumn?: string;
  cardColumnIds?: string[];
  aspectRatio?: 'square' | 'video' | 'wide' | 'portrait';
  imageFit?: 'cover' | 'contain';
  cardSize?: 'small' | 'medium' | 'large';
  showCardLabels?: boolean;
}

• imageColumn est la colonne utilisée comme source média. La première colonne type: 'image' est utilisée si elle est omise.

• titleColumn est la colonne affichée comme titre de carte. La première colonne visible non image et non système est utilisée si elle est omise.

• cardColumnIds limite les propriétés compactes affichées sur chaque carte. Si elle est omise, les colonnes visibles non système sont affichées sauf le titre et l'image.

• aspectRatio contrôle le cadre média. Par défaut 'wide'.

• imageFit contrôle l'ajustement des images dans le cadre média. Par défaut 'cover'.

• cardSize contrôle la largeur responsive des cartes. Par défaut 'medium'.

• showCardLabels affiche les libellés de propriétés sur les cartes. Par défaut false, donc les cartes affichent des valeurs compactes type-aware comme Kanban.

Gallery utilise la même instance TanStack Table que le mode table : tri, filtres, sélection, actions de ligne, pagination, comportement de clic et vues enregistrées continuent donc de fonctionner. Quand Gallery est actif, la toolbar affiche les contrôles image, titre, propriétés, ratio, fit, taille et libellés, puis écrit les overrides dans {tableId}-gallery. Les cartes Gallery peuvent afficher un bouton de lien externe pour les colonnes URL et un bouton d'édition quand allowEdit, canEditRow et les actions d'édition l'autorisent.

form

Réglages par défaut de la vue Formulaire (title, description, questions, hiddenValues, submitLabel, successMessage, allowAnotherResponse, redirectUrl), que chaque vue Formulaire peut remplacer. Mettez false pour désactiver le mode Formulaire. Le mode n'est proposé que si actions.create existe et que allowCreate ne vaut pas false.

Type : boolean | FormViewSettings | Par défaut : true

chart

Réglages par défaut de la vue Graphique (type, xColumn, bucket, weekStartsOn, metric, metricColumn, seriesColumn, stacked, sort, cumulative, hideEmpty, topN, showDataLabels, showLegend, colors), que chaque vue Graphique peut remplacer et auxquels Réinitialiser revient. Mettez false pour désactiver le mode Graphique. Le mode demande aussi le renderer optionnel yayaw-table-chart (React) ou yayaw-table-vue-chart (Vue), passé dans displayModeRenderers.chart.

Type : boolean | ChartViewSettings | Par défaut : true

feed

Réglages par défaut de la vue Fil (titleColumn, authorColumn, dateColumn, dateDisplay, bodyColumn, mediaColumn, propertyColumnIds, showPropertyLabels, bodyLines, density, pageSize, infiniteScroll), que chaque vue Fil peut remplacer et auxquels Réinitialiser revient, plus le hook d’exécution renderBody(value, row) qui affiche les contenus en markdown ou en HTML et n’est jamais enregistré dans les vues. Mettez false pour désactiver le mode Fil.

Type : boolean | FeedTableSettings | Par défaut : true

filetree

Réglages par défaut de la vue Arborescence (parentColumn, kindColumn, nameColumn, sizeColumn, updatedColumn, columns, showDetails, detailFields, foldersFirst, sort, defaultExpandedDepth, rootLabel, expanded, expandedAll), que chaque vue Arborescence peut remplacer, plus les hooks d’exécution isFolder, getIcon, renderDetails, onDropFiles, canMove, canCreateFolder et canRename, qui ne sont jamais enregistrés dans les vues. Le mode est proposé quand parentColumn est défini ou qu’une colonne nommée parentId, parent_id, parent, folderId, folder_id ou folder existe. Mettez false pour désactiver le mode Arborescence. newFolderAction: false et folderFilter: false désactivent Nouveau dossier et le filtre par dossier des autres vues.

Type : boolean | FileTreeTableConfig | Par défaut : true

facets

Un panneau de facettes à côté des enregistrements : { columns, position?, defaultOpen?, limit?, showCounts?, showZero?, width? }, une colonne étant un identifiant ou { id, label?, limit?, sort?, showEmpty? }. Proposé dans tous les modes d’affichage sauf la vue Formulaire, avec les filtres de colonnes activés.

Type : TableFacetsConfig | false | Par défaut : undefined

canManageTags

Affiche Gérer les étiquettes dans le menu des colonnes de tags dont les actions tags le permettent. tags: { manage: false } sur une colonne le masque pour cette colonne.

Type : boolean | Par défaut : true

map

Réglages par défaut de la vue Carte (locationColumn, titleColumn, colorColumn, popupColumns, showPopupLabels, cluster, initialView, center, zoom, searchOnMove), que chaque vue Carte peut remplacer, plus des options de l’hôte qui ne sont jamais enregistrées dans les vues : style (l’URL ou l’objet d’un style MapLibre, { light, dark? }, ou l’id d’une entrée de styles), styles ([{ id, label, light, dark?, attribution? }], proposés dans les réglages de la vue), attribution, maxRows (nombre maximal de fiches gardées, 2 000 par défaut) et workerUrl (le script du worker MapLibre, chargé depuis unpkg par défaut). La bibliothèque ne fournit ni tuiles ni clés d’API : sans style ni styles, la carte n’a pas de fond. Mettez false pour désactiver le mode Carte. Le mode demande aussi le renderer optionnel yayaw-table-map (React) ou yayaw-table-vue-map (Vue) passé dans displayModeRenderers.map.

Type : boolean | MapTableConfig | Par défaut : true

emptyState

Table, Kanban et Gallery utilisent la composition Empty de Shadcn dans React et Vue. Les textes par défaut distinguent un jeu de données vide d'une requête sans résultat :

• Avec une recherche, des filtres de colonne ou des filtres avancés actifs : Aucun résultat, une description et Effacer les filtres.

• Sans filtre actif : Aucune donnée disponible, sans action de réinitialisation. Les règles avancées avec isActive: false et les recherches contenant uniquement des espaces ne comptent pas comme des filtres actifs.

Effacer les filtres retire la recherche globale, les filtres de colonne et les filtres avancés, puis revient à la première page. L'action conserve le tri, le regroupement, la visibilité/l'ordre/la largeur/l'épinglage des colonnes, le mode d'affichage, la taille de page, la densité et la vue sélectionnée. La vue enregistrée n'est pas écrasée ; elle peut être signalée comme modifiée.

L'action apparaît automatiquement dans l'état vide filtré, même avec table.showToolbar: false, table.showClearFilters: false ou table.showResetFilters: false. Ces options contrôlent uniquement le raccourci de la barre d'outils.

table: {
  emptyState: {
    show: true,
    // Omit overrides to use the translated contextual copy.
    title: "Aucun produit à afficher",
    description: "Ajoutez des produits ou ajustez les filtres courants.",
  },
}

table.emptyState.show: false masque tout l'état vide, y compris son action, dans les trois modes d'affichage. Le chargement et les erreurs ont leurs propres états. React accepte aussi la même forme emptyState en prop de DataTable pour une instance précise. Voir Traductions pour les clés React et Vue et Installation pour la dépendance empty ajoutée.

rowClickMode

Contrôle ce qui se passe quand l'utilisateur clique sur une zone non interactive d'une ligne ou d'une carte.

Type : 'default' | 'activate' | 'edit' | 'link' | 'none' | Par défaut : 'default'

Modes :

• default : ouvre le drawer d'édition si enableRowClickEdit est activé, suit une colonne de lien de ligne, et sinon ouvre la vue enregistrement — onOpenDetails (ou onRowActivate) de l'application si fourni, sinon la vue enregistrement intégrée décrite dans Détails d'enregistrement. Il s'agit d'un changement de comportement pour les applications qui n'avaient auparavant aucun comportement de clic configuré : un simple clic sur une ligne ouvre désormais quelque chose au lieu de ne rien faire. Passez details={false} (:details="false" en Vue) et omettez onOpenDetails/onRowActivate pour garder des clics inertes, ou utilisez rowClickMode: 'none'.

• activate : appelle le callback DataTable onRowActivate(row, event) pour les layouts master-detail ou preview.

• edit : ouvre le drawer d'édition quand la ligne peut être modifiée.

• link : utilise le comportement de lien de ligne pour les lignes adossées à une URL et appelle onRowClick(url, row, event) si fourni.

• none : désactive le comportement de clic ligne/carte.

Le même comportement de clic s'applique à tous les modes d'affichage — table, Kanban, Gallery, List et Calendar. Les clics sur carte et sur événement de calendrier respectent allowEdit et canEditRow; les contrôles imbriqués comme checkboxes de sélection, liens, drag handles et boutons d'actions restent interactifs sans ouvrir la ligne. Le menu des actions de ligne affiche l'entrée Infos (voir Actions de ligne) dès que la vue enregistrement est accessible.

enableColumnFilters

Active les filtres par colonne.

Type : boolean | Par défaut : true

enableAdvancedFilters

Active le constructeur de filtres avancés.

Type : boolean | Par défaut : false

enableSorting

Active le tri au clic sur les en-têtes de colonnes.

Type : boolean | Par défaut : true

enableGrouping

Active l'UI de regroupement et le rendu des groupes lorsque les types de colonnes le permettent.

Type : boolean | Par défaut : true

React et Vue prennent tous deux en charge le regroupement. Activez table.enableGrouping: true et table.showToolbar: true ; les colonnes éligibles ne doivent pas définir enableGrouping: false. Choisissez jusqu’à deux colonnes dans View → Grouper.

Les en-têtes de groupe affichent le libellé de la colonne et des options, y compris les valeurs calculées par un accesseur, 0 et false. Ils comptent les enregistrements des groupes imbriqués sans additionner les identifiants des autres catégories. Les groupes sont initialement dépliés ; les replier ne change que leur présentation. Les lignes dépliées conservent leurs valeurs habituelles. La case d’un groupe sélectionne les enregistrements autorisés et conserve les sélections hors du groupe ; elle est absente lorsque la sélection de lignes ou la sélection multiple est désactivée. Un en-tête de groupe n’ouvre et ne modifie jamais un enregistrement.

Le regroupement porte sur les enregistrements fournis au tableau. Si le backend retourne une page paginée, les groupes et leurs compteurs couvrent uniquement cette page ; la bibliothèque ne crée pas de regroupement global côté serveur.

enableViews

Affiche le gestionnaire de vues enregistrées au-dessus de la table. Le gestionnaire stocke et restaure l'état utile basé sur l'URL : recherche, filtres, tri, colonnes visibles, ordre et largeur des colonnes, mode d'affichage, réglages Kanban/Gallery, groupement, pinning et taille de page.

Type : boolean | Par défaut : true

viewTabs

Affiche les vues enregistrées sous forme d'onglets dans le sélecteur de vues sur les barres d'outils larges, dès que la table compte au moins une vue enregistrée. La vue par défaut est toujours le premier onglet ; chaque onglet affiche l'icône de son mode d'affichage et un point quand la vue active a des changements non enregistrés. Cliquer sur un onglet applique la vue. Les vues au-delà de maxVisible (4 par défaut) passent sous un menu Plus ; la vue active reste toujours visible. Mettez false pour garder le déclencheur nommé (icône, nom de la vue et chevron) même sur les grands écrans. Avec les onglets, un chevron Actions de la vue à côté d'eux regroupe enregistrer, enregistrer comme, favori, réinitialiser et supprimer ; les barres d'outils compactes et les layouts tactiles remplacent les onglets par un déclencheur à icône seule — sans libellé ni chevron, pour laisser la place à la recherche sur la ligne — avec un nom accessible construit à partir de views.current (« Current view » par défaut) suivi du nom de la vue, et un petit point pour les changements non enregistrés. Son menu liste les vues (défilant, avec un filtre Chercher une vue au-delà de sept) suivies des mêmes actions.

Type : boolean | { maxVisible?: number } | Par défaut : true

table: {
  viewTabs: { maxVisible: 6 },
}

enableCalculations

Active les calculs du pied de tableau (menu de calcul par colonne + ligne de résultats).

Type : boolean | Par défaut : false

Quand la valeur est false :

• La ligne de calculs en pied est masquée.

• Le toggle de calculs est masqué dans le menu options.

• Les defaultCalculation définis sur les colonnes sont ignorés dans l'UI.

enableColumnDnd

Expose les contrôles de réorganisation des colonnes. La valeur false retire ces contrôles et empêche la réorganisation, quelle que soit la préférence enregistrée.

Type : boolean | Par défaut : true

enableColumnDragDropByDefault

Définit la préférence initiale de réorganisation lorsqu'aucun choix utilisateur n'est enregistré. L'utilisateur peut ensuite l'activer ou la désactiver depuis un menu de colonne et, dans Vue, depuis Vue → Propriétés.

Type : boolean | Par défaut : false

enableColumnResizing

Autorise le redimensionnement des colonnes de données éligibles depuis leur en-tête. Faites glisser le séparateur avec un pointeur ou au toucher ; au clavier, placez le focus sur le séparateur puis utilisez les flèches gauche/droite par pas de 10 pixels, Début pour la largeur minimale ou Fin pour la largeur maximale. Un double-clic restaure la taille configurée.

Les largeurs sont stockées dans {tableId}-sizing, incluses dans les vues enregistrées et restaurées par React comme par Vue. Définissez enableResizing: false sur une colonne pour conserver une largeur fixe. Les colonnes de sélection et d'actions restent toujours fixes.

Type : boolean | Par défaut : false

enableColumnPinning

Active les actions d'épinglage à gauche, à droite et de désépinglage pour les colonnes éligibles.

Type : boolean | Par défaut : true

enableMultiRowSelection

Autorise la sélection de plusieurs lignes.

Type : boolean | Par défaut : true

enablePagination

Affiche les contrôles de pagination.

Type : boolean | Par défaut : true

defaultPageSize

Nombre de lignes par page par défaut.

Type : number | Par défaut : 10

pageSizeOptions

Valeurs autorisées pour la taille de page.

Type : number[] | Par défaut : [10, 20, 50, 100, 200, 500]

enableAutoPageSize

Ajoute un choix Automatique au sélecteur de lignes par page en React et Vue :

table: {
  enableAutoPageSize: true,
  defaultPageSize: 20,
  pageSizeOptions: [10, 20, 50, 100],
}

Automatique affiche le nombre calculé et adapte la table à la hauteur disponible de l’écran ou du conteneur défilant. Il réserve la place des en-têtes, calculs et contrôles de pagination, puis recalcule après un changement de fenêtre, densité, largeur de colonne ou contenu. Pour les lignes de hauteur variable, la table additionne les hauteurs mesurées dans leur ordre et estime les lignes inconnues à partir de la plus petite ligne visible. La capacité peut diminuer si les pages suivantes contiennent des lignes plus hautes ; elle augmente à nouveau après un changement de fenêtre ou de densité. Le calcul identifie la mise en page par la largeur du conteneur disponible : un contenu plus court qui réduit la largeur intrinsèque de la table sur une autre page n’augmente pas la capacité et ne réinitialise pas la page. Les retours à la ligne des en-têtes et les changements du pied de page influencent aussi la mesure sans relever le plafond de capacité pendant la navigation. Cela évite les oscillations et ne réserve pas la hauteur de la plus grande ligne pour tous les enregistrements. Les lignes très hautes et groupes développés restent accessibles par défilement dans la zone de table bornée. La capacité reste un entier positif limité à 500 ; les appels serveur list continuent de recevoir des valeurs numériques pageSize et limit.

Quand l’option est activée, la pagination reste visible sur une table non vide même avec une seule page, pour permettre le retour à une taille fixe. Ce choix d’affichage reste local à l’instance : choisir un nombre, changer de vue enregistrée ou passer en Gallery/Kanban arrête l’ajustement automatique. Les URL et vues enregistrées conservent la taille numérique effective ; leur restauration utilise une pagination fixe sauf si defaultAutoPageSize est activé. Gallery et Kanban conservent leurs sélecteurs numériques dans les deux frameworks. Les tables vides ou masquées attendent des lignes mesurables.

Traduisez le choix avec React pagination.autoPageSize ou Vue autoPageSize (anglais : « Automatic », français : « Automatique »).

Type : boolean | Défaut : false

defaultAutoPageSize

Démarre chaque vue de tableau en mode Automatique en React et Vue. Nécessite enableAutoPageSize: true ; la bibliothèque conserve la pagination fixe par défaut pour les intégrations existantes.

table: {
  enableAutoPageSize: true,
  defaultAutoPageSize: true,
  defaultPageSize: 20,
}

La valeur numérique de defaultPageSize, de l’URL ou de la vue restaurée sert de repli initial jusqu’à ce que les lignes soient mesurables. Un nouveau tableau, un changement de vue enregistrée ou le retour depuis Gallery/Kanban démarre l’ajustement automatique. Choisir un nombre maintient une taille fixe pendant les chargements de pages et redimensionnements dans cette vue. Gallery et Kanban gardent une pagination numérique. La chaîne "auto" n’est ni envoyée aux actions serveur ni stockée dans les vues enregistrées.

Type : boolean | Défaut : false

preserveSelectionOnQuery

Conserve les IDs sélectionnés lorsque la recherche, les filtres, le tri ou le regroupement changent. Dans les deux éditions, la sélection traverse déjà les changements ordinaires de page et de taille de page.

Type : boolean | Par défaut : false

searchDebounceMs

Retarde les mises à jour de la recherche globale de ce nombre de millisecondes.

Type : number | Par défaut : 300

syncUrl

Stocke l'état de la table dans les paramètres d'URL. Lorsqu'il est désactivé, les deux éditions conservent un état isolé en mémoire pour l'instance ; c'est le comportement par défaut des champs tablePicker imbriqués.

Type : boolean | Par défaut : true

dateDisplayPreset

Option prédéfinie d'affichage de date par défaut pour toutes les colonnes de type date. Une colonne peut surcharger cette valeur avec columns.definitions[].dateDisplayPreset.

Type : 'localized-short' | 'localized-medium' | 'localized-long' | 'month-name-long' | 'month-year' | 'dmy-numeric' | 'dmy-short' | 'mdy-numeric' | 'mdy-short' | 'iso-date' | Par défaut : 'localized-short'

Mode server-side

Le filtrage, la pagination et le tri sont server-side par défaut et ne sont plus configurables via des options manual*. La table envoie toujours search, filters, advancedFilters, orderBy, page et limit à votre action list.

Pour les options au niveau colonne (par ex. numberFormat pour l'affichage numérique/monétaire, dateDisplayPreset, tagColorMap), voir Columns.

Voir aussi :

• Provider & Setup

• DataTable

• Columns

• Actions

• Server-side & Server Actions

Effacement des filtres et affichage Vue

Activez table.showClearFilters: true dans React ou Vue pour effacer recherche, filtres de colonne, filtres avancés et pagination tout en conservant tri, regroupement, visibilité/ordre/pinning des colonnes, taille de page, mode d'affichage et vue sélectionnée. Le flag historique showResetFilters est un alias avec le même comportement dans les deux éditions. Réinitialiser la vue restaure la configuration enregistrée ou initiale dans les deux éditions.

Tableau, Galerie et Kanban Vue partagent la pagination. Celle-ci disparaît lorsque tous les résultats tiennent sur une page (sauf en mode tableau avec enableAutoPageSize), et les trois modes affichent l'état vide configuré. Les données locales sont filtrées et triées avant pagination ; les pages serveur sont utilisées directement. Le Kanban suit le regroupement de la barre d'outils ; les groupes configurés s'appliquent uniquement à leur champ. Un changement rejeté restaure l'ancienne valeur. Les propriétés des cartes réutilisent les rendus de colonne, images comprises.

Les filtres avancés Vue utilisent des brouillons, des opérateurs typés, deux entrées pour les intervalles et plusieurs choix conservant leurs types primitifs. Appliquer valide la règle ; Échap la restaure et la désactivation conserve ses valeurs. L'édition en cellule respecte debounceMs et annule les timers en attente avec Échap ou au démontage. Voir Vue pour l'activation.

Barre de filtres optionnelle

La barre de filtres optionnelle est incluse dans les sources courantes des registres React et Vue. Mettez à jour les installations copiées plus anciennes avant d’utiliser ces options.

Déclarez table.filterBarColumns comme une liste ordonnée d’identifiants de colonnes et activez table.showFilterBar: true pour garder ces filtres visibles au-dessus des lignes. La prop showFilterBar remplace cette valeur de manière réactive dans React et Vue. La barre est masquée par défaut ; les applications peuvent relier cette prop à une préférence d’affichage du compte. Masquer la barre conserve la requête et les vues enregistrées. Lorsqu’elle est visible, la barre se place sous le titre et au-dessus des contrôles desktop de vue, de recherche et des actions. Les sections conservent un espacement vertical de 16 px dans React et Vue. Les boutons des filtres historiques ont la même hauteur que les contrôles des vues enregistrées, y compris lorsque la densité du tableau Vue change.

table: {
  filterBarColumns: ['category', 'tags', 'active'],
  showFilterBar: false,
}

La barre utilise les libellés, les valeurs typées et les choix désactivés déjà déclarés dans les colonnes. Elle prend en charge les options statiques et les colonnes booléennes, y compris les colonnes masquées dans le tableau. Les identifiants inconnus, les doublons et les colonnes avec enableFiltering: false sont ignorés. Les filtres de texte, de date, de plage et d’options chargées à distance restent dans leurs interfaces existantes.

Chaque contrôle utilise une icône de filtre, une liste recherchable et des cases à cocher pour sélectionner plusieurs valeurs. Les changements mettent immédiatement à jour les filtres natifs et reviennent à la première page. Le nombre 0, le booléen false et leurs équivalents textuels restent distincts. En présentation compacte, les filtres rapides configurés rejoignent Vue → Filtres ; la réinitialisation et les vues enregistrées synchronisent les deux interfaces. Il s’agit d’une préférence d’affichage, pas d’un second système de filtrage.

Planning Gantt

Ajoutez "gantt" à table.displayModes, configurez la présentation avec table.gantt et activez table.planning avec des identifiants stables de périmètre et de source. actions.planning fournit le graphe complet et les transactions atomiques de prévisualisation et de sauvegarde. Les dates, liens et changements de hiérarchie possèdent des flags indépendants qui restreignent les permissions existantes. Consultez Planning Gantt et dépendances pour les valeurs par défaut, calendriers, données normalisées et le contrat de persistance.