demo D241
Money as a real type
Amounts that keep their own currency, shown in one display currency through your rate table, with a mixed total that refuses rather than adds unlike currencies
createCurrencyType({ display, rates })
The configuration
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.25.0/lattice-grid.min.css">
<style>
#grid > div { height: 460px; }
</style>
<div id="grid"></div>
<script type="module">
import * as Vue from 'https://esm.sh/vue@3';
import { createGrid, createCurrencyType } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.25.0/lattice-grid.esm.min.js';
import createLatticeGrid from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.25.0/modules/vue.esm.min.js';
const LatticeGrid = createLatticeGrid({ vue: Vue, createGrid });
// Money as a real type: each value is an amount and its currency together.
// You own the rate table; the grid converts only through it and invents none.
const rates = { USD: 1, EUR: 0.92, GBP: 0.79, JPY: 149 };
Vue.createApp({
components: { LatticeGrid },
data() {
return {
config: {
rowKey: 'id',
grandTotalRow: 'bottom',
dataTypes: {
// Shown and totalled in USD, converting every row through your rates.
displayUsd: createCurrencyType({ code: 'USD', display: 'USD', rates }),
// No display currency: a mix of currencies has no single figure, so the
// total refuses out loud rather than adding unlike amounts.
asEntered: createCurrencyType({ code: 'USD' }),
},
columns: [
{ field: 'invoice', title: 'Invoice', layout: { pin: 'start', width: 150 } },
{ field: 'amount', id: 'entered', title: 'As entered', type: 'asEntered', total: 'sum' },
{ field: 'amount', id: 'usd', title: 'In USD', type: 'displayUsd', total: 'sum' },
],
rows, // e.g. [{ id: 1, invoice: 'INV-1001', amount: { amount: 4200, code: 'USD' } }, ...]
},
};
},
template: '<lattice-grid v-bind="config" />',
}).mount('#grid');
</script>Totalling a column of mixed currencies without quietly getting it wrong
When a column holds amounts in more than one currency, the dangerous outcome is not a crash or a blank cell, it is a total that looks right and is not: a footer that adds dollars to euros and shows one confident figure nobody can check. Reach for the currency type in any JavaScript data grid that shows real money, an invoice ledger, a payments table, a multi-market revenue report, where a wrong total is money lost. In Lattice Grid a currency value is an amount and its currency together, so ten dollars and ten euros are different values rather than the same number with a different symbol in front, and sorting, filtering and totalling all read the money underneath. Create the type with createCurrencyType, hand it the display currency you want the column shown in and a rate table you own, and every row is converted through your rates and totalled in that one currency.
The rate table is yours, not the grid’s. Lattice Grid ships no exchange rates and invents none: it converts only through the table you supply, and where a rate is missing it says so out loud rather than substituting a zero or dropping the row from the total. A sum that cannot reach every row is a wrong sum, not a smaller one, so one unreachable amount makes the whole total report loudly instead of understating itself. Give a column no display currency at all and a mix of currencies has no single figure to show, so its total refuses rather than adding unlike amounts. The stored value always keeps the currency it was entered in, so a copy is lossless and a column shown in dollars can still be exported in the currency each row was booked in.
How do you total a column that holds several currencies in a data grid?
Give the column a currency type built with createCurrencyType({ display, rates }): display is the currency the column is shown and totalled in, and rates is your own rate table. Each amount keeps its own currency, the grid converts every row through your rates, and the totals row sums in the display currency. Without a display currency, or with a rate missing, the total refuses out loud rather than adding unlike currencies into a believable wrong number.
What happens to a currency total when a rate is missing?
The total reports the missing conversion by name rather than showing a figure it cannot back. Because a sum that silently skips a row is wrong rather than merely smaller, one amount the rate table cannot reach makes the whole total loud, so the gap is visible where it matters instead of hidden inside an otherwise plausible number.