Dash DataTable Multiline Overflow

Dash Python
1

Hi!

I’m trying to handle overflow in a DataTable by breaking the contents into multiple lines. The latest code snippet I was able to find is the following:

dash_table.DataTable(
            style_table={'width': '100%'},
            style_data={'whiteSpace': 'normal'},
            content_style='grow',
            css=[{
                'selector': '.dash-cell div.dash-cell-value',
                'rule': 'display: inline; white-space: inherit; overflow: inherit; text-overflow: inherit;'
            }],
            data=df_election.to_dict('rows'),
            columns=[{'id': c, 'name': c} for c in df_election.columns]
        ),

When I try to use the same, I get the following error:

TypeError: The dash_table.DataTable component (version 4.6.0) received an unexpected keyword argument: content_style

Without the content_style line overflow is not handled at all.

I’d appreciate any help with this. Thanks in advance!

2

Have you checked the latest official
documentation on this? See DataTable Width & Column Width | Dash for Python Documentation | Plotly and DataTable Height | Dash for Python Documentation | Plotly

3

Hi, I had taken a look but that was not working for me either. I have since found the solution.

Earlier using the examples from the links chriddyp shared would give me tables with no overflow handling whose width exceeded parent width.

There seems to be an issue with the css for row-0 row-1 where display is flex and not block.

Adding this custom-css has fixed the issue for now:

.row.row-0 {
    display:block !important
}

.row.row-1 {
    display:block !important
}
1 Like