YYayaw

Options de configuration

Configuration du comportement de la table et valeurs par défaut

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,
  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,
  enableSorting: true,
  enableGrouping: true,
  enableCalculations: false,
  enableColumnDragDropByDefault: false,
  enableMultiRowSelection: true,
  enablePagination: true,
  defaultPageSize: 10,
  pageSizeOptions: [5, 10, 20, 50],
  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

export

Affiche le bouton d'export CSV dans la barre d'outils (entre la recherche et les options). Exporte toutes les lignes correspondant à l'état courant (recherche/filtres/tri).

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 boutons d'action de la barre d'outils (Add, Export, Options) sous forme d'icônes uniquement avec tooltip.

Type : boolean | Par défaut : false

density

Mode de densité des lignes de la table.

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

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 au-dessus de la table.

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.

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.

emptyState

Personnalise l'état affiché quand la requête courante ne retourne aucune ligne.

Type :

{
  show?: boolean;
  title?: string;
  description?: string;
}

Par défaut :

{
  show: true,
  title: "No results",
  description: "Try adjusting your search or filters.",
}

La même forme peut être fournie via les props DataTable pour surcharger le texte d'une instance précise.

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 : conserve le comportement rétrocompatible, notamment enableRowClickEdit.
  • 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 aux modes table, Kanban et Gallery. Les clics sur carte 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.

enableColumnFilters

Active les filtres par colonne.

Type : boolean | Par défaut : true

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

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 de colonnes, mode d'affichage, réglages Kanban/Gallery, groupement, pinning et taille de page.

Type : boolean | Par défaut : true

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.

enableColumnDragDropByDefault

Active le drag-and-drop pour réordonner les colonnes par défaut.

Type : boolean | Par défaut : false

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 : [5, 10, 20, 50]

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 :

Référence DataTable

Référence des props et usages du composant DataTable unifié

Référence des colonnes

Configuration des colonnes, types, ordre et visibilité

On this page

Options de configurationOptionsenableRowSelectionenableRowClickEditallowCreateallowEditallowDuplicateallowDeleteallowBulkEditallowBulkDeleteallowInlineEditallowViewSaveallowViewSharingshowToolbarshowToolbarHeaderexportbulkExportactionsAsIconsdensitylayoutPresetdisplayModesdefaultDisplayModekanbangalleryemptyStaterowClickModeenableColumnFiltersenableSortingenableGroupingenableViewsenableCalculationsenableColumnDragDropByDefaultenableMultiRowSelectionenablePaginationdefaultPageSizepageSizeOptionsdateDisplayPresetMode server-side