[BUG]: Fixed columns overlay non-fixed columns when using horizontal scrollbar, merged_duplicate_headers and fixed_columns

[FabianHi]

Description

On a table with two levels of headers with merge_duplicate_headers=True, a horizontal scrollbar and first two columns fixed, the fixed columns overlay some of the non-fixed columns, as shown in the gif. The numbers in the first and second header names should match, and "Sub Level Header 3" and "Sub Level Header 4" disappeared. The blank headers of the first row appear to have been merged in such a way that the entire row is shifted to the left. In addition, the first header is enlarged and does not seem to respond to changed settings.

Expected Behavior

The table is expected to behave similarly to the second gif with merged_duplicate_headers=False.

import dash
import dash_html_components as html
import dash_table
import pandas as pd

df = pd.DataFrame(
    {
        'column_0': [1], 
        'column_1': [1], 
        'column_2': [1], 
        'column_3': [1], 
        'column_4': [1], 
        'column_5': [1], 
        'column_6': [1], 
        'column_7': [1], 
        'column_8': [1], 
        'column_9': [1], 
        'column_10': [1], 
        'column_11': [1], 
        'column_12': [1], 
        'column_13': [1], 
        'column_14': [1], 
        'column_15': [1], 
        'column_16': [1], 
        'column_17': [1], 
        'column_18': [1], 
        'column_19': [1]
    }
)

columns = [
    {'name': ['', 'Sub Level Header 1'], 'id': 'column_0', 'type': 'numeric', 'selectable': True}, 
    {'name': ['', 'Sub Level Header 2'], 'id': 'column_1', 'type': 'numeric', 'selectable': True}, 
    {'name': ['', 'Sub Level Header 3'], 'id': 'column_2', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Top Level Header 4', 'Sub Level Header 4'], 'id': 'column_3', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Top Level Header 5', 'Sub Level Header 5'], 'id': 'column_4', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Top Level Header 6', 'Sub Level Header 6'], 'id': 'column_5', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Top Level Header 7', 'Sub Level Header 7'], 'id': 'column_6', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Top Level Header 8', 'Sub Level Header 8'], 'id': 'column_7', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Top Level Header 9', 'Sub Level Header 9'], 'id': 'column_8', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Top Level Header 10', 'Sub Level Header 10'], 'id': 'column_9', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Top Level Header 11', 'Sub Level Header 11'], 'id': 'column_10', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Top Level Header 12', 'Sub Level Header 12'], 'id': 'column_11', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Top Level Header 13', 'Sub Level Header 13'], 'id': 'column_12', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Top Level Header 14', 'Sub Level Header 14'], 'id': 'column_13', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Top Level Header 15', 'Sub Level Header 15'], 'id': 'column_14', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Top Level Header 16', 'Sub Level Header 16'], 'id': 'column_15', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Top Level Header 17', 'Sub Level Header 17'], 'id': 'column_16', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Top Level Header 18', 'Sub Level Header 18'], 'id': 'column_17', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Top Level Header 19', 'Sub Level Header 19'], 'id': 'column_18', 'type': 'numeric', 'selectable': True}, 
    {'name': ['Top Level Header 20', 'Sub Level Header 20'], 'id': 'column_19', 'type': 'numeric', 'selectable': True}
]

app = dash.Dash(__name__)

demo_table = dash_table.DataTable(
    id='demo_table',
    columns=columns,
    data=df.to_dict('records'),
    merge_duplicate_headers=True,
    fixed_columns={'headers':True, 'data':2},
    style_table={
        'overflowX': 'scroll',
        'minWidth': '100%'
    },
    style_cell={
        'minWidth': '150px', 'width': '150px', 'maxWidth': '150px'
    }
)  

app.layout = html.Div([
    html.Div("Demonstration Table:"),
    demo_table
])

if __name__ == '__main__':
    app.run_server(debug=True, host='0.0.0.0', port=8000)

Context

OS: macOS Big Sur 11.4 Browser: Firefox 90.0.2 (64-bit)

dash 1.21.0 dash-bootstrap-components 0.10.7 dash-core-components 1.17.1 dash-extensions 0.0.51 dash-html-components 1.1.4 dash-renderer 1.9.1 dash-table 4.12.0

[laurendudu]

Any updates on this ? Did you manage to fix it by changing the versions of your packages ?

[FabianHi]

Unfortunately, it is still not fixed with updated OS, browser and packages.

OS: macOS Montery 12.6.1 Browser: Firefox 108.0.1 (64-bit) dash 2.7.1 dash-extensions 0.1.6