Lattice Grid Buy a licence

demo D41

Images, avatars and QR codes

Media in cells, including a QR generated with no dependency

type: 'image' · render: 'qrcode'

Building…
Loading a live grid…

The configuration

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>

<div id="grid" style="height: 540px"></div>

<script>
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    density: 'comfortable',
    selection: 'multiple',
    toolPanel: {
      side: 'left',
      panels: ['columns', 'filters', 'views', 'quick'],
      actions: ['undo', 'redo', 'export', 'restore', 'maximise'],
      exportName: 'lattice-demo',
    },
    columns: [
      { field: 'avatar', title: '', type: 'image', layout: { pin: 'start', width: 64 },
        sort: { enabled: false }, filter: { enabled: false },
        // The alt text is the row's own name. "Image" repeated down a column
        // tells a screen reader nothing.
        cell: { props: { shape: 'circle', alt: (p) => String(p?.data?.owner ?? '') } } },
      { field: 'owner', title: 'Owner', layout: { width: 220 },
        cell: { render: 'twoline', props: { secondary: 'email' } } },
      { field: 'logo', title: 'Mark', type: 'image', layout: { width: 74 },
        sort: { enabled: false }, filter: { enabled: false },
        cell: { props: { shape: 'rounded', alt: 'Service mark' } } },
      { field: 'service', title: 'Service', layout: { width: 190 } },
      // Generated from the cell's value with no dependency and no network.
      // Short payloads on purpose: 30 pixels of cell will not carry a long
      // URL as a scannable symbol.
      { field: 'ticket', title: 'QR', layout: { width: 90 },
        sort: { enabled: false }, cell: { render: 'qrcode', props: { size: 36, margin: 2, level: 'M' } } },
      { field: 'url', title: 'Runbook', layout: { flex: 1, min: 220 },
        cell: { render: 'link', props: { target: '_blank' } } },
    ],
    rows,  // rendering demo rows
  });
</script>

Rendering images, avatars and QR codes in a grid cell

An image renderer draws a picture rather than text in a cell: a product thumbnail, a user avatar, a status icon, or a QR code generated on the fly from the row’s own data, a ticket reference, a URL, a serial number. A developer reaches for it wherever a column’s value is more useful shown than read, a catalogue grid where a thumbnail confirms the row faster than a SKU, or an admin table where a QR code lets someone scan a row straight from the screen rather than retype an ID. Lattice Grid sets this with type: 'image' for pictures and render: 'qrcode' for codes generated from cell content, and the QR code is drawn with no external dependency, so a grid full of them carries no extra library weight and no network request per code. Images load lazily as their row scrolls into view, so a column of a thousand avatars costs nothing for the rows never scrolled to, which matters in a JavaScript data grid where the row count is unbounded and the renderer has to stay cheap per cell rather than per dataset. Every image and generated code carries an accessible text alternative drawn from the underlying value, so a screen reader announces the row’s identity even where the cell shows only a picture.

How do I show a QR code or an image in a data grid cell?

Set render: 'qrcode' on a column to generate a QR code from each cell’s value with no external dependency, or type: 'image' to draw a picture from a URL or data field. Images load lazily as rows scroll into view, and both renderer types include a text alternative for the underlying value, so the column stays accessible even when the visible content is graphical.

Related demos