Change row color based on same row dropdown value

Dash Python
1

Hi there, I am trying to create a dash table from a dataframe, which has a dropdown menu for each row.
Upon selecting one of the options of the row dropdown, the whole same row will change color accordingly.
Here’s my code:

import dash
from dash import html, dash_table, dcc, Input, Output

import pandas as pd
from collections import OrderedDict


# Sample DataFrame
df = pd.DataFrame({
    'Col1': [1, 2, 3, 4],
    'Col2': ['A', 'B', 'C', 'D']
})


app = dash.Dash(__name__)

app.layout = html.Div(
    [
        dash_table.DataTable(
            id="table-dropdown",
            data=df.to_dict("records"),
            style_table={'overflowX': 'auto', 'minWidth': '50%'},
            style_cell={'textAlign': 'left'},
            columns=[{'id': 'status-dropdown','name': 'Status',  'presentation': 'dropdown'}] + 
                    [{'id': col, 'name': col} for col in df.columns],
            style_data_conditional=[],
            editable=True,
            dropdown={
                "status-dropdown": {
                    "options": [
                        {"label": "In Progress ", "value": "In Progress"},
                        {"label": "New", "value": "New"},
                    ],
                    "clearable": True,
                },
            },
        ),
        html.Div(id="table-dropdown-container"),
    ]
)

I have tried the following:

style_data_conditional=[
                {
                    'if': {'filter_query': '{Status} = "In Progress"'},
                    'backgroundColor': 'yellow',
                    'color': 'black'
                },
                {
                    'if': {'filter_query': '{Status} = "New"'},
                    'backgroundColor': 'green',
                    'color': 'white'
                },
                {
                    'if': {'filter_query': '{Status} = ""'},
                    'backgroundColor': 'blue',
                    'color': 'white'
                }
            ]

but no color change.

I also tried some callbacks, but I failed to refer to the dropdown’s value to trigger the color change.

Can anybody kindly help, please?

2

Hi @zimo

The filter_query in the style_data_conditional needs to be the column id rather than the name`

Try this:


style_data_conditional=[
                {
                    'if': {'filter_query': '{status-dropdown} = "In Progress"'},
                    'backgroundColor': 'yellow',
                    'color': 'black'
                },
                {
                    'if': {'filter_query': '{status-dropdown} = "New"'},
                    'backgroundColor': 'green',
                    'color': 'white'
                },
                {
                    'if': {'filter_query': '{status-dropdown} = ""'},
                    'backgroundColor': 'blue',
                    'color': 'white'
                }
            ]

If you would like to upgrade to Dash AG Grid, you can find an example of a dropdown color picker here (example is near the end)