Hello community,
Since im using Dash_lab i have the problem when im scrolling to the end of my scrollable dash table and im moving the courser the table will move one row up and if im scrolling to the end and dont moving the courser nothing happened.
I dont know how to change it… without dash lab I dont have this problem with the same code.
Thank you in advance
Greeting Mae
Hi @Mae
That’s odd - dash-labs shouldn’t have any effect on the DataTable. Could you make a minimal example that reproduces the issue?
I had this problem before i made the multipage app cause of #sort_action=“native”. When I deactivated it it works but not when im using Dash Labs and its comletly the same code only that i separated the code. One for the main app and for each site too.
Thats the code of my main:
import dash
from dash import dcc, html, Output, Input, State
import dash_labs as dl
import dash_bootstrap_components as dbc
app = dash.Dash(
__name__,plugins=[dl.plugins.pages], external_stylesheets=[dbc.themes.BOOTSTRAP]
)
offcanvas = html.Div(
[
dbc.Button("Explore", id="open-offcanvas", n_clicks=0),
dbc.Offcanvas(
dbc.ListGroup(
[
dbc.ListGroupItem(page["name"], href=page["path"])
for page in dash.page_registry.values()
if page["module"] != "pages.not_found_404"
]
),
id="offcanvas",
is_open=False,
),
],
className="my-3"
)
app.layout = dbc.Container(
[offcanvas, dl.plugins.page_container],
fluid=True,
)
@app.callback(
Output("offcanvas", "is_open"),
Input("open-offcanvas", "n_clicks"),
[State("offcanvas", "is_open")],
)
def toggle_offcanvas(n1, is_open):
if n1:
return not is_open
return is_open
if __name__ == "__main__":
app.run_server()
and the code of my table:
html.Div(dash_table.DataTable(
id='datatable-interactivity',
row_deletable=False, # choose if user can delete a row (True) or not (False)
page_current=0, # page number that user is on
style_table={'height': '400px', 'overflowY': 'auto'},
fixed_rows={
'headers':True,
'data' : 0},
# number of rows visible per page
style_cell={ # ensure adequate header width when text is shorter than cell's text
'minWidth': 5, 'maxWidth': 120, 'width': 5, 'overflowY' : 'auto', 'whiteSpace' : 'normal'
}
))
])
Here are the screens:
When I scrolled to the end of the table
And when im moving the course when he is over the table and it occures only when the courser is over the dash table everywhere else nothing happened.
When I moved the courser over the table it jumped one row up:
It must be something about the sorting.
Hi @Mae
I can’t replicate the issue. Could you please verify the version of the dash- table you are using
print("datatable version:", dash_table.__version__)
Also, could you please provide some data to make a working example. For example, if your data is large or confidential, you could make a minimal example using a plotly dataset like this one:
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
Im using datatable version: 5.0.0
I found the problem…
i removed the column format :
spalten = [{“name” : “KW”, “id” : “KW”},
{“name” : ‘Anzahl’+" “+”%s" %picker_1, “id”: ‘Anzahl1’, “type” :‘numeric’, “format” :Format(group_delimiter = ‘.’, group = Group.yes, groups = [3])},
{“name” : ‘Umsatz’+" “+”%s" %picker_1, ‘id’ : ‘Umsatz1’, “type” :‘numeric’, “format” : Format(group_delimiter = ‘.’, decimal_delimiter = ‘,’, group = Group.yes, groups = [3], scheme=Scheme.fixed).symbol(Symbol.yes).symbol_suffix(’ €’).precision(2)},
{“name” : ‘Anzahl’+" “+”%s" %picker_2, “id”: ‘Anzahl2’, “type” :‘numeric’, “format” :Format(group_delimiter = ‘.’, group = Group.yes, groups = [3])},
{“name” : ‘Umsatz’+" “+”%s" %picker_2, ‘id’ : ‘Umsatz2’, “type” :‘numeric’, “format” : Format(group_delimiter = ‘.’, decimal_delimiter = ‘,’, group = Group.yes, groups = [3], scheme=Scheme.fixed).symbol(Symbol.yes).symbol_suffix(’ €’).precision(2)},
{“name” : ‘Anzahl’+" “+”%s" %picker_3, “id”: ‘Anzahl3’, “type” :‘numeric’, “format” :Format(group_delimiter = ‘.’, group = Group.yes, groups = [3])},
{“name” : ‘Umsatz’+" “+”%s" %picker_3, ‘id’ : ‘Umsatz3’, “type” :‘numeric’, “format” : Format(group_delimiter = ‘.’, decimal_delimiter = ‘,’, group = Group.yes, groups = [3], scheme=Scheme.fixed).symbol(Symbol.yes).symbol_suffix(’ €’).precision(2)},
{“name” : ‘Anzahl’+" “+”%s" %picker_4, “id”: ‘Anzahl4’, “type” :‘numeric’, “format” :Format(group_delimiter = ‘.’, group = Group.yes, groups = [3])},
{“name” : ‘Umsatz’+" “+”%s" %picker_4, ‘id’ : ‘Umsatz4’, “type” :‘numeric’, “format” : Format(group_delimiter = ‘.’, decimal_delimiter = ‘,’, group = Group.yes, groups = [3], scheme=Scheme.fixed).symbol(Symbol.yes).symbol_suffix(’ €’).precision(2)},
{“name” : ‘Stück Dif.’+" “+”%s" %year_calc_picker_1 +" zu"+" “+”%s" %year_calc_picker_2, ‘id’ : ‘Anzhal_Dif_Value’, “type” :‘numeric’, “format” :Format(group_delimiter = ‘.’, group = Group.yes, groups = [3])},
{“name” : ‘Stück Dif. %’+" “+”%s" %year_calc_picker_1 +" zu"+" “+”%s" %year_calc_picker_2, ‘id’ : ‘Anzahl_Dif_Prozent’, “type” :‘numeric’, “format” : Format(group_delimiter = ‘.’, decimal_delimiter = ‘,’, group = Group.yes, groups = [3], scheme = Scheme.fixed).symbol(Symbol.yes).symbol_suffix(’ %’).scheme(‘f’).precision(2)},
{“name” : ‘Umsatz Dif.’+" “+”%s" %year_calc_picker_1 +" zu"+" “+”%s" %year_calc_picker_2, ‘id’ : ‘Umsatz_Dif_Value’, “type” :‘numeric’, “format” : Format(group_delimiter = ‘.’, decimal_delimiter = ‘,’, group = Group.yes, groups = [3], scheme=Scheme.fixed).symbol(Symbol.yes).symbol_suffix(’ €’).precision(2)},
{“name” : ‘Umsatz % Dif.’+" “+”%s" %year_calc_picker_1 +" zu"+" “+”%s" %year_calc_picker_2, ‘id’ : ‘Umsatz_Dif_Prozent’, “type” :‘numeric’, “format” : Format(group_delimiter = ‘.’, decimal_delimiter = ‘,’, group = Group.yes, groups = [3], scheme = Scheme.fixed).symbol(Symbol.yes).symbol_suffix(’ %’).scheme(‘f’).precision(2)}]
to code without formatting:
[{“name” : “KW”, “id” : “KW”},
{“name” : ‘Anzahl’, “id”: ‘Anzahl1’},
{“name” : ‘Umsatz’, ‘id’ : ‘Umsatz1’},
{“name” : ‘Anzahl’, “id”: ‘Anzahl2’},
{“name” : ‘Umsatz’, ‘id’ : ‘Umsatz2’},
{“name” : ‘Anzahl’, “id”: ‘Anzahl3’},
{“name” : ‘Umsatz’, ‘id’ : ‘Umsatz3’},
{“name” : ‘Anzahl’, “id”: ‘Anzahl4’},
{“name” : ‘Umsatz’, ‘id’ : ‘Umsatz4’},
{“name” : ‘Stück Dif.’, ‘id’ : ‘Anzhal_Dif_Value’},
{“name” : ‘Stück Dif. %’, ‘id’ : ‘Anzahl_Dif_Prozent’},
{“name” : ‘Umsatz Dif.’, ‘id’ : ‘Umsatz_Dif_Value’},
{“name” : ‘Umsatz % Dif.’, ‘id’ : ‘Umsatz_Dif_Prozent’}]
I dont have the problem anymore i have no clue…
When im removing the formatting in my multipage app it occures but i can see the last row to 50%
Screen:
I can send you a codesample that works with the github datasample.
Greetings Mar
Yes, that would be very helpful. This sounds like a bug, and I can open an issue as soon as we have a MWE.
This reminds me of a bug I faced long time ago and never actually found a solution for it: DataTable scrolling bug
In the end, I replaced scrolling by setting a fixed number of rows together with pagination.
This was just posted in Github, and it look like a nice workaround until this issue is fixed:
I noticed this bug happens when you have fixed headers and they can wrap creating taller cells, in my case the headers have a height of 61px.
You can fix the bouncing of the last row if you set the height of the headers to the be their max height.
In my case:
style_header={"maxHeight": "60px", "minHeight": "60px", "height": "60px"}I have the feeling that, when you have fixed headers, the “tallness” of the header is been calculated with one of the headers cells that doesn’t have the max height and that cause the bounce when you focus on the last rows.
I had this problem while using Chrome.
@Mae I saw in your example, that the table had taller headers, so I think this will work for you. 
