Sizing & Height
How the grid is sized, and what each size costs you. Three height modes — fixed px, auto-expand to fit rows, or fill a parent container — and the one that puts every row in the DOM.
Fixed height (recommended)
A number is px, or pass any CSS length. The grid scrolls internally and only the rows in the viewport are in the DOM.
Pass a number (interpreted as px) or any CSS string
('460px', '50vh'). The grid renders a scroll container
internally and uses virtual scrolling — only the rows visible in the viewport
are in the DOM.
Required for: sticky group headers, inner-scroll grouping, virtual-paging.
Auto height
The grid expands to show every loaded row and the page scrolls instead — at the cost of virtual scrolling.
height: 'auto' — the grid expands vertically to show every loaded row.
Scrolling happens on the outer page or container, not inside the grid.
⚠ Virtual scroll is disabled — all rows are rendered in the DOM at once.
Avoid with large datasets.
⚠ Sticky group header overlay and inner-scroll grouping do not work in auto-height mode.
Fill container
The grid takes 100% of its parent's height — which means the parent needs a concrete height of its own.
height: '100%' fills whatever height the parent element provides.
The parent must have a concrete height set via CSS.
What happens if it does not is the part worth knowing. A percentage
height has nothing to resolve against, so the grid falls back to sizing itself to its
content — every loaded row in the DOM, exactly like height: 'auto'. You do
not get an error and nothing looks broken; you quietly lose virtual scrolling. The last
example on this page shows both side by side.
.my-wrapper { height: 460px; } // ← requiredUseful when you want the grid to fill a flex/grid cell or a full-screen panel.
What auto costs
The same 500 rows twice. Only the height differs — and the row counts underneath are what that difference means.
height: 460 — a window
0 of 500 rows in the DOM
height: 'auto' — all of them
0 of 500 rows in the DOM
100% needs a parent with a height
The same config in two parents. One has a concrete height; the other does not — and the grid without one quietly sizes to its content instead, putting every row in the DOM.
Parent has height: 380px
Parent has no height — the grid sizes to its content
Row height and header height
rowHeight and headerHeight decide how much of your box a row
costs. A 460px grid holds about nine 48px rows, or fourteen 32px ones — the same height
setting, a different amount of data on screen.
With a fixed height these are also what the grid uses to work out which rows to render,
so keeping rowHeight accurate matters more than it looks. If your rows are
not all the same height, use autoRowHeight and let the grid measure them —
see Row Virtualisation.
Summary
| Mode | Virtual scroll | Grouping overlay | Scroll area |
|---|---|---|---|
| Fixed px | ✅ | ✅ | Grid |
| Auto | ❌ | ❌ | Page / outer |
| Fill (100%) | ✅ | ✅ | Grid |
height: 'auto' disables virtual scrolling — every loaded row is rendered in the
DOM at once, and the sticky group-header overlay is unavailable. For large datasets prefer
a fixed height or '100%' inside a sized parent.
Height options
| Property | Type | Default | Description |
|---|---|---|---|
| config.height | number | string | — | Fixed px as a number or CSS length string ('460px', '50vh'), 'auto' to expand with rows, '100%' to fill the parent. |
| config.rowHeight | number | — | Fixed row height in px — the virtual-scroll window is computed from it. |
| column.sizing | 'flex' | — | The column takes a share of the leftover width instead of a fixed px width. |
| column.minWidth | number | — | Lower bound in px for flex-sized columns. |