How to display a Dash table inside an HTML container?

Question

I have a small issue with Dash Table.

What I want to do is to put the table "records" inside the HTML container "graphique3". I have two problems:

• First, when I simply want to display the table, nothing appears, it's just a copy/paste of a template here: https://dash.plotly.com/datatable/style. It works when I make a new file though.

• Second, if I put my table code inside the container "graphique3" I get this error message

  SyntaxError: cannot assign to expression here. Maybe you meant '==' instead of '='?" for data = OrderedDict

I don't understand what is the issue, since, as mentioned before, it works fine in a new file.

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

from dash import Dash, html, dcc, dash_table
import plotly.express as px
import pandas as pd
import dash_daq as daq
from collections import OrderedDict


app = Dash(__name__)

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "test4", "test5", "test6","test7","test8","test9"],
    "Amount": [4, 1, 2, 2, 4, 5, 9, 5, 6],
})

fig = px.bar(df, x="Fruit", y="Amount", barmode="group")

#Réduire l'espace entre les éléments
fig.update_layout(
    margin=dict(l=5, r=5, t=5, b=5),
    paper_bgcolor="white",
),

# Table to put inside the container "graphique4"
data = OrderedDict(
    [
        ("Date", ["2015-01-01", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"]),
        ("Region", ["Montreal", "Toronto", "New York City", "Miami", "San Francisco", "London"]),
        ("Temperature", [1, -20, 3.512, 4, 10423, -441.2]),
        ("Humidity", [10, 20, 30, 40, 50, 60]),
        ("Pressure", [2, 10924, 3912, -10, 3591.2, 15]),
    ]
)

df = pd.DataFrame(data)

app = Dash(__name__)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],

    style_cell_conditional=[
        {
            'if': {'column_id': c},
            'textAlign': 'left'
        } for c in ['Date', 'Region']
    ],
    style_data={
        'color': 'black',
        'backgroundColor': 'white'
    },
    style_data_conditional=[
        {
            'if': {'row_index': 'odd'},
            'backgroundColor': 'rgb(220, 220, 220)',
        }
    ],
    style_header={
        'backgroundColor': 'rgb(210, 210, 210)',
        'color': 'black',
        'fontWeight': 'bold'
    }
)

app.layout = html.Div(className='dashboard', children=[

    # ------ Graphiques --------

        #Première row
        html.Div(className='row1', style={'display': 'flex', 'justify-content': 'center'}, children=[

            # Graphiques
            html.Div(className='graphique1',children=[
                dcc.Graph(
                    id='exemple-graph1',
                    figure=fig,
                    style={'flex-grow': '1', 'width':'900px'}
                ),
            ]),

            html.Div(className='graphique2',children=[
                dcc.Graph(
                    id='exemple-graph2',
                    figure=fig,
                    style={'flex-grow': '1', 'width':'900px'}
                ),
            ]),
        ]),

        # Deuxième row
        html.Div(className='row2', style={'display': 'flex', 'justify-content': 'center'}, children=[

            # Graphiques
            html.Div(className='graphique3', children=[
                dcc.Graph(
                    id='exemple-graph3',
                    figure=fig,
                    #style={'display': 'flex', 'width': '500px'}
                ),
            ]),

            html.Div(className='graphique4', children=[
                daq.Gauge(
                    color={"gradient": True, "ranges": {"green": [0, 6], "yellow": [6, 8], "red": [8, 10]}},
                    value=2,
                    label='Temps avant la prochaine relève',
                    max=10,
                    min=0,
                ),
            ]),

            html.Div(className='graphique5', children=[
                dcc.Graph(
                    id='exemple-graph5',
                    figure=fig,
                )
            ]),
        ]),
])

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



#lien tutoriel : https://towardsdatascience.com/dash101-part-2-prettify-dash-dashboard-with-css-and-python-3866c069a3b6

Answer 1

The following code fragment taken from the Dash Tutorial website generates a HTML table.

def generate_table(dataframe, max_rows=10):
    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))
        ])
    ])

Within your code you then call the function to generate the table and pass the dataframe as a parameter.

html.Div(className='graphique3', children=[
    dcc.Graph(
        id='exemple-graph3',
        figure=fig,
        #style={'display': 'flex', 'width': '500px'}
    ),
    generate_table(df)
]),