headerWrap

A long title wrapped rather than cut.

Type	boolean
Default	false
Live update (update())	Yes — give the columns again (update({ columns }))
Declared in	packages/core/src/columns/defs.ts

What it does

With the wrappedHeaders() feature from @dzgrid/dom/wrapped-headers (no stylesheet), the title goes on several lines, at most the feature’s maxLines (3 by default, then « … »), and the column headers’ row grows to the tallest. It is measured again when a column is resized or the text size changes, never while scrolling. With headerHeight, the taller wins.

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: (r) => r.id,
  messages: EN,
  features: [wrappedHeaders({ maxLines: 2 })],
});

Live demo

See also

• headerVertical, wrap.
• Columns.