demo D131
Auto row height
Wrapped text measured per row, and the ceiling where it degrades
autoHeight: true | 'visible'
The configuration
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>
<div id="grid" style="height: 540px"></div>
<script>
const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
rowKey: 'id',
selection: 'multiple',
toolPanel: {
side: 'left',
panels: ['columns', 'filters', 'views', 'quick'],
actions: ['undo', 'redo', 'export', 'restore', 'maximise'],
exportName: 'lattice-demo',
},
autoHeight: 'visible',
columns: [
{ field: 'circuit', title: 'Circuit', layout: { width: 140, pin: 'start' } },
{ field: 'severity', title: 'Severity', filter: { type: 'set' }, layout: { width: 130 },
cell: { decoration: 'pill', variant: {
map: { critical: 'danger', major: 'warning', minor: 'info', info: 'neutral' },
} } },
{ field: 'raised', title: 'Raised', type: 'dateString', layout: { width: 130 } },
{ field: 'summary', title: 'Summary', layout: { flex: 1, min: 320 },
cell: { wrap: true, autoHeight: true } },
{ field: 'owner', title: 'Owner', filter: { type: 'set' }, layout: { width: 160 } },
],
rows, // incident notes with wildly uneven summary text
});
</script>Auto row height for wrapped text in a JavaScript data grid
Auto row height lets a row grow to fit content that would otherwise be clipped, most often a text column carrying a sentence or a paragraph rather than a short label. Reach for it when a dataset mixes free-text fields, such as notes or descriptions, with the usual short values, and a fixed row height would truncate the long ones. The option is autoHeight, set to true to measure every row up front or to 'visible' to measure only rows as they enter the viewport under virtual scrolling, which keeps the initial layout pass proportional to what is on screen rather than to the full row count.
Each row’s height comes from measuring its wrapped content against the column widths in play, so a resize or a column width change that alters wrapping is followed by a re-measure. This costs more than a fixed row height, because the grid cannot assume a uniform height when it works out which rows fall in the current scroll window, and the demo shows the ceiling: past a certain row count, per-row measurement in 'visible' mode still holds up, but true mode’s up-front pass adds a measurable delay before first paint. Assistive technology reads the resulting row as one unit regardless of how many lines it wraps to, so aria-rowindex stays correct even as heights vary row to row.
Does auto row height work with virtual scrolling in a JavaScript data grid?
Yes. Setting autoHeight: 'visible' measures each row’s wrapped height only as it scrolls into view, so the grid does not pay for measuring off-screen rows. autoHeight: true measures every row up front instead, which is simpler to reason about but scales with the full row count rather than the viewport.