Hi there;
Assuming we have a dash AG Grid like this:
Whose code is
import dash_ag_grid as dag
import pandas as pd
from dash import Dash, html
# df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv")
df = pd.read_excel("data/external_dummy_data_for_debug/olympic_winners.xlsx")
dfg = df.groupby(["country", "year"])[["bronze", "gold", "total"]].sum().reset_index()
df_agg_f = dfg[dfg["country"].isin(["France", "Germany", "Italy"]) & dfg["year"].isin([2008, 2012])].copy(deep=True)
columnDefs = [{
"field": "country", "minWidth": 50, "maxWidth": 100,
"rowSpan": {"function": "params.node.id %2 === 0 ? 2 : 1"},
"cellStyle": {
"backgroundColor": "var(--ag-header-background-color)",
# "styleConditions": [{
# "condition": "params.data['bronze'] > 21",
# "style": {"color": "red"}
# }]
},
}, {"field": "year", "maxWidth": 80}, {"field": "bronze", "maxWidth": 80}, {"field": "gold", "maxWidth": 80}]
app = Dash()
app.layout = [
html.Div([
dag.AgGrid(
id="row-spanning-simple-example",
rowData=df_agg_f.to_dict("records"),
columnDefs=columnDefs,
defaultColDef={"sortable": False},
columnSize="autoSize",
dashGridOptions={"suppressRowTransform": True},
),
], style={"width": 400})
]
if __name__ == '__main__':
app.run(debug=True, port=8039)
How to proceed to apply a specific font color on the "country"values, without breaking the actual spanning, when “bronze” is larger than 21 ?
If I uncomment the 4 commented lines in the above code:
"styleConditions": [{
"condition": "params.data['bronze'] > 21",
"style": {"color": "red"}
}]
Then I get this:
It seems that if I change the font color, it completely overwrites the style of spanned rows. How to fix this ?
The goal is to get only the first row of each spanned cell, displayed in red (the first “France”, “Germany”, “Italy”), while keeping all the cells background of the first column in grey, if the column “bronze” contains a value >21).
(paint art)
It does not make a lot of sense with this MRE but it does in my app
Sidequestion: is there a way to center vertically the text on spanned row ?