developer guide
Data Grid Row Density and Compact Mode
Density moves row height, padding and type together, from compact for as many rows as the screen will take to spacious for a room, and a single token overrides it where a design needs an exact height.
Developer guide › Theming and density › Data Grid Row Density and Compact Mode
Density
One number drives the grid's geometry. A preset sets it; every token derives from it.
Four presets, or a number between them
createGrid(el, { density: 'spacious' });
createGrid(el, { density: 1.4 }); // anything between the presets
grid.set('density', 'compact'); // live| Preset | Scale | Row | Font | For |
|---|---|---|---|---|
| compact | 0.85 | 23.8px | 12.7px | The default. Dense operational and financial grids; most rows on screen. |
| standard | 1 | 28px | 13px | Roomier than the default. |
| comfortable | 1.5 | 42px | 14px | Roomier application tables. |
| spacious | 2 | 56px | 15px | Modern app listings with avatars and thumbnails. |
Type does not scale with the rows. The row doubles from
compact to spacious while the font moves about 18%. Scaling text
against row height reads as a children's book long before the rows look generous, so height
and spacing follow the scale directly and type is damped against it.
Virtualisation follows the token, not a separate number. Row positions
are computed from the resolved --lattice-row-height, so a host that overrides
that token by hand gets the virtualisation to agree. An explicit rowHeight in
config outranks both, a host that names a number means it.
Height alone will not reproduce a modern app listing. Those designs pair
generous rows with two-line cells (a bold title over a grey sub-label) and an avatar or
thumbnail. spacious gives the room, an image column
gives the picture, and twoline gives the second line.