How to make a data table scrollable with using 'overflowY' but without the double scroll bars?

Suppose this very simple example table:

app.layout = html.Div([
    dash_table.DataTable(
        columns=[{'id': 'col1', 'name': 'col1'}, {'id': 'col2', 'name': 'col2'}],
        data=[
            dict({'col1': i, 'col2': i})
            for i in range(0, 1000)
        ],
        style_table={
            'height': 500,
            'overflowY': 'scroll',
            'width': 400
        }
    )
])

Now for some reason the table has 2 scroll bars like this:

How do you remove the useless outer scroll bar?

I DO NOT want to use ‘fixed header’ solution because it introduces the following problem:

Have you tried setting 'overflowY': 'auto'? Try that, as a github discussion seemed to recommend doing that to deal with this issue.

1 Like