Lattice Grid Buy a licence

demo D150

Row height per row

Height as a function of the row, and what that costs

rowHeight: (row) => number

Building…
Loading a live grid…

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',
    },
    // Called once per row as it is materialised, not on paint. A numeric height
    // would keep the model in fixed mode; a function moves it to variable mode.
    rowHeight: (row) => {
      const severity = row?.data?.severity;
      if (severity === 'critical') return 68;
      if (severity === 'major') return 48;
      return 30;
    },
    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: 'owner', title: 'Owner', filter: { type: 'set' }, layout: { width: 170 } },
      { field: 'minutes', title: 'Minutes lost', type: 'number', total: 'sum', layout: { width: 150 } },
      { field: 'summary', title: 'Summary', layout: { flex: 1, min: 280 } },
    ],
    rows,  // 50,000 incident notes, each with a severity
  });
</script>

Setting row height per row in a JavaScript data grid

Per-row height lets each row carry its own fixed height rather than sharing one value across the whole dataset, which suits rows that differ by kind rather than by content length: a summary row taller than a data row, or a row rendering a small chart that needs vertical space a text row does not. The option is rowHeight: (row) => number, a function called once per row that returns the pixel height for that row, so the decision can key off any field on the row rather than a single grid-wide constant. This differs from auto row height, which measures wrapped text after layout; here the height is known in advance, so the grid can compute scroll extent and the virtual scrolling window without a measurement pass.

Because the callback runs for every row up front, the cost sits in how much work the function does, not in re-measuring content, and the demo makes that cost visible: a callback reading one property scales cleanly, one doing heavier per-row computation does not. Knowing every row’s height ahead of time keeps the scrollbar’s proportions accurate immediately, rather than settling as rows are measured, and each row still reports its true height through aria-rowindex, so height differences do not disturb how the row list reads to assistive technology.

How do you set a different height for each row in a JavaScript data grid?

Set rowHeight to a function instead of a number: rowHeight: (row) => number. The grid calls it once per row and uses the returned value for that row’s layout, scroll extent, and virtualisation window, so height can depend on any field on the row, such as its type or a flag, rather than being fixed for the whole grid.

Related demos