headerHeight

La hauteur des lignes d’en-tête en pixels, à part de celle des lignes.

Type	number | HeaderHeights
Par défaut	la hauteur des lignes
Modifiable en direct (update())	Oui
Angular	l’entrée [headerHeight]
<dz-grid>	l’attribut header-height
Déclaré dans	packages/dom/src/settings.ts

Ce qu’il fait

Un nombre règle la ligne des titres de colonnes et chaque ligne de groupes au-dessus : headerHeight: 70 avec une ligne de groupes donne un en-tête de 140 px. Un objet les règle à part : { columns: 56, groups: 32 } ; sans columns, la hauteur des lignes ; sans groups, celle des colonnes.

La même règle que rowHeight : de 24 à 1 000 px pour un texte de 16 px, agrandie avec la taille du texte du lecteur ; toute autre valeur est signalée par un avertissement invalid-setting (son chemin nomme le membre, headerHeight.groups) et ignorée. Une ligne qu’une fonction ajoute sous les titres, comme la ligne de filtres, garde la hauteur des lignes. Les titres sur plusieurs lignes (headerWrap) et les titres verticaux agrandissent la ligne des titres quand il le faut : la plus haute l’emporte.

La grille écrit la hauteur de la ligne des titres de colonnes sur sa racine, --dzg-header-height, que votre CSS peut lire. L’attribut header-height de <dz-grid> prend un nombre ; l’objet passe par sa propriété settings.

Exemple

TypeScript

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

type Run = { id: string; trail: string; km: number; climb: number };

const grid = createGrid<Run>(document.getElementById('courses')!, {
  rows: [{ id: 'r1', trail: 'Crête des Pins', km: 12.4, climb: 380 }],
  columns: [
    { id: 'trail', header: 'Sentier' },
    { id: 'course', header: 'Parcours', children: [{ id: 'km', header: 'Distance (km)', type: 'number' }, { id: 'climb', header: 'Dénivelé (m)', type: 'number' }] },
  ],
  getRowId: (r) => r.id,
  messages: FR,
  headerHeight: { columns: 56, groups: 32 },
  features: [spans()],
});

grid.update({ headerHeight: 48 });   // chaque ligne d’en-tête à 48 px

Angular

import { Component } from '@angular/core';
import { DzGrid, type DzgColumnOrGroup } from '@dzgrid/angular';
import { spans } from '@dzgrid/dom/spans';
import { FR } from '@dzgrid/dom/locales/fr';

type Run = { id: string; trail: string; km: number; climb: number };

@Component({
  selector: 'app-courses',
  imports: [DzGrid],
  template: `<dz-grid [rows]="rows" [columns]="columns" [getRowId]="rowId" [messages]="messages" [features]="features" [headerHeight]="{ columns: 56, groups: 32 }" />`,
})
export class Runs {
  readonly rows: Run[] = [{ id: 'r1', trail: 'Crête des Pins', km: 12.4, climb: 380 }];
  readonly columns: DzgColumnOrGroup<Run>[] = [
    { id: 'trail', header: 'Sentier' },
    { id: 'course', header: 'Parcours', children: [{ id: 'km', header: 'Distance (km)', type: 'number' }, { id: 'climb', header: 'Dénivelé (m)', type: 'number' }] },
  ];
  readonly rowId = (r: Run) => r.id;
  readonly messages = FR;
  readonly features = [spans()];
}

Web Component

<dz-grid header-height="56"></dz-grid>

import '@dzgrid/element/define';
import type { DzGridElement } from '@dzgrid/element';
import { spans } from '@dzgrid/dom/spans';
import { FR } from '@dzgrid/dom/locales/fr';

type Run = { id: string; trail: string; km: number; climb: number };

const grid = document.querySelector<DzGridElement<Run>>('dz-grid')!;
grid.columns = [
  { id: 'trail', header: 'Sentier' },
  { id: 'course', header: 'Parcours', children: [{ id: 'km', header: 'Distance (km)', type: 'number' }, { id: 'climb', header: 'Dénivelé (m)', type: 'number' }] },
];
grid.getRowId = (r) => r.id;
grid.messages = FR;
grid.features = [spans()];
grid.rows = [{ id: 'r1', trail: 'Crête des Pins', km: 12.4, climb: 380 }];

Démo

La ligne de groupes à 32 px, les titres de colonnes à 56 px, les lignes aux 32 px de la densité.

Voir aussi

• rowHeight — les lignes en pixels.
• headers — aucune ligne d’en-tête à l’écran.
• Colonnes — les groupes, et les titres sur plusieurs lignes.