Let us say, I have the following two dash tables:
dash_table1 = dash_table.DataTable(
id=‘dashtable1’,
columns=[{"name": i, "id": i} for i in df1.columns],
editable=True,
sort_action="native",
column_selectable="single",
row_selectable="multi",
selected_columns=[],
selected_rows=[],
page_action="native",
page_current= 0,
style_table={
'maxHeight': '70vh',
'overflowY': 'scroll',
'margin-top': '5vh',
'margin-left': '3vh',
'width': '30%'
},
css=[{
'selector': '.dash-cell div.dash-cell-value',
'rule': 'display: inline; white-space: inherit; overflow: inherit; text-overflow: inherit;'
}],
style_cell={
'whiteSpace': 'normal',
'textAlign': 'left',
'width': '45%',
},
style_header={'fontWeight': 'bold'},
style_as_list_view=True
)
AND
dash_table2 = dash_table.DataTable(
id=‘dashtable2’,
columns=[{"name": i, "id": i} for i in df2.columns],
editable=True,
sort_action="native",
column_selectable="single",
row_selectable="multi",
selected_columns=[],
selected_rows=[],
page_action="native",
page_current= 0,
style_table={
'maxHeight': '70vh',
'overflowY': 'scroll',
'margin-top': '5vh',
'margin-left': '3vh',
'width': '30%'
},
css=[{
'selector': '.dash-cell div.dash-cell-value',
'rule': 'display: inline; white-space: inherit; overflow: inherit; text-overflow: inherit;'
}],
style_cell={
'whiteSpace': 'normal',
'textAlign': 'left',
'width': '45%',
},
style_header={'fontWeight': 'bold'},
style_as_list_view=True
)
I have used the following code to show side by side but it is not working.
content_tab_1 = html.Div(children = [
html.Div(children = [dash_table1, dash_table2], style={‘vertical-align’:‘center’, ‘horizontal-align’:‘center’})
],
style={‘width’: ‘100%’})
Can anyone help on this?
8 posts - 2 participants