You can use Pages, even if it’s a single page app.
You don’t need to use the pages folder - set: pages_folder=""
:
app = Dash(__name__, use_pages=True, pages_folder="")
You can register the layout as a page like this, then display it in dash.page_container:
dash.register_page("home", layout=layout, path="/")
app.layout = html.Div(dash.page_container)
Here’s a complete example. Note that the the user_id
from the URL will be a string, so it either needs to be converted to a number – or it may be easier to make the UserID
in the df
a string.
import dash
import pandas as pd
from dash import Dash, dcc, dash_table, Input, Output, callback, html, no_update
# Example data
df = pd.DataFrame({
'UserID': [1, 2, 3, 4, 5, 6],
'SessionID': [1001, 1002, 1003, 1004, 1005, 1006],
'Group': ["A", "A", "A", "B", "B", "B"],
'Value': [25.94, 73.79, 22.76, 32.69, 15.82, 8.11]
})
df["id"] = df["UserID"] # for dash_table's row_id
app = Dash(__name__, use_pages=True, pages_folder='')
def layout(**kwargs):
user_id = kwargs.get("user_id")
if user_id:
try:
user_id= int(user_id)
except ValueError:
print(f"{user_id} must be an integer")
if user_id is None or user_id not in df["id"].values:
user_id = df["id"].values[0]
selected_user_row_ix = df.index[df['UserID'] == user_id].tolist()[0]
user_table = dash_table.DataTable(
id="user-select-table",
columns=[
{"name": "User ID", "id": "UserID"},
{"name": "Session ID", "id": "SessionID"},
{"name": "Group", "id": "Group"},
{"name": "Value", "id": "Value"},
],
fixed_columns={"headers": True, "data": 0},
data=df.to_dict("records"),
active_cell = {
"row": selected_user_row_ix,
"column": 0
},
is_focused = True
)
return(html.Div([
dcc.Location(id="url", refresh=False),
html.H1('Hello Dash'),
html.Div(f'You have selected user: {user_id}.', id="user-id-message"),
user_table
]))
dash.register_page("home", layout=layout, path="/")
app.layout = html.Div(dash.page_container)
@callback(
Output("url", "search"),
Output("user-id-message", "children"),
Input("user-select-table", "active_cell"),
prevent_initial_call=True
)
def update_selected_user(active_cell):
if not active_cell:
return(no_update, "Select a user")
selected_user_id = active_cell.get("row_id")
new_msg = f'You have selected user: {selected_user_id}.'
return(f"?user_id={selected_user_id}", new_msg)
if __name__ == '__main__':
app.run(debug=True)