This repository was archived by the owner on Aug 29, 2025. It is now read-only.
Description 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 )Reactions are currently unavailable
The first render is OK, but resizing causes width mismatch between headers & cells.