First and last columns of Datatable get cut after introducing scrollbar

Dash Python
1

I’m having a problem with my datatable. Whenever I introduce a scrollbar, the first column of that datatable is cut. Look at the code below:

import dash
import dash_table
import dash_html_components as html
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')

app = dash.Dash(__name__)

app.layout = html.Div(
                dash_table.DataTable(
                    id='table',
                    columns=[{"name": i, "id": i} for i in df.columns],
                    data=df.to_dict('records'),
                    editable = True,
                    row_selectable='multi',
                    #row_deletable=True,
                    #fixed_columns={ 'headers': True, 'data': 1 },
                    style_cell={'textAlign': 'center'},
                    style_table={
                                'overflowX': 'scroll',
                                'minWidth': '100%',
                                'padding-bottom': '10px',},
                ),
                style={'padding': '30px'}
            )

if __name__ == '__main__':
    app.run_server(debug=True)

This produces the image below, which is the problem:

image
image1903×943 14.6 KB

The first select-checkbox-column is cut (This behaviour is the same even when the first column is a normal column).

However, if I tweak the code to remove the styling responsible for the scrollbar, the table behaves as expected:

app.layout = html.Div(
                dash_table.DataTable(
                    id='table',
                    columns=[{"name": i, "id": i} for i in df.columns],
                    data=df.to_dict('records'),
                    editable = True,
                    row_selectable='multi',
                    #row_deletable=True,
                    #fixed_columns={ 'headers': True, 'data': 1 },
                    style_cell={'textAlign': 'center'},
                    # style_table={
                    #             'overflowX': 'scroll',
                    #             'minWidth': '100%',
                    #             'padding-bottom': '10px',},
                ),
                style={'padding': '30px'}
            )

image
image1903×943 14.5 KB

I’ve tried padding the table, as well as padding the div the table is contained in but it doesn’t seem to help. This is driving me nuts as the table in my actual app depends on that checkbox column appearing properly. Why is “overscrollX” producing this problem and how do I fix it?

1 Like
2

For anyone who might have this problem, I managed to fix it by playing around with the browser ‘Inspect’ dev tool.

It seems there’s an inner container in the dashtable that gets hidden behind the padding of the outer container when a scrollbar is introduced (either by applying 'overflowX': 'scroll' or by fixed_columns={ 'headers': True, 'data': 1 }). The solution? Simply add padding to that inner container so that the hidden parts are pushed inwards and thus made visible.

Add the following code to a stylesheet in the assets folder to achieve this:

.dash-spreadsheet-inner.dash-spreadsheet.dash-empty-01.dash-no-filter.dash-fill-width {
    padding: 0 20px;
}

And that’s that.

4 Likes
3

Hi, thanks for sharing the solution. It works like a charm.

4

Well done. Thanks for sharing!
Adding your own css is simple:

5

Thanks. It works. I am pretty new to this. Could you elaborate a bit the css file and dash app?

6

for anyone having this issue, you don’t have to edit css file.
Datatable provides css parameter for editing the table view.
You can use dash_table.DataTable(css=[{'selector': '.row', 'rule': 'margin: 0'}], ...) to fix it.
I found this solution in here.