colSpan

Une cellule plus large que sa colonne, la largeur dite par votre fonction.

Type	`(ctx: SpanCtx<T>) => number`
Par défaut	non défini
Modifiable en direct (`update()`)	Oui — en redonnant les colonnes (`update({ columns })`)
Déclaré dans	`packages/core/src/columns/defs.ts`

Ce qu’il fait

colSpan(ctx) renvoie le nombre de colonnes que couvre la cellule vers sa fin, 1 en son absence ; elle reçoit le même ctx que rowSpan. Les cellules couvertes ne sont pas dessinées. Une étendue ne traverse pas un bord épinglé.

Il faut la fonction spans(), avec les mêmes problèmes que rowSpan. Pour une ligne dessinée sur toutes les colonnes, voir le fullWidth de la grille.

Exemple

import { createGrid } from '@dzgrid/dom';
import { spans } from '@dzgrid/dom/spans';
import { FR } from '@dzgrid/dom/locales/fr';

type Visit = { id: string; region: string; town: string; day: string };

createGrid<Visit>(document.getElementById('visites')!, {
  rows: [{ id: 'v1', region: 'Nord', town: 'Aubergny', day: '2026-04-01' }],
  columns: [
    { id: 'region', header: 'Région' },
    { id: 'town', header: 'Ville', colSpan: (c) => (c.row.day === '' ? 2 : 1) },
    { id: 'day', header: 'Jour', type: 'day' },
  ],
  getRowId: (r) => r.id,
  messages: FR,
  features: [spans()],
});

Voir aussi