Dash DataTable - Support for Click Events

Dash Python
1

Hi all.

Question about the new DataTable: is it possible to return ‘clickData’ for table cells and rows in the same way as one can for charts? This could potentially make interacting with tables better and more fluid, e.g. after clicking we could create and update secondary charts and tables based on the column-header and row-values of the cell.

Apologies if i ask this question in the wrong forum (new to Dash and the forums).

But in either case, great job creating Dash!

1 Like
2

This is not possible right now. However, once something like this this https://github.com/plotly/dash-table-experiments/pull/11 is merged in, you could render certain cells as buttons and listen to those click events.

3

Thanks for the quick clarification. Thats definitely a step in the right direction. In the meantime i think i will use dropdowns to specify the x and y values from the original table in order to create a new one.

2 Likes
4

Hi @chriddyp, are there any updates on getting click events from the rows of the datatable? thank you very much!

5

Try the active_cell property (https://dash.plot.ly/datatable/reference).

1 Like
6

Thank you, @chriddyp, that is helpful, but what about Double-Clicks?

7

@chriddyp

following link contains an example for active_cell,

I am looking for how to get row_id on active_cell event?

Thanks in advance.

2 Likes
8

Anyone knows if this exists? Or still no information on that?

1 Like
9

Here’s a simple working example for Click Events with Dash DataTable:

You can run it here: https://replit.com/@jackparmer1/NarrowAccomplishedDividend#main.py

Code:

import dash
import dash_table as dt
import pandas as pd
import dash_bootstrap_components as dbc
import json
from dash.dependencies import Input, Output

df = pd.read_csv('https://git.io/Juf1t')

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

app.layout = dbc.Container([
    dbc.Label('Click a cell in the table:'),
    dt.DataTable(
        id='tbl', data=df.to_dict('records'),
        columns=[{"name": i, "id": i} for i in df.columns],   
    ),
    dbc.Alert("Click the table", id='out'),
])

@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(host='0.0.0.0', port=5000, debug=True)

image
image1082×724 54 KB

10

Hello,
Could the active_cell property be used to display plots from two different data frames in a Dash app? This would depend on which column of the data table that’s clicked. Thanks in advance!

11

Hi @Rusty_Shackleford and welcome to the Dash community :slightly_smiling_face:

You might find this post helpful: Button inside a Dash Table - #5 by AnnMarieW

12

Hello @AnnMarieW, yes I am making a dashboard using the cell_clicked function and the active_cell property. Let’s take your example of the “countries” app displaying graphs such as ‘life expectancy’ and ‘gdp’ by country. Do you think it would be feasible to use such a function to output graphs from two different data frames? Say if ‘life expectancy’ and ‘gdp’ were contained in two separate pandas data frames that could not be combined due to formatting differences?

13

@Rusty_Shackleford
I’m not sure exactly what you are getting at. If you use the active cell to trigger the callback, you can use two different dataframes in the callback to create the data to update one or more figures.

If you post a minimal example I might be able to help more.

14

The problem with Jack’s approach is that nothing happens when you click on a cell which is already active. Anyone has a better idea?

15

Hi @MishaR and welcome to the Dash communty :slight_smile:

You are correct - the DataTable does not support click events.
I recommend using Dash AG Grid instead. Here is an example of how to select a cell:

You can also have buttons and other components in cells:

1 Like
16

Thank you, @AnnMarieW ! I’ll give this a try,.