Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] merge_duplicate_headers breaks style_header_conditional #1877

Closed
bernhardbarker opened this issue Jan 3, 2022 · 2 comments
Closed
Labels
dash-data-table related to DataTable component

Comments

@bernhardbarker
Copy link

bernhardbarker commented Jan 3, 2022

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:

Screenshot from 2022-01-03 14-50-12

Desired highlighting:

164121756719547194

@alexcjohnson
Copy link
Collaborator

I'm seeing the "desired highlighting" when I try the code above now:
Screenshot 2023-04-25 at 22 11 58
So I believe #1968 resolved this issue but we forgot to close it 🎉

@korzi27
Copy link

korzi27 commented Apr 14, 2025

Not sure if i should post it here or create something new but i think it falls into the same category. Actually i still get bugs with using merge_duplicate_headers=True and style_cell_conditional. I am only on 2.18.2 yet but as mentioned it should be fixed and i see no changes in the newer versions. Here is a minimal example where it happens with the most upper right column border. For more columns and more thick lines it happens more often.

import dash
from dash import Dash, dash_table, html
import pandas as pd

# Sample data
data = {
    'Group A': ['Alice', 'Bob'],
    'Group A.1': [10, 20],
    'Group B': ['X', 'Y'],
    'Group B.1': [100, 200],
    'Group B.2': [1.1, 2.2]
}

# Create DataFrame
df = pd.DataFrame(data)

# Define columns with headers as lists for multi-level headers
columns = [
    {'name': ['Name', 'Person'], 'id': 'Group A'},
    {'name': ['Name', 'Score'], 'id': 'Group A.1'},
    {'name': ['Details', 'Code'], 'id': 'Group B'},
    {'name': ['Details', 'Value 1'], 'id': 'Group B.1'},
    {'name': ['Details', 'Value 2'], 'id': 'Group B.2'},
]

# Define style for bold black borders
style_cell_conditional = [
    {
        'if': {'column_id': col},
        'borderRight': '5px solid black',
        'fontWeight': 'bold'
    } for col in ['Group A.1', 'Group B.1']  # Columns to highlight
]

# Dash app
app = Dash(__name__)

app.layout = html.Div([
    dash_table.DataTable(
        data=df.to_dict('records'),
        columns=columns,
        merge_duplicate_headers=True,
        style_cell={'textAlign': 'center'},
        style_cell_conditional=style_cell_conditional
    )
])

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dash-data-table related to DataTable component
Projects
None yet
Development

No branches or pull requests

4 participants