Search code examples
pythonplotlyplotly-dash

How to keep a Dash datatable inside its container?

I have a Dash datatable inside a dbc.Col (which is inside a dbc.Row), and I can not figure out how to keep the table inside its container when the screen size is smaller (trying to make it responsive).

If the table is too big for its container, it should have a scroll bar, so I added overflowX:auto to its style, but it still won't work.

Right now it looks like this:

enter image description here

The code is something like:

dbc.Col(dt.DataTable(
                id='tabla_req',
                style_table={
                'overflowX': 'auto',
                'width':'100%',
                'margin':'auto'},
                row_deletable=False,
                row_selectable="single",
                page_current= 0,
                page_size= 10,
                fill_width=False,
                style_data={
                    'whiteSpace': 'normal',
                    'height': 'auto',
                },
                #editable=False,
                data=df.to_dict('records'),
                columns=[{"name": i, "id": i} for i in df.columns.tolist()]),
width=12
)
Solution

  • I had similar issue, adding these parameter was helpful

    virtualization=True