Open
Description
Describe your context
dash 2.7.1
dash-bootstrap-components 1.2.1
dash-core-components 2.0.0
dash-html-components 2.0.0
dash-mantine-components 0.11.0
dash-table 5.0.0
Describe the bug
Fixing the headers of a table modifies the height of the table and the pre-specified width of columns
Expected behavior
When these two properties are specified in a table, the fixed_rows setting shouldn't overwrite/modify the column width.
fixed_rows={'headers': True, 'data':0}
style_cell_conditional=[
{"if": {"column_id": "company_name"}, "width": "45%","min-width": "45%","max-width": "45%"},
{"if": {"column_id": "status"}, "width": "12%", "min-width": "12%","max-width": "12%"},
Code to replicate the issue
import dash
from dash import dash_table, html, dcc, Input, Output, State, callback
import pandas as pd
import dash_design_kit as ddk
import random
N=50
df = pd.DataFrame({
'company_name': random.choices(['A','B','C','D'], k=N),
'status': random.choices(['Complete','Approved','Pending','Declined'], k=N),
'date_requested': random.choices(['Jan','Feb','Mar','Apr','May'], k=N),
'link': ['link']*N
})
app = dash.Dash(__name__)
# https://github.com/plotly/dash-table/pull/793#pullrequestreview-431923424
app.layout = html.Div([
html.Button(id='switch', children='Fix headers'),
dash_table.DataTable(
id='table',
#fixed_rows={'headers': True, 'data':0},
columns=[{"name":c, "id":c} for c in df.columns],
data=df.to_dict('records'),
style_header={
"backgroundColor": "#002B80",
"fontWeight": "bold",
"color": "#FFFFFF",
"text-align": "left",
"border": "0px",
"padding-left": "5px",
},
style_cell={"textAlign": "left"},
style_data_conditional=[
{"if": {"filter_query": "{status} = Complete","column_id": "status",},"color": "#428959"},
{"if": {"filter_query": "{status} = Approved", "column_id": "status", }, "color": "#428959"},
{"if": {"filter_query": "{status} = Pending","column_id": "status"},"color": "#F1C00E"},
{"if": {"filter_query": "{status} = Declined", "column_id": "status"}, "color": "#C73E1D"},
{"if": {"filter_query": "{status} contains 'Review'", "column_id": "status"}, "color": "#2A4F87"},
],
style_cell_conditional=[
{"if": {"column_id": "company_name"}, "width": "45%","min-width": "45%","max-width": "45%"},
{"if": {"column_id": "status"}, "width": "12%", "min-width": "12%","max-width": "12%"},
],
)],
style={'padding':'20px'})
@callback(
Output('table', 'fixed_rows'),
Output('switch', 'children'),
Input('switch', 'n_clicks'),
State('switch', 'children'),
prevent_initial_call=True
)
def switch_fixed_rows(click, current_value) :
if current_value == 'Fix headers':
return {'headers': True, 'data':0}, "Unfix headers"
elif current_value == 'Unfix headers':
return {'headers': False}, "Fix headers"
if __name__ == '__main__':
app.run_server(debug=True)
Screenshots