✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

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