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

Dash Python
1

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?

2

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("https://git.io/Juf1t")
df["id"] = df.index

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

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

listen_table = html.Div(
    [
        EventListener(
            id="el",
            events=[{"event": "dblclick", "props": ["srcElement.className", "srcElement.innerText"]}],
            logging=True,
            children=table,
        )
    ]
)

app.layout = dbc.Container(
    [
        dbc.Label("Click a cell in the table:"),
        listen_table,
        dbc.Alert("Click the table", id="out"),
        html.Div(id="event"),
    ]
)


@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)
3

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?

4

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
5

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.

6

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

2 Likes
7

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