conditional styling in header when merge_duplicate_headers=True doesn't work

[michaelbabyn]

it looks like things go out of alignment after the first merged column

import dash
from dash.dependencies import Input, Output, State
import dash_table
import dash_html_components as html

app = dash.Dash(__name__)
server = app.server

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"},
        {"name": ["cars", "cats"], "id": "cats"},
        {"name": ["docs", "dogs"], "id": "dogs"},
        {"name": ["bogs", "bots"], "id": "bots"},
        {"name": ["star", "bones"], "id": "rats"},
        {"name": ["razo", "bors"], "id": "bors"},
        {"name": ["plush", "tone"], "id": "tone"},
        {"name": ["ding", "steal"], "id": "steal"},
        {"name": ["dong", "feel"], "id": "feel"},
    ],
    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_conditional=[
        { 'if': { 'column_id': 'year', 'header_index': 0 }, 'backgroundColor': 'blue' },
        { 'if': { 'column_id': 'montreal', 'header_index': 0 }, 'backgroundColor': 'red' },
        {'if': {'column_id': 'temp', 'header_index': 0}, 'backgroundColor': 'green'},
        {'if': {'column_id': 'cats', 'header_index': 0}, 'backgroundColor': 'green'},
        {'if': {'column_id': 'dogs', 'header_index': 0}, 'backgroundColor': 'green'},

    ],
    merge_duplicate_headers=True,
)

app.layout = html.Div([
    html.Div(id='table', children=table),
])


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

dash                            1.8.0
dash-table                      4.6.0      
dash-core-components            1.7.0      
dash-html-components            1.0.2      
dash-renderer                   1.2.3      

[Marc-Andre-Rivet]

Behavior is confirmed as incorrect. Furthermore, seems like header_index: 0 gets processed in such a way as to apply the style to all header rows instead of just 0 (the top one).

• fix behavior of header_index: 0
• fix merged headers behavior so that the style applied to the merged headers is the one that corresponds to the left-most cell of the group

[kat-osad]

Is there an update to this bug? I am experiencing the same issue:

unmerged headers

merged headers

[HikariPL]

Exactly same problem here :/ Looks like it does not work.

[lucom123]

I have the same problem. Any suggestions are welcome.
I'm using dash-table==4.9.0.

[HikariPL]

Yesterday I tried and it worked for me so maybe there was some fix done recently.

[ltskinner]

Same issue here - not looking to color, just align center instead of the default right

style_cell_conditional = [
    {
        'if': {
            'column_id': 'merged_column_title',
            'header_index': 0
        },
        'textAlign': 'center'
    },
]

[gursharan-info]

I was also having the same issue and the following snippet didn't work for me:

style_header_conditional = [ { 'if': {'column_id': col, 'header_index': 0}, 'textAlign': 'center' } for col in ['column_1',] ],

I had to resort to positional CSS selectors for styling these:
#table tbody>tr:nth-of-type(1)>th:nth-of-type(2){ text-align:center !important; }

[bobcohensf]

I also encountered this problem - interested in any progress on the issue. Thanks.

[gursharan-info]

I also encountered this problem - interested in any progress on the issue. Thanks.

The CSS styling works fine for now. You can check my example above.

[audreybreitwieser]

I am also experiencing this issue!

[juanmartosjimenez]

I'm also experiencing this issue! Any updates?

[Flyukiy]

Is there any way to fix that?

[merge-dup-headers-fix-plz]

almost one year later, any word on a fix?
even the ability to use header_index would be extremely helpful!

[alexcjohnson]

@merge-dup-headers-fix-plz cute name 😉 This repo is obsolete, dash-table has been merged into the main dash repo. And the issue has been reported again there plotly/dash#1877 so I'll close this issue. It hasn't yet bubbled up to the top of the queue for someone at Plotly to address, but we'd welcome a PR to address it!

[alexcjohnson]

Actually I think I spoke too soon, and plotly/dash#1877 was already solved by plotly/dash#1968

There may be some confusion around header_index - this is actually the row within the headers; the column must be specified by column_id