Lattice Grid Buy a licence

demo D25

Hex, Binary and Octal Number Columns in Angular

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

createRadixType({ radix: 16 })

This is a register dump where one integer is shown in decimal, hex, binary and octal at once, and stays editable in any of them. It suits low-level data like bitmasks and colour values, letting a reader work in whichever base fits without corrupting the underlying number.

Building…
Loading a live grid…

This is the Angular version. A standalone component takes the whole configuration through one config input, surfaces grid events as outputs, and exposes the live grid on a getter for anything the inputs do not cover.

The configuration

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid, createRadixType } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import { LatticeGridComponent, provideLattice } from '@toclocoinc/lattice-grid/angular';

const reg16 = createRadixType({ radix: 16, bitWidth: 16, pad: true, prefix: '0x' });
const bits16 = createRadixType({ radix: 2, bitWidth: 16, pad: true, group: 4 });
const oct16 = createRadixType({ radix: 8 });
const addr16 = createRadixType({ radix: 16, bitWidth: 16, pad: true, prefix: '0x' });

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LatticeGridComponent],
  template: '<lattice-grid [config]="grid" style="display:block;height:540px"></lattice-grid>',
})
export class AppComponent {
  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 } },
    ],
    rows: [/* registers: id, block, name, address, value, mask, reset */],
  };
}

bootstrapApplication(AppComponent, {
  providers: [provideLattice({ createGrid })],
});

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