[Bug] Components not working in the Detail Grid

[rpforrest1]

I am wanting to use cell renderers for the Detail Grid. In the example below, I am unable to get markdown to render inside a Detail Grid. I hope to expand this out to use any cellRenderer (not just markdown).

Below is an example to reproduce the issue.

from dash import Dash, html
import dash_ag_grid as dag

import os

app = Dash(__name__)

masterColumnDefs = [
    {
        "headerName": "Country",
        "field": "country",
        "cellRenderer": "agGroupCellRenderer",
        "cellRendererParams": {
            'innerRenderer': "markdown",
        },
    },
    {
        "headerName": "Region", 
        "field": "region"
    },
    {
        "headerName": "Population",
        "field": "population"
    },
    {
        "headerName": "Test Link",
        "field": "test_link",
        "cellRenderer": "markdown",
    },
]
detailColumnDefs = [
    {
        "headerName": "City", 
        "field": "city",
        "resizable": True,
        "cellRenderer": "markdown"
    },
    {
        "headerName": "Pop. (City proper)", 
        "field": "population_city",
        "resizable": True,
    },
    {
        "headerName": "Pop. (Metro area)",
        "field": "population_metro",
        "resizable": True,
    },
    {
        "headerName": "Test Render",
        "field": "test_render",
        "resizable": True,
        "cellRenderer": "agGroupCellRenderer",
        "cellRendererParams": {
            'checkbox': True,
            'innerRenderer': "markdown",
        },
    }
]
rowData = [
    {
        "country": "**China**",
        "region": "Asia",
        "population": 1411778724,
        "test_link":"[Blank Test Link](/)",
        "cities": [
            {
                "city": "**Shanghai**",
                "population_city": 24870895,
                "population_metro": "NA",
                "test_render": "**BOLD TEST**"
            },
            {
                "city": "**Beijing**",
                "population_city": 21893095,
                "population_metro": "NA",
                "test_render": "**BOLD TEST**"
            },
            {
                "city": "**Chongqing**",
                "population_city": 32054159,
                "population_metro": "NA",
                "test_render": "**BOLD TEST**"
            },
        ],
    },
    {
        "country": "**India**",
        "region": "Asia",
        "population": 1383524897,
        "test_link":"[Blank Test Link](/)",
        "cities": [
            {
                "city": "**Delhi**",
                "population_city": 16753235,
                "population_metro": 29000000,
                "test_render": "**BOLD TEST**"
            },
            {
                "city": "**Mumbai**",
                "population_city": 12478447,
                "population_metro": 24400000,
                "test_render": "**BOLD TEST**"
            },
            {
                "city": "**Kolkata**",
                "population_city": 4496694,
                "population_metro": 14035959,
                "test_render": "**BOLD TEST**"
            },
        ],
    },
    {
        "country": "**United States**",
        "region": "Americas",
        "population": 332593407,
        "test_link":"[Blank Test Link](/)",
        "cities": [
            {
                "city": "**New York**",
                "population_city": 8398748,
                "population_metro": 19303808,
                "test_render": "**BOLD TEST**"
            },
            {
                "city": "**Los Angeles**",
                "population_city": 3990456,
                "population_metro": 13291486,
                "test_render": "**BOLD TEST**"
            },
            {
                "city": "**Chicago**",
                "population_city": 2746388,
                "population_metro": 9618502,
                "test_render": "**BOLD TEST**"
            },
        ],
    },
    {
        "country": "**Indonesia**",
        "region": "Asia",
        "population": 271350000,
        "test_link":"[Blank Test Link](/)",
        "cities": [
            {
                "city": "**Jakarta**",
                "population_city": 10154134,
                "population_metro": 33430285,
                "test_render": "**BOLD TEST**"
            },
        ],
    },
]


app.layout = html.Div(
    [
        dag.AgGrid(
            id="simplified-master-detail-example",
            enableEnterpriseModules=True,
            licenseKey=os.environ["AGGRID_ENTERPRISE"],
            columnDefs=masterColumnDefs,
            rowData=rowData,
            columnSize="sizeToFit",
            masterDetail=True,
            detailCellRendererParams={
                "detailGridOptions": {
                    "columnDefs": detailColumnDefs,
                },
                "detailColName": "cities",
                "suppressCallback": True,
            },
            dashGridOptions={"detailRowAutoHeight": True},
        ),
    ]
)


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

[BSd3v]

Hello @rpforrest1,

Thank you for finding this issue, I have created a PR with the fix. 😄