Hey everyone,
I’ve been having a reoccurring problem across several projects. Whenever I try to use a fixed header in combination with scrolling, I get the buggy behavior shown below. The headers will not remained fixed in the correct position.
This issue occurs in at least chrome and safari so I don’t think that’s the issue. Here’s my code for the table, any help or guidance is appreciated!
html.Div(
id="table-zone",
children=[
build_graph_title("Summary Data"),
html.Div(
id="summary-datatable-container",
className="pretty_container",
children=[
dt.DataTable(
id="summary-datatable",
columns=[
{
"hideable": True,
"name": i,
"id": i,
}
for i in summary_df.columns
# omit the id column
if i != "id"
],
css=[
{
"selector": ".previous-page, "
".next-page, .first-page, "
".last-page, .export, .show-hide",
"rule": "color: white;",
},
{
"selector": ".current-page",
"rule": "padding-right: 5px;",
},
],
fixed_rows={
"headers": True,
},
style_cell={
"whiteSpace": "normal",
"height": "auto",
"minWidth": "110px",
"width": "110px",
"maxWidth": "110px",
"textAlign": "center",
},
style_data_conditional=[
{
"if": {"row_index": "odd"},
"backgroundColor": "rgb(242, 239, 233)",
},
],
style_header={
"backgroundColor": "rgb(25, 36, 68)",
"fontWeight": "bold",
"color": "white",
# "textAlign": "center",
},
style_table={
# "height": 320,
"overflowX": "auto",
"overflowY": "auto",
},
data=summary_df.to_dict("records"),
row_selectable="single",
sort_action="native",
filter_action="native",
export_format="csv",
cell_selectable=False,
style_as_list_view=True,
page_size=20,
),