✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

How to wrap text in cell in dash_table

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

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

2 Likes

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?

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

this link is not available any more

Hi there,

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

1 Like

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