autoHeight

Makes each row as tall as its tallest cell in a column marked wrap.

Import	import { autoHeight } from '@dzgrid/dom/auto-height';
Signature	autoHeight(): GridFeature
Texts	no bundle of its own
Own CSS	WRAP_CSS — to add yourself with injectStyles: false
Declared in	packages/dom/src/auto-height/index.ts

What it does

A column with wrap: true puts its text on several lines. With autoHeight(), each row grows to its tallest wrapped cell; short rows keep the normal height. The rows are measured after each paint, before the browser shows them, and the row at the top of the view stays where it was: scrolling never jumps.

Heights are measured again when a row’s data changes, a column’s width changes, columns are shown, hidden or moved, the language or direction changes, the text size or the density changes, or late fonts arrive. Detail panels keep their own height; the data row above one is measured as any row.

A fixed rowHeight wins: nothing is measured and the extra lines are clipped. Without this feature, wrap text is clipped too, with a missing-feature warning. Above 10 000 rows shown with a wrapped column, the grid tells an auto-height-large warning; it still works.

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; notes: string };

createGrid<Tool>(document.getElementById('tools')!, {
  rows: [{ id: 't1', name: 'Hand plane', notes: 'Sharpen the blade before each use; keep it oiled, and store it on its side.' }],
  columns: [
    { id: 'name', header: 'Tool', width: 140 },
    { id: 'notes', header: 'Notes', width: 220, wrap: true },
  ],
  getRowId: (t) => t.id,
  messages: EN,
  features: [autoHeight()],
});

See also

• The wrap column option.
• The rowHeight setting.
• Columns: sizes in the guide.