The grid displays values from your data. The easiest way to configure this is to set
The grid then pulls the gets and sets (after editing) the data to this location and does no formatting
for the value.
You should use
colDef.field most of the time. However you may require to get / set the data
another way, or you may wish to format (for display) or parse (after editing) the data if you do not
display the data 'as is'. For these reasons, the grid provides the following additional methods:
Below shows the column definition properties for valueGetters and valueFormatters.
|valueGetter(params)||Function or expression. Gets the value from your data for display.|
|valueFormatter(params)||Function or expression. Formats the value for display.|
|headerValueGetter(params)||Function or expression. Gets the value for display in the header.|
|floatingCellFormatter(params)||Function or expression. Formatter to use for a pinned row. If missing, the normal valueFormatter will be used.|
The example below demonstrates
The following can be noted from the demo:
fieldto get the data and without formatting.
The flow diagram below shows the flow of the value to displaying it on the screen.
valueGetter allows you to pull values from your data instead of using the standard
colDef.field mechanism. The interface for
valueGetter is as follows:
valueFormatter allows you to format or transform the value for display purposes. The section on
Reference Data describes how to transform reference data using a
valueFormatter to display names rather than codes.
The interface for
valueFormatter is as follows:
A cell renderer allows you to put whatever HTML
you want into a cell. This sounds like a
valueFormatter and and a
have cross purposes, so you may be wondering, when do you use each one and not the other?
The answer is:
valueFormatter's are for text formatting / value transformations.
cellRenderer'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
if you want to put buttons or HTML links use a
It is possible to use a
combination of both, in which case the result of the
valueFormatter will be
passed to the
headerValueGetter instead of
colDef.headerName to allow dynamic header names.
The parameters for
headerValueGetter differ from standard
valueGetter as follows:
locationallows you to have different column names depending on where the column is appearing, eg you might want to have a different name when the column is in the column drop zone or the toolbar.
See the Tool Panel Example for an example of
headerValueGetter used in different locations, where you can change the header name depending on
where the name appears.
floatingCellFormatter instead of
colDef.cellFormatter to allow different formatting
for pinned rows. If you don't specify a
will get used instead if it is present.