dave on Nostr: Below is a sample template for a python web application using Dash: import dash ...

Below is a sample template for a python web application using Dash:

import dash
import dash_core_components as dcc
import dash_html_components as html

# 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
)
],