Automatically resize data table on mobile?

Dash Python
1

I have a data table that I would like to resize horizontally to fit its container when on mobile. I have it scrolling with a fixed header vertically, but I’d like it to resize instead of adding a scroll bar horizontally.

(I’m not great at CSS so apologies if this is a wild easy question!)

Here is the data table:

dt = dash_table.DataTable(
    data=chart_w_features.to_dict('records'),
    columns=[{"name": i, "id": i} for i in chart_w_features.columns],
    fixed_rows={'headers':True},
    style_table={
        'overflowY': 'scroll', 
        'height':800, 
        'width':'auto'},
    style_cell={'textAlign': 'center'},
    style_header={
        'backgroundColor': 'rgb(30, 30, 30)',
        'color': 'white'
    },
    style_data={
        'backgroundColor': 'rgb(50, 50, 50)',
        'color': 'white',
    }   
)

It sits in a row in the dashboard like this:

dbc.Col(children=[
            html.H3(html.A('Full Chart', href="#top"), className="subheader"),
            html.Div(dt, style={"margin-top":"2rem"})
        ])
2

Hello @af412,

For the style_table, you’d just need to pass “overflowX”:“auto” for this.

Depending on the size of your mobile table, scrolling to the right or left can be cumbersome. What I do is actually hide the rows and then add a listener to expand the details below the active row when they click on a button to the left.