Putting two dash table side by side

Dash Python
1

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?

2

Hi @kapital1

use in the Div styles:

style={'display': 'inline-block',
3

And put each table in different Divs

4

@Eduardo where should I add that? Because I have added that here but not working.

html.Div(children = [dash_table1, dash_table2], style={‘display’: ‘inline-block’, ‘vertical-align’:‘center’, ‘horizontal-align’:‘center’})

5 
html.Div([
        html.Div([dash_table1], style={'display': 'inline-block'}),
        html.Div([dash_table2], style={'display': 'inline-block'}),
])
1 Like
6

@Eduardo Perfect! Thanks indeed!

1 Like
7

@kapital1

Also you don’t need to write “children=” if you put the children as the first element.

8

@Eduardo I just directly used your solution.

9

Hello Eduardo,
i’m trying your code block but i’m not able to have 2 datatables inline and centered.

app.layout = html.Div([

    html.Div(dashtable1, style = {'display':'inline-block',
                              'color': 'white'
                              }),
    
    html.Div(dashtable2, style = { 'display': 'inline-block',
                             'color': 'white'
                             }),

    ] )

width property can do sharing of 2 tables in the parent div, for example 40% and 40% will take over 80% of parent div, but again is not aligning center.

i have tried also other properties like horizontal-align, justify-center of objects and others i found online with no result. any comments appreciated. (see result picture)

dash not center
dash not center1648×380 8.09 KB

10

Hi @Bambos

I think the best solution is using dash-bootstrap layout component.
With this tool you can easily manage the layout of the page and also define different layouts for different screen sizes.
Here is the link:
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/

If you need only a tip to solve your issue and do not want to learn bootstrap you can add margins in your code, like:

html.Div(dashtable1, style = {'display':'inline-block',
                              'color': 'white', 'margin-left': 100, 'margin-right';100
                              }),
    
    html.Div(dashtable2, style = { 'display': 'inline-block',
                             'color': 'white'
                             }),

    ] )

or align the second element to the right:

    html.Div(dashtable2, style = { 'display': 'inline-block',
                             'color': 'white', 'float': 'right'
                             }),
1 Like
11

thanks a lot my friend. i can get by with the margins for now but the bootstrap components seems like good setup for future applications. cheers.

1 Like