Can a cellRenderer function in ag-Grid return a React component?

Question

I would like to use a cellRenderer in React for most of my columns. So, in my colDefs, I have an additional field called unit. If the unit exists, I am trying to have a heatMap like color grid which is handled in my TableCell React component. This identical react component has worked in other data grids like ZippyUI. Can the cellRenderer function return a React component, which is a virtual DOM object, or does it have to be a true HTML DOM object? Would doing something like this with ag-Grid's cellRenderer component method be preferable?

colDefs.map((x) => {
    if (x.hasOwnProperty('unit')) {
        x.cellRenderer = (params) => {
            return <TableCell value={params.value} units={x.unit} min={min[x.field]} max={max[x.field]} colorScheme={colorScheme} />;
        };
    }
});

Answer 1

For React, instead of using cellRenderer, cellEditor, etc, you want to use cellRendererFramework, cellEditorFramework and pass in a class that has setUp and render methods.

Answer 2

I figured out the implementation that is required and figured I'd leave this question up for future users. It seems that the component approach is required, and you can use the cellRendererParms to pass in additional arguments. Then, within the actual renderer (ReactTableCellRenderer below), you can access them via this.props.params.units (or replace units with whatever other param you pass in the object).

 colDefs.map((x) => {
        if (x.hasOwnProperty('unit')) {
            x.cellRenderer = reactCellRendererFactory(ReactTableCellRenderer);
            x.cellRendererParams = {units: x.unit, min: min[x.field], max: max[x.field], colorScheme: colorScheme};
        }
    });

The params passed via cellRendererParams are then available within the React component (in my case, ReactTableCellRenderer) via this.props.params.units (or substitute appropriate vairable name for units)

Answer 3

Update 2021

Complementing @Tom answer. You want to use cellRendererFramework in the columns definition. Here's an example:

import * as React from "react";
import { FontIcon } from "@fluentui/react";
import { ColDef, ColGroupDef } from "ag-grid-community";

const isFavoriteCellRenderer = (params: any) => {
    if (params.value) {
        return (
            <div>
                <FontIcon
                    iconName="FavoriteStarFill"
                    title="Favorite"
                    aria-label="Favorite"
                />
            </div>
        );
    }

    return (
        <div>
            <FontIcon
                iconName="FavoriteStar"
                title="Not favorite"
                aria-label="Not favorite"
            />
        </div>
    );
};

export const getIsFavoriteColumn = (): ColDef | ColGroupDef => ({
    headerName: "isFavorite",
    field: "isFavorite",
    cellRendererFramework: isFavoriteCellRenderer,
});

Note params.value is boolean, this could be any type depending on your row model.

Cell renderer docs for react grid