✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Dash DataTable Multiline Overflow

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!

Have you checked the latest official
documentation on this? See https://dash.plotly.com/datatable/width and https://dash.plotly.com/datatable/height

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
}