Why the application not run?
import dash
from dash import dcc, Output, Input, html, dash_table
# Initialize the app
app = dash.Dash()
# Create the layout of the page
app.layout = html.Div([
# Header
html.Div([
html.H1("My Table Report")
], style={'textAlign': 'center'}),
# Body
html.Div([
html.Div([
dcc.Tabs(id="tabs", children=[
dcc.Tab(label="Table Report", value="table"),
])
]),
html.Div(id="tab-content")
])
])
# Create callback for table tab
@app.callback(Output(component_id='tab-content', component_property='children'),
[Input(component_id='tabs', component_property='value')])
def render_content(tab):
if tab == 'table':
return html.Div([
# Insert Dash DataTable here
html.Div(
children=[
dash_table.DataTable(
id='table',
columns=[
{'name': 'Name', 'id': 'name'},
{'name': 'Type', 'id': 'type'},
{'name': 'Score', 'id': 'score'},
],
data=[
{'name': 'Student 1', 'type': 'A', 'score': 5},
{'name': 'Student 2', 'type': 'A', 'score': 5},
{'name': 'Student 3', 'type': 'B', 'score': 4},
{'name': 'Student 4', 'type': 'B', 'score': 3},
],
style_cell={'textAlign': 'center'},
row_selectable='single',
filter_action="native",
sort_action="native",
sort_mode='multi',
column_selectable="single",
row_collapsable=True
)
],
updatemenus=[
{
'buttons': [
{
'args': [
{'visible': [True, False]},
{'title': 'Type A'}
],
'label': 'Type A',
'method': 'update'
},
{
'args': [
{'visible': [False, True]},
{'title': 'Type B'}
],
'label': 'Type B',
'method': 'update'
}
],
'direction': 'down',
'showactive': True,
'x': 0,
'xanchor': 'left',
'y': 1.2,
'yanchor': 'top'
},
],
# define the corresponding x, y axis
xaxis={'visible': False},
yaxis={'visible': False},
)
])
# Run the app
if __name__ == '__main__':
app.run_server(debug=True)