0

Tengo un datatable y me gustaría crear un pop-up como un dash bootstrap Modal al hacer clic en él:

El código original, en sto.py es:

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

Pero solo me da la modal por debajo de la tabla. No como una pop-up como en la documentacion.

Entonces intenté

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",
        )

Pero active_cell queda como None.

1 respuesta 1

0

debes colocar establecer el valor de @app.layout antes de definir el @app.callback.

prueba colocar @app.layout = layout (tu función layout) antes de @app.callback

Saludos,

3
  • Muchas gracias para tu respuesta. Intenté prueba colocar @app.layout = layout() (mi función layout) antes de @app.callback, moviendo la función y la @ antes de la función de actualización. pero obtengo: @app.layout = layout() SyntaxError: invalid syntax. Tal vez no tomé tu consejo muy bien. Espero que estas bien cualquier donde sea. el 4 abr. 2020 a las 11:33
  • Hola, Entendido, hazlo sin el '@', se me paso ese detalle de tu pregunta.
    – Franklin
    el 5 abr. 2020 a las 3:36
  • En efecto, con from ..server import app no hay el error. Pero todavía no me permite hacer un pop-up. Puesto al dia mi pregunta el 5 abr. 2020 a las 22:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.