demo D21
Numbers and currency in htmx
Precision, grouping, negatives in parentheses, currency by locale
format: 'currency:GBP:2'
This grid formats numbers the way a person reads them: grouped thousands, a fixed number of decimals, negatives in parentheses, and currency by locale. It keeps figures correct to sort and easy to scan, so a column of money reads cleanly without hand-formatting each value.
This is the htmx version. A server-rendered table is upgraded in place, so the page is readable before any script runs and gains the full grid when the module loads, which suits a progressively enhanced app.
The configuration
<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.min.css">
<!-- A real, server-rendered table: readable with JavaScript off. data-field on
each header names the column that cell becomes, and data-id on each row is
the key the grid carries it under. -->
<table id="numbers-and-currency-table" data-lattice-grid>
<thead>
<tr>
<th data-field="reference">Reference</th>
<th data-field="counterparty">Counterparty</th>
<th data-field="amount">Raw</th>
<th data-field="variance">Variance</th>
<th data-field="rate">Unit rate</th>
</tr>
</thead>
<tbody>
<tr data-id="1"><td>INV-2026-100001</td><td>Aurora Metals</td><td>118.29</td><td>0.2121</td><td>0.6118</td></tr>
<tr data-id="2"><td>INV-2026-100002</td><td>Vantage Media</td><td>-1.05</td><td>-0.1312</td><td>1.6679</td></tr>
<tr data-id="3"><td>INV-2026-100003</td><td>Aurora Metals</td><td>-2270079.56</td><td>0.2395</td><td>1.6821</td></tr>
<!-- the rest of the rows, rendered by your server -->
</tbody>
</table>
<script type="module">
import { hydrateTable } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/htmx.esm.min.js';
// Every money column reads the same amount field. The difference between them
// is entirely in format, so the value stays a number and each column decides
// only how to show it: the sort and the sum read the full amount either way.
// The markup carries the rows; a server-rendered table's column types are
// declared in the config hydrateTable takes. The grid replaces the table
// where it stood.
const grid = hydrateTable(document.getElementById('numbers-and-currency-table'), {
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. 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: '£' },
},
],
});
</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.