dash_table.DataTable style inheritance

dash_table.DataTable style inheritance is not working as I expect. Below I set the style for columns in 3 examples. In the 1st example, style for both columns is aligned right, as expected. In the 2nd example, using both style_cell and style_cell_condtional, both columns are aligned left. I thought the ‘Result’ column would have been right aligned, the ‘Label’ column aligned left. In the 3rd example, both columns are aligned right, not as expected. What am I missing? Or what do I not understand about how inheritance works?

from dash import Dash, html, dash_table 
test_dict = [
    {"index": 0, "Label": "Line 1", "Out": 0},
    {
        "index": 1,
        "Label": "Line 2",
        "Out": 150000,
    },
    {
        "index": 2,
        "Label": "Line 3",
        "Out": 40000,
    },
    {
        "index": 3,
        "Label": "Line 4",
        "Out": 190000,
    },
]

app = Dash(__name__)

app.layout = html.Div(
    [
        dash_table.DataTable(
            data=test_dict,
            columns=[
                {"name": "Label", "id": "Label", "type": "numeric"},
                {"name": "Result", "id": "Out", "type": "numeric"},
            ],
            style_cell={"textAlign": "right"},
        ),
        dash_table.DataTable(
            data=test_dict,
            columns=[
                {"name": "Label", "id": "Label", "type": "numeric"},
                {"name": "Result", "id": "Out", "type": "numeric"},
            ],
            style_cell={"textAlign": "right"},
            style_cell_conditional=[
                {
                    "if": {"{column_id": "Label"},
                    "textAlign": "left",
                },
            ],
        ),
        dash_table.DataTable(
            data=test_dict,
            columns=[
                {"name": "Label", "id": "Label", "type": "numeric"},
                {"name": "Result", "id": "Out", "type": "numeric"},
            ],
            style_cell={"textAlign": "right"},
            style_cell_conditional=[
                {
                    "if": {"{column_id": "Label"},
                    "textAlign": "left",
                },
                {
                    "if": {"{column_id": "Out"},
                    "textAlign": "right",
                },
            ],
        ),
    ]
)

print(dash_table.version)
6.0.2

Hi @staffordst and welcome to the Dash community :slightly_smiling_face:

I ran your code and after correcting for the typos, it looked right to me:

 "if": {"{column_id": "Label"},

should be:

 "if": {"column_id": "Label"},

Embarrassed I missed that :face_with_hand_over_mouth:

Thanks for finding the typo!

1 Like