Angular Data GridValue Formatters
Value formatters allow you to format values for display. This is useful when data is one type (e.g. numeric) but needs to be converted for human reading (e.g. putting in currency symbols and number formatting).
Below shows the column definition properties for value formatters.
| A function or expression to format a value, should return a string. Not used for CSV export or copy to clipboard, only for UI cell rendering.
|
// example value formatter, simple currency formatter
colDef.valueFormatter = params => {
return '£' + params.value;
}
A cell renderer allows you to put whatever HTML you want into a cell. This sounds like value formatters and a cell renderers have cross purposes, so you may be wondering, when do you use each one and not the other?
The answer is that value formatters are for text formatting and cell renderers are for when you want to include HTML markup and potentially functionality to the cell. So for example, if you want to put punctuation into a value, use a value formatter, but if you want to put buttons or HTML links use a cell renderer. It is possible to use a combination of both, in which case the result of the value formatter will be passed to the cell renderer.
Be aware that the Value Formatter params won't always have 'data' and 'node' supplied, e.g. the params supplied to the Value Formatter in the Set Filter. As a result favour formatter implementations that rely upon the 'value' argument instead, as this will lead to better reuse of your Value Formatters.
The example below shows value formatters in action.
- Columns
A
andB
display the value of thefield
property - Columns
£A
and£B
use acurrencyFormatter
to display the value as a currency - Columns
(A)
and(B)
use abracketsFormatter
to display the value inside brackets