Cell Rendering

By default, the grid will place the values of your data into the cells as simple strings.
If you want something other than simple strings, then you use a cell renderer.
So for rendering your values, you have the following three options:

Do nothing, simple strings get used to display the data.

Use one of the grid provided cell renderer's.

Build your own cell renderer.

// 1 - do nothing, simple text is used by the grid
var colDef1 = {
cellRenderer: null,
...
}
// 2 - use one of the grids provided cell renderer's, reference it by name
var colDef2 = {
cellRenderer: 'group',
...
}
// 3 - provide your own cell renderer
var colDef3 = {
cellRenderer: MyCustomCellRendererClass,
...
}
This section of the documentation explains the first two items above, how to use no cell
renderer and how to use the grid provided cell renderer's. To build your own cell renderer,
see the section Cell Rendering Components.

This section of the documentation also lists how to use all the grids provided renderer's.

Cell Rendering Flow

The diagram below (which is taken from the section Value Getters & Formatters)
summarises the steps the grid takes while working out what to render and how to render.

In short, a value is prepared. The value comes using either the colDef.field or the
colDef.valueGetter. The value is also optionally passed through a colDef.valueFormatter
if it exists. Then the value is finally placed into the DOM, either directly, or by using the chosen
colDef.cellRenderer.

Choosing No Cell Renderer

If you have no requirements for custom cells, then you should use no cell renderer.
Having no custom cell renderer's 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 colDef.valueFormatter.

Grid Provided Renderer's

The grid comes with three built in renderer's which are:

group: For displaying group values with expand / collapse functionality.

animateShowChange and animateSlide: For animating changes in data.

The following sections goes through each one in detail.

Grid Renderer's - animateShowChange and animateSlide

The grid provides two cell renderer's for animating changes to data. They are:

animateShowChange: The previous value is temporarily shown beside the old value
with a directional arrow showing increase or decrease in value. The old value is then faded out.

animateSlide: The previous value shown in a faded fashion and slides, giving a ghosting effect
as the old value fades adn slides away.

The example below shows both types of animation cell renders in action. To test, try the following:

Columns A, B and C are editable.

Columns D and E are updated via clicking the button.

Changes to any of the first 5 columns results in animations in the Total and Average column.

Changes to D and E also result in animations.

We hope you like the animation cell renderer's. However you can also take inspiration from them,
and create your own animations in your own cell renderer's. Check out our source code on Github on
how we implemented these cell renderer's for inspiration.
Most of the ag-Grid users love the animateShowChange cell renderer for showing changes in values.
Not many people like the animateSlide one. So if you are trying to impress someone, probably best
show them the animateShowChange :)

Grid Renderer - Group

If you are grouping in the grid, then you will need to provide a group cell renderer
as the group cell renderer is what provides the user with the expand and collapse functionality.

The grid's group cell renderer takes many parameters to configure it. Here is an example
of a column and it's configuration:

suppressCount: One of [true, false], if true, count is not displayed beside the name.

checkbox: One of [true,false], if true, a selection checkbox is included.

padding: A positive number. The amount of padding, in pixels, to indent each group.

suppressPadding: Set to true to node including any padding (indentation) in the child rows.

innerRenderer: The renderer to use for inside the cell (after grouping functions are added).

footerValueGetter: The value getter for the footer text. Can be a function or expression.

Example Group cellRenderer

Below shows an example of configuring a group cell renderer. The example setup is not realistic as it
has many columns configured for the showing the groups. The reason for this is to demonstrate different
group column configurations side by side. In your application, you will typically have one column
for showing the groups.

The example is built up as follows:

The data is grouped by two columns: Type (one of 'Fiction' or 'Non-Fiction') and Country
(a country name, eg Ireland or United Kingdom).

The column 'Country Group - No Renderer' configures the grid to put the 'Country' group data
only into this column by setting showRowGroup='country'. All rows that are not this
group are blank. There is no cell renderer configured, so the grid just places the text for the group
into the cell, there is not expand / collapse functionality.

The column 'All Groups - no Renderer' builds on before, but adds all groups by setting
showRowGroup=true. This gets the column to display all groups, but again no cell renderer
so not expand / collapse functionality.

The column Group Renderer A builds on before, but adds the group cell renderer with
cellRenderer='group'. The values are exactly as per the previous column, except now
we have expand and collapse functionality.

The column Group Renderer B builds on before, but adds field=city so that
the city is displayed in the leave nodes in the group column.

The column Group Renderer C builds on before, but adds the following cellRendererParams:

suppressCount=true: Suppresses the row count.

checkbox=true: Adds a selection checkbox.

padding=20: Changes the padding (indentation) of the levels.

innerRenderer=SimpleCellRenderer: Puts custom rendering for displaying the value.
The group cellRenderer will take care of all the expand / collapse, selection etc, but then allow
you to customise the display of the value. In this example we add a border when the value is a group,
and we add the Ireland
flag (because Niall Crosby is from Ireland) to the leaf levels.

If you don't like the grid provided group cell renderer, you can build your own cell renderer and provide
the grouping functionality. If you do this, then take a look at the grids source code and see how we
implemented the ag-Grid group cell renderer.

Welcome to ag-Grid

Niall Crosby spent years building Enterprise Web Applications and found the JavaScript
data grid choice frustrating. That frustration led to Niall quitting his job and
setting up the ag-Grid project.
Read more about ag-Grid →