developer guide
Theming and density: JavaScript Data Grid Guide
Styling with CSS custom properties rather than overriding rules, the four built-in themes, the density presets that follow one token, and the layout details: grid lines, vertical alignment and always-visible scrollbars.
Developer guide › Theming and density
Styling
Cells, columns and rows can all carry classes and inline styles, static or computed.
Density
One number drives the grid's geometry. A preset sets it; every token derives from it.
Grid lines and corners
Two settings that change how the grid is drawn rather than what it draws.
Full guide: Grid lines and corners ›
Vertical alignment
verticalAlign is the vertical counterpart to the per-column align:
where align places cell content across the column (start,
center, end), verticalAlign places it down the row - 'top', 'middle' or 'bottom'. It is a grid-level default
with a per-column override: set it on the grid to align every column, and a column's own
verticalAlign (or cell.verticalAlign) wins for that column alone.
center and centre are accepted as synonyms for middle,
the same leniency align gives the horizontal names.
Full guide: Vertical alignment ›
Always-visible and grid-drawn scrollbars
Native scrollbars are overlay bars on most platforms now: they fade away when the pointer is
idle, which reads as a cleaner surface but hides the affordance - a touchpad user has no
standing sign that a grid scrolls at all. scrollbars takes three modes.
'auto' (the default) leaves the platform's own behaviour alone, so an existing
grid is unchanged on upgrade. 'always' keeps the platform's bar shown whether or
not the pointer is over the grid. 'custom' replaces it with a bar the grid draws
itself.
Full guide: Always-visible and grid-drawn scrollbars ›
Translating the grid
Every string the grid renders or announces comes from a message catalogue. British English is the default; supply messages to replace some or all of it.