Overflow for horizontal scrolling cuts the first column

[gioxc88]

Here is my code

table_kwargs = dict(editable=True,
                    filter_action='native',
                    sort_action='native',
                    sort_mode='multi',
                    page_action='native',
                    page_current=0,
                    page_size=10,
                    style_table={'overflowX': 'auto'})

dash_table.DataTable(
        columns=[dict(name=col, id=col, type='datetime') if i == 0
                 else dict(name=col, id=col, type='numeric',
                           format=Format(precision=4, scheme='f'))
                 for i, col in enumerate(df)],
        data=df.to_dict('rows'),
        **table_kwargs
)

and here is the result, as you can see only the first column is cut. I tried to position the table anywhere in the layout with the same result.

Many thanks for looking into this. Gio

[jseabold]

No expert, but I think this may be part of what's going on. If you add a margin-left to the parent element of the table which is autoscrolling you'll shift the table elements to the right. Not sure if this is the actual root cause though or how the column size is being calculated. The margin here may not be big enough in all cases.

css=[{
    'selector': '.dash-spreadsheet-inner',
    'rule': 'margin-left: 20px
}]