Group Cell Renderer

Group cell renderer is an AG Grid Enterprise feature, so you’ll need a license key to use it. See Using AG Grid Enterprise for an example of how to use your license key with Dash AG Grid components.

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 key for the group cell renderer is agGroupCellRenderer. The grid’s group cell renderer takes many parameters to configure it. Here is an example of a column and its configuration:


    columnDefs= [
        # column definition configured to show group values with the cell renderer set to 'group'
        {
            "showRowGroup": True,
            "cellRenderer":'agGroupCellRenderer',
            # provide extra params to the cellRenderer
            'cellRendererParams': {
                # turn off the row count
                'suppressCount': true,
                # turn off double click for expand
                'suppressDoubleClickExpand': True,
                # enable checkbox selection
                'checkbox': True,
                # provide an inner renderer
                'innerRenderer': 'myInnerRenderer',
                # provide an inner renderer
                'innerRendererParams': {'foo': 'bar'},
                # provide a footer value getter
                'footerValueGetter': 'myFooterValueGetter'
            }
        }
    ]

The full set of parameters for the group cell renderer are defined on GroupCellRendererParams

Below is an example of configuring a group cell renderer. The example setup is not realistic as it has many columns configured for 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:

<grid-example><grid-example>

"""
Example Group Cell Renderer Configuration
<a href="https://www.ag-grid.com/archive/{{ag-grid-version}}/react-data-grid/group-cell-renderer/">https://www.ag-grid.com/archive/{{ag-grid-version}}/react-data-grid/group-cell-renderer/</a>

"""
import dash_ag_grid as dag
from dash import Dash, html
import os


app = Dash(__name__)

data = {
    "Ireland": ["Dublin", "Galway", "Cork"],
    "UK": ["London", "Bristol", "Manchester", "Liverpool"],
    "USA": ["New York", "Boston", "L.A.", "San Fransisco", "Detroit"],
    "MiddleEarth": ["The Shire", "Rohan", "Rivendell", "Mordor"],
    "Midkemia": ["Darkmoor", "Crydee", "Elvandar", "LaMut", "Ylith"],
}

rowData = []
for country, cities in data.items():
    for city in cities:
        rowData.append(
            {
                "country": country,
                "type": "Non Fiction"
                if country in ["Ireland", "UK", "USA"]
                else "Fiction",
                "city": city,
            }
        )




columnDefs = [
    # this column shows just the country group values, but has not group renderer, so there is no expand / collapse functionality
    {
        "headerName": "Country Group - No Renderer",
        "showRowGroup": "country",
        "minWidth": 250,
    },
    # same as before, but we show all group values, again with no cell renderer
    {
        "headerName": "All Groups - No Renderer",
        "showRowGroup": True,
        "minWidth": 240,
    },
    # add in a cell renderer
    {
        "headerName": "Group Renderer A",
        "showRowGroup": True,
        "cellRenderer": "agGroupCellRenderer",
        "minWidth": 220,
    },
    # add in a field
    {
        "headerName": "Group Renderer B",
        "field": "city",
        "showRowGroup": True,
        "cellRenderer": "agGroupCellRenderer",
        "minWidth": 220,
    },
    # add in a cell renderer params
    {
        "headerName": "Group Renderer C",
        "field": "city",
        "minWidth": 240,
        "showRowGroup": True,
        "cellRenderer": "agGroupCellRenderer",
        "cellRendererParams": {
            "suppressCount": True,
            "checkbox": True,
            'innerRenderer': "SimpleCellRenderer",
            "suppressDoubleClickExpand": True,
            "suppressEnterExpand": True,
        },
    },
    {"headerName": "Type", "field": "type", "rowGroup": True},
    {"headerName": "Country", "field": "country", "rowGroup": True},
    {"headerName": "City", "field": "city"},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="group-cell-renderer-example",
            columnDefs=columnDefs,
            rowData=rowData,
            columnSize="autoSize",
            defaultColDef={"resizable": True},
            enableEnterpriseModules=True,
            licenseKey = os.environ['AGGRID_ENTERPRISE'],
            dangerously_allow_code=True,
            dashGridOptions={
                "groupSelectsChildren": True,
                "groupDisplayType": "custom",
                "groupDefaultExpanded": 1,
                "rowSelection": "multiple",
            }
        ),
    ],
    style={"margin": 20},
)

if __name__ == "__main__":
    app.run(debug=True)

For the example above to work, you’ll need to add the following to the dashAgGridComponentFunctions.js file in your assets folder:

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


dagcomponentfuncs.SimpleCellRenderer = function (props) {
    return React.createElement(
        'span',
        {
            style: {
                backgroundColor: props.node.group ? 'coral' : 'lightgreen',
                padding: 2,
            },
        },
        props.value
    );
};