rowHeight

La hauteur des lignes en pixels, quand aucune des trois hauteurs de density ne convient.

Type	number
Par défaut	celle de la densité : 28, 32 ou 40 px pour un texte de 16 px
Modifiable en direct (update())	Oui
Angular	l’entrée [rowHeight]
<dz-grid>	l’attribut row-height
Déclaré dans	packages/dom/src/settings.ts

Ce qu’il fait

Un nombre de 24 à 1 000 : la hauteur d’une ligne pour un texte de 16 px. La grille l’agrandit avec la taille du texte du lecteur, comme les hauteurs de la densité : un lecteur qui grossit le texte garde des lignes qui le contiennent. Les lignes d’en-tête la prennent aussi, sauf si headerHeight les règle.

Toute autre valeur (une chaîne, 12, 5 000) est signalée par un avertissement invalid-setting, et la hauteur de la densité s’applique. La marge sur les côtés des cellules suit toujours la densité. Tant que rowHeight est réglé, le menu de colonne ne propose pas la densité.

Sous un rowHeight, chaque ligne garde cette hauteur, même avec @dzgrid/dom/auto-height : le wrap d’une colonne met son texte sur plusieurs lignes et coupe ce qui ne tient pas.

Exemple

TypeScript

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

type Tide = { id: string; port: string; high: number };

const grid = createGrid<Tide>(document.getElementById('marees')!, {
  rows: [{ id: 't1', port: 'Port-aux-Mouettes', high: 4.2 }],
  columns: [{ id: 'port', header: 'Port' }, { id: 'high', header: 'Pleine mer (m)', type: 'number' }],
  getRowId: (t) => t.id,
  messages: FR,
  rowHeight: 48,
});

grid.update({ rowHeight: undefined });   // retour à la hauteur de la densité

Angular

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

type Tide = { id: string; port: string; high: number };

@Component({
  selector: 'app-marees',
  imports: [DzGrid],
  template: `<dz-grid [rows]="rows" [columns]="columns" [getRowId]="rowId" [messages]="messages" [rowHeight]="48" />`,
})
export class Tides {
  readonly rows: Tide[] = [{ id: 't1', port: 'Port-aux-Mouettes', high: 4.2 }];
  readonly columns: DzgColumnOrGroup<Tide>[] = [{ id: 'port', header: 'Port' }, { id: 'high', header: 'Pleine mer (m)', type: 'number' }];
  readonly rowId = (t: Tide) => t.id;
  readonly messages = FR;
}

Web Component

<dz-grid row-height="48"></dz-grid>

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

type Tide = { id: string; port: string; high: number };

const grid = document.querySelector<DzGridElement<Tide>>('dz-grid')!;
grid.columns = [{ id: 'port', header: 'Port' }, { id: 'high', header: 'Pleine mer (m)', type: 'number' }];
grid.getRowId = (t) => t.id;
grid.messages = FR;
grid.rows = [{ id: 't1', port: 'Port-aux-Mouettes', high: 4.2 }];

Démo

Lignes et en-tête de 48 px pour un texte de 16 px.

Voir aussi

• density — trois hauteurs, et la marge des cellules.
• headerHeight — les lignes d’en-tête à part.