Lattice Grid Buy a licence

demo D33

Pills and variants

Status chips across the six semantic variants, in every theme

decoration: 'pill' · variant.map

Building…
Loading a live grid…

The configuration

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.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.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/lattice-grid.esm.min.js';
  import createLatticeGrid from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/modules/react.esm.min.js';

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

  // A pill or a dot carries a value's meaning as colour. The variant map turns
  // each value into a theme token rather than a literal colour, so the palette
  // holds across every theme.
  const columns = [
    { field: 'account', title: 'Account', filter: { type: 'set' } },
    { field: 'service', title: 'Service', filter: { type: 'set' } },
    { field: 'resource', title: 'Resource', layout: { flex: 1, min: 200, max: 320 } },
    { field: 'environment', title: 'Env', filter: { type: 'set' },
      cell: { decoration: 'pill', variant: { map: {
        prod: 'danger', 'prod-2': 'danger', 'definitely-prod': 'danger',
        staging: 'warning', untagged: 'warning', test: 'info',
        dev: 'success', 'not-prod': 'neutral',
      } } } },
    { field: 'region', title: 'Region', filter: { type: 'set' },
      cell: { decoration: 'dot', variant: 'neutral' } },
    { field: 'cost', title: 'Monthly cost', type: 'number', layout: { width: 170 },
      format: { style: 'currency', currency: 'USD', decimals: 2 }, total: 'sum' },
  ];

  const rows = [/* cloud cost records, one object per resource */];

  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 status chips with semantic variants

A pill is the compact chip a status column reaches for once plain text stops carrying enough signal at a glance: “Active”, “Pending”, “Failed” read the same weight as any other cell until set apart by shape and colour. Lattice Grid draws this with decoration: 'pill', paired with variant.map to route each raw value to one of six semantic variants, so a status field of open, pending, blocked, done, archived and error maps directly onto success, warning, danger, neutral, info and default treatments without a bespoke renderer per column. The mapping is declared once per column, alongside typing, sorting and filtering, rather than computed per row in a custom render function. Because the pill is drawn inside the grid’s own recycled cell pool, colouring a column by variant costs no more per frame than plain text: a 10,000-row grid with every visible cell rendered as a coloured pill holds the same DOM node count as one showing raw strings, since only cells scrolled into view are ever mounted. Each variant carries a fixed colour and contrast pairing per theme, so a status column reads correctly under both a light and dark theme without a second configuration. The demo cycles the six variants across every shipped theme, so the contrast of each pairing can be checked directly.

How do you colour-code status values in a JavaScript data grid?

Set decoration: 'pill' on the column and supply variant.map to associate each raw value with one of the six semantic variants: success, warning, danger, info, neutral or default. Lattice Grid applies the matching colour and contrast pairing per theme automatically, so the same mapping produces a correctly contrasted chip under both light and dark themes without a separate colour definition for each.

Related demos