Lattice Grid Buy a licence

demo D28

Lookups

Storing an id and showing a label, sorting by the label

lookup: { options }

Building…
Loading a live grid…

The configuration

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

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

<script>
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    toolPanel: {
      side: 'left',
      panels: ['columns', 'filters', 'views', 'quick'],
      actions: ['undo', 'redo', 'export', 'restore', 'maximise'],
      exportName: 'lattice-demo',
    },
    columns: [
      { field: 'hostname', title: 'Hostname', layout: { width: 280, pin: 'start' } },
      {
        field: 'site', id: 'stored', title: 'Stored', type: 'number', layout: { width: 110 },
        // The same field with no lookup, so the integer the row actually
        // holds is visible beside the label it is shown as.
      },
      {
        field: 'site', title: 'Site', type: 'lookup', layout: { width: 200 },
        // Sorting is on the label by default, which is what someone reading
        // the column expects. `sortBy: 'value'` puts it back on the id.
        lookup: { options: SITES, unknownLabel: 'decommissioned', sortBy: 'label' },
      },
      {
        field: 'site', id: 'byValue', title: 'Site, sorted by id', type: 'lookup', layout: { width: 200 },
        lookup: { options: SITES, unknownLabel: 'decommissioned', sortBy: 'value' },
      },
      {
        field: 'site', id: 'grouped', title: 'Site, grouped options', type: 'lookup', layout: { width: 200 },
        // `group` on an option is what the select and the set filter use to
        // section a long list. One retired site is disabled: it still reads
        // on rows that hold it, and cannot be chosen for new ones.
        lookup: { options: SITES, unknownLabel: 'decommissioned', groupKey: 'group' },
      },
      { field: 'managed', title: 'Managed', type: 'boolean', layout: { width: 120 } },
      { field: 'ports', title: 'Ports', type: 'number', layout: { width: 110 } },
      { field: 'commissioned', title: 'Commissioned', type: 'dateString', layout: { width: 160 } },
    ],
    state: { sort: [{ col: 'site', dir: 'asc' }] },
    rows,  // nodes, each holding a site id
  });
</script>

Mapping stored codes to display labels with lookup columns

A lookup column stores a compact code in each row but shows a reader something legible, and sorts by that label rather than the underlying code. This is the pattern behind status fields, currency codes and any foreign key drawn from a small fixed list, where the raw value on the row is an id such as 2 or "ACT" and the value a reader needs is “Active” or “Pending review”. Lattice Grid handles this with lookup: { options } on the column definition: options supplies the code-to-label pairs once, at column setup, and every cell resolves against that same map rather than repeating the label in the row data. Sorting and filtering operate on the resolved label by default, so a status column orders “Active” before “Pending” as a reader expects, not by the numeric order of the codes.

A developer reaches for lookup instead of a plain text column whenever the stored value and the displayed value diverge, keeping row data small while the grid does the translation at render time. The map builds once from options rather than being looked up per cell, so resolving a label costs a single property read, and a lookup column in a large JavaScript data grid carries no more per-row overhead than a plain text cell.

How do you show a label for a coded value in a JavaScript data grid?

Set type: 'lookup' on the column and pass lookup: { options }, where options maps each stored code to its display label. Lattice Grid renders the label in the cell and sorts by the label rather than the code, so a status or category column reads naturally without changing what is stored in the row.

Related demos