Two tables side by side

Dash Python
1

I’m trying to display to tables from pandas side by side. Each of them have are in one html divider, the divider being a row and the two tables being columns.

    html.Div(children=[
    html.Div(children=[
        dt.DataTable(
            data=df.to_dict('rows'),
            columns=[{'id': c, 'name': c} for c in df.columns],
            style_cell_conditional=[
                {'if': {'column_id': 'Version'},
                 'width': '130px'},
                {'if': {'column_id': 'Uptime'},
                 'width': '130px'},
            ]
        )
    ], className="col s6", style={'width': '98%', 'margin-left': 500, 'margin-right': 10, 'max-width': 350}),
    html.Div(children=[
        dt.DataTable(
            data=df.to_dict('rows'),
            columns=[{'id': c, 'name': c} for c in df.columns],
            style_cell_conditional=[
                {'if': {'column_id': 'Version'},
                 'width': '130px'},
                {'if': {'column_id': 'Uptime'},
                 'width': '130px'},
            ]
        )
    ], className="col s6", style={'width': '98%', 'margin-left': 700, 'margin-right': 10, 'max-width': 350})
], className="row")

Any help would be greatly appreciated.

2

Could you show us how / where your CSS classes col, row, s6 etc. are defined?

3

I’m using Materialize CSS through an external style sheet

4

I don’t think you want to have such large margins on the two columns, that’s causing things to be too wide for the row and overflow.

I’m not that familiar with Materialize so I don’t know what the best practice is, but I got something that looked reasonable with this kind of structure:

html.Div(
    html.Div(
        [
            html.Div(table1, className="col s6"),
            html.Div(table2, className="col s6"),
        ],
        className="row",
    ),
    className="container",
)

where table1 and table2 are your two data-tables (the ‘container’ div is optional). I found that the data-tables filled the whole column even though it looks like there’s supposed to be some padding, so you can also add another level of dividers with the padding yourself. E.g. have the same structure as above where table1 is defined as

table1 = html.Div(dt.DataTable(...), style={"padding": "5px"})

Does that give you the type of results you were looking for?

5

Hey abose,

check this thread out:

I just got it to work with two tables. Just takes a bit of fitting.