# \[Python Dash Table\] Conditionally highlight table rows

**URL:** <https://community.plotly.com/t/python-dash-table-conditionally-highlight-table-rows/61167>\
**Category:** Dash Python\
**Tags:** tips-and-tricks, question\
**Created:** [February 17, 2022, 5:20pm UTC](https://community.plotly.com/t/python-dash-table-conditionally-highlight-table-rows/61167 "2022-02-17T17:20:59Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![TristanSun](https://avatars.discourse-cdn.com/v4/letter/t/c57346/32.png) [@TristanSun](https://community.plotly.com/u/TristanSun)\
**Post date:** [February 17, 2022, 5:20pm UTC](https://community.plotly.com/t/python-dash-table-conditionally-highlight-table-rows/61167/1 "2022-02-17T17:20:59Z")

</div>

Hi  
I am trying to format a table.  
my dataframe is like

```auto
df = pd.DataFrame({
    'bid_qty': [1000, 100, 30], 
    'bid_price': [96, 95, 94], 
    'offer_price': [97, 99, 100],
    'offer_qty': [100, 213, 500], 
})

```

I want to **highlight `'bid_qty'` and `'bid_price'` based on `'bid_qty'` values. Higher qty corresponds to darker color.**  
Same rules applys to `'offer_qty'` and `'offer_price'`

Ideally the table should be like .  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/5/3/53111ea467c88025fc1071558556b9cd331611ad.png)

However, this specific case is not covered in [**documentation**](https://dash.plotly.com/datatable/conditional-formatting) .  
I followed the [documentation](https://dash.plotly.com/datatable/conditional-formatting) but could only make it like  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/1/5/15050da5168b320f66166fe7034767147b7d05b2.png)

Here is my code :

```auto

def discrete_background_color_bins(df, n_bins=5, ):
    import colorlover
    bounds = [i * (1.0 / n_bins) for i in range(n_bins + 1)]
 
    df_max = df_numeric_columns.max().max()
    df_min = df_numeric_columns.min().min()
    ranges = [
        ((df_max_bid - df_min_bid ) * i) + df_min
        for i in bounds
    ]
    styles = []
    legend = []
    for i in range(1, len(bounds)):
        min_bound = ranges[i - 1]
        max_bound = ranges[i]
        backgroundColor_bid = colorlover.scales[str(n_bins)]['seq']['YlGn'][i - 1]
        backgroundColor_offer = colorlover.scales[str(n_bins)]['seq']['Reds'][i - 1]
        color = 'white' if i > len(bounds) / 2. else 'inherit'

        for column in df[['bid_qty']]:
            styles.append({
                'if': {
                    'filter_query': (
                        '{{{column}}} >= {min_bound}' +
                        (' && {{{column}}} < {max_bound}' if (i < len(bounds) - 1) else '')
                    ).format(column=column, min_bound=min_bound, max_bound=max_bound),
                    'column_id': column
                },
                'backgroundColor': backgroundColor_bid ,
                'color': color
            })
        for column in df[['offer_qty']]:
            styles.append({
                'if': {
                    'filter_query': (
                        '{{{column}}} >= {min_bound}' +
                        (' && {{{column}}} < {max_bound}' if (i < len(bounds) - 1) else '')
                    ).format(column=column, min_bound=min_bound, max_bound=max_bound),
                    'column_id': column
                },
                'backgroundColor': backgroundColor_offer ,
                'color': color
            })

        legend.append(
            html.Div(style={'display': 'inline-block', 'width': '60px'}, children=[
                html.Div(
                    style={
                        'backgroundColor': backgroundColor_bid ,
                        'borderLeft': '1px rgb(50, 50, 50) solid',
                        'height': '10px'
                    }
                ),
                html.Div(
                    style={
                        'backgroundColor': backgroundColor_offer ,
                        'borderLeft': '1px rgb(50, 50, 50) solid',
                        'height': '10px'
                    }
                ),
                html.Small(round(min_bound, 2), style={'paddingLeft': '2px'})
            ])
        )

    return (styles, html.Div(legend, style={'padding': '5px 0 5px 0'}))

```

Is there anyway I can also higlight `'bid_price'` and `'offer_price'` following `'bid_qty'` and `'offer_qty'` ?

Can someone advise ?  
Thanks !!

---

<div class="post-metadata">

**Author:** ![jlfsjunior](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jlfsjunior/32/16061_2.png) [@jlfsjunior](https://community.plotly.com/u/jlfsjunior)\
**Post date:** [February 17, 2022, 5:49pm UTC](https://community.plotly.com/t/python-dash-table-conditionally-highlight-table-rows/61167/2 "2022-02-17T17:49:28Z")

</div>

Hi,

Please take a look on the examples using `style_data_conditional` here:

> **[Conditional Formatting | Dash for Python Documentation | Plotly](https://dash.plotly.com/datatable/conditional-formatting)**
>
> \`dash\_table.DataTable\` is an interactive table that supports rich styling, conditional formatting, editing, sorting, filtering, and more.

In particular, I would recommend the example under " Highlighting cells by value with a colorscale like a heatmap", which is basically what you are looking for.

As a side note, please be aware that you can pass a list to `column_id` in the condition dictionary, so you don’t have to repeat it for both columns.

---

<div class="post-metadata">

**Author:** ![TristanSun](https://avatars.discourse-cdn.com/v4/letter/t/c57346/32.png) [@TristanSun](https://community.plotly.com/u/TristanSun)\
**Post date:** [February 17, 2022, 5:51pm UTC](https://community.plotly.com/t/python-dash-table-conditionally-highlight-table-rows/61167/3 "2022-02-17T17:51:20Z")

</div>

Thanks @jlfsjunior .  
I read through the documentation but did not find the solution to my answer.  
Any hints ?  
Thanks

---

<div class="post-metadata">

**Author:** ![jlfsjunior](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jlfsjunior/32/16061_2.png) [@jlfsjunior](https://community.plotly.com/u/jlfsjunior)\
**Post date:** [February 17, 2022, 5:54pm UTC](https://community.plotly.com/t/python-dash-table-conditionally-highlight-table-rows/61167/4 "2022-02-17T17:54:11Z")

</div>

As I mentioned in my edited post, you can pass `"column_id": ["bid_qty", "bid_price"]` and the same to ask.

---

<div class="post-metadata">

**Author:** ![TristanSun](https://avatars.discourse-cdn.com/v4/letter/t/c57346/32.png) [@TristanSun](https://community.plotly.com/u/TristanSun)\
**Post date:** [February 17, 2022, 6:18pm UTC](https://community.plotly.com/t/python-dash-table-conditionally-highlight-table-rows/61167/5 "2022-02-17T18:18:32Z")

</div>

Thank you !!!  
@jlfsjunior I knew I was very close