Dash AG Grid and headerComponentParams

Dash Python
1

Hi,
Do you know the way to use headerComponentParams in columnDefs.
I try without success something like this
columnDefs=[ {
‘field’:‘a’,
‘headerComponentParams’:
{
‘template’: ‘

sample
’
},
]}

Thanks

2

I see that your journey to get this icon into AgGrid header is not finished :smiley:

I tried to find a workaround of your problem (dash==2.17.1), but it seems like this particular parameter might not be correctly wrapped. The documentation of dashAgGrid and AgGrid are not consistent here, couse the normal agGrid requires headerComponent, which is not present in dashAgGrid docs.

The thing I am using is simply text symbols.

What I have not yet tried is updating columnDefs directly from js. Maybe give it a go

3

Hello @Sta and @emptynonsens,

You are able to pass a template to the columnDef, however, please note that in order to pass a template, you’ll need to dangerously_allow_code. And you are just going to pass template in the columnDef.

4

Here is a full working example:

import dash_ag_grid as dag
from dash import Dash, html, dcc

app = Dash(__name__)


columnDefs = [
    {"field": "make", "headerComponentParams": {"template": "<div>Testing</div>"}},
    {"field": "link", "headerName": "Link opens new tab", "linkTarget":"_blank"},
    {"field": "image"},
]

rain =  "![alt text: rain](https://www.ag-grid.com/example-assets/weather/rain.png)"
sun = "![alt text: sun](https://www.ag-grid.com/example-assets/weather/sun.png)"

rowData = [
    {
        "make": "**Toyota** in bold",
        "link": "[Example](#)",
        "image": 0
    },
    {
        "make": "_Ford_ in italics",
        "link": "[Google](https://google.com)",
        "image": 0,
    },
    {
        "make": "***Porsche*** in both",
        "link":   '<a href="#" target="_blank">Link to new tab</a>',
        "image": '0'
    },
]

app.layout = html.Div([
        dag.AgGrid(
            id="cell-renderer-grid-5",
            columnSize="sizeToFit",
            columnDefs=columnDefs,
            defaultColDef={"cellRenderer": "markdown", "cellDataType": "text",
                           "valueGetter": {"function": "params.data[params.column.colId] ? params.data[params.column.colId] : (params.data[params.column.colId] == 0 ? '_0_' : null)"}},
            rowData=rowData,
            dangerously_allow_code=True
        ),
])


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

I was mistaken, it is placed in the headerComponentParams, it is important to note that in order to maintain other funcationality, you need to include specific elements in the template.

If you do not dangerously_allow_code, you will run into an error in the console that says you are trying to pass a dangerous prop, dangerous in the sense of reading html from a string as a real html.

@emptynonsens, there is a lot of stuff not documented from AG Grid in Dash AG Grid, however most things translate directly. You, however, are welcome to add different items to docs. :slight_smile:

1 Like
5

Here’s a complete example

image
image1476×922 56.6 KB

import dash_ag_grid as dag
from dash import Dash, html
import pandas as pd
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.icons.BOOTSTRAP])

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)


template_with_icon = """
<div class="ag-cell-label-container" role="presentation">
    <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button"></span>
    <span ref="eFilterButton" class="ag-header-icon ag-header-cell-filter-button"></span>
    <div ref="eLabel" class="ag-header-cell-label" role="presentation">
        <span ref="eSortOrder" class="ag-header-icon ag-sort-order ag-hidden"></span>
        <span ref="eSortAsc" class="ag-header-icon ag-sort-ascending-icon ag-hidden"></span>
        <span ref="eSortDesc" class="ag-header-icon ag-sort-descending-icon ag-hidden"></span>
        <span ref="eSortMixed" class="ag-header-icon ag-sort-mixed-icon ag-hidden"></span>
        <span ref="eSortNone" class="ag-header-icon ag-sort-none-icon ag-hidden"></span>
        <i class="bi bi-trophy"></i>
        <span ref="eText" class="ag-header-cell-text" role="columnheader"></span>
        <span ref="eFilter" class="ag-header-icon ag-filter-icon"></span>
    </div>
</div>
"""


columnDefs = [
    {"field": "athlete"},
    {"field": "sport", "type": "rightAligned"},
    {"field": "gold", "type": "numericColumn", "headerComponentParams": {"template": template_with_icon}},
    {"field": "silver", "type": "numericColumn", "headerComponentParams": {"template": template_with_icon}},
    {"field": "bronze", "type": "numericColumn", "headerComponentParams": {"template": template_with_icon}},
]

app.layout = html.Div(
    [
        html.Div("Example of  custom header templates"),
        dag.AgGrid(
            id="grid",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            dashGridOptions={"animateRows": False},
            dangerously_allow_code=True
        )
    ]
)

if __name__ == "__main__":
    app.run(debug=True, port=8052)
1 Like