density

How tall the rows are, and how much room the cells take on their sides.

Type	'compact' | 'comfortable' | 'spacious'
Default	'comfortable'
Live update (update())	Yes
Angular	the [density] input
<dz-grid>	the density attribute
Declared in	packages/dom/src/settings.ts

What it does

'compact', 'comfortable' (the default) or 'spacious': a row is 28, 32 or 40 px tall at a 16 px text size, and taller when the reader makes the text bigger. The header rows follow, unless headerHeight sets them. The cells’ side padding follows too: the grid’s own CSS sets --dzg-density on its root (.75, 1, 1.25), and the padding is multiplied by it; .dzg { --dzg-density: 1 } in your own CSS keeps it fixed.

rowHeight sets the rows in pixels and wins over the density’s height; the padding still follows the density. The column menu can offer the density to the user (columnMenu({ density: true }), not while rowHeight is set), and the state keeps it.

Example

TypeScript

import { createGrid } from '@dzgrid/dom';
import { EN } from '@dzgrid/dom/locales/en';

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

const grid = createGrid<Kite>(document.getElementById('kites')!, {
  rows: [{ id: 'k1', name: 'Red delta', span: 1.6 }],
  columns: [{ id: 'name', header: 'Kite' }, { id: 'span', header: 'Span (m)', type: 'number' }],
  getRowId: (k) => k.id,
  messages: EN,
  density: 'compact',
});

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

Angular

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

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: 'Red delta', span: 1.6 }];
  readonly columns: DzgColumnOrGroup<Kite>[] = [{ id: 'name', header: 'Kite' }, { id: 'span', header: 'Span (m)', type: 'number' }];
  readonly rowId = (k: Kite) => k.id;
  readonly messages = EN;
}

Web Component

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

import '@dzgrid/element/define';
import type { DzGridElement } from '@dzgrid/element';
import { EN } from '@dzgrid/dom/locales/en';

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

const grid = document.querySelector<DzGridElement<Kite>>('dz-grid')!;
grid.columns = [{ id: 'name', header: 'Kite' }, { id: 'span', header: 'Span (m)', type: 'number' }];
grid.getRowId = (k) => k.id;
grid.messages = EN;
grid.rows = [{ id: 'k1', name: 'Red delta', span: 1.6 }];

Live demo

Compact: rows 28 px tall, narrower side padding.

See also

• rowHeight — the rows in pixels.
• headerHeight — the header rows apart.
• Theming and right to left.