Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

CSS style are not working on a table generated in a loop

Hello,

I’m printing tables in a loop into the dom, and I’m running into a problem.
The style attributes are somehow not working on the table.

This is the loop:

def cdr_df_loop(i):
    return dash_table.DataTable(
        data=cdr_df[i].to_dict('records'),
        columns=[{'id': c, 'name': c} for c in columns_cdr],

        style_header=style_header,
        style_cell=style_cell,
        style_data_conditional=style_data_conditional,
        style_table=style_table_cdr,
        fill_width=False,
        
        )

the style:

style_table_cdr={
        
       'borderRadius':'10px 10px',
       'marginBottom': 30,
       'marginTop': 30,
        #'height': '1000px',
        'overflowY': 'auto'
}

and the layout:

html.Div(children=[cdr_df_loop(i) for i in months], style=margin),

The problem is that there’s no margin between the tables.
Here’s an illustration how it is:

This is what i want:

Why is the margin not applied?

Thank you!

ok I assume it’s because the html.div is not looped?

I change the method to involve the html.div:

def cdr_df_loop(i):
    return html.Div([  dash_table.DataTable(
        data=cdr_df[i].to_dict('records'),
        columns=[{'id': c, 'name': c} for c in columns_cdr],

        style_header=style_header,
        style_cell=style_cell,
        style_data_conditional=style_data_conditional,
        style_table=style_table_cdr,
        fill_width=False,
        
                                        )
                ],style=margin),

… in the layout I tried :

html.Div([cdr_df_loop(i) for i in months])

and

html.Div(children=[cdr_df_loop(i) for i in months], style=margin)

I don’t get an error but nothing is displayed

Hi,

Have you tried using “30px” instead of 30 in any of your first method?

Hi!
I tried it, but unfortunately that’s not the issue

That’s odd… It worked for me fine:

Here’s my code:

from dash import Dash, html, dash_table
import plotly.express as px

app = Dash(__name__)

df = px.data.iris().head(2)

def cdr_df_loop(i):
    return dash_table.DataTable(
            data=df.to_dict("records"),
            columns=[{"id": c, "name": c} for c in df.columns],
            style_table={
                "marginBottom": 30,
                'marginTop': 30,
            },
            fill_width=False,
        )

app.layout = html.Div([cdr_df_loop(i) for i in range(3)])

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

That’s indeed odd