Separate calculation and display

Use this to calculate totals from quantity and price while showing readable numbers such as 1,200. Manage calculated values separately from display text.

Try it yourself

1. Read the first order

   Initially ORD-0001 has quantity 10, unit price 120, and total 1,200. The total is calculated, not entered separately.

2. Edit the quantity

   Double-click the first order's quantity, change it to 25, and press Enter.

3. Compare the calculation

   Check that the total becomes 3,000. Further quantity edits recalculate the total with the same formula.

Numeric sorting and aggregation need actual numbers. Add commas and currency symbols during formatting, not to the calculation result.

Useful terms

valueGetter

A function calculating a new value from row values.

valueFormatter

A function converting a calculated value into display text.

Key API examples

Application code that references the registered Grid element as grid.

grid.columnDefs = [{field:'total',headerName:'Total',
  valueGetter: ({data}) => data.quantity * data.price,
  valueFormatter: ({value}) => Number(value).toLocaleString('en-US')
}];