Tables with Fixed Headers & Percentage-based widths have mismatched headers & data cells when resizing

[chriddyp]

The first render is OK, but resizing causes width mismatch between headers & cells.

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

app = dash.Dash(__name__)

df = pd.DataFrame({
    'Column 1': 10 * ['Alpha Alpha Alpha Alpha', 'Beta Beta', 'Bananna Bananna', 'Cucumber Cucumber', 'Dynosaur Dynosaur'],
    'Column 2': 10 * ['Alpha', 'Beta', 'Bananna', 'Cucumber', 'Dynosaur'],
    'Column 3': 10 * ['Alpha', 'Beta', 'Bananna', 'Cucumber', 'Dynosaur'],
    'Column 4': 10 * ['Alpha', 'Beta', 'Bananna', 'Cucumber', 'Dynosaur'],
    'Column 5': 10 * ['Alpha', 'Beta', 'Bananna', 'Cucumber', 'Dynosaur'],
    'Column 6': 10 * ['Alpha', 'Beta', 'Bananna', 'Cucumber', 'Dynosaur'],
})

app.layout = html.Div([
    html.Div(style={'width': '30%', 'height': 20, 'backgroundColor': 'hotpink'}),
    dash_table.DataTable(
        data=df.to_dict('records'),
        columns=[{'id': c, 'name': c} for c in df.columns],

        fixed_rows={'headers': True},
        style_cell={
            'textOverflow': 'ellipsis',
            'overflow': 'hidden'
        },
        style_cell_conditional=[{
            'if': {'column_id': 'Column 1'},
            'width': '30%'
        }]
    )
])

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

[Marc-Andre-Rivet]

Note: Remove limitation from https://dash.plotly.com/datatable/height (https://github.com/plotly/dash-docs/pull/847/files) once fixed