Dash AG Grid change font color of headerName based on condition

Dash Python
2

Hi @Bakira

In order to style the group header, you can use a function to add a CSS class to the header. Use the headerClass prop in the defaultColGroupDef prop. See the example below.

If you also want to style each column header, you can do something similar using the defaultColDef.

Note that if you dynamically update list of columns to style, you may also have to refresh the headers using params.api.refreshHeader(); You can see an example of the clientside callback in this post

image
image2290×934 93.9 KB


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


def create_table():
    df = pd.DataFrame({
        "Setup_A": (
            1, 1, 1, 2, 2, 2, 3, 3, 3,
        ),
        "Setup_B": (
            1, 2, 3, 1, 2, 3, 1, 2, 3,
        ),
        "Values_A": (
            68, 69, 67, 68, 69, 67, 68, 69, 67,
        ),
        "Values_B": (
            55, 43, 49, 49, 42, 48, 46, 41, 50,
        ),
        "Infos_A" : (
            "A", "A", "A", "B", "B", "B", "A", "A", "A"
        ),
        "Infos_B" : (
            "DAG", "DAG", "DAG", "DAG", "DAG", "DAG", "DAG", "DAG", "DAG"
        )
    })

    header = ["Setup", "Values", "Infos"]
    important = ["Values"]

    columnDefs = [
        {
            "headerName": head,
            "children": [
                {"headerName": "A", "field": f"{head}_A"},
                {"headerName": "B", "field": f"{head}_B"},
            ],
        } for head in header
    ]
   

    grid = dag.AgGrid(
        id="column-groups-basic",
        rowData=df.to_dict("records"),
        columnDefs=columnDefs,
        defaultColDef={"resizable": True},
        dashGridOptions={"defaultColGroupDef": {'headerClass': {'function': f'importantColumn(params, {important})'}}},
        style={"height": "600px"}
    ),

    return grid


app = Dash(__name__)

table = create_table()

app.layout = html.Div(
    table
)

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


'''
// Add the following to a  .css file in /assets

.important-column {
  color: red;
}
-----------------

// Add the following the the dashAgGridFunctions.js file in /assets



var dagfuncs = (window.dashAgGridFunctions = window.dashAgGridFunctions || {});

dagfuncs.importantColumn = (params, important) => {  
  if (important.includes(params.colDef.headerName)) {
    return 'important-column'} else { return ''}
  }

'''
2 Likes