Side by Side Tables

Dash Python
1

I’ve been trying to put two tables side by side but my code keeps stacking them. What is missing in the python code.

Thanks
html.Div(children=[

    html.Div(dash_table.DataTable(id = 'main-table2',
                                  columns = [{"name": i, "id": i} for i in df3.columns],
                                  data = df3.to_dict('records'),
                                  fixed_columns={'headers':True,'data':1},
                                  fixed_rows={'headers':True},
                                  style_table={'height':400,'width':'10%','display':'inline-block'},
                                  )), 
    
    html.Div(dash_table.DataTable(id = 'main-table3',
                                  columns = [{"name": i, "id": i} for i in df3.columns],
                                  data = df3.to_dict('records'),
                                  fixed_columns={'headers':True,'data':1},
                                  fixed_rows={'headers':True},
                                  style_table={'height':400,'width':'10%','display':'inline-block'},
                                  )),
], className='row'),
2

Hi,

There are many ways of doing this. One alternative is to use style = {"display": "flex"} in your outermost html.Div component. It should work as long as the width of each table is smaller than 50% (as in your code).

Since you have className="row" in it, you might consider using the Boostrap grid from dash-bootstrap-components (you can find the documentation here). It is more verbose in this case , but works pretty well for more advanced cases.

3

Thanks I actually figured it out