By default the grid renders values into the cells as strings. If you want something more complex you use a cell renderer.
The cell editor for a column is set via
colDef.cellRenderer and can
be any of the following types:
undefined / null: Grid renders the value as a string.
String: The name of a cell renderer component.
Class: Direct reference to a cell renderer component.
Function: A function that returns either an HTML string or DOM element for display.
This remainder of this documentation page goes through the grid provided cell renderer's. To build your own cell renderer see the section Cell Rendering Components.
No Cell Renderer
If you have no requirements for custom cells, then you should use no cell renderer. Having no custom cell renderers will result in the fastest possible grid (which might be important to you if using Internet Explorer) as even the simplest cell renderer will result in some extra div's in the DOM.
If you just want to do simple formatting of the data (eg currency or date formatting)
then you can use
Cell Renderer Components
Many Renderers One Column
It is also possible to use different renderers for different rows in the same column.
Typically an application might check the rows contents and choose a renderer accordingly.
To configure this set
to a function that returns the name of the component to be used as a renderer and optionally
the custom params to be passed into it
The parameters that this functions will receive the same parameters than a renderer would receive:
The following example illustrates how to use different renderers and parameters in the same column. Note that:
- The column 'Value' holds data of different types as shown in the column 'Type' (numbers/genders/moods).
colDef.cellRendererSelectoris a function that selects the renderer based on the row data
The column 'Rendered Value' show the data rendered applying the component and params specified by