DataTable Button/Link to Modal

Dash Python
1

Hi everyone!

I have a DataTable that, when an active cell is clicked, will generate graphs, create a new DataTable below it with extra details, all sorts of stuff.

But being on one page is really cluttered and not very intuitive.

So I’m thinking of perhaps an additional column that can have a button or a hyperlink that will execute Modal visibility, and all of the additional details will then be in the Modal.

Could you please point me to any examples or readings on how to include links within a DataTable that will execute a callback as described above?

I’ll keep scouring through the materials and if I find my answer, I’ll update here as well.

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

3

You can go that route, or you can design some javascript that opens a pop-up with the target page.

$('.dash-table tr>td:nth-child(5)').on('click', function () { window.open('<url>/<variables>', 'my pop data')})

And with some css tricks, you can make it have a pointer cursor, and even change the font of the specific column.

.dash-table tr>td:nth-child(5) {
    font-color: blue;
    text-decoration: underline;
    cursor: pointer;
}

You could even just design a clientside_callback to open the popup instead of the custom javascript, similar flow to above by @AnnMarieW.