Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

Dash Table not showing lateral borders

Hi there,
I’m trying to implement a solution where I use a Dash table and for a reason that I can’t understand it’s bidding the left and right borders (firstly it was only on the left side, and for an unknown reason started to hide the right side too);

On small screens
image

On large screens
image

In both cases, I can’t see the borders and I have tried a lot of different techniques and I can’t do it.

The code to the table is:

table_values = dbc.Row([
    dbc.Col(
        [
            dt.DataTable(
                data=map_data.to_dict('records'),
                columns=[
                    {"name": i, "id": i, "deletable": False, "selectable": True} for i in ['Province/State', 'Country/Region',
                                                                                           'Confirmed',
                                                                                           'Deaths', 'Recovered']
                ],
                fixed_rows={'headers': True, 'data': 0},
                style_header={
                    'backgroundColor': 'rgb(30, 30, 30)',
                    'fontWeight': 'bold'
                },
                style_cell={
                    'backgroundColor': 'rgb(100, 100, 100)',
                    'color': colors['text'],
                    'maxWidth': 0,
                    'fontSize':14,
                },
                style_table={
                    'maxHeight': '350px',
                    'overflowY': 'auto'
                },
                style_data={
                    'whiteSpace': 'normal',
                    'height': 'auto',

                },
                style_data_conditional=[
                    {
                        'if': {'row_index': 'even'},
                        'backgroundColor': 'rgb(60, 60, 60)',
                    },
                    {
                        'if': {'column_id': 'Confirmed'},
                        'color': colors['confirmed_text'],
                        'fontWeight': 'bold'
                    },
                    {
                        'if': {'column_id': 'Deaths'},
                        'color': colors['deaths_text'],
                        'fontWeight': 'bold'
                    },
                    {
                        'if': {'column_id': 'Recovered'},
                        'color': colors['recovered_text'],
                        'fontWeight': 'bold'
                    },
                ],
                style_cell_conditional=[
                    {'if': {'column_id': 'Province/State'},
                        'width': '26%'},
                    {'if': {'column_id': 'Country/Region'},
                        'width': '26%'},
                    {'if': {'column_id': 'Confirmed'},
                        'width': '16%'},
                    {'if': {'column_id': 'Deaths'},
                        'width': '11%'},
                    {'if': {'column_id': 'Recovered'},
                        'width': '16%'},
                ],
                editable=False,
                filter_action="native",
                sort_action="native",
                sort_mode="single",
                row_selectable="single",
                row_deletable=False,
                selected_columns=[],
                selected_rows=[],
                page_current=0,
                page_size=1000,
                id='datatable'
            ),
        ],
        width=12, md=12, xl=6, className="bottom32"
    ),
    dbc.Col(
        [
            dcc.Graph(id='map-graph-group'
                      )
        ], width=12, md=12, xl=6, className="bottom32"
    )
])

Hi All,

Has anyone found any solution to that problem? I face exactly the same issue and Im trying to increase table margins but it doesnt work for me.

Hi @notorist

Check out this post - it worked for me : DataTable Incorrectly Displayed at Left and Right Edge and Distort after update columns