[BUG] merge_duplicate_headers breaks style_header_conditional

[bernhardbarker]

Describe your context

Environment:

dash                      2.0.0
dash-bootstrap-components 1.0.2
dash-core-components      2.0.0
dash-html-components      2.0.0
dash-table                5.0.0

Probably not important:

• OS: Ubuntu 21.10
• Browser: Chrome 96.0.4664.110

Describe the bug

When I run the below code which uses style_header_conditional to highlight columns 1_1a and 1_1b, it incorrectly highlights header cells 1b, 2 and 2a.

Expected behavior

It should highlight the cells corresponding to the specified columns, i.e. 1, 1a and 1b (i.e. the same cells it would highlight if I remove merge_duplicate_headers=True).

Note: I understand that when specifying some, but not all, of the columns which are included in a merge, there may be a few reasonable ways that can be displayed. But in this case the expected behavior seems quite obvious and the observed behavior is clearly wrong.

Code

from dash import Dash
import dash.dash_table as dt
import dash_bootstrap_components as dbc

app = Dash()

app.layout = dbc.Container([
    dt.DataTable(
        id='tbl', data=[],
        columns=[
            {'name': (), 'id': 'x'},
            {'name': (), 'id': 'y'},
            {'name': ('1', '1a'), 'id': '1_1a'},
            {'name': ('1', '1b'), 'id': '1_1b'},
            {'name': ('2', '2a'), 'id': '2_2a'},
            {'name': ('2', '2b'), 'id': '2_2b'},
        ],
        merge_duplicate_headers=True,
        style_header_conditional=[
            {
                'if': {'column_id': f'1_1{c}'},
                'backgroundColor': 'green',
                'fontWeight': 'bold'
            } for c in ['a', 'b']
        ],
    ),
])

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

Screenshots

Actual highlighting:

Desired highlighting:

[alexcjohnson]

I'm seeing the "desired highlighting" when I try the code above now:

So I believe #1968 resolved this issue but we forgot to close it 🎉