Colonnes produit typées

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";

export const productConfig = defineTableConfig({
  id: "products",
  translations: { namespace: "products", keys: {} },
  columns: {
    definitions: [
      { id: "name", header: "Name", type: "text" },
      { id: "price", header: "Price", type: "number" },
      { id: "stock", header: "Stock", type: "number" },
      {
        id: "status",
        header: "Status",
        type: "select",
        options: [
          { label: "Draft", value: "draft" },
          { label: "Active", value: "active" },
          { label: "Archived", value: "archived" },
        ],
      },
    ],
    order: ["name", "price", "stock", "status"],
    visible: ["name", "price", "stock", "status"],
    mandatory: ["name"],
    sort: [{ id: "name", desc: false }],
  },
  table: {
    allowCreate: false,
    allowEdit: false,
    allowDelete: false,
    allowDuplicate: false,
    allowBulkEdit: false,
    allowBulkDelete: false,
    enableRowSelection: false,
    enableViews: false,
    syncUrl: false,
    defaultPageSize: 10,
  },
});

export const getTableConfig = (tableType: string) =>
  tableType === "products" ? productConfig : undefined;

import { defineTableConfig } from "@/components/ui/yayaw-table-vue";

export const productConfig = defineTableConfig({
  id: "products",
  translations: { namespace: "products", keys: {} },
  columns: {
    definitions: [
      { id: "name", header: "Name", type: "text" },
      { id: "price", header: "Price", type: "number" },
      { id: "stock", header: "Stock", type: "number" },
      {
        id: "status",
        header: "Status",
        type: "select",
        options: [
          { label: "Draft", value: "draft" },
          { label: "Active", value: "active" },
          { label: "Archived", value: "archived" },
        ],
      },
    ],
    order: ["name", "price", "stock", "status"],
    visible: ["name", "price", "stock", "status"],
    mandatory: ["name"],
    sort: [{ id: "name", desc: false }],
  },
  table: {
    allowCreate: false,
    allowEdit: false,
    allowDelete: false,
    allowDuplicate: false,
    allowBulkEdit: false,
    allowBulkDelete: false,
    enableRowSelection: false,
    enableViews: false,
    syncUrl: false,
    defaultPageSize: 10,
  },
});

export const getTableConfig = (tableType: string) =>
  tableType === "products" ? productConfig : undefined;

Référence des colonnes

Déclarez les colonnes dans columns.definitions, puis contrôlez l'ordre et la visibilité via columns.order et columns.visible.

columns.order est l’ordre dans lequel la table démarre : les colonnes qu’il liste, dans cet ordre, puis les autres dans l’ordre des définitions, avec select en premier et actions en dernier. L’ordre d’une vue enregistrée, ou celui de la personne dès qu’elle déplace une colonne, le remplace. React le suit depuis v3.9.2 ; avant, il démarrait dans l’ordre des définitions.

columns: {
  definitions: [
    { id: 'name', type: 'text', header: 'Name', enableSorting: true, enableColumnFilter: true },
    {
      id: 'price',
      type: 'number',
      header: 'Price',
      numberFormat: { thousandsSeparator: ' ', decimals: 0, suffix: ' €' },
    },
    { id: 'imageUrl', type: 'image', header: 'Image', enableSorting: false, enableColumnFilter: false },
    { id: 'status', type: 'tag', header: 'Status' },
    { id: 'metadata', type: 'json', header: 'Metadata', maxItems: 4 },
    { id: 'externalUrl', type: 'url', header: 'External URL' },
    { id: 'createdAt', type: 'date', header: 'Created', dateDisplayPreset: 'dmy-numeric' },
    { id: 'isActive', type: 'boolean', header: 'Active' },
    { id: 'actions', type: 'actions', header: 'Actions' },
    { id: 'value', type: 'dynamicType', typeKey: 'valueType', header: 'Value' },
  ],
  order: ['select', 'name', 'price', 'status', 'createdAt', 'actions'],
  visible: ['select', 'name', 'price', 'status', 'createdAt', 'actions'],
  mandatory: ['name'],
}

Types

Types de colonnes supportés :

• text

• string

• number

• boolean

• date

• select

• multiSelect

• tag

• code

• json

• location (un lieu { lat, lng, label?, address? }, voir Colonnes de lieu)

• url

• image (chaîne URL avec fallback automatique si vide ou invalide)

• actions

