Layout : 1 row of 4 datatables

Dash Python
1

Why does this doens’t result in a row of 4 datatables ?

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)
2

Hi,

you have to include the dbc.themes to the external_stylesheets.

app =Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
3

Earlier i styled one dataframe. Using the code below. Now i started using bootstrap te create multiple dataframes .
Can i use the conditonal styling in the code above ?

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

data_eq_50 = [
    {
    'if': {
       'column_id': c,
       'filter_query': f'{{{c}}} eq 50'
    },
    'backgroundColor': 'orange'
    }
    for c in ['COL1', 'COL2']
]
data_bg_50 = [
    {
       'if': {
           'column_id': c,
           'filter_query': f'{{{c}}} > 50'
       },
       'backgroundColor': 'green'
    }
    for c in ['COL1', 'COL2']
]

data_sm_50 = [
    {
       'if': {
           'column_id': c,
           'filter_query': f'{{{c}}} < 50'
       },
       'backgroundColor': 'red'
    }
    for c in ['COL1', 'COL2']
]

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

df = pd.DataFrame(data)
df2=df.copy()

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],
    fill_width=False,
    style_cell_conditional=[
   {'if': {'column_id': c},'textAlign': 'Center','width': '40px'} for c in ['COL1', 'COL2']] + 
    [{'if': {'column_id': 'Title'}, 'backgroundColor': 'gray'}]
    , style_header={'backgroundColor': 'gray','fontWeight': 'bold','border': '1px solid black'},
     style_data_conditional=data_eq_50+data_bg_50+data_sm_50
)

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

I don’t see why this shouldn’t work…