Left ellipsis trick

Dash Python
1

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.

2

Thanks for sharing! Could you share a screenshot of what this looks like?

3

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

plays
plays710×106 2.77 KB

2 Likes
4

Great example :smiley_cat:

5

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.