Data Table Not Resizing with Window

Dash Python
1

Table is layed out as shown, and the screenshots illustrate the problem: it spills out of divs when window width is reduced past a certain point. Is there a fix for this?

Thank you in advance for any ideas on how to rectify.

row_5 = html.Div([
            dbc.Row
            (
                dbc.Col
                (
                    html.Div
                    (
                        id="div-row-5",
                        className="div-row-5",
                        children=
                        [
                            info_row("row-5","lg"),
                            content_row_5
                        ]
                    )
                )
            )
        ])

content_row_5 = dbc.Row ([
                    dbc.Col
                    ([
                        html.Div([
                            dbc.Row([
                                dbc.Col([
                                    html.Div
                                    (
                                        [
                                            html.Label("Data",className='div-label',id='div-data-label'),
                                        ],

                                    className="slider-label"),

                                    dash_table.DataTable
                                    (
                                        id='data-table'
                                        ,page_action="native"
                                        ,page_current= 0
                                        ,page_size= 10
                                        ,filter_action='native'
                                        ,columns=[]
                                        ,data=[]
                                        ,merge_duplicate_headers=True
                                        ,style_data={'overflow': 'hidden'}
                                        ,style_header={'textAlign': 'center'}
                                        ,style_cell=
                                        {
                                            'textAlign': 'right'
                                            ,'padding':'5px'
                                        }
                                        ,style_cell_conditional=
                                        [
                                            {
                                                'if': {'column_id': 'location'}
                                                ,'textAlign': 'left'
                                                ,'textOverflow': 'ellipsis'
                                                ,'maxWidth': 200
                                            },
                                            {
                                                'if': {'column_id': 'fips'}
                                                ,'textAlign': 'left'
                                            }
                                        ]
                                    ),
                                ])
                            ])
                        ])

:slight_smile:

Screen Shot 2021-09-11 at 4.55.21 PM
Screen Shot 2021-09-11 at 4.55.21 PM751×308 24.3 KB

:frowning:

Screen Shot 2021-09-11 at 4.55.27 PM
Screen Shot 2021-09-11 at 4.55.27 PM749×446 40.7 KB

2

Hey @blah

There are several ways to solve this. See the “Width” section of the DataTable docs for different options: DataTable Width & Column Width | Dash for Python Documentation | Plotly

1 Like
3

Thank you, AnnMarieW. Went to the link and tried a few things. This last worked a treat:

style_table={'overflowX': 'auto'},

1 Like