demo D21
Numbers and currency
Precision, grouping, negatives in parentheses, currency by locale
format: 'currency:GBP:2'
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 });
Vue.createApp({
components: { LatticeGrid },
data() {
return {
// Every money column reads the same `amount` field. The difference between
// them is entirely in `format`, which is the argument for keeping the
// number a number and describing the presentation separately.
config: {
rowKey: 'id',
toolPanel: {
side: 'left',
panels: ['columns', 'filters', 'views', 'quick'],
actions: ['undo', 'redo', 'export', 'restore', 'maximise'],
exportName: 'lattice-demo',
},
columnDefaults: { filter: true },
columns: [
{ field: 'reference', title: 'Reference', layout: { width: 150, pin: 'start' } },
{ field: 'counterparty', title: 'Counterparty', layout: { width: 180 }, filter: { type: 'set' } },
{ field: 'amount', title: 'Raw', type: 'number', layout: { width: 130 } },
{
field: 'amount', id: 'gbp', title: 'Sterling', type: 'number', layout: { width: 150 },
// The string shorthand, which is `style:currency:decimals`.
format: 'currency:GBP:2', total: 'sum',
},
{
field: 'amount', id: 'eur', title: 'Euro, de-DE', type: 'number', layout: { width: 160 },
format: { style: 'currency', currency: 'EUR', decimals: 2, locale: 'de-DE' },
},
{
field: 'amount', id: 'jpy', title: 'Yen', type: 'number', layout: { width: 140 },
// No decimals asked for. Intl knows the yen has none.
format: { style: 'currency', currency: 'JPY', locale: 'ja-JP' },
},
{
field: 'amount', id: 'accounting', title: 'Accounting', type: 'number', layout: { width: 160 },
format: { style: 'currency', currency: 'USD', decimals: 2, negative: 'parentheses' },
},
{
field: 'amount', id: 'compact', title: 'Compact', type: 'number', layout: { width: 120 },
format: { notation: 'compact' },
},
{
field: 'amount', id: 'thousands', title: 'Thousands', type: 'number', layout: { width: 140 },
// Scale is display only: the stored value, the sort and the sum are
// still the full amount.
format: { scale: 0.001, decimals: 1, suffix: 'k' },
},
{
field: 'variance', title: 'Variance', type: 'number', layout: { width: 130 },
format: { style: 'percent', decimals: 1, zeroDisplay: 'level' },
},
{
field: 'rate', title: 'Unit rate', type: 'number', layout: { width: 140 },
format: { minDecimals: 2, maxDecimals: 4, prefix: '£' },
},
],
rows, // ledger entries, one amount per row
},
};
},
template: '<lattice-grid v-bind="config" />',
}).mount('#grid');
</script>Formatting numeric and currency columns without touching the underlying value
A JavaScript data grid that sorts numbers correctly still has to decide how a human reads them: grouped thousands, a fixed number of decimal places, negatives shown in parentheses rather than a leading minus, and a currency symbol positioned the way a given locale expects rather than always in front. Lattice Grid handles this with a format string set per column, for instance format: 'currency:GBP:2' for a value shown as pounds sterling to two decimal places. The format only changes what is rendered; the cell’s underlying number is untouched, so sorting, filtering and any computed column reading that field continue to work against the raw value rather than a formatted string.
Reach for this whenever a dataset mixes plain counts with monetary or precision-sensitive fields, such as an order table with a quantity column beside a unit price and a total. Negative values in accounting contexts render in parentheses automatically when the format calls for it, matching the convention most finance tooling already uses, rather than requiring a separate per-cell formatter function. Formatting is applied at render time only for the rows currently in view, so adding currency formatting to a column carries no cost for rows scrolled out of the virtualised window.
How do you display a column as currency in a JavaScript data grid?
Set format: 'currency:GBP:2' (or the relevant currency code and decimal count) on the column definition. Lattice Grid renders the value with locale-aware grouping, the correct symbol placement and parenthesised negatives where applicable, while leaving the stored number unchanged for sorting and computation.