hello,
I noticed that in my dash-datatable, I am seeing a strange behavior. If I scroll down the datatable and then move the mouse over the datatable, the scrollbar goes back up. It will keep on going until it reach the top of the datatable as long as I move my mouse over the datatable. The mouse move will only affect the scrolling if I moved across any of the border line of any cell, i.e. if I keep my mouse inside a cell there is no scrolling.
It seems that the issue is related to these posts below. But the reason they mentioned is different in my case:
The scrolling look similar to the one mentioned in the post below, but I don’t have heading that are multiple line:
This only happens with certain specifications and this is affecting my application so badly that it cannot be used.
I have made a code snippet to reproduce this, I have played with this and changed certain things and got the following observations:
1. If I remove the fixed column property: the issue is no longer present
2. If I remove row_selectable=“multi”: the issue is no longer present
3. If I remove
style_data={ “whiteSpace”: “normal”,},: the issue is no longer present
4. If I change the style table property : the issue is no longer present
5. This issue is there only if the data is more than one line with spaces. (The code that I used generates a dummy data with some spaces)
Here are some lines from conda list :
dash 2.3.1 pyhd8ed1ab_0 defaults
dash-bootstrap-components 1.1.0 pyhd8ed1ab_0 defaults
python 3.9.2 hdb3f193_0 defaults
import dash
#from dash.dependencies import Input, Output, State
from dash import dash_table, dcc, html
#from dash.exceptions import PreventUpdate
import numpy as np
import pandas as pd
import random
import string
app = dash.Dash(__name__)
COLUMNS = ["fdgshfs", "yytytj", "asdgsfdg",'supadsgadsfplie', 'SAFADSDSAFunt', 'asfasdf',\
'SFDSFDS','sdgd',\
'dfgdsfdsg','sdfsg']
N_ROWS = 1000
letters = string.ascii_lowercase
def create_data(columns, n_rows):
data = [[''.join(random.choice(letters) for i in range(6)) + ' '.join(random.choice(letters) for i in range(10)) +' '.join(random.choice(letters) for i in range(16))
for xx in range(len(COLUMNS))] for x in range(n_rows)]
#print(data)
df = pd.DataFrame(data=data, columns=COLUMNS)
df.index.name = "row_id"
return df.reset_index().to_dict(orient="records")
app.layout = html.Div(
[
dcc.Store(id="diff-store"),
html.P("Changes to DataTable:"),
html.Div(id="data-diff"),
html.Button("Diff DataTable", id="button"),
html.Div(
children=[dcc.Loading(id="loading-table-view", type="circle", children=[
html.Div(
dash_table.DataTable(
id="table-data-diff",
columns=[{"id": col, "name": col, "type": "text", "filter_options":{"case":"insensitive"},"hideable":True,} for col in COLUMNS],
#editable=True,
data=create_data(COLUMNS, N_ROWS),
page_size=100,
row_selectable="multi",
# filter_action='native',
# sort_action='native',
# style_header={
# "whiteSpace": "normal",
# 'height': '70px', 'minHeight':'70px', 'maxHeight':'70px',
# # 'fontWeight': 'bold',
# # 'font-size':'30px',
# #'overflow': 'scroll',
# },
style_data={
"whiteSpace": "normal",
# "height": "auto",
},
# style_table={
# "overflowX": "scroll",
# "minHeight": "85vh",
# "height": "85vh",
# "maxHeight": "85vh",
# "minWidth": "85vw",
# "width": "85vw",
# "maxWidth": "85vw",
# },
style_table={
# "overflowX": "scroll",
"minHeight": "1224px",
"height": "1224px",
"maxHeight": "1224px",
"minWidth": "2000px",
"width": "2000px",
"maxWidth": "2000px",
},
# style_cell = {
# 'font-size':'20px',
# },
style_cell_conditional = [
{'if': {'column_id': x}, 'width': '90px', 'minWidth': '90px', 'maxWidth': '90px', 'whiteSpace': 'pre'}
for x in COLUMNS
],
# fixed_rows={"headers": True},
fixed_columns={"headers": True, "data": 0},
),
style={"height": "100%"},
)
])]
)
]
)
if __name__ == "__main__":
app.run_server(debug=True, port=8051)