[BUG] Dash DataTable style_header text_alignment breaks between Dash v2.0.0 and v2.1.0

[geneblandjr]

Production environment is under a customer container hosting environment that hosts docker container in a large corporate environment. Docker container is setup with rhel 7 (Redhat) with an Apache 2.4 web server. Python 3.6 is the version of python using pip as the installation for packages.

• replace the result of pip list | grep dash below

dash                       2.1.0    
dash-bootstrap-components  1.0.2    
dash-core-components       2.0.0    
dash-html-components       2.0.0    
dash-renderer              1.9.1    
dash-table                 5.0.0

• if frontend related, tell us your Browser, Version and OS

  • OS: MacOS Monterey version 12.2
  • Browser Chrome
  • Version 98.0.4758.80

Describe the bug

When using 'text-align': 'center' in the style_header directive within the dash_table.DataTable, under Dash 2.1.0, the headings for the table are not centered, rather they are right aligned, regardless of the setting of the 'text-align' value. In fact, directly editing the text-align within Chrome's developer tool will not change the alignment. Changing other attributes (font, color, etc... will work).

Expected behavior

I would expect that when 'text-align': 'center' is specified for the style_header directive within dash_table.DataTable that the headings for the columns specified would be centered above the column.

Screenshots

Additional Information
I've been able to workaround this issue by reverting to Dash 2.0.0 in my production build, but I have not been able to build a similar working environment, neither in pip nor conda. My production version is working. I only reverted to Dash 2.0.0 since it was a very recent release, and then the behavior of the dash_table.DataTable worked correctly. It was the only change I made to the Docker build. Now, regardless of whether I use Dash 2.0.0 or Dash 2.1.0, I'm seeing the persistent right alignment of headers in my DataTables.

I do not know if it will help, but here is an example of code that I saw work under Dash 2.0.0, and then fail once I upgraded to Dash 2.1.0:

import pandas as pd
from dash import dcc
# import dash_core_components as dcc
from dash import html
# import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
import plotly.express as px
import time
import random

app = dash.Dash(__name__)

def get_rand_data():
    mylist=[random.randint(1,6) for _ in range(6)]
    return mylist

def build_data(mylist):
    df = pd.DataFrame({
        "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
        "Amount": mylist,
        "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
    })
    dcc.Store(id='new_data', data=df.to_json())
    return df

def draw_graph(df):
    fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")
    return fig

def get_table():
    data_table =  dash_table.DataTable(
        columns=[
            {"name": ["", "Year"], "id": "year"},
            {"name": ["City", "Montreal"], "id": "montreal"},
            {"name": ["City", "Toronto"], "id": "toronto"},
            {"name": ["City", "Ottawa"], "id": "ottawa"},
            {"name": ["City", "Vancouver"], "id": "vancouver"},
            {"name": ["Climate", "Temperature"], "id": "temp"},
            {"name": ["Climate", "Humidity"], "id": "humidity"},
        ],
        data=[
            {
                "year": i,
                "montreal": i * 10,
                "toronto": i * 100,
                "ottawa": i * -1,
                "vancouver": i * -10,
                "temp": i * -100,
                "humidity": i * 5,
            }
            for i in range(10)
        ],
        style_header={
                'text-align': 'center',
            },
        merge_duplicate_headers=True,
    )
    return data_table


mylist=get_rand_data()
df = build_data(mylist)
fig = draw_graph(df)
data_table = get_table()

refresh_button = dbc.Button('Refresh Data', color="info", className="me-1", id='refresh_button_lmd')

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),
    refresh_button,
    html.Div(children=[
        data_table
    ]),
    dcc.Store(id='new_data'),
    dcc.Loading(
        id='loading-data',
        children=[
            html.Div(children=[
                dcc.Graph(
                    id='example-graph',
                    figure=fig
                )
            ]
            )
        ],
        type='circle',
    ),
])


@app.callback(Output("example-graph", "figure"),
              Input("new_data", "data"))
def on_data(data):
    df = pd.read_json(data)
    time.sleep(5)
    fig = draw_graph(df)
    return fig


@app.callback(Output('new_data', 'data'),
              Input('refresh_button_lmd', 'n_clicks'))
def new_data(n_clicks):
    if n_clicks is None:
        print("Override Startup")
        mylist = get_rand_data()
        df = build_data(mylist)
        data = df.to_json()
    else:
        print(f'Button was clicked, this is {n_clicks} times.')
        mylist = get_rand_data()
        df = build_data(mylist)
        data=df.to_json()
    return data

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

I suspect that perhaps an upgrade supporting the move to Dash 2.1.0 might be the issue, and that now that I've moved my base install, I do not know what library is causing this. Any help would be appreciated. I would like to remove the constraint of staying at Dash 2.0.0 as I saw faster response times with Dash 2.1.0. Thanks!

[wabiloo]

@geneblandjr a short description in the issue title would be useful (not just "[BUG]")!

[wabiloo]

Note that the bug can be seen in the Documentation itself: https://dash.plotly.com/datatable/style. Even in the section that talks about conditional formatting that sets the expectation that headers and columns will align in the same way