Value 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.
valueFormatter(params) | Function or expression. Formats the value for display. |
---|---|
floatingCellFormatter(params) | Function or expression. Formatter to use for a pinned row. If missing, the normal valueFormatter will be used. |
The interface for valueFormatter
is as follows:
Value Formatter vs Cell Renderer
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 formatter's are for text formatting and cell renderer's 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.
Value Formatter Example
The example below shows value formatters in action.
Floating Cell Formatter
Use floatingCellFormatter
instead of colDef.cellFormatter
to allow different formatting
for pinned rows. If you don't specify a colDef.floatingCellFormatter
, then cellFormatter
will get used instead if it is present.
params.node.floating
property.