Thanks for the welcome!
Below I have what I tried. You’ll see that for testing, I am trying to get some cell values to be bold. (I actually want to do something else, but bolding with Markdown is the easiest.) I tried combining multiple things I’ve read about renderers, but nothing I do seems to work on the Detail grid.
I have a feeling the answer might be here, but I don’t understand AG-Grid and Dash enough to really know: React Data Grid: Custom Detail
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)