Dash dataTable conditional cell formatting isn't working

Question

I want to change a color of a cell of a Dash dataTable based on a value. I have tried a minimal example:

            html.Div(
            children=[
                dash_table.DataTable(
                    id='table_1',
                    data=df.to_dict('records'),
                    columns=[{"name": i, "id": i} for i in df.columns],
                    #conditional cell formating
                    style_data_conditional=[
                        {
                            'if': {
                                'column_id': 'col1',
                                'filter': 'col1 > num(15)'
                            },
                            'backgroundColor': '#3D9970',
                            'color': 'white',
                        },
                    ],
                    n_fixed_rows=2,
                    filtering=True,
                    sorting=True,
                    sorting_type="multi"
                )],
        )

After adding the style_conditional, the table is not showing at all, and there is no error message thrown. The table is embedded in html component, and after looking into forums and on github, I am stiil not sure if I have missed anything here, and if I need to write a callback for this. The example provided in the mentioned tutorial is not suggesting the need for a callback.

Update:

Tried to run minimal version with the same code and different data, with same results, that is no change in cell colors. My libraries are up to date, but something in the environment may still be causing problems.

Full code:

import dash
import dash_table
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')

# Having trouble with conditional when column name has spaces
df = df.rename({'Number of Solar Plants': 'Plants'}, axis='columns')
app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    id='table',
    columns=[{"name": i, "id": i} for i in df.columns],
    style_data_conditional=[{
        "if": {'column_id': 'State',
               'filter': 'State eq "Nevada"'
               },
        "backgroundColor": "#3D9970",
        "color": "white"
    }],
    data=df.to_dict('records'),
)

if __name__ == '__main__':
    app.run_server(debug=True)

Answer 1

I do not think you will need a callback for this like said in the tutorial. According to the last example of the tutorial I think you have a typo (one ' to much).

Change this line

'filter': 'col1' > num(15)' 

to:

'filter': 'col1 > num(15)'

Answer 2

I had the same issue and i found that giving the index directly rather than a condition was a lot easier.

style_data_conditional = [{'if': {'column_id': 'col1',"row_index": x},'backgroundColor': '#3D9970','color': 'white'} for x in df[df['col1']>15].index ]

it's ugly as it has been hard coded but it did the trick for me when the direct filter did not.