Lattice Grid Buy a licence

demo D40

Ratings, colours and icons in htmx

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 htmx version. A server-rendered table is upgraded in place, so the page is readable before any script runs and gains the full grid when the module loads, which suits a progressively enhanced app.

The configuration

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

<!-- A real, server-rendered table: readable with JavaScript off. data-field on
     each header names the column that cell becomes, and data-id on each row is
     the key the grid carries it under. -->
<table id="ratings-colours-icons-table" data-lattice-grid>
  <thead>
    <tr>
      <th data-field="service">Service</th>
      <th data-field="team">Team</th>
      <th data-field="rating">Score</th>
      <th data-field="colour">Brand colour</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="0"><td>fraud-edge</td><td>Commerce</td><td>1.5</td><td>#2f6fed</td></tr>
    <tr data-id="1"><td>payments-stream</td><td>Growth</td><td>2</td><td>#65a30d</td></tr>
    <tr data-id="2"><td>checkout-edge</td><td>Payments</td><td>3</td><td>#0891b2</td></tr>
    <!-- the rest of the rows, rendered by your server -->
  </tbody>
</table>

<script type="module">
  import { hydrateTable } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/htmx.esm.min.js';

  // The markup carries the rows; a server-rendered table's column types are
  // declared in the config hydrateTable takes. The grid replaces the table
  // where it stood.
  const grid = hydrateTable(document.getElementById('ratings-colours-icons-table'), {
    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' } } },
    ],
  });
</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