Jupyter - get selected row index in a Datapane DataTable with JavaScript/jquery?

51 Views Asked by At

I use the Datapane widget (https://github.com/datapane/datapane/) in my Jupyter Notebook to display an interactive table. Unfortunately, Datapane does not offer the ability to register an event when the user selects a row in the table. But, as I could see in the Web Developer Tools > Inspector, the selected row is highlighted and gets a different css class value.

This is some sample code to output a table with random numbers and visualize it with datapane:

import pandas as pd
import numpy as np
import datapane as dp

df = pd.DataFrame(
    {
        "A": np.random.normal(-1, 1, 5000),
        "B": np.random.normal(1, 2, 5000),
    }
)

dp.DataTable(df)

This is the table visualized with the Datapane widget. As you can see, row number 4 is highlighted, because it is selected. enter image description here

The selected row does not have the css class="rgRow" but class="rgRow focused-rgRow" which contains two child divs that even include the row and column value. enter image description here

Is there any possibility in Jupyter to include a JavaScript part that can register/listen to this css class and get the row value? I try to find a possibility to somehow detect which row the user selects.

0

There are 0 best solutions below