Lattice Grid Buy a licence

demo D235

Pass, warn, fail against a spec

A hard spec turned into a verdict on every row, and a live pass rate on the total

shadow: { kind: 'specStatus' } · total: 'passRate'

Building…
Loading a live grid…

The configuration

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.25.0/lattice-grid.min.css">

<div id="grid" style="height: 540px"></div>

<script type="module">
  import { createGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.25.0/modules/htmx.esm.js';

  const grid = createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    // A grand total row and a footer under each group, so the roll-ups have
    // somewhere to sit.
    grandTotalRow: 'bottom',
    groupFooter: true,
    toolPanel: { side: 'left', panels: ['columns', 'filters'], exportName: 'batch' },
    columns: [
      { field: 'part', title: 'Part', layout: { pin: 'start', width: 130 } },
      { field: 'line', title: 'Line', filter: { type: 'set' }, group: { enabled: true, index: 0 } },
      { field: 'bore', title: 'Bore (mm)', type: 'number', format: { decimals: 2 } },
      // A spec status turns a hard limit into a per-row PASS, WARN or FAIL: the
      // limits are 90 to 110 mm, with an amber warning band from 94 to 106 mm.
      // passRate rolls the verdict up in the totals row and every group subtotal.
      { id: 'status', title: 'Spec status',
        shadow: { of: 'bore', kind: 'specStatus', lower: 90, upper: 110, warnLower: 94, warnUpper: 106 },
        total: 'passRate', groupTotal: 'passRate', layout: { width: 130 } },
      // The same spec, rolled up as a count of the rows that failed.
      { id: 'fails', title: 'Failures',
        shadow: { of: 'bore', kind: 'specStatus', lower: 90, upper: 110, warnLower: 94, warnUpper: 106 },
        total: 'failureCount', groupTotal: 'failureCount', layout: { width: 110 } },
    ],
    formatting: {
      status: [
        { when: { op: 'eq', value: 'FAIL' }, style: { background: '#fbeceb', color: '#a4262c' } },
        { when: { op: 'eq', value: 'WARN' }, style: { background: '#fff4e5', color: '#a15c07' } },
        { when: { op: 'eq', value: 'PASS' }, style: { color: '#2f9e44' } },
      ],
    },
    state: { group: ['line'] },
    rows,  // e.g. [{ id: 1, part: 'P-0001', line: 'Line 1', bore: 100.4 }, …]
  });
</script>

Turning a spec into a pass, warn or fail on every row

A tolerance is usually enforced after the fact: export a batch, run it through a spreadsheet formula, colour the failures by hand. A specStatus shadow column does the judging inline, as a real value on every row, from the limits you declare: shadow: { of: 'bore', kind: 'specStatus', lower, upper, warnLower, warnUpper } reads the column it shadows and reports PASS, WARN or FAIL against a hard minimum and maximum, with an optional inner warning band for a reading that is still in spec but close enough to a limit to flag before it goes out. Because it is a real column value rather than a display-only badge, it sorts, filters and colours like anything else in the grid; a rule that colours the failures red is the ordinary conditional-formatting path, not a special case built for this column. It also rolls up: give the same shadow a total: 'passRate' and the totals row reports the share of rows that passed, and total: 'failureCount' reports how many failed outright, both recomputed automatically as the grid groups, filters or receives an edit that moves a value across a limit. A groupTotal of the same kind gives every subtotal its own pass rate, so a batch grouped by production line shows which line is actually the problem rather than one blended figure for the whole run.

How do I show pass/fail against a spec limit in a data grid?

Add a shadow column with shadow: { of: colId, kind: 'specStatus', lower, upper }, optionally with warnLower and warnUpper for an inner warning band. Lattice Grid evaluates every row against those limits and stores PASS, WARN or FAIL as the column’s own value, which you can filter, sort and colour with a normal conditional-formatting rule.

How do I get a live pass rate across a batch of measurements?

Set total: 'passRate' on a specStatus shadow column and the grid’s totals row reports the share of rows currently in spec, recomputed as the grid filters or a value changes. total: 'failureCount' reports the number of outright failures the same way. Add groupTotal with the same value and every group subtotal carries its own rate, so a grouped grid shows which group is failing rather than one number for everything.

Related demos