• dynamicType (renderer sélectionné via typeKey)

La checkbox de sélection de ligne est une colonne virtuelle avec l'id select ; elle est distincte des colonnes de données qui utilisent type: 'select'.

Options par colonne

Propriétés communes :

• id: string – Identifiant unique

• header: string | React.ReactNode

• enableSorting?: boolean (par défaut true)

• enableColumnFilter?: boolean (par défaut true)

• enableResizing?: boolean – autorise le redimensionnement de cette colonne quand table.enableColumnResizing est activé (par défaut true pour les colonnes de données)

• size?: number, minSize?: number, maxSize?: number – largeur initiale et limites autorisées en pixels

• accessorKey?: string – Accesseur optionnel si la clé de donnée diffère de id

• dateDisplayPreset?: DateDisplayPreset – preset strict pour le rendu des dates (colonnes date uniquement)

• dateFormat?: string – repli hérité au format date-fns pour les colonnes date

• enableCalculation?: boolean – active/désactive les calculs du footer pour cette colonne une fois table.enableCalculations activé (par défaut true, sauf colonnes système select/actions)

• defaultCalculation?: CalculationType – calcul par défaut affiché pour cette colonne (validé selon le type de colonne)

• inlineEdit?: boolean | InlineEditColumnConfig – active/configure l'édition inline pour cette colonne

• Pour les colonnes number : numberFormat?: NumberFormatConfig – format d'affichage (séparateurs milliers/décimales, décimales, préfixe/suffixe monétaire). Voir Number column ci-dessous.

• Pour les colonnes json : maxItems?: number – nombre maximal d'items objet/tableau affichés avant troncature.

• Pour les colonnes string : showQuotes?: boolean – affiche les valeurs entre guillemets pour les données de type token.

• Pour les colonnes tag : tagColorMap?: Record<string, string> – map optionnelle valeur → classe Tailwind (voir ci-dessous).

• Pour les colonnes image : les valeurs sont des chaînes URL. Les chemins relatifs d'app comme /images/table-demo/products/laptop.svg, les URLs http(s), les URLs blob: et les URLs base64 data:image/* sont acceptés. Les valeurs vides ou invalides affichent un fallback compact.

Redimensionnement des colonnes

Activez le redimensionnement au niveau de la table, puis désactivez-le sur les colonnes qui doivent conserver une largeur fixe :

table: {
  enableColumnResizing: true,
},
columns: {
  definitions: [
    { id: 'name', type: 'text', header: 'Nom', size: 240, minSize: 140, maxSize: 420 },
    { id: 'status', type: 'tag', header: 'Statut', enableResizing: false },
  ],
}

Le séparateur d'en-tête fonctionne au pointeur, au toucher et au clavier. Les flèches gauche/droite modifient la largeur par pas de 10 pixels, Début applique minSize, Fin applique maxSize et un double-clic restaure size. React et Vue conservent les largeurs obtenues dans l'état URL et les vues enregistrées. Les colonnes virtuelles select et actions ne sont pas redimensionnables.

Calculs de footer par colonne

Vous pouvez préconfigurer les calculs directement sur les colonnes :

{
  id: 'price',
  type: 'number',
  header: 'Price',
  defaultCalculation: 'average',
}

Valeurs utiles par type :

• Tous types : count_all, count_values, count_unique, count_empty, count_not_empty, percent_empty, percent_not_empty

• Number : sum, average, median, min, max, range

• Date : min, max, range

• Boolean : count_true, count_false, percent_true, percent_false

Si un defaultCalculation n'est pas valide pour le type de colonne, il est ignoré sans crash.

Édition inline par colonne

Activez table.allowInlineEdit et table.inlineEdit.enabled, fournissez une action update, puis activez inlineEdit sur chaque colonne concernée :

{
  id: 'themes',
  type: 'multiSelect',
  header: 'Thèmes',
  inlineEdit: {
    enabled: true,
    editor: 'multiSelect',
    debounceMs: 700,
    options: [
      { label: 'Culture', value: 1 },
      { label: 'Tech', value: 2 },
      { label: 'Archivé', value: 3, disabled: true },
    ],
  },
}

inlineEdit.formField permet de cibler un autre champ du catalogue pour la validation et la clé du payload. inlineEdit.readonly rend la cellule non modifiable. Les éditeurs disponibles sont auto, text, number, boolean, date, select, multiSelect, textarea, json et url.

