Dashtable - Alternative Highlighting Styles

Dash Python
1

Hi all, I’m trying to change all the “KO” cell background color. I’ve read the examples from " Styling | Dash for Python Documentation | Plotly".
But I don’t know why it doesn’t work.
Thx a lot for your help.

onglet2_layout = html.Div([
    dash_table.DataTable(id = "supervision", 
                         columns=[{"name": str(i), "id": str(i)} for i in df_supervision.columns], 
                         data = df_supervision.to_dict('records'),
                         sort_action='native',
                         style_data_conditional = [{
                            'if': {
                                'filter_query': '{i}==KO',
                                'column_id': 'i'
                            },
                            'backgroundColor': 'tomato',
                            'color': 'white'
                         } for i in {"0","1";"2","3","4","5","6","7","8","9","10"}]
    )
])

image
image1596×765 29.1 KB

2

emmm, 'i'?

3

Actually, ‘i’ is for a loop. But it still doesn’ work if I selected just one columne like

onglet2_layout = html.Div([
    dash_table.DataTable(id = "supervision", 
                         columns=[{"name": str(i), "id": str(i)} for i in df_supervision.columns], 
                         data = df_supervision.to_dict('records'),
                         #sort_action='native',
                         style_data_conditional = [{
                            'if': {
                                'filter_query': '{10}==KO',
                                'column_id': '10'
                            },
                            'backgroundColor': 'tomato',
                            'color': 'white'
                         }]
    )
])
5

Try =, eq, or contains in lieu of ==.

6

It works with “eq”!
So now I’m finding a way to write a for loop in the Datatable

7

Congratulations!

8

Hi @SUN !

Apart from what @stu said, I wanted to add some things:

  • In your loop you should use i instead of 'i', because the i each time the loop runs is already a string. For ex, in the first round? i would be '1', so if you write 'column_id':i, the code will look for the column with id '1'. If you write 'column_id':'i', the code will look for a column with id 'i', which doesn’t exist. If you had a list of numbers (int) and you wanted to transform them to strings inside the loop, you should use str(i) instead of 'i'. But in you case you wouldn’t need it because your dic already has strings.
  • I think there’s a typo in the dict. Between '1' and '2' you have ; instead of ,
  • I thinks I found a dash example that is more similar to the problem you are trying to solve: you are trying to apply conditional formatting to any cell in 1-10 that has ‘KO’. The example is Highlighting None, NaN, or empty string values from this doc.

The resulting code would look something like this (I only changed the style_data_condittional argument):

onglet2_layout = html.Div([
    dash_table.DataTable(
        id = "supervision", 
        columns=[{"name": str(i), "id": str(i)} for i in df_supervision.columns], 
        data = df_supervision.to_dict('records'),
        sort_action='native',
        style_data_conditional=([
            {'if': {
                'filter_query': '{{{}}} is blank'.format(col),
                'column_id': col
            },
             'backgroundColor': 'tomato',
             'color': 'white'
            } for col in [str(i) for i in range(1,11)]
        ]
        ))
])

Hope this helps! :four_leaf_clover:

3 Likes
9

It works now! Thanks a lot for your detailed answers!