wrap

Long text on several lines instead of cut with « … ».

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 autoHeight() feature from @dzgrid/dom/auto-height, each row grows to its tallest wrapped cell. Without the feature — or with a fixed rowHeight — the text wraps but the row keeps its height, so the extra lines are clipped; the grid tells a missing-feature warning when the feature is absent.

Example

import { createGrid } from '@dzgrid/dom';
import { autoHeight } from '@dzgrid/dom/auto-height';
import { EN } from '@dzgrid/dom/locales/en';

type Tool = { id: string; name: string; shelf: number; notes: string };

createGrid<Tool>(document.getElementById('tools')!, {
  rows: [{ id: 't1', name: 'Hammer', shelf: 2, notes: 'Claw, 450 g' }],
  columns: [
    { id: 'name', header: 'Tool' },
    { id: 'notes', header: 'Notes', width: 200, wrap: true },
  ],
  getRowId: (r) => r.id,
  messages: EN,
  features: [autoHeight()],
});

See also