Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Conditional column alignment not applied to headers #947

@wabiloo

Description

@wabiloo

Using conditional alignment in columns works, but not for headers.

You can see that in your own documentation: https://dash.plotly.com/datatable/style#column-alignment.

from dash import Dash, dash_table
import pandas as pd
from collections import OrderedDict

data = OrderedDict(
    [
        ("Date", ["2015-01-01", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"]),
        ("Region", ["Montreal", "Toronto", "New York City", "Miami", "San Francisco", "London"]),
        ("Temperature", [1, -20, 3.512, 4, 10423, -441.2]),
        ("Humidity", [10, 20, 30, 40, 50, 60]),
        ("Pressure", [2, 10924, 3912, -10, 3591.2, 15]),
    ]
)

df = pd.DataFrame(data)

app = Dash(__name__)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],
    style_cell={'textAlign': 'left'},
    style_cell_conditional=[
        {
            'if': {'column_id': 'Region'},
            'textAlign': 'left'
        }
    ]
)

if __name__ == '__main__':
    app.run_server(debug=True)

According to the code and the text in your documentation:

In both cases, the column headers should have the same alignment as the cell content.

And yet, this is what I see in my Chrome browser:

Screenshot 2022-02-15 at 19 30 22

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions