How to make a pop up when clicking on a line of a datatable?

Viewed 1877

I have a datatable and I would like to create a pop-up like a dash bootstrap Modal when clicking on it:

So I tried to update the datatable when clicking on the cell by calling an empty Modal:

import dash_table
import os
import pandas as pd
from dash.dependencies import Input, Output, State
import dash_html_components as html
import dash_bootstrap_components as dbc

from ..server import app

PROJECT_ROOT = os.path.abspath(os.path.dirname(__file__))
DATA_PATH = os.path.join(PROJECT_ROOT, '../data/')
df = pd.read_csv(DATA_PATH + 'tickers_september_2017_red.csv')


def layout():
    return html.Div([
        dash_table.DataTable(
            id='table',
            columns=[{"name": i, "id": i} for i in df.columns],
            data=df.to_dict('records'),
        ),
        dbc.Modal(
            [
                dbc.ModalHeader("Header"),
                dbc.ModalBody("This is the content of the modal"),
                dbc.ModalFooter(
                    dbc.Button("Close", id="close", className="ml-auto")
                ),
            ],
            id="modal",
        )
    ])


@app.callback(Output('modal', 'is_open'),
              [Input('table', 'active_cell'),
               Input('close', 'n_clicks')],
              [State("modal", "is_open")])
def toggle_modal(n1, n2, is_open):
    print("n1: ", n1, " n2: ", n2)
    if n1 or n2:
        return not is_open
    return is_open

But it only gives me the modal underneath the board. Not like a pop-up like in the documentation.

So I tried

import dash_table
import os
import pandas as pd
from dash.dependencies import Input, Output, State
import dash_html_components as html
import dash_bootstrap_components as dbc

from ..server import app

PROJECT_ROOT = os.path.abspath(os.path.dirname(__file__))
DATA_PATH = os.path.join(PROJECT_ROOT, '../data/')
df = pd.read_csv(DATA_PATH + 'tickers_september_2017_red.csv')


def layout():
    return html.Div([
        dash_table.DataTable(
            id='table',
            columns=[{"name": i, "id": i} for i in df.columns],
            data=df.to_dict('records'),
        ),
        dbc.Modal(
            [
                dbc.ModalHeader("Header"),
                dbc.ModalBody("This is the content of the modal"),
                dbc.ModalFooter(
                    dbc.Button("Close", id="close", className="ml-auto")
                ),
            ],
            id="modal",
        )
    ])


@app.callback(Output('modal', 'children'),
              [Input('table', 'active_cell'),
               Input('close', 'n_clicks')],
              # [State('modal', 'is_open')]
              )
def update_graph(active_cell, n_clicks):
    print("active_cell: ", active_cell)
    if active_cell is not None:
        row = df.iloc[[active_cell.get("row")]]
        return dbc.Modal(
            [
                dbc.ModalHeader(row['Name'].values[0]),
                dbc.ModalBody("This will be something more interesting"),
                dbc.ModalFooter(
                    dbc.Button("Close", id="close", className="ml-auto")
                ),
            ],
            id="modal",
        )

But active_cell stays as 'None', even when clicking away, or on another row, or double-clicking

1 Answers

I had this same issue and resolved it by importing their external style sheet. Their styling will enable the modal to pop up as expected.

import dash
import dash_bootstrap_components as dbc


external_stylesheets = [dbc.themes.BOOTSTRAP]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
Related