✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Dash 1.12 DataTable format issues when using fixed header

Hi there! I’ve been experiencing some issues with DataTable formatting when using fixed header.

Specifically, the problem is that the table header is NOT aligned with the table columns when using fixed column widths. I’ve followed the same recommendations shown in the DataTable documentation page concerning fixed_rows and column widths.

I’m using the latest version of Dash (1.12). I’m pretty sure this issue is new with this update.

The reproducible code is the following:

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 df.columns],
    data=df.to_dict('records'),
    fixed_rows={'headers': True},
    style_cell={'minWidth': '180px', 'width': '180px', 'maxWidth': '180px'},
)

if __name__ == '__main__':
    app.run_server(debug=False)

Thanks for reporting! Indeed, this looks like a bug. I would expect style_cell to work. I’m not sure if this is a regression but it looks like it might be. Could you check with a previous version of Dash?

I see three issues here:

  1. Fixed widths aren’t working with fixed_rows: https://github.com/plotly/dash-table/issues/775
  2. Columns are misaligned: https://github.com/plotly/dash-table/issues/777
  3. Columns take a long time to realign: https://github.com/plotly/dash-table/issues/776

We’ll investigate more and if it’s indeed a regression, then we’ll prioritize the fix.

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:

Hi Chris!

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

Thank you for confirming @jorge243!

All three issues stated above have now been fixed and released as part of 1.13.0: pip install dash --upgrade

Thanks again for reporting @jorge243!

I seem to still have this issue on 1.13.1

It fixes itself if i resize the browers im in. But everytime i updated the table then it reverts to being skewed. Seems to happen when the new data has less rows than the old data.

dash_table.DataTable(
id=‘cl’,
page_size=50,
filter_action=“native”,
sort_action=“native”,
columns=(
[{‘id’: ‘Status’, ‘name’: ‘PIM’, ‘editable’: False},
{‘id’: ‘StockGrade’, ‘name’: ‘SG’, ‘editable’: False},
{‘id’: ‘Article’, ‘name’: ‘Article’, ‘editable’: False},
{‘id’: ‘Manufacture’, ‘name’: ‘MPN’, ‘editable’: False},
{‘id’: ‘ArticleName’, ‘name’: ‘Article Name’, ‘editable’: False},
{‘id’: ‘Brand’, ‘name’: ‘Brand’, ‘editable’: False},
{‘id’: ‘Comment’, ‘name’: ‘TAG’, ‘editable’: True},
{‘id’: ‘Avai’, ‘name’: ‘CA’, ‘editable’: False},
{‘id’: ‘N4Weeks’, ‘name’: ‘N4W’, ‘editable’: False}] + columnlist
),
editable=True,
fixed_rows={‘headers’: True, ‘data’: 0},
style_cell={‘width’: ‘80px’, ‘backgroundColor’: ‘#FFFAFA’},
style_data={‘border’: ‘1px solid grey’, ‘fontWeight’: ‘bold’, ‘fontSize’: 18},
style_header={‘border’: ‘1px solid black’, ‘fontWeight’: ‘bold’, ‘fontSize’: 20,
‘backgroundColor’: ‘#F5F5F5’},
style_table={‘minHeight’: ‘45vh’, ‘height’: ‘45vh’, ‘maxHeight’: ‘45vh’, ‘overflowY’: ‘scroll’},
style_data_conditional=stylesRed + stylesPurple + stylesGreen + stylesRed2 + stylesPurple2 + stylesGreen2 + stylesStatus20 + stylesStatus30 + stylesStatus60 + stylesStatus90 + stylesStatus93 + stylesNegative,
style_cell_conditional=styleSize + styleArticle + styleArticleName + styleStatus + styleManu + styleBrand + styleTag + styleGrade + styleStock + style4weeks,
css=[{“selector”: “.show-hide”, “rule”: “display: none”}],
hidden_columns=[‘w0’, ‘w1’, ‘w2’, ‘w3’, ‘w4’, ‘w5’, ‘w6’, ‘w7’, ‘w8’, ‘w9’, ‘w10’, ‘w11’, ‘w12’, ‘w13’, ‘w14’,
‘w15’]
)

Thanks for reporting! Is there any way you could provide some sample data so that we can reproduce this end to end?

Ill get on that. Can try to isolate the datatable with some fake data sometime over the weekend.

@chriddyp @geoforce A repro would be nice but I’m fairly confident I know what the issue is and validated the data case. Opened https://github.com/plotly/dash-table/issues/797 for follow up.

@chriddyp @geoforce Dash v1.13.3 has been released with an additional fix for the table headers when updating the props https://github.com/plotly/dash-table/pull/798. Please give it a try and let us know how it goes.

Just tested 1.13.3 fixed the alignment issue. Great work :smiley:

2 Likes

I still have this issue/a very similar issue:

Using fixed headers as well, when I scroll horizontally the columns are aligned correctly (during the scrolling), but as soon as I move the mouse, the header cells snap back to their initial position while the table cells remain where they should be.

This issue hasn’t existed a few months ago and it still exists on 1.13.4.

@god thanks for reporting! we are not aware of this issue. as far as we know, we fixed these bugs. could you share a GIF and a simple reproducible example?

Here’s a simple reproducible example of the issue:

Video:

On Chrome Version 83.0. Similar issue on Safaria on iOS.

Code:

import random
import dash
import dash_table
import numpy as np
import pandas as pd

random_string = lambda: ''.join(random.choice("abcdefg") for _ in range(15))

app = dash.Dash(__name__)

data = np.array([random_string() for _ in range(30*30)]).reshape(-1,30)
df = pd.DataFrame(data)

app.layout = dash_table.DataTable(
  columns=[{"id" : str(i), "name" : str(i)} for i in df.columns],
  data=df.to_dict("records"),
  fixed_rows={'headers': True},
  fixed_columns={'headers': True, 'data': 1},
)

app.run_server(debug=True)

Other observations:

On my iPad using Safari + Magic Keyboard the issue appears only when moving the mouse. If I scroll around on the table using touch, everything works fine. As soon as I move the mouse, the issue appears.

1 Like

I am also experiencing this issue. It is occurring on my data tables, which have a fixed header for vertical scrolling, but no fixed columns as seen in the animation above. Chrome browser. The bug makes is basically impossible to sort or filter on those columns that require horizontal scrolling to reach.

On my tables this bug is only occurring after you hover over the data portion of the table after scrolling all the way to the rightmost column. If you keep your mouse over the horizontal scroll bar the header row stays aligned, as soon as you hover of the table data the header row snaps back “to the left”.

Thanks for reporting! We just fixed this issue in https://github.com/plotly/dash-table/pull/806. We’ll be issuing a new release shortly.

Awesome, thank you! Dash is a great product and the support is appreciated.

The fixed worked, downloaded the update today and the tables are stable on hover after horizontal scroll, thank you!

1 Like