title: How to make a pop up when clicking on a line of a datatable?
body: <p>I have a datatable and I would like to create a pop-up like a <a href="https://dash-bootstrap-components.opensource.faculty.ai/docs/components/modal/" rel="nofollow noreferrer">dash bootstrap Modal</a> when clicking on it:</p>
  
  <p>So I tried to update the datatable when clicking on the cell by calling an empty Modal:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>But it only gives me the modal underneath the board. Not like a pop-up like in the documentation.</p>
  
  <p>So I tried </p>
  
  <pre><code>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",
          )
  </code></pre>
  
  <p>But <code>active_cell</code> stays as 'None', even when clicking away, or on another row, or double-clicking</p>