Dash Table cut off on overflow or fixing via first column

Dash Python
1

I would like to apply horizontal scrolling to a data table under a tab in a dbc Card and preferably fix the first column.

Doing just overflowX

dbc.Card([
    dbc.CardBody(
        [
        dcc.Tab(label='Overview', children=[
            dash_table.DataTable(
                id='datatable',
                columns=[
                    {"name": i, "id": i, "selectable": True} for i in dummy_df.columns
                ],
                data=dummy_df.to_dict('records'),
                sort_action="native",
                sort_mode="multi",
                style_table={
                    'overflowX': 'auto',
                    'minWidth': '100%',
                },

            ),
        ]),
    ]),
])

The result has the first and last column slightly cut off which I am not sure how to fix but scrolling works.

image
image1362×715 8.35 KB

However, when fixing the first column as follows:

dbc.Card([
    dbc.CardBody(
        [
        dcc.Tab(label='Overview', children=[
            dash_table.DataTable(
                id='datatable',
                columns=[
                    {"name": i, "id": i, "selectable": True} for i in dummy_df.columns
                ],
                data=dummy_df.to_dict('records'),
                sort_action="native",
                sort_mode="multi",
                fixed_columns={'headers': True, 'data': 1},
                style_table={'minWidth': '100%'},
            ),
        ]),
    ]),
])

the following happens:

image
image1356×797 5.91 KB

I would appreciate any suggestions.