Sélection multiple inline

En React comme en Vue, editor: 'multiSelect' ouvre une liste flottante ancrée à un champ sur une seule ligne. Les valeurs sélectionnées sont des pastilles supprimables ; saisir du texte dans le même champ filtre les options par libellé. La liste ne modifie pas la hauteur de la ligne du tableau. Les flèches parcourent les options ; Entrée bascule l'option surlignée. Entrée sans option surlignée, Tab vers l'extérieur du champ ou un clic en dehors enregistre la sélection finale. Échap abandonne les modifications qui n'ont pas encore été envoyées.

L'enregistrement automatique utilise debounceMs (700 ms par défaut). Avec table.inlineEdit.showDelayIndicator activé (par défaut), une fine barre indique le délai puis reste visible pendant la sauvegarde. La fermeture attend la requête en cours et les changements plus récents. En cas d'échec, le champ, le brouillon et l'erreur restent disponibles pour réessayer ; une réponse ancienne ne remplace jamais une sélection plus récente.

Les options désactivées ne peuvent être ni ajoutées ni retirées. Les valeurs numériques et booléennes conservent leur type dans le payload ; tout retirer enregistre []. Fermer un champ inchangé ne déclenche aucune mise à jour.

Number column (number)

Les colonnes numériques affichent les valeurs avec un format optionnel et sont alignées à droite (en-tête et cellules) par défaut.

Format d'affichage : numberFormat

Utilisez numberFormat pour contrôler le séparateur de milliers, le séparateur décimal, le nombre de décimales et un préfixe/suffixe monétaire optionnel.

Presets (string) :

• 'space' – espace comme séparateur de milliers, point pour les décimales (ex. 1 234 567.89)

• 'dot' – point pour les milliers, virgule pour les décimales (ex. 1.234.567,89)

• 'comma' – virgule pour les milliers, point pour les décimales (ex. 1,234,567.89)

• 'locale' – utilise le Intl.NumberFormat du navigateur (dépend de la locale)

Options explicites (object) :

• thousandsSeparator?: string – ex. ' ', '.', ','

• decimalSeparator?: string – ex. '.', ','

• decimals?: number – nombre fixe de décimales (omettre pour le comportement par défaut)

• prefix?: string – texte avant le nombre (ex. '€ ' pour une devise)

• suffix?: string – texte après le nombre (ex. ' €' pour les euros)

• style?: 'decimal' | 'currency' | 'percent' | 'compact' | 'unit' – style Intl ; définir currency implique 'currency'

• currency?: string, currencyDisplay?: 'symbol' | 'narrowSymbol' | 'code' | 'name' – code ISO 4217 comme 'EUR'

• unit?: string, unitDisplay?: 'short' | 'long' | 'narrow' – unité Intl comme 'kilogram'

• locale?: string – remplace la locale du tableau pour cette colonne

• minimumFractionDigits?, maximumFractionDigits? – décimales bornées (decimals fixe les deux ; decimalPlaces de Vue est accepté)

• signDisplay?: 'auto' | 'always' | 'exceptZero' | 'never'

• negative?: 'minus' | 'parentheses' – 'parentheses' affiche (1 234,00), comme en comptabilité

• percentBase?: 'fraction' | 'whole' – pourcentage saisi 0.25 (par défaut) ou 25 pour 25 %

• display?: 'number' | 'bar', max?: number – une barre de progression à côté de la valeur, pleine à max (1 pour les pourcentages en fraction, 100 sinon)

Les séparateurs personnalisés s’appliquent à tous les styles, devises et pourcentages compris.

Exemples :

// Euros, pas de décimales, milliers espacés (ex. 2 499 €)
{
  id: 'price',
  type: 'number',
  header: 'Price',
  numberFormat: { thousandsSeparator: ' ', decimals: 0, suffix: ' €' },
}

// Style US avec préfixe
{
  id: 'amount',
  type: 'number',
  header: 'Amount',
  numberFormat: { thousandsSeparator: ',', decimalSeparator: '.', decimals: 2, prefix: '$ ' },
}

// Preset uniquement
{ id: 'count', type: 'number', header: 'Count', numberFormat: 'space' }

// Devise selon la locale : €1,234.50, ou 1 234,50 € avec la locale 'fr-FR'
{ id: 'revenue', type: 'number', header: 'Revenue', numberFormat: { currency: 'EUR' } }

