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

import * as ng from '@angular/core';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import createLatticeGrid from '@toclocoinc/lattice-grid/modules/angular';

const { LatticeGridComponent } = createLatticeGrid({ ng, 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 */];



@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LatticeGridComponent],
  template: '<lattice-grid [config]="grid" style="display:block;height:540px"></lattice-grid>',
})
export class AppComponent {
  grid = {
    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,
  };
}

bootstrapApplication(AppComponent);

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