Dash layout multiple datatables

Dash Python
1

I would like to add multiple datatables to one layout.
In the example the df’s are the same .
Ik would like te become 2 rows of 4 DataTables

from dash import Dash, dash_table
import pandas as pd
from collections import OrderedDict
import dash_html_components as html
from dash import html

app = Dash(name)
data = OrderedDict(
[
(“Title”, [“one”, “two”, “treem”]),
(“COL1”, [50, 20, 80]),
(“COL2”, [10, 40, 90])
]
)

df = pd.DataFrame(data)
df2=df.copy()
df3=df.copy()
df4=df.copy()
df5=df.copy()
df6=df.copy()
df7=df.copy()
df8=df.copy()

app.layout = html.Div(children=[
dash_table.DataTable(data=df.to_dict(‘records’),
fill_width=False)])

if name == ‘main’:
app.run_server(debug=True)

2

Hello @marvy,

You should be able to do this, just list out the other DataTables that you want, with the current layout, they would stack on top of one-another.

Also, to keep things separate, and for use in callbacks, you’ll need to provide id’s to them. :slight_smile:

3

Why does this doesn’t result in 1 row off 4 cols ?

from dash import Dash, dash_table
import pandas as pd
from collections import OrderedDict
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash import html

app = Dash(__name__)
data = OrderedDict(
    [
        ("Title", ["one", "two", "treem"]),
        ("COL1", [50, 20, 80]),
        ("COL2", [10, 40, 90])
    ]
)

df = pd.DataFrame(data)


app.layout = dbc.Container([
    dbc.Row([dbc.Col([dash_table.DataTable(data=df.to_dict('records'),
    fill_width=False)],width=3),
             dbc.Col([dash_table.DataTable(data=df.to_dict('records'),
             fill_width=False)],width=3),
             dbc.Col([dash_table.DataTable(data=df.to_dict('records'),
             fill_width=False)],width=3),
             dbc.Col([dash_table.DataTable(data=df.to_dict('records'),
             fill_width=False)],width=3),
        ])
    ])


if __name__ == '__main__':
    app.run_server(debug=True)
4

You need to import the dbc.theme.BOOTSTRAP to the external_stylesheets when initializing the app.