developer guide
Image Columns in a JavaScript Data Grid
An image column turns a URL into a picture in the row: rounded or circular, cropped with cover, loaded lazily so a long list does not fetch what nobody has scrolled to, and degrading to something readable when the file is not there.
Developer guide › Columns and cell rendering › Image Columns in a JavaScript Data Grid
Image columns
A column whose value is a URL, drawn as a picture. Avatars beside a name, product thumbnails, company logos.
A circular avatar
{ field: 'avatar', type: 'image', layout: { width: 72 },
cell: { props: { shape: 'circle' } } }| Prop | Type | Description |
|---|---|---|
| shape | 'rounded' | 'circle' | 'square' | Defaults to rounded. circle is the avatar case. |
| size | number | Pixels. Omit and the box follows the density scale at 0.68 of the row height. |
| fit | 'cover' | 'contain' | cover by default, so a mixed set of aspect ratios still forms a tidy column. |
| alt | string | function | Alternative text. Defaults to the cell's formatted text. |
| loading | 'lazy' | 'eager' | lazy by default. |
Only image URLs load. http, https,
blob: and data:image/ are permitted; everything else is refused,
including a data: URL claiming to be anything other than an image. Relative URLs
pass, since they cannot name a scheme. A grid drawing URLs that arrived in a data feed is
exactly where a bad one gets through. Note this differs from the link renderer,
which refuses data: outright: correct for an anchor, wrong for a picture.
A missing or broken image never moves the column. The box is sized from the row height whether or not the picture loads, and a failed load leaves it empty rather than showing the browser's broken-image glyph, which is a different size in every engine.
Exports carry the URL. CSV, Excel and the clipboard all get the text, not markup. Values are dictionary-encoded, which pays unusually well here: one URL per user or per company repeats down the whole column.