Active cell font color not working in Dash DataTable

Dash Python
1

Hello all,
I have a Dash DataTable in my app which contains a mix of editable and non-editable columns. Everything works great except that the “color” property of the active cell in the editable column is not getting applied.
Here is my styling criteria (see the third “if”):

data_conditional_styles = [
                                {'if': {'row_index': 'odd'},'backgroundColor': '#3e444a'},
                                {'if': {'row_index': 'even'},'backgroundColor': '#343a40'},                              
                                {"if": {"state": "active"},"backgroundColor": "grey","border": "1px solid red", "color":"rgb(255,255,255"},
                                {"if": {"state": "selected"},"backgroundColor": "grey","border": "1px solid blue"}

And here is what I see under the editable column’s active cell:

image
image1210×424 22.4 KB

2

Hi @DeejL

When the table is editable then it adds an input class. One way to change the style is to use the css parameter

css=[{"selector": "input", "rule": "color:rgb(255,255,255)"}]

Here is the full table definition (note - it looked like you had some typos in your origninal post)

dash_table.DataTable(
            id="table",
            columns=[{"name": i, "id": i} for i in df.columns],
            css=[{"selector": "input", "rule": "color:rgb(255,255,255)"}],
            data=df.to_dict("records"),
            style_cell={"color": "rgb(255,255,255)"},
            editable=True,
            style_data_conditional=[
                {"if": {"row_index": "odd"}, "backgroundColor": "#3e444a"},
                {"if": {"row_index": "even"}, "backgroundColor": "#343a40"},
                {
                    "if": {"state": "active"},
                    "backgroundColor": "grey",
                    "border": "1px solid red",
                    "color": "rgb(255,255,255)",
                },
                {
                    "if": {"state": "selected"},
                    "backgroundColor": "grey",
                    "border": "1px solid blue",
                },
            ],
        ),
3

@AnnMarieW Brilliant, thank you very much! By the way, I’ve recently started learning/using Dash at work and your community posts and Github code examples have taught me more than I possibly could on my own. Thanks again for the awesomeness!

4

Thanks so much! You just made my day :blush:

Dash is awesome - it inspired me to start learning how to code.