How to wrap text in cell in dash_table

Dash Python
1

Hey,

Is there a way to add text wrapping to table cell? If the text is too long, it seems like overlapping with other cells. If not able to do so, any other solutions for displaying long text?

Thanks thanks!

image
image1907×211 12.6 KB

2

Found the solution here. https://dash.plot.ly/datatable/sizing.

2 Likes
3

Hi,

I found that this solution works like a charm for data cells, but I could not manage to apply it to the DataTable column headers.

To bypass this, a possible workaround is to make the original headers empty and invisible, and to duplicate header as the first row of the DataTable.

my_table = dash_table.DataTable(
    id='my_table',
    columns=[{'name': '', 'id': col} for col in df.columns],
    data=[dict([(col, col) for col in results_df.columns])] + df.to_dict('records'),
    style_header={'height': 0, 'padding': 0, 'border': 'none'},  # Make headers invisible
    style_cell_conditional=[{'if': {'row_index': 0}, 
            'height': '60px', 'fontWeight': 'bold'}],  # Style first row like headers
    style_data={'whiteSpace': 'normal'},
    css=[{'selector': '.dash-cell div.dash-cell-value',
                      'rule': 'display: inline; white-space: inherit; overflow: inherit; text-overflow: inherit;'}],
)

However, in the case the table has editable columns, these columns’ false headers also become editable…

I found another workaround which is quite an overkill with duplicated tables and invisible rows…
Is there an easy way to either force column headers also wrap text, or to make a specific row not editable?

4

I also cannot get ellipsis to work on headers… although if I apply it through the css stylesheet it works

5

this link is not available any more

6

Hi there,

You can find the updated solution here: https://dash.plotly.com/datatable/width

2020-07-02_19-08
2020-07-02_19-08824×525 56.8 KB

1 Like
7

I only got this to work by adding a maxWidth argument to my styling:

dash_table.DataTable(
    ...
    style_data={'whiteSpace': 'normal', 'height': 'auto'},
    style_cell={'maxWidth': '500px'},
)
1 Like
8

Is it possible to use style_cell to wrap text in all columns, but also used style_cell_conditional to specify some columns to use ellipsis?

I am using this for style_cell:

style_cell={'textAlign': 'left', 'minWidth': '50px', 'width': '100px', 'maxWidth': '1000px', 'whiteSpace':'normal', 'height':'auto', 'lineHeight':'15px'}

And tried style_cell_conditional without success:

style_cell_conditional=[ 
                            {
                                'if': {'column_id': 'mycolumn'},
                                'width': '200px','textOverflow': 'ellipsis'
                            }]

If I remove ‘whiteSpace’:‘normal’, ‘height’:‘auto’, ‘lineHeight’:‘15px’ from style_cell, then the app honors the style_cell_conditional ellipsis, otherwise it seems like the text wrapping is still taking precedence.

Thanks for the help!