Cell Rendering

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

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

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

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:

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

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

View the CSS class used for this example

This CSS class must be added to any *.css file in the assets folder.
See Loading CSS files for more information.

#cell-rendering-show-change-cell-grid.alt-colors {
  --ag-value-change-delta-down-color: rgb(200, 0, 200);
  --ag-value-change-delta-up-color: rgb(200, 200, 0);
}

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:

Dynamic Tooltips

When working with Custom Cell Renderers it is possible to register custom tooltips that are displayed dynamically by
using the setTooltip method.

setTooltip = (
    value: string,
    shouldDisplayTooltip?: () => boolean
) => void;

The example below demonstrates a dynamic tooltip being displayed on Cell Components. The following can be noted:

View the Custom Cell Renderer used for this example

Add the following to the dashAgGridComponentFunctions.js file in the assets folder.
See Custom Components for more information.

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

dagcomponentfuncs.DynamicTooltip = props => {
    const wrapper = React.useRef(null);

    React.useEffect(() => {
        if (!wrapper.current) { return; }
        props.setTooltip(`Dynamic Tooltip for ${props.value}`, () => wrapper.current.scrollWidth > wrapper.current.clientWidth);
    }, [wrapper, props.setTooltip, props.value]);

    return React.createElement(
        'div',
        { ref: wrapper, style: { overflow: 'hidden', textOverflow: 'ellipsis' } },
        props.value
    );
}