// Négatifs comptables : ($1,234.50)
{ id: 'balance', type: 'number', header: 'Balance', numberFormat: { currency: 'USD', negative: 'parentheses' } }

// Barre de progression depuis une valeur entre 0 et 1 : ▰▰▱ 49 %
{ id: 'progress', type: 'number', header: 'Progress', numberFormat: { style: 'percent', display: 'bar' } }

// Format compact et unités : 1.3M, 12 kg
{ id: 'views', type: 'number', header: 'Views', numberFormat: { style: 'compact' } }
{ id: 'weight', type: 'number', header: 'Weight', numberFormat: { style: 'unit', unit: 'kilogram' } }

Quand numberFormat n'est pas défini, React affiche les nombres bruts (sans regroupement des milliers) et Vue les regroupe selon la locale ; définissez numberFormat pour un rendu identique dans les deux éditions. Un formatter personnalisé (s'il est fourni lors de la construction programmatique des colonnes) a priorité sur numberFormat.

Presets d'affichage de date

Pour type: 'date', vous pouvez utiliser des presets stricts :

• localized-short

• localized-medium

• localized-long

• month-name-long

• month-year

• dmy-numeric

• dmy-short

• mdy-numeric

• mdy-short

• iso-date

• iso – instant ISO complet

• date, short, long – dates localisées moyenne, courte et complète

• dateTime – date et heure

• time – heure seule

• relative – durée localisée comme « il y a 3 jours » ou “3 days ago”

Les colonnes de date acceptent aussi timeZone (fuseau IANA comme 'Europe/Paris', utilisé par les presets) et hour12 pour imposer une horloge 12 ou 24 heures. Un motif dateFormat (date-fns) l’emporte sur le preset et utilise l’heure locale. Les valeurs sans heure comme '2026-09-10' sont des jours du calendrier local.

Exemple :

{
  id: 'createdAt',
  type: 'date',
  header: 'Created',
  dateDisplayPreset: 'month-name-long',
}

Tag column (tag)

