Lattice Grid Buy a licence

demo D33

Pills and variants in htmx

Status chips across the six semantic variants, in every theme

decoration: 'pill' · variant.map

This grid shows status chips across the six semantic variants, rendered in every theme. It gives a status column the colour and shape a reader scans in an instant, so 'Active', 'Pending' and 'Failed' stand apart without a custom stylesheet per state.

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="pills-and-variants-table" data-lattice-grid>
  <thead>
    <tr>
      <th data-field="account">Account</th>
      <th data-field="service">Service</th>
      <th data-field="resource">Resource</th>
      <th data-field="region">Region</th>
      <th data-field="cost">Monthly cost</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="1"><td>Legacy (Do Not Decommission)</td><td>Relational Database</td><td>legacy-nat-delete-after-friday</td><td>us-east-1</td><td>31612.55</td></tr>
    <tr data-id="2"><td>Cost Optimisation Programme</td><td>Elastic Compute</td><td>tmp-jumpbox-03</td><td>us-east-1</td><td>6109.09</td></tr>
    <tr data-id="3"><td>Data &amp; Insights</td><td>Block Storage</td><td>test-api-terraform-imported-by-hand</td><td>us-east-1</td><td>42.69</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('pills-and-variants-table'), {
    selection: 'multiple',
    toolPanel: {
      side: 'left',
      panels: ['columns', 'filters', 'views', 'quick'],
      actions: ['undo', 'redo', 'export', 'restore', 'maximise'],
      exportName: 'lattice-demo',
    },
    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 } },
      // A pill tints its whole background by variant. The map turns each value
      // into a meaning, so the same value always reads the same colour.
      { 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',
        } } } },
      // A dot is the quieter form: a coloured mark beside the value rather than
      // behind it.
      { 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' },
    ],
  });
</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