Cell Rendering

Cell Rendering - this is a very powerful feature in ag-Grid. With this, you can put whatever you want in the grid. The job of the grid is to lay out the cells. What goes into the cells, that's where you come in!

A cell renderer is a function that when called, returns HTML (either a Dom or Node element, or an HTML string).

You can use a cell renderer for the following reasons:

• The data needs to be formatted before displaying.
• The cell should be rendered using more complex HTML thanks just a string.

Below are some simple examples of cell rendering:

// example - make the value upper case
var colDef = {
    name: 'Col Name',
    field' 'Col Field',
    cellRenderer: function(params) {
        if (params.value=='Police') {
            return 'POLICE';
        } else {
            return params.value.toUpperCase();
        }
    }
}

// example - grab the field from a complex object (although possible, you should do this in a valueGetter)
var colDef = {
    name: 'Col Name',
    cellRenderer: function(params) {
        return params.data.field.deepObject.someName.value;
    }
}

// example - join two fields together (but you would probably do this with a value getter)
var colDef = {
    name: 'Col Name',
    cellRenderer: function(params) {
        return params.data.firstName + ' ' + params.data.lastName;
    }
}

// complex html, no Angular JS
var colDef = {
    name: 'Col Name',
    cellRenderer: function(params) {
        return '<span title="the tooltip">'+params.data.value+'</span>';
    }
}

// complex html, with Angular JS - need to have angularCompileRows=true in gridOptions
var colDef = {
    name: 'Col Name',
    cellRenderer: function(params) {
        return '<span title="the tooltip">{{value}}</span>';
    }
}

Cell Renderer Params

Cell renderer functions take a params object with the following values:

Value	Description
value	The value to be rendered.
data	The row (from the rowData array, where value was taken) been rendered.
colDef	The colDef been rendered.
column	The column been rendered (in ag-Grid, each colDef is wrapped by a Column).
$scope	If compiling to Angular, is the row's child scope, otherwise null.
rowIndex	The index of the row renderer, after sorting and filtering.
api	A reference to the ag-Grid api.
context	The context as set on the gridOptions.
refreshCell	A callback function, to tell the grid to refresh this cell and reapply all css styles and classes. Useful if you update the data for the cell and want to just render again from scratch.
valueGetter	A function, that when called, gives you the value, calling the relevant valueGetter / expression if neccessary. This can be called at any time after rendering, so you could implement some kind of refresh and get the latest value this way when the 'value' param would be stale.
eGridCell	A reference to the virtual cell (during the rendering process, virtual cells are used).

Angular Compiling

When using Angular Compiling, a new scope is created for each row. The data for the row is attached to the scope as 'data'.

Example: Formatting Cells

The below example shows three columns formatted, demonstrating each of the three methods above.

'Athlete' column uses cellStyle to format each cell in the column with the same style.

'Age' column uses cellStyle to format each cell with the capital letter 'C'.

'Gold' column renders the cell from scratch, by adding a gold star image for each gold medal won.