Black Lives Matter. Please consider donating to Black Girls Code today.

DataTable Incorrectly Displayed at Left and Right Edge and Distort after update columns

Hi everyone, I met two mysterious problems when play around with dataTable.
Problem 1.
I created a datatable an place it in a dbc.Col, but the leftest and rightest columns of the table can only display partially. I wonder it’s something wrong with using dataTable with dbc.Col/dbc.Row. The table screenshot is as below. Can anyone help me with this?
TextAlign:Right


TextAlign: Left

Problem 2.
Also, if I fix the header and then update the columns of this datatable, cell width of the table will distort as following:

PS: I only have this problem after upgrade dash from 1.1.1 to 1.13.0. Everything work fine with Dash 1.1.1. Here are the packages versions I used causing these problems:
dash==1.13.0
dash-bootstrap-components==0.10.2
dash-table==4.8.0
Thanks much!

Hm, this is unexpected. We fixed some issues recently with dash-table 4.8.0 and dash 1.13.0.

Could you try to create a minimal, reproducible example that we can use to diagnose the issue? For example, create a new app with a table with some dummy data and maybe don’t wrap it in dbc.Col/dbc.Row to verify. See How to Get your Questions Answered on the Plotly Forum for some tips.

Hi Chris,
Thanks for quick response. Here’s the code to reproduce above cell width distort problem(without using dbc.Col/Row). The two table connect with each other and deleting the rows in the second table will change the columns of the first table. And this will cause the inconsistent cell width problem.
Also, if you uncomment the lines with dbc.Col/dbc.Row, you will see the two table just tightly display tgr without any space in between, which shouldn’t be the right display for dbc.Col/Row I think. Please take a look. Thanks!

import pandas as pd
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import dash_table
from dash.dependencies import Input, Output, State


df = pd.DataFrame(data = {'Id':[i for i in range(5)], 'Apple Product':['apple@gmail.com.zzzzzzzz' for i in range(5)], 'B Company':['banana!!!@fruit.com.cn' for i in range(5)], 'Others':['orange@isnothappy.cn' for i in range(5)]})
print(df)

app = dash.Dash(__name__)

main_dt = dash_table.DataTable(
                id = 'main_dt',
                data=df.to_dict('records'),
                columns=[{'name': i, 'id': i, "deletable": False} for i in df.columns],
                editable=False,
                style_table={'overflowX': 'scroll', 'overflowY': 'scroll', 'maxHeight': '180px', 'border': '1px solid #545b62'},
                style_header={'backgroundColor':'rgb(230, 230, 230)', 'fontWeight': 'bold','minWidth': '0px', 'width': '150px', 'maxWidth': '200px'},
                style_cell={'minWidth': '0px', 'width': '150px', 'maxWidth': '200px',},
                virtualization=True,
                page_action= 'none',
                fixed_rows={ 'headers': True, 'data': 0 },
        )

field_df = pd.DataFrame(list(df.columns), columns=['Field'])
field_df['Type'] = "A"
field_df.loc[field_df['Field']=='Id','Type'] = 'RowId'
field_types = ['A', 'B', 'C']           
field_dt = dash_table.DataTable(
                id='fields_dt',
                data=field_df.to_dict('records'),
                columns=[{'id': 'Field', 'name': 'Field'}, {'id': 'Type', 'name': 'Type', 'presentation': 'dropdown'}],
                fixed_rows={'headers': True, 'data': 0 },
                editable=True,
                row_deletable=True,
                style_table={'overflowX': 'scroll', 'overflowY': 'scroll', 'maxHeight':'180px', 'border': '1px solid #545b62'},
                style_header={'backgroundColor': 'rgb(230, 230, 230)', 'fontWeight': 'bold'},
                dropdown_conditional=[{'if':{'column_id':'Type', 'filter_query':'{Type} ne "RowId"'},
                                       'options':[{'label':i, 'value':i} for i in field_types]
                                     }],
                style_cell={'minWidth': '0px', 'width': '150px', 'maxWidth': '200px'},
)

main_layout = html.Div([html.Div(id='output-main', children=main_dt, style = {'marginRight':20}),
                    html.Div(id='output-field', children=field_dt),
                ], style={'marginLeft': 20, 'marginRight':20, 'display':'flex'})

# main_layout = html.Div(dbc.Row([
#                     dbc.Col(html.Div(id='output-main', children=main_dt), width=6, md=6),
#                     dbc.Col(html.Div(id='output-field', children=field_dt), width=6, md=6),
#                 ]), style={'marginLeft': 20, 'marginRight':20, 'marginTop': 20})

### CALLBACK
@app.callback(
    [Output('main_dt', 'columns'), Output('fields_dt', 'data')],
    [Input('fields_dt', 'data_timestamp')],
    [State('main_dt', 'columns'), State('fields_dt', 'data')]
)
def auto_update(field_timestamp, columns, rows):  
    ctx = dash.callback_context
    if not ctx.triggered[0]['value']:
        raise dash.exceptions.PreventUpdate
    columns = [c for c in columns if (c['name'] in [r['Field'] for r in rows])]
    return [columns, rows]


app.layout = main_layout

if __name__ == '__main__':
    app.run_server(host='0.0.0.0', port=8080, debug=True)

Hi @Lion

Did you find a solution to this? I’m new to bootstrap and I’m just starting to use it in my apps. I’m getting the same first few chars cut off with bootstrap, but things work fine without it.

Ok, it may not be the best solution, but I fixed it by adding padding to style_cell in the table

Have a look at this github issue. In general, there is a CSS conflict when using dash_bootstrap_components with dash data_table.

I’m not sure if your exact case is the result of this issue. If so, adding this to your asssets/custom.css should solve the issue:

.dash-table-container .row {
  display: block;
  margin: 0;
}
1 Like

Hi @sislvacl. Thanks for your response - that was really helpful!

2 Likes