Lattice Grid Buy a licence

demo D25

Hex, binary and octal

A register dump: one value in four radixes, editable in any

createRadixType({ radix: 16 })

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>
  // Four views of one 16-bit number. Only the display differs: the stored
  // value is a number in all four, so the columns sort together and the
  // editor accepts whichever radix you type into.
  const reg16 = LatticeGrid.createRadixType({ radix: 16, bitWidth: 16, pad: true, prefix: '0x' });
  const bits16 = LatticeGrid.createRadixType({ radix: 2, bitWidth: 16, pad: true, group: 4 });
  const oct16 = LatticeGrid.createRadixType({ radix: 8 });
  const addr16 = LatticeGrid.createRadixType({ radix: 16, bitWidth: 16, pad: true, prefix: '0x' });

  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',
    },
    dataTypes: { reg16, bits16, oct16, addr16 },
    columns: [
      { field: 'block', title: 'Block', filter: { type: 'set' }, layout: { width: 100, pin: 'start' } },
      { field: 'name', title: 'Register', layout: { width: 190, pin: 'start' } },
      { field: 'address', title: 'Offset', type: 'addr16', layout: { width: 120 } },
      { field: 'value', id: 'hex', title: 'Value, hex', type: 'reg16', layout: { width: 140 } },
      { field: 'value', id: 'bin', title: 'Value, binary', type: 'bits16', layout: { width: 200 } },
      { field: 'value', id: 'oct', title: 'Value, octal', type: 'oct16', layout: { width: 140 } },
      { field: 'value', id: 'dec', title: 'Value, decimal', type: 'number', layout: { width: 140 } },
      { field: 'mask', title: 'Writable mask', type: 'bits16', layout: { width: 200 } },
      { field: 'reset', title: 'Reset', type: 'reg16', layout: { width: 120 } },
      { field: 'access', title: 'Access', filter: { type: 'set' }, layout: { width: 160 } },
      { field: 'volatile', title: 'Volatile', type: 'boolean', layout: { width: 110 } },
    ],
    rows,  // registers, one 16-bit value each
  });
</script>

Rendering one integer in hexadecimal, binary and octal at once

A register dump, a colour swatch table or a permissions bitmask share the same requirement: one underlying integer needs to be readable in more than one base at once, and each cell must stay editable in whichever base is showing without corrupting the stored value. Lattice Grid provides this through the radix type, configured per column with createRadixType({ radix: 16 }) (or 2 for binary, 8 for octal). Four columns can point at the same field, each with a different radix, and editing any one of them parses the entered string in that column’s base and writes back the same underlying number, so the other columns re-render with the new value in their own base.

A developer reaches for this when a dataset is inherently numeric but conventionally read in a non-decimal base, such as memory addresses, colour channels or permission modes, where forcing everything through decimal means the reader does the base conversion in their head. Validation happens against the configured radix, so a hex column rejects g while a binary column rejects anything past 1, catching malformed input before it reaches the underlying value. Because the radix type is a parsing layer over a single stored number, sorting and any computed column reading that field operate on the integer, not on whichever string representation is on screen.

How do you show a column in hexadecimal in a JavaScript data grid?

Set the column’s type to createRadixType({ radix: 16 }). Lattice Grid renders the stored integer in hexadecimal and parses edited text back into a number using the same base, so the underlying value stays a plain integer usable by sorting, filtering and other columns regardless of which radix is displayed.

Related demos