DataTable Button/Link to Modal

Dash Python
2

Hi @MrMadium

It’s currently not possible to put components in a cell of a DataTable, however, if it’s working for you that all sorts of “stuff” happens when you click an active cell, then you could open a model from the callback based on the active cell.

Below is an example where if you click on a cell in the “State” column it will open a model.

The only thing I don’t like about this solution is if you navigate around the table with arrow keys, the model will open when you cross any cell in that column. So the active cell is not really a button. An alternate is to use the TriggerTransform from the dash-extensions library

import dash
from dash import Dash, html, Input, Output, State, dash_table
import dash_bootstrap_components as dbc
import pandas as pd

data_url = (
    "https://raw.githubusercontent.com/plotly/datasets/master/2014_usa_states.csv"
)
df = pd.read_csv(data_url)

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])


app.layout = dbc.Container(
    [
        html.H4("Table with a Modal in the State Column"),
        dash_table.DataTable(
            id="table",
            columns=[{"name": i, "id": i} for i in df.columns],
            data=df.to_dict("records"),
            style_cell=dict(textAlign="left"),
            page_size=10,
        ),
        dbc.Modal(
            [
                dbc.ModalHeader(dbc.ModalTitle("Header")),
                dbc.ModalBody(id="modal-content"),
            ],
            id="modal",
            is_open=False,
        ),
    ]
)


@app.callback(
    Output("modal-content", "children"),
    Output("modal", "is_open"),
    Input("table", "active_cell"),

)
def update_graphs(active_cell):
    if active_cell and active_cell["column_id"] == "State":
        cell_data = df.iloc[active_cell["row"]][active_cell["column_id"]]
        return f'Data: "{cell_data}" from table cell: {active_cell}', True
    return dash.no_update, False


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

table_with_modal