I just tried the approach suggested in davidwalsh.name/css-ellipsis-left and it worked immediately in dash_table
style_cell={
'width': '100px',
'minWidth': '100px',
'maxWidth': '100px',
'overflow': 'hidden',
'textOverflow': 'ellipsis',
'direction': 'rtl',
},
One for the documentation, perhaps? it is very useful for long paths.
Thanks for sharing! Could you share a screenshot of what this looks like?
Here is a working version on dash 1.10.0 and dash_table 4.6.2
import dash
import dash_table
import dash_html_components as html
import pandas as pd
app = dash.Dash(__name__)
data = [
{'play': 'Hamlet', 'beginning': """
Elsinore. A platform before the castle.
FRANCISCO at his post. Enter to him BERNARDO
""", 'ending': """
Take up the bodies: such a sight as this
Becomes the field, but here shows much amiss.
Go, bid the soldiers shoot.
"""},
{'play': 'The Tempest', 'beginning': """
On a ship at sea: a tempestuous noise
of thunder and lightning heard.
Enter a Master and a Boatswain
Master
""", 'ending': """
And my ending is despair,
Unless I be relieved by prayer,
Which pierces so that it assaults
Mercy itself and frees all faults.
As you from crimes would pardon'd be,
Let your indulgence set me free.
"""}, ]
df = pd.DataFrame(data)
app.layout = html.Div([
dash_table.DataTable(
id='ellipsis_test',
columns=[{"name": i, "id": i} for i in df.columns],
data=df.to_dict('records'),
style_cell_conditional=[
{'if': {'column_id': 'play'},
'textAlign': 'left',
'width': "200px",
'maxWidth': "200px",
},
{'if': {'column_id': 'beginning'},
'textAlign': 'left',
'width': "200px",
'maxWidth': "200px",
'overflow': "hidden",
'textOverflow': "ellipsis",
},
{'if': {'column_id': 'ending'},
'textAlign': 'left',
'width': "200px",
'maxWidth': "200px",
'overflow': "hidden",
'textOverflow': "ellipsis",
'direction': 'rtl',
},
]
)], id='my-div')
if __name__ == '__main__':
app.run_server(debug=True)
gives
2 Likes
feel free to add that example to the docs if you’d like! github.com/plotly/dash-docs. we’d accept a pull request with these changes.