Dash DataTable - Conditional Formatting

Dash Python
1

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

1 Like
2

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!

1 Like
3

Is it possible to color the cells?

4

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
2 - Use a prototype branch of Dash DataTable as in 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) to wrap this one up.

1 Like
5

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

6

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

style={'height': 300, 'overflowY': 'scroll'}
1 Like
7

It works! Thanks! :slight_smile:

8

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

9

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

11

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:

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

12

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

image
image844×244 10.8 KB

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