Lattice Grid Buy a licence

demo D40

Ratings, colours and icons

Interactive stars, colour swatches and value-mapped icon sets

render: 'rating' | 'colour' | 'icon'

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',
    selection: 'multiple',
    toolPanel: {
      side: 'left',
      panels: ['columns', 'filters', 'views', 'quick'],
      actions: ['undo', 'redo', 'export', 'restore', 'maximise'],
      exportName: 'lattice-demo',
    },
    columns: [
      { field: 'service', title: 'Service', layout: { pin: 'start', width: 170 } },
      { field: 'team', title: 'Team', filter: { type: 'set' } },
      { field: 'rating', title: 'Score', type: 'number', layout: { width: 170 },
        cell: { render: 'rating', props: { max: 5, allowHalf: true } } },
      // A different glyph and a different count, to make the point that the
      // star and the five are defaults rather than the design.
      { id: 'rating-health', field: 'rating', title: 'Health', type: 'number', layout: { width: 190 },
        cell: { render: 'rating', props: { max: 5, icon: 'heart', allowHalf: true, showValue: false } } },
      { field: 'colour', title: 'Brand colour', layout: { width: 150 },
        cell: { render: 'colour', props: { uppercase: true } } },
      { field: 'severity', title: 'Severity', layout: { width: 140 },
        cell: { render: 'icon', props: { name: {
          critical: 'danger', high: 'warning', normal: 'info', low: 'check',
        } } } },
      { field: 'status', title: 'Status', layout: { width: 150 },
        // The icon sits after the text here, which is the right order when
        // the text is the thing being scanned.
        cell: { render: 'icon', props: { name: { healthy: 'success', degraded: 'warning', failing: 'danger' }, position: 'end' } } },
    ],
    rows,  // rendering demo rows
  });
</script>

Rendering stars, colour swatches and icon sets per column

A JavaScript data grid spends much of its rendering effort turning raw values into something a reader can scan in a fraction of a second, and star ratings, colour swatches and icon sets are common shorthands for that job. Lattice Grid exposes all three through one option, render: 'rating' | 'colour' | 'icon', set per column alongside the usual field and header definitions. A rating column turns a numeric score into filled and empty stars; a colour column paints a swatch from a hex value or a named palette entry, useful for status or priority fields where colour carries more meaning than the underlying code; an icon column maps a value to a glyph from a supplied set, reached for when a status column has more states than a boolean can hold.

A developer turns to these renderers when the raw value is correct but not what a person should read: a 4 in a ratings column, a hex code in a priority column, an enum string in a status column. Each renderer keeps the underlying value intact for sorting and filtering, so a rating column still sorts numerically. All three are drawn per visible cell only, under the same virtual scrolling as the rest of the grid, so a ratings column on a hundred-thousand-row dataset costs no more to paint than one on a hundred rows.

How do I show star ratings or colour-coded values in a data grid column?

Set render: 'rating' on a column with a numeric field to get filled and empty stars in place of the raw number, or render: 'colour' to paint a swatch from a hex value or palette entry. render: 'icon' maps discrete values to glyphs, for status or category columns with more states than a boolean covers. Each option keeps the stored value intact for sorting and filtering.

Related demos