Lattice Grid Buy a licence

demo D40

Ratings, colours and icons in React

Interactive stars, colour swatches and value-mapped icon sets

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

This grid renders values as interactive star ratings, colour swatches and value-mapped icon sets. It turns raw figures into signals a reader scans in a fraction of a second, and the stars can be set directly in the cell.

Building…
Loading a live grid…

This is the React version. The grid mounts through the createLatticeGrid adapter, which takes its configuration as ordinary props and hands back the live grid through a ref. The grid below is the same one every other tab runs.

The configuration

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.min.css">

<div id="grid"></div>

<script type="module">
  import React from 'https://esm.sh/react@18';
  import { createRoot } from 'https://esm.sh/react-dom@18/client';
  import { createGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.esm.min.js';
  import createLatticeGrid from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/react.esm.min.js';

  const LatticeGrid = createLatticeGrid({ React, createGrid });

  const 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' } } },
  ];

  const rows = [/* rendering demo rows */];

  function App() {
    return (
      <LatticeGrid
        rowKey="id"
        selection="multiple"
        toolPanel={{ side: 'left', panels: ['columns', 'filters', 'views', 'quick'],
          actions: ['undo', 'redo', 'export', 'restore', 'maximise'], exportName: 'lattice-demo' }}
        columns={columns}
        rows={rows}
        style={{ height: '540px' }}
      />
    );
  }

  createRoot(document.getElementById('grid')).render(<App />);
</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