Black Lives Matter. Please consider donating to Black Girls Code today.

Dash Datatable: Style data conditional row-vice

Hi all,

I’ve the following condition in my datatble definition:

{
    'if': {
        'column_id' : 'c_strike_pro',
        'filter' : 'c_strike_pro < num(0.0)'
    },
    'background':'#4E5066',
    'color':'#FFFFFF'
}

Is there a way to color the entire row, instead of just the cell based on giving condition?

Many thanks in advance!

@dhenke Yes! Just remove the column_id condition and all the cells of the rows matching the filter condition will get the style provided. For example:

# -*- coding: utf-8 -*-
import dash
from dash_table import DataTable

import pandas as pd

url = 'https://github.com/plotly/datasets/raw/master/26k-consumer-complaints.csv'

rawDf = pd.read_csv(url)
df = rawDf.to_dict("rows"),

columns=[{"name": i, "id": i, "type": "text", 'format': {'locale': {'group': '.', 'decimal': ','}}} for i in rawDf.columns]

app = dash.Dash()
app.scripts.config.serve_locally = True

app.layout = DataTable(
    id='datatable',
    data=rawDf[0:10].to_dict("rows"),
    columns=columns,
    style_data_conditional=[
        {
            'if': {
                'filter': 'Sub-product eq "Payday loan"',
            },
            'backgroundColor': 'pink'
        },
        {
            'if': {
                'filter': 'Sub-product eq "Medical"',
            },
            'backgroundColor': 'lightblue'
        },
    ]
)

if __name__ == "__main__":
    app.run_server(port=8053)

3 Likes

Works like a charm - Thanks!

How would you go about highlighting all rows where in a single column there are duplicate values? Appreciate the help!

Hi!

What you could do is for instance use the row_index, in case you have a fixed and ordered index all the time and know in advance which row you want to color.

dash_table.DataTable(
data=df.to_dict('records'),
columns=[
    {"name": i, "id": i} for i in df.columns
],
style_data_conditional=[{
    "if": {"row_index": 4},
    "backgroundColor": "#3D9970",
    'color': 'white'
}]
)

As far as I know, there is no way to have multiple conditions in one if statement, like A and B.
However, what came to my mind, you could create some kind of hash of multiple columns, e.g. ‘VALUE.COL.A_VALUE.COL.B’ as new column AB, hide the column and filter on the hash. But I havn’t tried that by myself.

Hope that helps.

Any reason this code wouldn’t work anymore? I am on the latest versions of Dash as provided by the user guide and the filter coloring doesn’t work at all.

Any reason this code wouldn’t work anymore?

@tbone Yes. The table API was reworked significantly between v3.x and v4.x (Dash v0.x and v1.x). Migration changes are available here.

The above example in v4.x is now:

# -*- coding: utf-8 -*-
import dash
from dash_table import DataTable

import pandas as pd

url = 'https://github.com/plotly/datasets/raw/master/26k-consumer-complaints.csv'

rawDf = pd.read_csv(url)
df = rawDf.to_dict("rows"),

columns=[{"name": i, "id": i, "type": "text", 'format': {'locale': {'group': '.', 'decimal': ','}}} for i in rawDf.columns]

app = dash.Dash()
app.scripts.config.serve_locally = True

app.layout = DataTable(
    id='datatable',
    data=rawDf[0:10].to_dict("rows"),
    columns=columns,
    style_data_conditional=[
        {
            'if': {
                'filter_query': '{Sub-product} eq "Payday loan"',
            },
            'backgroundColor': 'pink'
        },
        {
            'if': {
                'filter_query': '{Sub-product} eq "Medical"',
            },
            'backgroundColor': 'lightblue'
        },
    ]
)

if __name__ == "__main__":
    app.run_server(port=8053)
2 Likes

Awesome of you to come back with updated instructions!

Thanks very much. Very helpful!