Hi Jorge,
I think I am having the same problem. I am also on version 1.12. (I don’t know what the folks at plotly did but it runs SO MUCH FASTER!! - I love it!). Anyway, what I see is that when using Fixed Columns in the DataTable, it’s very easy to get the headers and the columns out of alignment when the user re-sizes the horizontal component of the window size.
My code looks like this:
html.Div(
[
html.Div(
[dt.DataTable(id=“info_table”,
data=Projectstats_df.to_dict(‘records’),
filter_action=“native”,
sort_action=“native”,
sort_mode=“multi”,
style_data_conditional=[
{‘if’: {‘column_id’: ‘status’, ‘filter_query’: ‘{status} eq “Exclude”’},
“backgroundColor”: “#A8B8A1”,
‘color’: ‘rgb(6,65,79)’},
{‘if’: {‘filter_query’: ‘{threshold} eq “Dropped”’},
“backgroundColor”: “#f5c9c9”, ‘color’: ‘rgb(6,65,79)’, “line_color”: “darkslateblue”},
],
fixed_rows={ ‘headers’: True, ‘data’: 0 },
style_table={‘maxHeight’: ‘300px’, ‘overflowY’: ‘scroll’, ‘border’: ‘thin darkgrey solid’},
style_cell={‘padding’: ‘4px’, “font-size”: “1.10em”, “line_color”: “darkslategray”},
style_header={‘backgroundColor’: ‘rgb(230, 230, 230)’, ‘fontWeight’: ‘bold’, ‘font-size’: ‘1.2em’},
style_data={‘whiteSpace’: ‘normal’, ‘height’: ‘auto’},
style_cell_conditional=[
{‘if’: {‘column_id’: ‘name’}, ‘fontWeight’: ‘bold’}, {‘if’: {‘column_id’: ‘name’}, ‘width’: ‘12%’},
{‘if’: {‘column_id’: ‘name’}, ‘font-size’: ‘1.15em’},
{‘if’: {‘column_id’: ‘nonzero_values’}, ‘width’: ‘9%’},
{‘if’: {‘column_id’: ‘status’}, ‘width’: ‘10%’},
{‘if’: {‘column_id’: ‘threshold’}, ‘width’: ‘8%’},
{‘if’: {‘column_id’: ‘unique_values’}, ‘width’: ‘8%’},
{‘if’: {‘column_id’: ‘mean’}, ‘width’: ‘6%’},
{‘if’: {‘column_id’: ‘standard_dev’}, ‘width’: ‘10%’}
],
columns=[
{‘id’: ‘name’, ‘name’: ‘Feature Name’, ‘type’: ‘text’},
{‘id’: ‘nonzero_values’, ‘name’: ‘Non-zero’, ‘type’: ‘numeric’, ‘format’: Format(precision=0, scheme=Scheme.fixed)},
{‘id’: ‘status’, ‘name’: ‘Ignore’, ‘type’: ‘text’, ‘editable’: True, ‘presentation’: “dropdown”},
{‘id’: ‘threshold’, ‘name’: ‘Drop’, ‘type’: ‘text’},
{‘id’: ‘unique_values’, ‘name’: ‘Unique’, ‘type’: ‘numeric’, ‘format’: Format(precision=0, scheme=Scheme.fixed)},
{‘id’: ‘mean’, ‘name’: ‘Mean’, ‘type’: ‘numeric’, ‘format’: Format(precision=0, group=’,’, scheme=Scheme.fixed)},
{‘id’: ‘standard_dev’, ‘name’: ‘Std Deviation’, ‘type’: ‘numeric’, ‘format’: Format(precision=0, group=’,’, scheme=Scheme.fixed)},
{‘id’: ‘min’, ‘name’: ‘Min’, ‘type’: ‘numeric’, ‘format’: Format(precision=0, group=’,’, scheme=Scheme.fixed)},
{‘id’: ‘25%’, ‘name’: ‘25%’, ‘type’: ‘numeric’, ‘format’: Format(precision=0, group=’,’, scheme=Scheme.fixed)},
{‘id’: ‘50%’, ‘name’: ‘50%’, ‘type’: ‘numeric’, ‘format’: Format(precision=0, group=’,’, scheme=Scheme.fixed)},
{‘id’: ‘75%’, ‘name’: ‘75%’, ‘type’: ‘numeric’, ‘format’: Format(precision=0, group=’,’, scheme=Scheme.fixed)},
{‘id’: ‘max’, ‘name’: ‘Max’, ‘type’: ‘numeric’, ‘format’: Format(precision=0, group=’,’, scheme=Scheme.fixed)}
],
dropdown={
“status”:{“options”: [
{“label”: ‘Exclude’, “value”: ‘Exclude’},
{“label”: ‘Include’, “value”: ‘Include’}
]}
})
],
className=“pretty_container twelve columns”
)], className=“row flex-display”
A pretty complex window. However, I don’t know that this is brand new in 1.12. All I know is that it’s very easy to horizontally resize the window and have this happen. Once it does, I don’t know how to sync it back up except for closing and re-opening the app. Note that the Feature name should be in the first column, and by the fourth column the headers don’t have any relation to the data underneath them. Screen shot follows:
