verticalHeaders

Fait tourner d’un quart de tour, vers le haut, le titre des colonnes marquées headerVertical.

Import	import { verticalHeaders } from '@dzgrid/dom/vertical-headers';
Signature	verticalHeaders(o?: VerticalHeadersOptions): GridFeature
Textes	pas de paquet à elle
Feuille de style	import '@dzgrid/theme/vertical-headers.css';
Déclarée dans	packages/dom/src/vertical-headers/index.ts

Options	Type
maxHeight	number

Ce qu’elle fait

Une colonne avec headerVertical: true a son titre écrit vers le haut. La ligne des titres de colonnes grandit jusqu’au plus long de ces titres, au moins la hauteur d’une ligne et au plus maxHeight ; un titre plus long est coupé par « … ». La mesure est refaite quand les titres, la hauteur des lignes ou la densité changent, jamais pendant le défilement.

Les noms, les rôles et les touches ne changent pas : un lecteur d’écran lit le titre comme les autres. La rotation vient de la feuille de style vertical-headers.css. Une colonne en headerVertical dans une grille sans cette fonction garde un titre à plat, et la grille signale un avertissement missing-feature.

Options

• maxHeight : la hauteur au plus de la ligne des titres, en px. Par défaut 240. Lue une fois, à la création de la fonction.

Exemple

import { createGrid } from '@dzgrid/dom';
import { verticalHeaders } from '@dzgrid/dom/vertical-headers';
import { FR } from '@dzgrid/dom/locales/fr';
import '@dzgrid/theme/vertical-headers.css';

type Bed = { id: string; name: string; mon: boolean; tue: boolean; wed: boolean };
const day = (id: 'mon' | 'tue' | 'wed', header: string) => ({ id, header, type: 'boolean' as const, width: 44, headerVertical: true });

createGrid<Bed>(document.getElementById('watering')!, {
  rows: [{ id: 'p1', name: 'Spirale d’aromatiques', mon: true, tue: false, wed: true }],
  columns: [{ id: 'name', header: 'Planche', flex: 1, minWidth: 140 }, day('mon', 'Lundi'), day('tue', 'Mardi'), day('wed', 'Mercredi')],
  getRowId: (b) => b.id,
  messages: FR,
  features: [verticalHeaders({ maxHeight: 120 })],
});

Démo

Voir aussi

• L’option de colonne headerVertical.
• La fonction wrappedHeaders : les longs titres sur plusieurs lignes à la place.
• Colonnes : les titres verticaux dans le guide.