Cell Rendering

By default, the grid renders values into the cells as strings. If you want something more complex you use a cell
renderer.

• cellRenderer (None | string)
  Provide your own cell Renderer component for this column’s cells.

The cell renderer for a column is set via the Column Definition parameter cellRenderer and can be either:

• None: Grid renders the value as a string.
• String: The name of a cell renderer component. It can be either
  a Provided Cell Renderer or
  a Custom Cell Renderers.

columnDefs = [
  # None - Grid renders the value as a string.
  {
    "field": "name",
    "cellRenderer": None,
  },
  # Provided Cell Renderers
  {
    "field": "age",
    "cellRenderer": 'agGroupCellRenderer',
  },
  # Custom Cell Renderers
  {
    "field": "sport",
    "cellRenderer": 'MyCustomCellRenderer',
  },
]

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, 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 (for example, currency or date formatting) then you can use Column
Definition parameter valueFormatter.
See Value Formatters for details.

Provided Cell Renderers

The grid comes with some provided cell renderers out of the box. These cell renderers cover some common complex cell
rendering requirements.

• Checkbox Cell Renderers: For displaying boolean
  values with a checkbox.
• Show Change Cell Renderers: For animating
  changes when data is changing.
• Group Cell Renderer (enterprise feature): For showing group
  details with expand & collapse functionality when using any of
  the Row Grouping, Master / Detail
  or Tree Data.

Checkbox Cell Renderers

Simple renderer for boolean values that uses the standard HTML checkbox input. The renderer also allows editing.

If editing is enabled, then it is recommended to also use
the

Note that if Updating Data is enabled, it is recommended to
set suppressKeyboardEvent on the column definition to prevent the <kbd> ␣ Space<kbd> key from triggering both row
selection and toggling the checkbox. This is shown in the example above.

Show Change Cell Renderers

The grid provides two cell renderers for animating changes to data. They are:

• agAnimateShowChangeCellRenderer: 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.
• agAnimateSlideCellRenderer: The previous value shown in a faded fashion and slides, giving a ghosting effect as the
  old value fades and slides away.

The example below shows both types of animation cell renders in action. In this example:

• Columns A and B are editable.
• Columns C is updated when the button is clicked.
• Changes to any of the first 3 columns result in animations in the Total and Average columns.
• The example demonstrates setting custom colours for up and down changes using the --ag-value-change-delta-up-color
  and --ag-value-change-delta-down-color CSS Variables.

Note that to be able to see the animations, the row IDs must be set as described
in

Custom Cell Renderers

To use a custom cell renderer, it is possible to define a custom component in the dashAgGridComponentFunctions
namespace and provide the name to the cellRenderer property.
See the next example and Custom Cell Renderers for
details.

Many Renderers One Column

It is also possible to use different renderers for different rows in the same column. To configure this set the Column
Definition parameter cellRendererSelector to a function that returns an object with component and params
properties that will be used for cellRenderer and cellRendererParams.

Here is the cellRendererSelector function used in the example below. This JavaScript function must be added to
the dashAgGridFunctions.js file in the assets folder.
See JavaScript Functions
for more information.

var dagfuncs = (window.dashAgGridFunctions = window.dashAgGridFunctions || {});

dagfuncs.customCellRendererSelector = (params) => {
    const moodDetails = {
        component: dagcomponentfuncs.MoodRenderer,
    };

    const genderDetails = {
        component: dagcomponentfuncs.GenderRenderer,
        params: {color: '#66c2a5'},
    };

    if (params.data) {
        if (params.data.type === 'gender') return genderDetails;
        else if (params.data.type === 'mood') return moodDetails;
    }
    return undefined;
};

The previous cellRendererSelector uses the following Custom Cell Renderers. These JavaScript functions must be added
to the dashAgGridComponentFunctions.js file in the assets folder.
See Custom Components for more
information.

var dagcomponentfuncs = (window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {});

dagcomponentfuncs.MoodRenderer = params => {
    return React.createElement('span', {style: {fontSize: '1.5em'}}, params.value === 'Happy' ? '😀' : '😞')
};

dagcomponentfuncs.GenderRenderer = params => {
    const icon = params.value === 'Male' ? 'fas fa-mars fa-lg' : 'fas fa-venus fa-lg';
    return React.createElement('div', null, [
        React.createElement('i', {className: icon, style: {color: params.color}}),
        ` ${params.value}`
    ])
};

In the following example:

• The column Value holds data of different types as shown in the column Type (numbers/genders/moods).
• cellRendererSelector is a function that selects the renderer based on the type of the row data.
• The column Rendered Value show the data rendered applying the component and params specified
  by cellRendererSelector