Skip to content
ZenGrid

Row Height

Community

Introduction

Section titled “Introduction”

Every grid needs a row height. ZenGrid gives you three ways to set it, from a single fixed value to rows that measure their own content — all through the one rowHeight option plus rowHeightMode.

const grid = new Zengrid(el, {
  rowCount,
  colCount,
  rowHeight: 40,          // a number for uniform rows…
  // rowHeight: heights,  // …or a number[] for per-row heights
  columns,
});

Because the grid is virtualized, height drives layout math, not just looks: the provider ZenGrid picks from your rowHeight value computes scroll offsets and the total canvas height in constant or logarithmic time, so 100k rows stay smooth whether every row is the same height or all different.

The three ways to size rows

Section titled “The three ways to size rows”
Setting Rows are…
rowHeight: 40 Uniform — every row is 40px (fastest, the default).
rowHeight: [72, 36, 36, …] Per-row — one entry per row, any pattern you like.
rowHeightMode: 'auto' | 'content-aware' Measured — rows grow to fit their content.

The mode defaults to 'fixed', which honors your rowHeight number or array verbatim and never measures. Switch it to a measured mode when content length varies row to row.

Measured rows (auto height)

Section titled “Measured rows (auto height)”

In 'auto' and 'content-aware' modes the grid renders a row, measures it, and re-lays it out at the height its content actually needs. Two things opt a column into driving that height:

  • autoHeight: true on the column — only these columns are measured.
  • overflow: { mode: 'wrap' } on the column (or a global cellOverflow) so the text wraps to multiple lines instead of being clipped to one.

The difference between the two modes is what gets measured:

  • 'auto' measures every rendered row.
  • 'content-aware' only measures rows that have an autoHeight column, so on a wide grid you don’t pay to measure columns that never change height.

Clamp and tune the measured range with rowHeightConfig:

rowHeightConfig: {
  minHeight: 40,     // never shorter than this
  maxHeight: 160,    // never taller (content beyond it clips)
  defaultHeight: 40, // estimate used before a row is measured
}

Try it live

Section titled “Try it live”

Each tab is a different sizing strategy. Edit the numbers, the per-row rule, or the note text and the grid re-lays out instantly.

rowHeight is one number — every row is that tall. Change 40 to 64 and re-run.

Next

Section titled “Next”