# Dash Datatable: Style data conditional row-vice

**URL:** <https://community.plotly.com/t/dash-datatable-style-data-conditional-row-vice/21587>\
**Category:** Dash Python\
**Created:** [March 29, 2019, 10:33am UTC](https://community.plotly.com/t/dash-datatable-style-data-conditional-row-vice/21587 "2019-03-29T10:33:57Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![dhenke](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@dhenke](https://community.plotly.com/u/dhenke)\
**Post date:** [March 29, 2019, 10:33am UTC](https://community.plotly.com/t/dash-datatable-style-data-conditional-row-vice/21587/1 "2019-03-29T10:33:57Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Marc-Andre](https://avatars.discourse-cdn.com/v4/letter/m/e19b73/32.png) [@Marc-Andre](https://community.plotly.com/u/Marc-Andre)\
**Post date:** [March 29, 2019, 1:58pm UTC](https://community.plotly.com/t/dash-datatable-style-data-conditional-row-vice/21587/2 "2019-03-29T13:58:26Z")

</div>

@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:

```auto
# -*- 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)

```

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/8/86c444a78f85cb4bab23d4f42d8bfa5d081c0457.png)

---

<div class="post-metadata">

**Author:** ![dhenke](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@dhenke](https://community.plotly.com/u/dhenke)\
**Post date:** [March 30, 2019, 8:32pm UTC](https://community.plotly.com/t/dash-datatable-style-data-conditional-row-vice/21587/3 "2019-03-30T20:32:36Z")

</div>

Works like a charm - Thanks!

---

<div class="post-metadata">

**Author:** ![soapmctavish](https://avatars.discourse-cdn.com/v4/letter/s/e47774/32.png) [@soapmctavish](https://community.plotly.com/u/soapmctavish)\
**Post date:** [May 23, 2019, 12:27am UTC](https://community.plotly.com/t/dash-datatable-style-data-conditional-row-vice/21587/4 "2019-05-23T00:27:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dhenke](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@dhenke](https://community.plotly.com/u/dhenke)\
**Post date:** [May 23, 2019, 6:28am UTC](https://community.plotly.com/t/dash-datatable-style-data-conditional-row-vice/21587/5 "2019-05-23T06:28:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tbone](https://avatars.discourse-cdn.com/v4/letter/t/3ab097/32.png) [@tbone](https://community.plotly.com/u/tbone)\
**Post date:** [November 12, 2019, 3:58pm UTC](https://community.plotly.com/t/dash-datatable-style-data-conditional-row-vice/21587/6 "2019-11-12T15:58:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Marc-Andre](https://avatars.discourse-cdn.com/v4/letter/m/e19b73/32.png) [@Marc-Andre](https://community.plotly.com/u/Marc-Andre)\
**Post date:** [November 26, 2019, 10:11pm UTC](https://community.plotly.com/t/dash-datatable-style-data-conditional-row-vice/21587/7 "2019-11-26T22:11:26Z")

</div>

> 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](https://dash.plot.ly/dash-1-0-migration).

The above example in `v4.x` is now:

```auto
# -*- 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)

```

---

<div class="post-metadata">

**Author:** ![larssl780](https://avatars.discourse-cdn.com/v4/letter/l/ea5d25/32.png) [@larssl780](https://community.plotly.com/u/larssl780)\
**Post date:** [March 18, 2020, 8:39pm UTC](https://community.plotly.com/t/dash-datatable-style-data-conditional-row-vice/21587/8 "2020-03-18T20:39:08Z")

</div>

Awesome of you to come back with updated instructions!

---

<div class="post-metadata">

**Author:** ![andrewmarco](https://avatars.discourse-cdn.com/v4/letter/a/ac8455/32.png) [@andrewmarco](https://community.plotly.com/u/andrewmarco)\
**Post date:** [April 12, 2020, 6:17am UTC](https://community.plotly.com/t/dash-datatable-style-data-conditional-row-vice/21587/9 "2020-04-12T06:17:06Z")

</div>

Thanks very much. Very helpful!