Lattice Grid Buy a licence

demo D52

Custom comparators

Sorting by priority words, versions, or a domain rule

value.compare

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">
<style>
  #grid > div { height: 540px; }
</style>
<div id="grid"></div>

<script type="module">
  import * as Vue from 'https://esm.sh/vue@3';
  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/vue.esm.min.js';

  const LatticeGrid = createLatticeGrid({ vue: Vue, createGrid });

  const PRIORITIES = ['critical', 'high', 'medium', 'low', 'none'];

  // Order by a known ladder rather than by the words: alphabetical would put
  // low above medium.
  const byPriority = (a, b) => PRIORITIES.indexOf(String(a)) - PRIORITIES.indexOf(String(b));

  // Compare dotted release numbers as numbers, with pre-releases before the
  // release they lead to. Text sort gets both halves wrong.
  function bySemver(a, b) {
    const parse = (value) => {
      const [core, pre = null] = String(value ?? '').split('-');
      const parts = core.split('.').map((n) => Number(n) || 0);
      return { parts, pre };
    };
    const left = parse(a);
    const right = parse(b);
    for (let i = 0; i < 3; i++) {
      const diff = (left.parts[i] ?? 0) - (right.parts[i] ?? 0);
      if (diff !== 0) return diff;
    }
    if (left.pre === right.pre) return 0;
    if (left.pre === null) return 1;
    if (right.pre === null) return -1;
    return left.pre < right.pre ? -1 : 1;
  }

  // Sort names, and keep the unassigned ones at the bottom in both directions.
  // The grid inverts a comparator for a descending sort, so a row that must stay
  // last is pushed the other way when the fifth argument says descending.
  function ownersLast(a, b, rowA, rowB, descending) {
    const blankA = a == null || a === '';
    const blankB = b == null || b === '';
    if (blankA && blankB) return 0;
    if (blankA) return descending ? -1 : 1;
    if (blankB) return descending ? 1 : -1;
    const left = String(a);
    const right = String(b);
    return left < right ? -1 : left > right ? 1 : 0;
  }

  Vue.createApp({
    components: { LatticeGrid },
    data() {
      return {
        config: {
          rowKey: 'id',
          columns: [
            { field: 'id', title: 'Incident', layout: { width: 130, pin: 'start' } },
            { field: 'priority', title: 'Priority', layout: { width: 120 }, value: { compare: byPriority },
              cell: { decoration: 'pill', variant: { map: { critical: 'danger', high: 'warning', medium: 'info', low: 'neutral', none: 'neutral' } } } },
            { field: 'version', title: 'Version', layout: { width: 150 }, value: { compare: bySemver } },
            { field: 'owner', title: 'Owner', layout: { width: 150 }, value: { compare: ownersLast } },
            { field: 'service', title: 'Service', filter: { type: 'set' } },
            { field: 'summary', title: 'Summary', layout: { flex: 1, min: 240 } },
            { field: 'ageHours', title: 'Age', type: 'number', format: { suffix: ' h' }, layout: { width: 110 } },
          ],
          rows,  // incidents: id, priority, version, owner, service, summary, ageHours
        },
      };
    },
    template: '<lattice-grid v-bind="config" />',
  }).mount('#grid');
</script>

Sorting by a custom comparator instead of default ordering

Default sorting compares values with the ordinary less-than rules for numbers and strings, which breaks down as soon as a column carries meaning a plain comparison cannot see: priority words that should read Low, Medium, High rather than alphabetically, semantic version strings where “2.10.0” needs to land after “2.9.0” rather than before it, or a domain-specific rank that only the application knows. A developer reaches for a custom comparator whenever the natural order of a column is not its lexical or numeric order. Lattice Grid exposes this through value.compare, a column option taking a function that receives two cell values and returns the same negative, zero, or positive result a standard JavaScript Array.prototype.sort comparator would, so existing comparator functions for version strings or ranked enums drop in without adaptation. The comparator runs only during a sort operation, not on every render, so attaching one to a column of custom-ranked categories costs nothing while the grid is idle and adds no overhead to scrolling or filtering. Sort state set through a custom comparator is a plain { col, dir } pair like any other sort, so it serialises the same way for a saved view or a shareable link, and the header retains its usual ascending and descending arrow regardless of how the ordering underneath it is computed.

How do I sort a column by custom logic instead of alphabetical or numeric order?

Set value.compare on the column definition to a function taking two cell values and returning negative, zero, or positive, the same contract as a standard array sort comparator. Lattice Grid calls it during the sort pass in place of the default comparison, so a column of priority labels or version strings sorts by the rule the function encodes rather than by character order.

Related demos