How to center-justify a table in plotly dash framework?

user_12860953 0
Viewed 4516

I am new to dash, and am trying to center-justify a table I create with a function. The data for the table I already am taking from a SQL DB. In the dash Layout I tried to use styling for the table itself, but it doesn't work. The styling worked only for the text on the page. Df is the dataframe which I am not posting, as it is irrelevant for the styling. Do I need to apply the styling in the Layout or when creating the table in the function?

def generate_table(dataframe, max_rows=1000):
    return html.Table([
        html.Thead(
            html.Tr([html.Th(col) for col in dataframe.columns])
        ),
        html.Tbody([
            html.Tr([
                html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
            ]) for i in range(min(len(dataframe), max_rows))
        ])
    ])


app.layout = html.Div(children=[
    html.H2(
        children='Products',
        style={
            'textAlign' : 'center' 
        }
    ),
    generate_table(df)
])
plotly-dash plotly
1 Answers

An easy fix is to add style={'marginLeft': 'auto', 'marginRight': 'auto'} to html.Table. So your function would become:

def generate_table(dataframe, max_rows=1000):
    return html.Table([
        html.Thead(
            html.Tr([html.Th(col) for col in dataframe.columns])
        ),
        html.Tbody([
            html.Tr([
                html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
            ]) for i in range(min(len(dataframe), max_rows))
        ])
    ], style={'marginLeft': 'auto', 'marginRight': 'auto'})

A better idea would be to add className="center" and add the following to a .css file:

.center {
  margin-left: auto;
  margin-right: auto;
}
user_15236930
Related