When using a fixed header on a datatable, the margin-left
css attritube switches to -1.25px
for the whole table (compared to the same table without fixed header), hiding the left side border.
On top of that, the margin-left
attribute for the header row oscillate rapidly between 0
and 1.25
as I scroll down the table. This result in the left side border of the header row blinking rapidly.
I have made a short video to illustrate the issue.
First I show you what the table should look like with margin-left set to 0 (this is how it looked before enabling fixed header). As you can see, simply putting the mouse over the table reset the attribute to the incorrect -1.25px value.
I then highlight the property that “flickers” between 0 and -1.25 px and randomly scroll through the table to show the issue.
Here is the code for this table:
def today_eqs():
master_df = database.get_unfiltered_df().sort_values("time", ascending=False)
df = master_df[master_df["date"] == dt.utcnow().date()][["time", "mag", "depth", "coordinate", "energy"]]
return dash_table.DataTable(
id='today_eq',
columns=[
dict(id='time', name='Datetime (UTC time)', type='datetime'),
table_styling.ColumnFormat("depth", "Depth").depth(),
table_styling.ColumnFormat("mag", "Magnitude").magnitude(),
table_styling.ColumnFormat("energy", "Energy release (in joules)").energy(),
dict(id='coordinate', name='Coordinate', type='text'),
],
data=df.to_dict('records'),
sort_action="native",
fixed_rows={'headers': True},
style_cell=dict(textAlign='left'),
style_header=dict(
backgroundColor='rgb(30,30,30)',
color='white'
),
style_data=dict(
backgroundColor='rgb(50,50,50)',
color='white'
),
style_table={
'width': '{}%'.format(100)
},
style_data_conditional=[
table_styling.every_other_rows(df),
*table_styling.highlight_max_value(df),
],
)