rowHeight

The rows’ height in pixels, when the three heights of density are not the one you need.

Type	number
Default	the density’s: 28, 32 or 40 px at 16 px text
Live update (update())	Yes
Angular	the [rowHeight] input
<dz-grid>	the row-height attribute
Declared in	packages/dom/src/settings.ts

What it does

A number from 24 to 1 000: the row height at a 16 px text size. The grid grows it with the reader’s text size, as it does the density’s heights, so a reader who makes the text bigger still gets rows that hold it. The header rows take it too, unless headerHeight sets them.

Anything else (a string, 12, 5 000) is told as an invalid-setting warning and the density’s height is used. The cells’ side padding still follows the density. While rowHeight is set, the column menu does not offer the density.

Under a rowHeight, every row keeps that height, even with @dzgrid/dom/auto-height: a column’s wrap puts its text on several lines and cuts what does not fit.

Example

TypeScript

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

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

const grid = createGrid<Tide>(document.getElementById('tides')!, {
  rows: [{ id: 't1', port: 'Gull Harbour', high: 4.2 }],
  columns: [{ id: 'port', header: 'Port' }, { id: 'high', header: 'High water (m)', type: 'number' }],
  getRowId: (t) => t.id,
  messages: EN,
  rowHeight: 48,
});

grid.update({ rowHeight: undefined });   // back to the density's height

Angular

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

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

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

Web Component

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

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

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: 'High water (m)', type: 'number' }];
grid.getRowId = (t) => t.id;
grid.messages = EN;
grid.rows = [{ id: 't1', port: 'Gull Harbour', high: 4.2 }];

Live demo

Rows and header 48 px tall at a 16 px text size.

See also

• density — three heights, and the cells’ padding.
• headerHeight — the header rows apart.