I tried adding those params inside of the group’s columns def, but I could not get the function on aggrid website to work. Because it says that data is undefined for row groups.
Ref.: Dash
Ref.: Dash
Can you share a minimal example of what you have tried so far?
Here is an example of the individual styling for a specific condition on a cell:
{"field": "gold", "sortable": True, "filter": True, 'aggFunc': 'sum',
'cellStyle': {'styleConditions': [{'condition': 'params.value > 135', 'style': {'color': 'red'}}]}},
^^ column def
Here is the whole thing:
import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output, State, no_update
import requests
app = Dash(__name__)
data = requests.get(
r"https://www.ag-grid.com/example-assets/olympic-winners.json"
).json()
columnDefs = [
# Row group by country and by year is enabled.
{
'field': 'country',
'rowGroup': True,
'hide': True,
'suppressColumnsToolPanel': True,
},
{
'field': 'sport',
'rowGroup': True,
'hide': True,
'suppressColumnsToolPanel': True,
},
{
'field': 'year',
'pivot': True,
'hide': True,
'suppressColumnsToolPanel': True,
},
{"field": "gold", "sortable": True, "filter": True, 'aggFunc': 'sum',
'cellStyle': {'styleConditions': [{'condition': 'params.value > 135', 'style': {'color': 'red'}}]}},
{"field": "silver", "sortable": True, "filter": True, 'aggFunc': 'sum'},
{"headerName": "ratio", 'colId': 'goldSilverRatio',
'aggFunc': {'function': 'ratioAggFunc(params)'},
'valueGetter': {'function': 'ratioValueGetter(params)'},
'valueFormatter': {'function': 'ratioFormatter(params)'},
}
]
app.layout = html.Div(
[
dcc.Markdown("Demonstration of row groupings in a Dash AG Grid."),
dcc.Markdown("This grid groups first by country and then by year."),
dag.AgGrid(
columnDefs=columnDefs,
rowData=data,
defaultColDef=dict(
resizable=True,
rowSelection="multiple",
suppressAggFuncInHeader=True,
),
id="grid",
enableEnterpriseModules=True,
dashGridOptions={'autoGroupColumnDef': {'cellStyle': {'function': 'log(params)'}}}
),
]
)
if __name__ == "__main__":
app.run_server(debug=True)
Doing this:
getRowStyle={'styleConditions':[{'condition': 'log(params)', 'style': {}}]}
We can see that the data is actually inside of the params.node:
With this code:
import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output, State, no_update
import requests
app = Dash(__name__)
data = requests.get(
r"https://www.ag-grid.com/example-assets/olympic-winners.json"
).json()
columnDefs = [
# Row group by country and by year is enabled.
{
'field': 'country',
'rowGroup': True,
'hide': True,
'suppressColumnsToolPanel': True,
},
{
'field': 'sport',
'rowGroup': True,
'hide': True,
'suppressColumnsToolPanel': True,
},
{
'field': 'year',
'pivot': True,
'hide': True,
'suppressColumnsToolPanel': True,
},
{"field": "gold", "sortable": True, "filter": True, 'aggFunc': 'sum',
'cellStyle': {'styleConditions': [{'condition': 'params.value > 135', 'style': {'color': 'red'}}]}},
{"field": "silver", "sortable": True, "filter": True, 'aggFunc': 'sum'},
{"headerName": "ratio", 'colId': 'goldSilverRatio',
'aggFunc': {'function': 'ratioAggFunc(params)'},
'valueGetter': {'function': 'ratioValueGetter(params)'},
'valueFormatter': {'function': 'ratioFormatter(params)'},
}
]
app.layout = html.Div(
[
dcc.Markdown("Demonstration of row groupings in a Dash AG Grid."),
dcc.Markdown("This grid groups first by country and then by year."),
dag.AgGrid(
columnDefs=columnDefs,
rowData=data,
defaultColDef=dict(
resizable=True,
rowSelection="multiple",
suppressAggFuncInHeader=True,
),
id="grid",
enableEnterpriseModules=True,
getRowStyle={'styleConditions':[{'condition': 'params.node.aggData ? params.node.aggData.gold > 500 : false', 'style': {'backgroundColor': 'silver'}}]}
),
]
)
if __name__ == "__main__":
app.run_server(debug=True)
Be sure when you are using aggData, that you test to make sure that it isnt empty. 
2 Likes
spot on!
params.node.aggData
I could get it to work for an inner row (not for the top row), but this is exactly what I needed! I will add log() to my code and hopefully that will help me debug a few things as I still need to create a function for:
cellRendererSelector
Thanks so much for your patience, time and support! I do appreciate it!
2 Likes
I used to use this messy block of code in DataTable to provide conditional formatting for cells in a given column based on the text in another column…is that able to be done in AG Grid? I feel like most of the examples I’ve found are for conditional formatting on numericals in the same column?
This post looks like it was sort of on the track of what I want to do minus the pivoting.
style_data_conditional=(
[
{
"if": {
"filter_query": "{COLOR1} = black",
"column_id": "Week 1",
},
"backgroundColor": "#111111",
"color": "white",
},
{
"if": {
"filter_query": "{COLOR2} = black",
"column_id": "Week 2",
},
"backgroundColor": "#111111",
"color": "white",
},
{
"if": {
"filter_query": "{COLOR3} = black",
"column_id": "Week 3",
},
"backgroundColor": "#111111",
"color": "white",
},
{
"if": {
"filter_query": "{COLOR4} = black",
"column_id": "Week 4",
},
"backgroundColor": "#111111",
"color": "white",
},
{
"if": {
"filter_query": "{COLOR5} = black",
"column_id": "Week 5",
},
"backgroundColor": "#111111",
"color": "white",
},
{
"if": {
"filter_query": "{COLOR6} = black",
"column_id": "Week 6",
},
"backgroundColor": "#111111",
"color": "white",
},
{
"if": {
"filter_query": "{COLOR7} = black",
"column_id": "Week 7",
},
"backgroundColor": "#111111",
"color": "white",
},
{
"if": {
"filter_query": "{COLOR8} = black",
"column_id": "Week 8",
},
"backgroundColor": "#111111",
"color": "white",
},
{
"if": {
"filter_query": "{COLOR9} = black",
"column_id": "Week 9",
},
"backgroundColor": "#111111",
"color": "white",
},
{
"if": {
"filter_query": "{COLOR10} = black",
"column_id": "Week 10",
},
"backgroundColor": "#111111",
"color": "white",
},
{
"if": {
"filter_query": "{COLOR11} = black",
"column_id": "Week 11",
},
"backgroundColor": "#111111",
"color": "white",
},
{
"if": {
"filter_query": "{COLOR12} = black",
"column_id": "Week 12",
},
"backgroundColor": "#111111",
"color": "white",
},
{
"if": {
"filter_query": "{COLOR13} = black",
"column_id": "Week 13",
},
"backgroundColor": "#111111",
"color": "white",
},
{
"if": {
"filter_query": "{COLOR1} = green",
"column_id": "Week 1",
},
"backgroundColor": "#2ECC40",
},
{
"if": {
"filter_query": "{COLOR2} = green",
"column_id": "Week 2",
},
"backgroundColor": "#2ECC40",
},
{
"if": {
"filter_query": "{COLOR3} = green",
"column_id": "Week 3",
},
"backgroundColor": "#2ECC40",
},
{
"if": {
"filter_query": "{COLOR4} = green",
"column_id": "Week 4",
},
"backgroundColor": "#2ECC40",
},
{
"if": {
"filter_query": "{COLOR5} = green",
"column_id": "Week 5",
},
"backgroundColor": "#2ECC40",
},
{
"if": {
"filter_query": "{COLOR6} = green",
"column_id": "Week 6",
},
"backgroundColor": "#2ECC40",
},
{
"if": {
"filter_query": "{COLOR7} = green",
"column_id": "Week 7",
},
"backgroundColor": "#2ECC40",
},
{
"if": {
"filter_query": "{COLOR8} = green",
"column_id": "Week 8",
},
"backgroundColor": "#2ECC40",
},
{
"if": {
"filter_query": "{COLOR9} = green",
"column_id": "Week 9",
},
"backgroundColor": "#2ECC40",
},
{
"if": {
"filter_query": "{COLOR10} = green",
"column_id": "Week 10",
},
"backgroundColor": "#2ECC40",
},
{
"if": {
"filter_query": "{COLOR11} = green",
"column_id": "Week 11",
},
"backgroundColor": "#2ECC40",
},
{
"if": {
"filter_query": "{COLOR12} = green",
"column_id": "Week 12",
},
"backgroundColor": "#2ECC40",
},
{
"if": {
"filter_query": "{COLOR13} = green",
"column_id": "Week 13",
},
"backgroundColor": "#2ECC40",
},
{
"if": {
"filter_query": "{COLOR1} = yellow",
"column_id": "Week 1",
},
"backgroundColor": "#FFDC00",
},
{
"if": {
"filter_query": "{COLOR2} = yellow",
"column_id": "Week 2",
},
"backgroundColor": "#FFDC00",
},
{
"if": {
"filter_query": "{COLOR3} = yellow",
"column_id": "Week 3",
},
"backgroundColor": "#FFDC00",
},
{
"if": {
"filter_query": "{COLOR4} = yellow",
"column_id": "Week 4",
},
"backgroundColor": "#FFDC00",
},
{
"if": {
"filter_query": "{COLOR5} = yellow",
"column_id": "Week 5",
},
"backgroundColor": "#FFDC00",
},
{
"if": {
"filter_query": "{COLOR6} = yellow",
"column_id": "Week 6",
},
"backgroundColor": "#FFDC00",
},
{
"if": {
"filter_query": "{COLOR7} = yellow",
"column_id": "Week 7",
},
"backgroundColor": "#FFDC00",
},
{
"if": {
"filter_query": "{COLOR8} = yellow",
"column_id": "Week 8",
},
"backgroundColor": "#FFDC00",
},
{
"if": {
"filter_query": "{COLOR9} = yellow",
"column_id": "Week 9",
},
"backgroundColor": "#FFDC00",
},
{
"if": {
"filter_query": "{COLOR10} = yellow",
"column_id": "Week 10",
},
"backgroundColor": "#FFDC00",
},
{
"if": {
"filter_query": "{COLOR11} = yellow",
"column_id": "Week 11",
},
"backgroundColor": "#FFDC00",
},
{
"if": {
"filter_query": "{COLOR12} = yellow",
"column_id": "Week 12",
},
"backgroundColor": "#FFDC00",
},
{
"if": {
"filter_query": "{COLOR13} = yellow",
"column_id": "Week 13",
},
"backgroundColor": "#FFDC00",
},
{
"if": {
"filter_query": "{COLOR1} = red",
"column_id": "Week 1",
},
"backgroundColor": "#FF4136",
},
{
"if": {
"filter_query": "{COLOR2} = red",
"column_id": "Week 2",
},
"backgroundColor": "#FF4136",
},
{
"if": {
"filter_query": "{COLOR3} = red",
"column_id": "Week 3",
},
"backgroundColor": "#FF4136",
},
{
"if": {
"filter_query": "{COLOR4} = red",
"column_id": "Week 4",
},
"backgroundColor": "#FF4136",
},
{
"if": {
"filter_query": "{COLOR5} = red",
"column_id": "Week 5",
},
"backgroundColor": "#FF4136",
},
{
"if": {
"filter_query": "{COLOR6} = red",
"column_id": "Week 6",
},
"backgroundColor": "#FF4136",
},
{
"if": {
"filter_query": "{COLOR7} = red",
"column_id": "Week 7",
},
"backgroundColor": "#FF4136",
},
{
"if": {
"filter_query": "{COLOR8} = red",
"column_id": "Week 8",
},
"backgroundColor": "#FF4136",
},
{
"if": {
"filter_query": "{COLOR9} = red",
"column_id": "Week 9",
},
"backgroundColor": "#FF4136",
},
{
"if": {
"filter_query": "{COLOR10} = red",
"column_id": "Week 10",
},
"backgroundColor": "#FF4136",
},
{
"if": {
"filter_query": "{COLOR11} = red",
"column_id": "Week 11",
},
"backgroundColor": "#FF4136",
},
{
"if": {
"filter_query": "{COLOR12} = red",
"column_id": "Week 12",
},
"backgroundColor": "#FF4136",
},
{
"if": {
"filter_query": "{COLOR13} = red",
"column_id": "Week 13",
},
"backgroundColor": "#FF4136",
},
]
)
Hello @lykolate,
Yes, this is possible.
To query a value in another column you would use params.data.othercolumn instead of params.value to drive the condition.
You can keep these all together and place them into defaultColDef or split them up into the individual columnDefs.
If I try
'cellStyle': { 'styleConditions': [ { 'condition': 'params.data.COLOR1 == black', 'style': {'color': 'white', 'backgroundColor': 'black'} },
I am met with this error
Cannot read properties of undefined (reading ‘COLOR1’)
COLOR1 is definitely the name of a column in the dataframe…Does it matter if I am trying to reference a column that is in the dataframe source for the grid but is not being given visibility?
If I try it this way, the errors disappear but my data still doesn’t have any conditional formatting?
'cellStyle': { 'styleConditions': [ { 'condition': 'params.data.COLOR1 = black', 'style': {'color': 'white', 'backgroundColor': 'black'} },
Your params.data.column needs to be the name from the dataframe.
Here is an example. Note that the COLOR1 column is in the rowData, but it does not have to be defined in the column definitions or displayed in the grid.
import dash_ag_grid as dag
import dash
from dash import html, dcc
import dash_bootstrap_components as dbc
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB])
cellStyle = {
"styleConditions": [
{
"condition": "params.data.COLOR1 == 'yellow'",
"style": {"backgroundColor": "#FFDC00"},
},
{
"condition": "params.data.COLOR1 == 'green'",
"style": {"backgroundColor": "#2ECC40"},
},
{
"condition": "params.data.COLOR1 == 'black'",
"style": {"backgroundColor": "#111111", "color": "white"},
},
]
}
columnDefs = [
{"field": "make"},
{"field": "model"},
{"field": "price", "cellStyle": cellStyle},
]
rowData = [
{"COLOR1": "black", "make": "Toyota", "model": "Celica", "price": 35000},
{"COLOR1": "green", "make": "Ford", "model": "Mondeo", "price": 32000},
{"COLOR1": "yellow", "make": "Porsche", "model": "Boxster", "price": 72000},
]
grid = dag.AgGrid(
columnDefs=columnDefs,
rowData=rowData,
columnSize="sizeToFit",
)
app.layout = html.Div(
grid,
style={"margin": 20},
)
if __name__ == "__main__":
app.run_server(debug=True)
1 Like
Just wanted to follow up and say thank you. The contributions from the both of you AnnMarie and Jinnyzor helped me figure it out and get it working. Looking forward to the imminent release of AG grid 2.0
2 Likes
@lykolate Thanks for your kind words 
Dash AG Grid V2.0.0 was just released! You can find your example in the docs here:
Hey guys!
A lot of great insight on a use of styleConditions, thanks for that. Just poking my interest I have two questions:
-
Which operations are available for condition? From documentation I found out that ==, >=, >, <=, < are available. Are there any other operators i.e. something like in or contains or some other operators which would be suitable i.e. for strings? (something like params.data.column in [“val1”, “val2”]). I was not able to find it anywhere.
-
Are there any transformations available? Is it possible to transform the column in some way? Some additions, divisions, applications of some functions etc. or this have to be done i.e. in pandas in data transformation part?
Thanks for the answers
Hello @martin2097,
These are good questions.
-
Any basic JavaScript operator can be used, for taking your example
[“val1”, “val2”].includes(params.data.column)andparams.data.column.includes('test'). -
You can use any math function, and formatting by default. If you want to go more in-depth with calculation, you can create a custom JS function that can be imported to the
window.dashAgGridFunctionsnamespace and you can call that function with the arguments to returntrue/false
1 Like
@martin2097 You can also find more information about using JavaScript function with dash-ag-grid here:
1 Like
Thank you both for the answers! I have no prior experience in JavaScript so I will have to do some self education
1 Like
@martin2097 - Yeah, I’m no JavaScript expert either - and I think many Dash users don’t have any JavaScript experience. We are going to be expanding that section of the docs to help with that. There is so much you can do to customize the grid with functions and just a line or two of JavaScript. If we document the most common use-cases, I think it will help.
2 Likes
Regarding row styling. Is it possible to change the row height of a selected row either in a callback or using a getRowStyle condition. In my case I have a description column with a lot of text that I do not want to display initially until a user selects the row, in which case I would like the row height to increase to display the overflowing, wrapped text. I am partially able to achieve this using the condition below but the selected row is simply displayed transparently on-top of the rows below it and thus cannot be read.
getRowStyle = {
“styleConditions”: [“condition”: “params.node.isSelected()”,
“style”: {“height”:“300px”,
“classes”: “selected-row”},
]
}