Problem with DataTable and dash_bootstrap_components

Dash Python
1

Hi everyone,

i have a little problem i hope you can help me with:
The following code leads to a datatable that is not fully displayed (the left and right edges are not visible)

import dash
import dash_table
import dash_bootstrap_components as dbc
import pandas as pd

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

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container([
                dbc.Row([
                    dbc.Col([
                        dash_table.DataTable(
                            style_table={
                                'overflowY': 'auto',
                            },
                            id='table',
                            columns=[{"name": i, "id": i} for i in df.columns],
                            data=df.to_dict('records'),
                            row_selectable="single"
                        )
                    ], md=6)
                ])
], fluid=True)

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

However, when i remove the overflowY option of the style dict the table is displyed as expected. The same problem occurs when I try to fix the headers of the table. Does anyone know a workaround?

Thanks in advance
dwamser

2

Hi @dwamser

Check out this post: DataTable Incorrectly Displayed at Left and Right Edge and Distort after update columns

I was having the same problem, and this fixed it.

1 Like
3

Hey @AnnMarieW

this fixed it, thank you so much!

1 Like