demo D24
Units
Bytes, distances and rates, parsed in the unit the user typed
createUnitType()
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>
// Three unit systems, each one a call. `display: 'auto'` is what walks the
// ladder per value, so a 900 MB row and a 4 TB row are both readable in the
// same column without either losing its precision.
const binaryBytes = LatticeGrid.createUnitType({ system: 'data', unit: 'B', display: 'auto', binary: true, decimals: 1 });
const siBytes = LatticeGrid.createUnitType({ system: 'data', unit: 'B', display: 'auto', decimals: 1 });
const fixedGiB = LatticeGrid.createUnitType({ system: 'data', unit: 'B', display: 'GiB', decimals: 2 });
const rate = LatticeGrid.createUnitType({ system: 'bitrate', unit: 'bps', display: 'auto', decimals: 0 });
const cable = LatticeGrid.createUnitType({ system: 'length', unit: 'm', display: 'auto', decimals: 1 });
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: { binaryBytes, siBytes, fixedGiB, rate, cable },
columns: [
{ field: 'hostname', title: 'Hostname', layout: { width: 280, pin: 'start' } },
{ field: 'storageBytes', id: 'iec', title: 'Storage, IEC', type: 'binaryBytes', layout: { width: 150 }, total: 'sum' },
{ field: 'storageBytes', id: 'si', title: 'Storage, SI', type: 'siBytes', layout: { width: 150 } },
// Same field again, pinned to one unit, which is what a column you
// are going to compare down rather than read across wants.
{ field: 'storageBytes', id: 'gib', title: 'Storage, GiB', type: 'fixedGiB', layout: { width: 150 } },
{ field: 'linkBps', title: 'Link rate', type: 'rate', layout: { width: 150 } },
{ field: 'cableMetres', title: 'Cable run', type: 'cable', layout: { width: 140 }, total: 'sum' },
// The shipped types are the same call with the arguments filled in.
{ field: 'storageBytes', id: 'shipped', title: "type: 'bytes'", type: 'bytes', layout: { width: 150 } },
{ field: 'ports', title: 'Ports', type: 'number', layout: { width: 110 } },
],
rows, // nodes, one storage figure per row
});
</script>Parsing and rendering unit-bearing values in a column
A JavaScript data grid that stores plain numbers loses information the moment a column actually means bytes, kilometres or requests per second: a user typing 1.5 GB or 40 km/h expects the grid to understand the unit as well as the number. Lattice Grid handles this with createUnitType(), which builds a column type from a set of unit definitions, a base unit to store values in, and the parsing rules mapping typed input to that base. A file-size column defined this way accepts 1.5 GB, 800 MB or a bare byte count on entry, stores everything internally as bytes, and displays each value back in whichever unit keeps the number readable, so a byte count in the millions renders as megabytes rather than a long string of digits.
A developer reaches for this whenever a column mixes magnitudes a single fixed format cannot cover, such as network throughput or distance travelled, where the smallest unit makes large values unreadable and the largest rounds small values to zero. Parsing resolves to the base unit once, on entry, so sorting and filtering operate on that consistent numeric value rather than the display string, and a column mixing 2 TB and 500 MB sorts correctly without a custom comparator. Rendering applies only to rows in the current virtualised viewport, so adding a unit type carries no cost for rows scrolled out of view.
How do you show file sizes or distances in a JavaScript data grid?
Define the column type with createUnitType(), supplying the units it should recognise and the base unit values are stored in. Lattice Grid parses typed input such as 1.5 GB or 40 km into that base unit, keeps sorting and filtering consistent against the stored value, and renders each cell back in whichever unit best fits its magnitude.