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

Dash Table cut off on overflow or fixing via first column

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.

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:

I would appreciate any suggestions.