density

La hauteur des lignes, et la place que prennent les cellules sur leurs côtés.

Type	'compact' | 'comfortable' | 'spacious'
Par défaut	'comfortable'
Modifiable en direct (update())	Oui
Angular	l’entrée [density]
<dz-grid>	l’attribut density
Déclaré dans	packages/dom/src/settings.ts

Ce qu’il fait

'compact', 'comfortable' (par défaut) ou 'spacious' : une ligne mesure 28, 32 ou 40 px pour un texte de 16 px, et davantage quand le lecteur grossit le texte. Les lignes d’en-tête suivent, sauf si headerHeight les règle. La marge sur les côtés des cellules suit aussi : le CSS de la grille donne --dzg-density à sa racine (.75, 1, 1.25) et la marge est multipliée par lui ; .dzg { --dzg-density: 1 } dans votre CSS la garde fixe.

rowHeight règle les lignes en pixels et l’emporte sur la hauteur de la densité ; la marge suit toujours la densité. Le menu de colonne peut proposer la densité à l’utilisateur (columnMenu({ density: true }), pas tant que rowHeight est réglé), et l’état la garde.

Exemple

TypeScript

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

type Kite = { id: string; name: string; span: number };

const grid = createGrid<Kite>(document.getElementById('kites')!, {
  rows: [{ id: 'k1', name: 'Delta rouge', span: 1.6 }],
  columns: [{ id: 'name', header: 'Cerf-volant' }, { id: 'span', header: 'Envergure (m)', type: 'number' }],
  getRowId: (k) => k.id,
  messages: FR,
  density: 'compact',
});

grid.update({ density: 'spacious' });

Angular

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

type Kite = { id: string; name: string; span: number };

@Component({
  selector: 'app-kites',
  imports: [DzGrid],
  template: `<dz-grid [rows]="rows" [columns]="columns" [getRowId]="rowId" [messages]="messages" [density]="density()" />`,
})
export class Kites {
  readonly density = signal<'compact' | 'comfortable' | 'spacious'>('compact');
  readonly rows: Kite[] = [{ id: 'k1', name: 'Delta rouge', span: 1.6 }];
  readonly columns: DzgColumnOrGroup<Kite>[] = [{ id: 'name', header: 'Cerf-volant' }, { id: 'span', header: 'Envergure (m)', type: 'number' }];
  readonly rowId = (k: Kite) => k.id;
  readonly messages = FR;
}

Web Component

<dz-grid density="compact"></dz-grid>

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

type Kite = { id: string; name: string; span: number };

const grid = document.querySelector<DzGridElement<Kite>>('dz-grid')!;
grid.columns = [{ id: 'name', header: 'Cerf-volant' }, { id: 'span', header: 'Envergure (m)', type: 'number' }];
grid.getRowId = (k) => k.id;
grid.messages = FR;
grid.rows = [{ id: 'k1', name: 'Delta rouge', span: 1.6 }];

Démo

Compact : lignes de 28 px, marges latérales plus étroites.

Voir aussi

• rowHeight — les lignes en pixels.
• headerHeight — les lignes d’en-tête à part.
• Thèmes et droite à gauche.