# Dash DataTable - Conditional Formatting

**URL:** <https://community.plotly.com/t/dash-datatable-conditional-formatting/6095>\
**Category:** Dash Python\
**Created:** [September 28, 2017, 6:29pm UTC](https://community.plotly.com/t/dash-datatable-conditional-formatting/6095 "2017-09-28T18:29:27Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![papaDavid5](https://avatars.discourse-cdn.com/v4/letter/p/ecc23a/32.png) [@papaDavid5](https://community.plotly.com/u/papaDavid5)\
**Post date:** [September 28, 2017, 6:29pm UTC](https://community.plotly.com/t/dash-datatable-conditional-formatting/6095/1 "2017-09-28T18:29:27Z")

</div>

Chris, is it possible to conditionally format cells in the table based on other data? Dave

---

<div class="post-metadata">

**Author:** ![smcelrea](https://avatars.discourse-cdn.com/v4/letter/s/9f8e36/32.png) [@smcelrea](https://community.plotly.com/u/smcelrea)\
**Post date:** [September 28, 2017, 8:31pm UTC](https://community.plotly.com/t/dash-datatable-conditional-formatting/6095/2 "2017-09-28T20:31:09Z")

</div>

On top of papaDavid5’s quesiton, I’m curious to learn about the plans for controlling the formatting overall. Using the help(dt.DataTable) shows that you should be able to control rowheight but haven’t been able to get it to work.

This will really take the next step as a tool when users can control the table formatting!

---

<div class="post-metadata">

**Author:** ![dynamite](https://avatars.discourse-cdn.com/v4/letter/d/8c91f0/32.png) [@dynamite](https://community.plotly.com/u/dynamite)\
**Post date:** [January 5, 2018, 4:54pm UTC](https://community.plotly.com/t/dash-datatable-conditional-formatting/6095/3 "2018-01-05T16:54:07Z")

</div>

Is it possible to color the cells?

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [January 5, 2018, 5:04pm UTC](https://community.plotly.com/t/dash-datatable-conditional-formatting/6095/4 "2018-01-05T17:04:28Z")

</div>

This is not possible in the master release of Dash DataTable. There are two options right now:  
1 - Use `html.Table` as in [Coloured text in a table - conditional formatting](https://community.plotly.com/t/coloured-text-in-a-table-conditional-formatting/7112/8)  
2 - Use a prototype branch of Dash DataTable as in [https://github.com/plotly/dash-table-experiments/pull/11#issuecomment-352106827](https://github.com/plotly/dash-table-experiments/pull/11#issuecomment-352106827). This isn’t 100% stable yet and the API may change in the future. We’ll likely need some more commercial sponsorship ([https://plot.ly/products/consulting-and-oem](https://plot.ly/products/consulting-and-oem)) to wrap this one up.

---

<div class="post-metadata">

**Author:** ![ljw5122](https://avatars.discourse-cdn.com/v4/letter/l/2acd7d/32.png) [@ljw5122](https://community.plotly.com/u/ljw5122)\
**Post date:** [June 19, 2018, 10:00am UTC](https://community.plotly.com/t/dash-datatable-conditional-formatting/6095/5 "2018-06-19T10:00:13Z")

</div>

@chriddyp In the option 1, using html.Table, what should I do if the table have large number of rows? Can we add something like scrolling down? Thanks!

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [June 19, 2018, 12:18pm UTC](https://community.plotly.com/t/dash-datatable-conditional-formatting/6095/6 "2018-06-19T12:18:16Z")

</div>

> [@ljw5122](#):
>
> Can we add something like scrolling down?

Just fix the height of the container and add scroll, like

```auto
style={'height': 300, 'overflowY': 'scroll'}

```

---

<div class="post-metadata">

**Author:** ![ljw5122](https://avatars.discourse-cdn.com/v4/letter/l/2acd7d/32.png) [@ljw5122](https://community.plotly.com/u/ljw5122)\
**Post date:** [June 22, 2018, 12:54am UTC](https://community.plotly.com/t/dash-datatable-conditional-formatting/6095/7 "2018-06-22T00:54:26Z")

</div>

It works! Thanks! 🙂

---

<div class="post-metadata">

**Author:** ![dartfennertrader](https://avatars.discourse-cdn.com/v4/letter/d/aca169/32.png) [@dartfennertrader](https://community.plotly.com/u/dartfennertrader)\
**Post date:** [January 18, 2019, 6:36am UTC](https://community.plotly.com/t/dash-datatable-conditional-formatting/6095/8 "2019-01-18T06:36:26Z")

</div>

Same problem here… I’d like to highlight some rows based on a value of a particular column…  
Thanks

---

<div class="post-metadata">

**Author:** ![camshaw](https://avatars.discourse-cdn.com/v4/letter/c/f19dbf/32.png) [@camshaw](https://community.plotly.com/u/camshaw)\
**Post date:** [May 24, 2019, 2:04am UTC](https://community.plotly.com/t/dash-datatable-conditional-formatting/6095/9 "2019-05-24T02:04:14Z")

</div>

Hi,

I am using dash\_table and trying to use style\_cell\_conditional to style negative numbers as red in all cells of a table. Does anyone have sample code on this?

thanks,  
Cameron

---

<div class="post-metadata">

**Author:** ![adm78](https://avatars.discourse-cdn.com/v4/letter/a/8dc957/32.png) [@adm78](https://community.plotly.com/u/adm78)\
**Post date:** [June 26, 2019, 7:09pm UTC](https://community.plotly.com/t/dash-datatable-conditional-formatting/6095/11 "2019-06-26T19:09:57Z")

</div>

I managed to style the value of a cell based on the value of another using dash’s data table by creating a callback with two outputs 1) table.data 2) table.style\_data\_conditional. The associated function used the new data to generate the styling conditionals on-the-fly. The code is something like:

```auto
@app.callback([Output('my_table_id', 'data'), Output('my_table_id', 'style_data_conditional')], 
              [Input('my_interval_id', 'n_intervals')])
def update_table_live(n_intervals):
    table_dataframe = get_table_dataframe() # some function to grab the latest data
    style_data_conditional = get_style_data_conditional_from_df(table_dataframe)
    return table_dataframe.to_dict('records'), style_data_conditional

def get_style_data_conditional_from_df(table_dataframe):
    # generate th style data conditional on-the-fly, depending on the state of the data
    style_data_conditional = []
    for row_tuple in table_dataframe.iterrows():
        row_index = row_tuple[0]
        row_series = row_tuple[1]
        x = row_series[<name_of_column_for_cell_that_styling_depends_on>]
        row_style_data_conditional = None
        if x == 1:
            row_style_data_conditional = {
                'if': {
                    'row_index': row_index,
                    'column_id': <name_of_column_for_cell_that_is_to_be_styled>
                },
                'backgroundColor': '#ffffe0'
            }
        elif x == 2:
            row_style_data_conditional = {
                'if': {
                    'row_index': row_index,
                    'column_id': <name_of_column_for_cell_that_is_to_be_styled>
                },
                'backgroundColor': '#ff0000'
            }

        if row_style_data_conditional is not None:
            style_data_conditional.append(row_style_data_conditional)

    return style_data_conditional

```

Of course, this isn’t terribly efficient, since the styling is being computed every time the data gets updated, but it was performant enough for my use case.

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [May 2, 2020, 1:18am UTC](https://community.plotly.com/t/dash-datatable-conditional-formatting/6095/12 "2020-05-02T01:18:32Z")

</div>

Thanks for the feedback everyone! We have great new docs for this now, see [https://dash.plotly.com/datatable/conditional-formatting](https://dash.plotly.com/datatable/conditional-formatting)

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

If you have any questions, please create a new thread. And enjoy! 🥂

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [May 2, 2020, 1:18am UTC](https://community.plotly.com/t/dash-datatable-conditional-formatting/6095/13 "2020-05-02T01:18:38Z")

</div>

Closed on May 2, 2020, 1:18am UTC


