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: {
  definitions: [
    { id: 'name', type: 'text', header: 'Name', enableSorting: true, enableColumnFilter: true },
    {
      id: 'price',
      type: 'number',
      header: 'Price',
      numberFormat: { thousandsSeparator: ' ', decimals: 0, suffix: ' €' },
    },
    { id: 'status', type: 'tag', header: 'Status' },
    { 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
number
boolean
date
tag
actions
dynamicType (renderer sélectionné via typeKey)
select (checkbox de sélection de ligne ; colonne virtuelle)

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)
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)
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 tag : tagColorMap?: Record<string, string> – map optionnelle valeur → classe Tailwind (voir ci-dessous).

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.

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)

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' }

Quand numberFormat n'est pas défini, les nombres sont affichés bruts (sans regroupement des milliers). 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

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 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 :