dash-table conditional styling in header when `merge_duplicate

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

Screenshot from 2020-01-16 16-22-28

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

Jan 16 '20 21:01 michaelbabyn

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

Jan 23 '20 14:01 Marc-Andre-Rivet

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

unmerged headers Screen Shot 2021-03-12 at 12 28 17 PM

merged headers Screen Shot 2021-03-12 at 12 28 31 PM

Mar 12 '21 17:03 kat-osad

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

Mar 20 '21 10:03 HikariPL

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

Mar 30 '21 17:03 lucom123

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

Mar 30 '21 18:03 HikariPL

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'
    },
]

Apr 02 '21 20:04 ltskinner

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; }

May 06 '21 17:05 gursharan-info

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

Jun 16 '21 20:06 bobcohensf

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.

Jun 17 '21 04:06 gursharan-info

I am also experiencing this issue!

Oct 19 '21 00:10 audreybreitwieser

I'm also experiencing this issue! Any updates?

Nov 09 '21 21:11 juanmartosjimenez

Is there any way to fix that?

Jun 24 '22 07:06 Flyukiy

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

Apr 25 '23 21:04 merge-dup-headers-fix-plz

@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 https://github.com/plotly/dash/issues/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!

Apr 26 '23 02:04 alexcjohnson

Actually I think I spoke too soon, and https://github.com/plotly/dash/issues/1877 was already solved by https://github.com/plotly/dash/pull/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

Apr 26 '23 02:04 alexcjohnson

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