Button inside a Dash Table

Dash Python
5

Here’s an updated example that might work well with the chapter @chriddyp mentioned.

It listens to the active_cell property and updates a graph on change. Essentially, every cell acts like a button.

–

Peek 2021-03-31 09-44
Peek 2021-03-31 09-44823×872 314 KB 


import dash
import dash_core_components as dcc
from dash.dependencies import Input, Output
import dash_table
import dash_html_components as html
import plotly.express as px

app = dash.Dash(__name__)

df = px.data.gapminder()
df["id"] = df.index
dff = df[df.year == 2007]
columns = ["country", "continent", "lifeExp", "pop", "gdpPercap"]
color = {"lifeExp": "#636EFA", "pop": "#EF553B", "gdpPercap": "#00CC96"}
initial_active_cell = {"row": 0, "column": 0, "column_id": "country", "row_id": 0}

app.layout = html.Div(
    [
        html.Div(
            [
                html.H3("2007 Gap Minder"),
                dash_table.DataTable(
                    id="table",
                    columns=[{"name": c, "id": c} for c in columns],
                    data=dff.to_dict("records"),
                    page_size=10,
                    sort_action="native",
                    active_cell=initial_active_cell,
                ),
            ],
            style={"margin": 50},
        ),
        html.Div(id="output"),
    ]
)


@app.callback(
    Output("output", "children"), Input("table", "active_cell"),
)
def cell_clicked(active_cell):
    if active_cell is None:
        return dash.no_update

    row = active_cell["row_id"]
    col = active_cell["column_id"]
    country = df.at[row, "country"]
    y = col if col in ["pop", "gdpPercap"] else "lifeExp"

    fig = px.line(
        df[df["country"] == country], x="year", y=y, title=" ".join([country, y])
    )
    fig.update_layout(title={"font_size": 20})
    fig.update_traces(line=dict(color=color[y]))

    return dcc.Graph(figure=fig)


if __name__ == "__main__":
    app.run_server(debug=True)
5 Likes