Skip to content
DzGrid

verticalHeaders

Turns the titles of the columns marked headerVertical a quarter turn, reading upwards.

Importimport { verticalHeaders } from '@dzgrid/dom/vertical-headers';
SignatureverticalHeaders(o?: VerticalHeadersOptions): GridFeature
Textsno bundle of its own
Style sheetimport '@dzgrid/theme/vertical-headers.css';
Declared inpackages/dom/src/vertical-headers/index.ts
OptionsType
maxHeightnumber

What it does

Section titled “What it does”

A column with headerVertical: true has its title written upwards. The row of column titles grows to the longest such title, at least a row’s height and at most maxHeight; a longer title is cut with « … ». It is measured again when the titles, the row height or the density change, never while scrolling.

Names, roles and keys are unchanged: a screen reader reads the title as any other. The turn comes from the style sheet vertical-headers.css. A column with headerVertical on a grid without this feature keeps a flat title and the grid tells a missing-feature warning.

Options

Section titled “Options”
  • maxHeight: the title row’s height at most, in px. By default 240. Read once, when the feature is made.

Example

Section titled “Example”
import { createGrid } from '@dzgrid/dom';
import { verticalHeaders } from '@dzgrid/dom/vertical-headers';
import { EN } from '@dzgrid/dom/locales/en';
import '@dzgrid/theme/vertical-headers.css';


type Bed = { id: string; name: string; mon: boolean; tue: boolean; wed: boolean };
const day = (id: 'mon' | 'tue' | 'wed', header: string) => ({ id, header, type: 'boolean' as const, width: 44, headerVertical: true });


createGrid<Bed>(document.getElementById('watering')!, {
  rows: [{ id: 'p1', name: 'Herb spiral', mon: true, tue: false, wed: true }],
  columns: [{ id: 'name', header: 'Bed', flex: 1, minWidth: 140 }, day('mon', 'Monday'), day('tue', 'Tuesday'), day('wed', 'Wednesday')],
  getRowId: (b) => b.id,
  messages: EN,
  features: [verticalHeaders({ maxHeight: 120 })],
});

Live demo

Section titled “Live demo”

See also

Section titled “See also”