Hello @jinnyzor ,
Thanks for your reply.
I’ve tried to revise my code and the setting of header color works now.
It seems it doesn’t work due to my javascript typo.
As an extension question, is it possible to also change the color of second line header?
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"]
columnDefs = [
{
"headerName": 'Setup',
"children":[
{"field": 'Setup_A', "headerName": 'Setup_A'},
{"field": 'Setup_B', "headerName": 'Setup_B'},
]
},
{
"headerName": 'Values',
"children":[
{"field": 'Values_A', "headerName": 'Values_A'},
{"field": 'Values_B', "headerName": 'Values_B'},
]
},
{
"headerName": 'Infos',
"children":[
{"field": 'Infos_A', "headerName": 'Infos_A'},
{"field": 'Infos_B', "headerName": 'Infos_B'},
]
}
]
grid = dag.AgGrid(
id="grid",
rowData=df.to_dict("records"),
columnDefs=columnDefs,
defaultColDef={"resizable": True},
dashGridOptions={"defaultColGroupDef": {'headerClass': {'function': f'importantColumns(params)'}}},
style={"height": "600px"},
className='ag-theme-balham'
)
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
.style-value {
color: red;
}
.style-setup {
color: blue;
}
// Add the following the the dashAgGridFunctions.js file in /assets
var dagfuncs = (window.dashAgGridFunctions = window.dashAgGridFunctions || {});
dagfuncs.importantColumns = (params) => {
console.log(params.colDef);
if (params.colDef.headerName.includes("Value")) {
return 'style-value'
} else if (params.colDef.headerName.includes("Setup")) {
return 'style-setup'
} else { return ''}
}
