Skip to content
DzGrid

wrappedHeaders

Puts the long titles of the columns marked headerWrap on several lines.

Importimport { wrappedHeaders } from '@dzgrid/dom/wrapped-headers';
SignaturewrappedHeaders(o?: WrappedHeadersOptions): GridFeature
Textsno bundle of its own
Own CSSWRAPPED_HEADERS_CSS — to add yourself with injectStyles: false
Declared inpackages/dom/src/wrapped-headers/index.ts
OptionsType
maxLinesnumber

What it does

Section titled “What it does”

A column with headerWrap: true has its title broken between words onto several lines, at most maxLines; past them, the last line ends with « … ». The row of column titles grows to the tallest such title. It is measured again when the titles, the widths, the text size, the density or the direction change, never while scrolling. With the headerHeight setting, the taller wins.

Fitting such a column to its content takes its cells and the title’s longest word. A title cut at the limit sits at the start of its cell, even in a number column, so its « … » shows in every browser. Names, roles and keys are unchanged.

No style sheet is needed: the feature adds its own few rules (WRAPPED_HEADERS_CSS, to load yourself with injectStyles: false). A maxLines that is not a whole number from 1 to 10 is told as an invalid-setting warning and 3 is used. A column with headerWrap on a grid without this feature keeps one line and the grid tells a missing-feature warning.

Options

Section titled “Options”
  • maxLines: the lines a title may take, 1 to 10. By default 3. Read once, when the feature is made.

Example

Section titled “Example”
import { createGrid } from '@dzgrid/dom';
import { wrappedHeaders } from '@dzgrid/dom/wrapped-headers';
import { EN } from '@dzgrid/dom/locales/en';


type Parcel = { id: string; route: string; days: number };


createGrid<Parcel>(document.getElementById('parcels')!, {
  rows: [{ id: 'p1', route: 'Harbour – Hill farm', days: 3 }],
  columns: [
    { id: 'route', header: 'Route', flex: 1 },
    { id: 'days', header: 'Average delivery time in days', type: 'number', width: 90, headerWrap: true },
  ],
  getRowId: (p) => p.id,
  messages: EN,
  features: [wrappedHeaders({ maxLines: 2 })],
});

Live demo

Section titled “Live demo”

The last title takes two lines; the others stay on one.

See also

Section titled “See also”