headerHeight

The header rows’ height in pixels, apart from the rows’.

Type	number | HeaderHeights
Default	the row height
Live update (update())	Yes
Angular	the [headerHeight] input
<dz-grid>	the header-height attribute
Declared in	packages/dom/src/settings.ts

What it does

A number sets the column headers’ row and every column-group row above it: headerHeight: 70 with one group row makes a header 140 px tall. An object sets them apart: { columns: 56, groups: 32 }; columns left out takes the row height, groups left out takes the columns’.

The same rule as rowHeight: from 24 to 1 000 px at a 16 px text size, grown with the reader’s text size; anything else is told as an invalid-setting warning (its path names the member, headerHeight.groups) and ignored. A row a feature adds under the headers, as the filter row, keeps the row height. Titles on several lines (headerWrap) and vertical titles grow the column headers’ row when they need more: the taller wins.

The grid writes the column headers’ row height on its root as --dzg-header-height, for your CSS to read. The header-height attribute of <dz-grid> takes a number; the object goes through its settings property.

Example

TypeScript

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

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

const grid = createGrid<Run>(document.getElementById('runs')!, {
  rows: [{ id: 'r1', trail: 'Pine ridge', km: 12.4, climb: 380 }],
  columns: [
    { id: 'trail', header: 'Trail' },
    { id: 'course', header: 'Course', children: [{ id: 'km', header: 'Distance (km)', type: 'number' }, { id: 'climb', header: 'Climb (m)', type: 'number' }] },
  ],
  getRowId: (r) => r.id,
  messages: EN,
  headerHeight: { columns: 56, groups: 32 },
  features: [spans()],
});

grid.update({ headerHeight: 48 });   // every header row 48 px

Angular

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

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

@Component({
  selector: 'app-runs',
  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: 'Pine ridge', km: 12.4, climb: 380 }];
  readonly columns: DzgColumnOrGroup<Run>[] = [
    { id: 'trail', header: 'Trail' },
    { id: 'course', header: 'Course', children: [{ id: 'km', header: 'Distance (km)', type: 'number' }, { id: 'climb', header: 'Climb (m)', type: 'number' }] },
  ];
  readonly rowId = (r: Run) => r.id;
  readonly messages = EN;
  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 { EN } from '@dzgrid/dom/locales/en';

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

const grid = document.querySelector<DzGridElement<Run>>('dz-grid')!;
grid.columns = [
  { id: 'trail', header: 'Trail' },
  { id: 'course', header: 'Course', children: [{ id: 'km', header: 'Distance (km)', type: 'number' }, { id: 'climb', header: 'Climb (m)', type: 'number' }] },
];
grid.getRowId = (r) => r.id;
grid.messages = EN;
grid.features = [spans()];
grid.rows = [{ id: 'r1', trail: 'Pine ridge', km: 12.4, climb: 380 }];

Live demo

The group row 32 px tall, the column headers 56 px, the rows the density's 32 px.

See also

• rowHeight — the rows in pixels.
• headers — no header row on screen.
• Columns — groups, and titles on several lines.