Hello everyone,
I am using a DataTable for my Dash app that has a few long columns. When I scroll down with one of these columns on screen, the table moves left and right quite erratically, making for a bad user experience. Does anyone know how to fix the columns’ locations when scrolling down, so that this doesn’t happen? Is there some other way to fix that? Thanks in advance!
Hey @vjinsi, could you share your code and maybe a gif that shows the behaviour of your data table please?
Hi, here’s a video showing what I described, as well as the code snipped generating it.
from collections import OrderedDict
from dash import Dash, html, dcc, dash_table
import pandas as pd
app = Dash(name)
long_line = “This is a very long line, but it is completely meaningless, and nly serves the purpose of illustrating an issue found when scrolling down a datatable with lines of very different lenghts. This is a very long line, but it is completely meaningless, and nly serves the purpose of illustrating an issue found when scrolling down a datatable with lines of very different lenghts. This is a very long line, but it is completely meaningless, and nly serves the purpose of illustrating an issue found when scrolling down a datatable with lines of very different lenghts”
short_line = “This is a shorter line”
data = OrderedDict(
[
(“Lines”, [short_line, short_line, short_line, short_line, short_line, short_line, short_line, short_line, short_line, long_line]),
(“Lines2”, [short_line, short_line, short_line, short_line, short_line, short_line, short_line, short_line, short_line, long_line]),
]
)
df = pd.DataFrame(
OrderedDict([(name, col_data * 2) for (name, col_data) in data.items()])
)
app.layout = dash_table.DataTable(
data=df.to_dict(‘records’),
virtualization=True,
columns=[{‘id’: c, ‘name’: c} for c in df.columns],
fixed_rows={‘headers’: True},
style_table={‘height’: 200},
page_size=15,
)
if name == ‘main’:
app.run_server(debug=True)
Thanks for the code, for better render you can use the code formatting it’ll be much easier to read.
Regarding the movement of your columns, what’s happening is that when you scroll down columns, the view of the data table automatically jumps to the beginning of every row, in that case to the far left as your text is right-aligned.
A potential fix would be to wrap your very long sentences on several lines:
from collections import OrderedDict
from dash import Dash, html, dcc, dash_table
import pandas as pd
app = Dash(__name__)
long_line = "This is a very long line, but it is completely meaningless, and nly serves the purpose of illustrating an issue found when scrolling down a datatable with lines of very different lenghts. This is a very long line, but it is completely meaningless, and nly serves the purpose of illustrating an issue found when scrolling down a datatable with lines of very different lenghts. This is a very long line, but it is completely meaningless, and nly serves the purpose of illustrating an issue found when scrolling down a datatable with lines of very different lenghts"
short_line = "This is a shorter line"
data = OrderedDict(
[
("Lines", [short_line, short_line, short_line, short_line, short_line, short_line, short_line, short_line, short_line, long_line]),
("Lines2", [short_line, short_line, short_line, short_line, short_line, short_line, short_line, short_line, short_line, long_line]),
]
)
df = pd.DataFrame(
OrderedDict([(name, col_data * 2) for (name, col_data) in data.items()])
)
app.layout = dash_table.DataTable(
data=df.to_dict("records"),
columns=[{"id": c, "name": c} for c in df.columns],
fixed_rows={"headers": True},
style_table={"height": "200px", "overflow": "auto"},
style_cell={
'height': "auto",
'minWidth': '180px', 'width': '180px', 'maxWidth': '180px',
'whiteSpace': 'normal'
},
page_size=15,
)
if __name__ == "__main__":
app.run_server(debug=True)
Another work around would be to align your text to the left with "style_cell"= {"textAlign": "left"} :
