plotly / dash-table

OBSOLETE: now part of https://github.com/plotly/dash
https://dash.plotly.com
MIT License
420 stars 72 forks source link

Headers aren't aligned with columns with fixed_rows #777

Closed chriddyp closed 4 years ago

chriddyp commented 4 years ago

Related to https://github.com/plotly/dash-table/issues/775 and https://github.com/plotly/dash-table/issues/776

I can reproduce this after resizing my window, however I can't reproduce it on first draw. A user from the community can though:

https://community.plotly.com/t/dash-1-12-datatable-format-issues-when-using-fixed-header/39120

image

chriddyp commented 4 years ago

As per the community member, this is indeed a regression:

Indeed the bug is exclusive to Dash 1.12. Ran the same code with Dash 1.11 and the format looks correct:

image

So, we'll need to fix this in a patch release @Marc-Andre-Rivet @plotly/dash-core

chriddyp commented 4 years ago

I see this in the dash-docs Percy images too image

michaelbabyn commented 4 years ago

Another issue that came up in 1.12.0 was that when there are a lot of columns and horizontal scrolling is necessary the data cells scroll but the headers don't.

import dash
import dash_table
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    columns=[{"name": i, "id": i} for i in list(df.columns) * 3],
    data=df.to_dict('records'),
    fixed_rows={'headers': True},
    style_cell={'minWidth': '180px', 'width': '180px', 'maxWidth': '180px'},
)

if __name__ == '__main__':
    app.run_server(debug=True, port=8022)

Peek 2020-05-14 18-05

adrianoesch commented 4 years ago

ran into the same issue (header not aligned). a simple window.dispatchEvent(new Event('resize')); does the trick for me.

michaelbabyn commented 4 years ago

Note @plotly/dash , ~as of today this bug is affecting a Dash Enterprise customer~ They have currently switched to 1.10 to workaround this issue