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

Dash Python
3

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)