headerWrap

Un titre long passé à la ligne plutôt que coupé.

Type	boolean
Par défaut	false
Modifiable en direct (update())	Oui — en redonnant les colonnes (update({ columns }))
Déclaré dans	packages/core/src/columns/defs.ts

Ce qu’il fait

Avec la fonction wrappedHeaders() de @dzgrid/dom/wrapped-headers (sans feuille de style), le titre passe sur plusieurs lignes, au plus le maxLines de la fonction (3 par défaut, puis « … »), et la ligne des titres de colonnes grandit jusqu’au plus haut. Il est mesuré de nouveau quand une colonne change de largeur ou que la taille du texte change, jamais pendant le défilement. Avec headerHeight, le plus haut l’emporte.

Exemple

import { createGrid } from '@dzgrid/dom';
import { wrappedHeaders } from '@dzgrid/dom/wrapped-headers';
import { FR } from '@dzgrid/dom/locales/fr';

type Parcel = { id: string; route: string; days: number };

createGrid<Parcel>(document.getElementById('colis')!, {
  rows: [{ id: 'p1', route: 'Port – Ferme de la colline', days: 3 }],
  columns: [
    { id: 'route', header: 'Trajet', flex: 1 },
    { id: 'days', header: 'Délai moyen de livraison en jours', type: 'number', width: 90, headerWrap: true },
  ],
  getRowId: (r) => r.id,
  messages: FR,
  features: [wrappedHeaders({ maxLines: 2 })],
});

Démo

Voir aussi

• headerVertical, wrap.
• Colonnes.