Les colonnes tag affichent les valeurs sous forme de badges colorés. Les couleurs sont déterministes : la même valeur de tag reçoit toujours la même couleur entre les sessions et les rechargements de page (dérivée d'un hash de la valeur). Les valeurs sont normalisées (trim + lowercase) pour la correspondance ; par exemple "Urgent" et "urgent" partagent la même couleur.

Couleurs personnalisées par valeur : tagColorMap

Vous pouvez surcharger les couleurs pour des valeurs spécifiques via tagColorMap dans la définition de colonne. Les clés sont les valeurs de tag (la recherche essaie d'abord la valeur brute, puis la valeur normalisée) ; les valeurs sont des classes Tailwind pour le badge (par ex. fond + texte). Cette option fonctionne directement depuis columns.definitions, sans câblage personnalisé supplémentaire.

Exemple :

{
  id: 'status',
  type: 'tag',
  header: 'Status',
  tagColorMap: {
    Urgent: 'bg-red-500/80 text-white dark:bg-red-600/90',
    Done: 'bg-green-500/80 text-white dark:bg-green-600/90',
    'In progress': 'bg-amber-500/80 text-white dark:bg-amber-600/90',
  },
}

Les entrées définies dans tagColorMap utilisent la classe fournie ; toute autre valeur utilise la couleur déterministe basée sur le hash.

Colonnes de tags

Une colonne avec tags: true (ou tags: { create?, manage?, bulk? }) contient des identifiants de tags du catalogue de votre application : une colonne multiSelect en contient une liste, une colonne select un seul. Avec les actions facultatives tags, les options de la colonne sont ce catalogue, chargé une fois par table et par colonne au montage de la table puis mis en cache, si bien que cellules, cartes, fil, filtres (avec des pastilles de couleur), regroupements, formulaires et fiche affichent les noms et couleurs des tags. Sans elles, une colonne de tags garde ses options statiques.

columns: [
  { id: "tags", header: "Tags", type: "multiSelect", tags: true, inlineEdit: true },
],
// getTableActions(tableType)
tags: {
  list: ({ tableId, tableType, columnId }) => listTags(columnId), // [{ id, name, color? }]
  create: ({ columnId, name, color }) => createTag(columnId, name, color), // le nouveau tag
  update: ({ id, name, color }) => updateTag(id, { name, color }), // color: null l'efface
  merge: ({ sourceIds, targetId }) => mergeTags(sourceIds, targetId), // réécrit les enregistrements
  remove: ({ id }) => deleteTag(id), // et le retire des enregistrements
},

Les réponses sont des valeurs ou { success, data?, error? }. Les mêmes actions et options de colonne fonctionnent en React et en Vue.

• Sélecteur de tags (cellules en ligne, champs d'une fiche liés à une colonne de tags, fenêtres d'action groupée) : pastilles colorées, recherche insensible à la casse et aux accents, et Créer « nom » avec create (sauf tags: { create: false }), qui crée, sélectionne et met en cache le tag aussitôt. Flèches, Entrée, Retour arrière et Échap y fonctionnent.

• Ajouter des étiquettes et Retirer des étiquettes dans la barre d'actions groupées (colonnes de listes, avec allowBulkEdit et bulkUpdate ou update) : les lignes sélectionnées changent aussitôt ; celles qui échouent sont rétablies et restent sélectionnées. Par défaut, bulkUpdate(ids, { [field]: tagIds }) reçoit les listes obtenues de chaque groupe de lignes ; avec tags: { bulk: "patch" }, il reçoit une seule fois { [field]: { add, remove } }, que votre serveur applique avec applyTagPatch().

• Gérer les étiquettes, dans le menu de la colonne, renomme, recolore, fusionne et supprime les tags ; une suppression indique combien d'enregistrements utilisent le tag (un appel à aggregate groupé par la colonne). table.canManageTags: false ou tags: { manage: false } le masquent.

• Couleurs : des noms de la palette (TAG_COLOR_NAMES) ou n'importe quelle couleur CSS ; un tag sans couleur garde sa teinte automatique, et coloredTags: false affiche des tags neutres.

• Facettes : une colonne de tags dans table.facets liste les noms du catalogue, compte chaque tag une fois par enregistrement et filtre avec contains.

Les types du contrat et les fonctions utiles (resolveTagColumn, tagOptions, applyTagPatch, tagUsageRequest…) sont dans utils/tag-catalog.ts, utilisable côté serveur, dans les deux éditions. Les libellés des tags existent en anglais et en français, choisis selon la langue de la table, et lisent les traductions tags.<clé>.

Colonnes de type dynamique

Utilisez type: 'dynamicType' et indiquez typeKey sur la ligne pour choisir le renderer au runtime.

Selection column (select)

• La colonne select est virtuelle et ne nécessite pas d'entrée dans definitions.

• Ajoutez 'select' à columns.order et à columns.visible pour l'afficher quand vous fournissez une liste visible explicite.

• Contrôlée par table.enableRowSelection (par défaut true).

• Rendue comme une colonne étroite à largeur fixe avec une checkbox centrée ; même largeur que la colonne actions.

• Pour la masquer, retirez 'select' de columns.visible.

• Elle n'est pas masquable via le menu d'options de l'interface.

Actions column (actions)

• Ajoutez { id: 'actions', type: 'actions', header: '...' } à columns.definitions (le libellé d'en-tête n'est pas affiché dans l'UI ; utilisez header: '' ou n'importe quel libellé pour l'accessibilité/le menu colonne).

• Rendue comme une colonne étroite à largeur fixe avec un menu d'actions centré (ellipsis) par ligne ; même largeur que la colonne de sélection.

• Pour la masquer, retirez 'actions' de columns.visible.

• Elle n'est pas masquable via le menu d'options de l'interface.

Voir aussi :

• Configuration

• DataTable

Déclarer le type de donnée une seule fois

Le type et les options d'une colonne déterminent par défaut sa cellule, son éditeur inline, son champ de formulaire généré pour la création, la modification ou l'édition groupée, et ses filtres, dans React comme dans Vue. Les champs standards n'exigent pas de FormConfig correspondant. Activez les actions nécessaires et fournissez leurs handlers ; la bibliothèque génère les contrôles. Un catalogue de formulaires reste une surcharge explicite pour la validation, les permissions, les relations et les mises en page personnalisées.

const columns = [
  { id: "name", header: "Nom", type: "text" },
  { id: "themeIds", header: "Thèmes", type: "multiSelect", options: [
    { label: "Culture", value: 1 },
    { label: "Technologie", value: 2 },
  ] },
  { id: "metadata", header: "Métadonnées", type: "json" },
  { id: "publishedOn", header: "Date de publication", type: "date" },
];

Les options affichent leurs libellés et conservent le type primitif de leurs valeurs : 1 et "1" sont deux choix distincts. Les choix déjà enregistrés mais inconnus et les espaces sont préservés. Une valeur numérique ou une date vidée en inline devient null ; une date modifiée en inline est enregistrée sous la forme YYYY-MM-DD dans les deux versions, comme dans les formulaires générés. Les intégrations React qui attendaient auparavant un objet Date en inline doivent accepter cette chaîne de date dans leur schéma de champ et leur handler de mise à jour.

Un brouillon JSON incomplet reste visible et bloque l'enregistrement jusqu'à sa correction. Les objets, tableaux, chaînes, nombres, booléens et null sont transmis sous forme de valeurs parsées à l'action de mise à jour. Entrée insère une nouvelle ligne dans les éditeurs de code et de JSON ; Ctrl/Cmd+Entrée ou la sortie de l'éditeur valide, et Échap annule le brouillon. Les schémas et les retours d'échec de sauvegarde restent appliqués.

Les colonnes calculées avec accessorFn et les valeurs personnalisées ne reçoivent pas de champ texte généré. Décrivez explicitement leur contrat d'écriture dans un catalogue. Un champ dynamique est exclu du formulaire groupé généré lorsque les lignes sélectionnées n'ont pas le même type. Un catalogue explicite reste prioritaire : un champ omis, masqué ou désactivé ne devient pas éditable du seul fait qu'une colonne existe.

Afficher seulement les champs de stock

Réduisez les colonnes visibles sans retirer les autres propriétés du catalogue. Les utilisateurs peuvent les réactiver dans Propriétés.

Copiez cette configuration complète à côté de product-config.ts. Utilisez () => exampleConfig pour getTableConfig en React, ou :config="exampleConfig" en Vue.

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

export const exampleConfig = defineTableConfig({
  ...productConfig,
  columns: {
    ...productConfig.columns,
    visible: ["name", "stock", "status"],
    order: ["name", "stock", "status", "price"],
  },
});

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

export const exampleConfig = defineTableConfig({
  ...productConfig,
  columns: {
    ...productConfig.columns,
    visible: ["name", "stock", "status"],
    order: ["name", "stock", "status", "price"],
  },
});

Ajouter des booléens et des tags

Déclarez les types des valeurs plutôt que de tout convertir en texte. Les données partagées contiennent déjà active et tags.

Copiez cette configuration complète à côté de product-config.ts. Utilisez () => exampleConfig pour getTableConfig en React, ou :config="exampleConfig" en Vue.

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

export const exampleConfig = defineTableConfig({
  ...productConfig,
  columns: {
    ...productConfig.columns,
    definitions: [
      ...productConfig.columns.definitions,
      { id: "active", header: "Active", type: "boolean" },
      {
        id: "tags",
        header: "Tags",
        type: "multiSelect",
        options: [
          { value: "office", label: "Office" },
          { value: "wood", label: "Wood" },
          { value: "seating", label: "Seating" },
        ],
      },
    ],
    visible: ["name", "active", "tags"],
    order: ["name", "active", "tags", "price", "stock", "status"],
  },
});

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

export const exampleConfig = defineTableConfig({
  ...productConfig,
  columns: {
    ...productConfig.columns,
    definitions: [
      ...productConfig.columns.definitions,
      { id: "active", header: "Active", type: "boolean" },
      {
        id: "tags",
        header: "Tags",
        type: "multiSelect",
        options: [
          { value: "office", label: "Office" },
          { value: "wood", label: "Wood" },
          { value: "seating", label: "Seating" },
        ],
      },
    ],
    visible: ["name", "active", "tags"],
    order: ["name", "active", "tags", "price", "stock", "status"],
  },
});

Contrôles de filtre applicatifs

filterRenderer({ value, onChange }) fournit un nœud React ou un VNode Vue pour une colonne dans le menu natif des filtres, par exemple une plage de dates ou un sélecteur de relations à distance. Le callback modifie l’état normal du filtre : vues enregistrées et réinitialisation partagent la même valeur. Renvoyez undefined ou une chaîne vide pour effacer le filtre. Conservez le type des identifiants et des booléens. L’application gère les libellés accessibles, la validation, le chargement, l’annulation et la traduction vers son API. Cela n’ajoute pas automatiquement le contrôle à la barre de filtres rapides.