Manufacturing and process: JavaScript Data Grid Demo

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

<div id="grid" style="height: 440px"></div>
<div id="panel" style="margin-top: 12px; font: 13px system-ui; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem"></div>

<script>
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    columnDefaults: { filter: true },
    toolPanel: { side: 'left', panels: ['columns', 'filters', 'statistics'] },
    columns: [
      { field: 'part', title: 'Part', layout: { pin: 'start', width: 120 } },
      { field: 'shift', title: 'Shift', filter: { type: 'set' } },
      // spec is the tolerance the capability figures are measured against.
      { field: 'bore', title: 'Bore', type: 'millimetres', total: 'median', spec: { lower: 9.5, upper: 10.8, target: 10 } },
      { field: 'speed', title: 'Spindle', type: 'rpm', total: 'avg' },
      { field: 'torque', title: 'Torque', type: 'torque', total: 'max' },
    ],
    formatting: {
      bore: [
        { id: 'b-out', when: { op: 'notBetween', value: 9.5, value2: 10.8 }, style: { background: '#fbeceb' } },
        { id: 'b-z', when: { op: 'zAbove', value: 2 }, style: { background: '#fff4e5' } },
      ],
    },
    rows,  // machined parts: part, shift, bore, speed, torque
  });

  const panel = document.getElementById('panel');
  const render = () => {
    // baseline fixes the limits on the first 40 readings, so a later tool-wear
    // drift separates Cpk from Ppk rather than widening the limits to absorb it.
    const c = grid.statistics.capability('bore', { baseline: 40 });
    const n = (v) => (typeof v === 'number' ? v.toFixed(2) : v);
    panel.innerHTML =
      '<span><strong>Cp</strong> ' + n(c.cp) + '</span>' +
      '<span><strong>Cpk</strong> ' + n(c.cpk) + '</span>' +
      '<span><strong>Pp</strong> ' + n(c.pp) + '</span>' +
      '<span><strong>Ppk</strong> ' + n(c.ppk) + '</span>' +
      '<span><strong>defect rate</strong> ' + n(c.defectRate) + '</span>';
  };
  grid.on('filter:changed', render);
  render();
</script>