Dash dash_table.DataTable style_header text_alignment breaks between Dash v2.0.0 and v2.1.0

Dash Python
1

Hello,

I noticed on my Dash Data tables, that headers for the table suddenly stopped respecting the style_header ‘text-align’: ‘center’ instruction when running under Dash v2.1.0. I’m maintaining a dashboard that runs under Docker and the command to install Dash was unversioned, so it always loaded the latest version. After debugging, I backed down to Dash v2.0.0 and it resolved the issue. Here is a bit of code that can be used to see this:

import dash
from dash import dash_table
import pandas as pd

app = dash.Dash(
    __name__
)

app.layout = 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,
)

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

This code will center the headings for the table in version 2.0.0, but will suddenly push every header to be right aligned under Dash version 2.1.0. My current solution is to simply force the use of Dash v 2.0.0, but I notice slightly slower load times. Not a serious problem, but I thought you would like to know about this issue.

1 Like
2

Hi!

I got the same problem. I fixed it by entering the following in the styles.css file inside the assets folder:

.column-header-name {
width: 100%;
text-align: center;
}

The text-align property only works by setting the width to 100%. Hope this helps.

3

Thanks for replying! I have seen this solution in other problem reports, but it seems that the text-align directive should work correctly, hence my report. For me, simply reverting to Dash 2.0.0 solved the problem, and the problem didn’t start until I upgraded. Working through this more, I’ve seen some situations where this functionality breaks under 2.0.0 as well. So, I’m not certain what is causing the issue. Thanks, and if this is not going to be addressed, the solution you’ve provided is a good alternative.

4

@geneblandjr
Thanks for reporting. Would you like to open an issue on Github? This is a great example to include.

5

Thanks for reporting! I think I might know what the issue is. Could you check if this works?

style_header={
            'textAlign': 'center',
        },
6

That doesn’t work either :cry: Looks like a 2.1 bug

7

As @AnnMarieW notes below - I’ve tried it both ways, and it still fails. Thanks for the suggestion, though!

8

@AnnMarieW - thanks for the suggestion regarding putting in a bug. I realized that this is a community question rather than bug summital area later, and decided to do exactly that. I’ve logged the bug at: https://github.com/plotly/dash/issues/1914 . I will tell you that I’m not certain that the release of Dash 2.1.0 was the cause of the bug as further testing has shown the very same code work on a Dash 2.1.0 build…but on another machine - (Docker hosted on a Linux Mint environment, hosting an Ubuntu environment jointly with an nginx environment under docker-compose), so now I’m not sure what would have caused the issue. I just noted that when I upgraded from Dash 2.0.0. to Dash 2.1.0, that is when I saw the unexpected behavior begin.

Thanks for addressing this!

2 Likes
9

I’ve been struggling with that issue too.

There’s an another answer at stackoverflow site

10

Ok,

the 2.2.0 version has fixed that bug

  • Restores style_header text alignment in Dash Table #1914
1 Like
11

Yes, I have confirmed that moving to Dash version 2.2.0 fixes this issue! Thanks to the devs for such quick response!

1 Like