Can I doubleclick a row in datatable to access details about this data?

Hi, I want to be able to doubleclick into a row of data and then use this to access a more viewable page of columns in the data.
I couldn’t find any details of whether this was possible or how to do it?

Hi @RConvex

This isn’t currently available in Dash, however, it’s available using EventListener from @Emil 's dash-extensions library

Here’s an example:

from dash import Dash, Input, Output, html, dash_table

import pandas as pd
import dash_bootstrap_components as dbc
import json

from dash.exceptions import PreventUpdate

from dash_extensions import EventListener

df = pd.read_csv("")
df["id"] = df.index

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

table = dash_table.DataTable(
    columns=[{"name": i, "id": i} for i in df.columns],

listen_table = html.Div(
            events=[{"event": "dblclick", "props": ["srcElement.className", "srcElement.innerText"]}],

app.layout = dbc.Container(
        dbc.Label("Click a cell in the table:"),
        dbc.Alert("Click the table", id="out"),

@app.callback(Output("event", "children"), Input("el", "event"), Input("el", "n_events"))
def click_event(event, n_events):    
    # Check if the click is on the active cell.
    if not event or "cell--selected" not in event["srcElement.className"]:
        raise PreventUpdate
    # Return the content of the cell.
    return f"Cell content is {event['srcElement.innerText']}, number of double clicks {n_events}"

@app.callback(Output("out", "children"), Input("tbl", "active_cell"))
def update_graphs(active_cell):
    return json.dumps(active_cell)

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

Hi, thanks for the response, I tried to run this test but I get the error ‘cannot import name ‘EventListener’ from ‘dash_extensions’’ even after bringing in the package?

Hi @RConvex
It turns out this is an experimental feature in dash-extensions. I think it’s really cool, and I’ve used it in an app. You can find it here: dash-extensions==0.0.61rc2

Maybe @Emil can say more on the status.

1 Like

I got busy with other things, so the component was never included in an actual release. However, I expect that it will soon. I just have to wrap up a few things and add some docs.

I have just released dash-extensions==0.0.67, which includes the EventListener component :slight_smile:


Hi @Emil or @AnnMarieW, I am using this Event Listener in a callback to take me to another page in a multipage app when I click a certain cell in a table. This part works, however when I get to the other page if I doubleclick anything I get the following error:

An object was provided as `children` instead of a component, string, or number (or list of those). Check the children property that looks something like:
  "0": {
    "props": {
      "children": {
        "props": {
          "n_events": 1

Do either of you have any clue how I could avoid this or why it’s happening? When I first open the other page if I’ve not previously doubleclicked in the event listener table I have set then I can doubleclick with no bug