How do I make a table with clickable cells in jupyter notebook?

Question

I have a table and a plot below, I need to make the plot to be updated whenever a table cell is clicked.

ipywidgets library doesn't have a dedicated table widget.

qgrid doesn't have a callback for cell selection, only for row selection (I suspect I could hack it to react to cell clicks, but I guess the efforts required are comparable to making a raw html table clickable).

pivottablejs is cool, but it is an overkill for my task.

bokeh DataTable appears to have no callbacks at all.

In Bokeh you could have a JS or Python callbacks for` DataTable` via callback attached to its `ColumnDataSource`. You can check [this post](https://stackoverflow.com/questions/55964945/chart-on-click-selection-from-data-table-in-bokeh/55970697#55970697) if it's what you want. — Tony, May 09 '19 at 10:53
@Tony Do I understand correctly that in order to have python callbacks in this solution I need to start bokeh server? — Antony Hatchkins, May 09 '19 at 11:00
Yes, Python callbacks are only possible when running Bokeh server. But It is also possible to detect cell clicks in a table using pure JS callback. See [this post](https://stackoverflow.com/questions/54426404/bokeh-datatable-return-row-and-column-on-selection-callback/55433413#55433413). The Python callback there was added to reset the indices but is not necessary anymore with the latest Bokeh v1.1.0 and can be omitted — Tony, May 09 '19 at 11:02
@Tony Starting bokeh server doesn't fit in well into my workflow and I'd prefer python callbacks, so for now I'd stick to "emulating" table with the grid of ipywidgets buttons as described here: https://stackoverflow.com/questions/37528992/place-ipywidgets-into-html-into-jupyter-notebook — Antony Hatchkins, May 09 '19 at 11:07

score 1 · Answer 1 · answered May 21 '19 at 19:52

You can usually attach Python callbacks to Javascript objects using jp_proxy_widgets almost the normal way you would do it using only Javascript.

For example here I create a "vanilla" table and attach a click callback to a table element:

You can also do something similar with your favorite Javascript library (with some caveats -- see the documentation). Please have a look at jp_proxy_widgets here:

https://github.com/AaronWatters/jp_proxy_widget

score 0 · Answer 2 · answered Sep 02 '22 at 10:15

You can do this now greatly with panel's new tabulator

Example:

import pandas as pd
import panel as pn
import numpy as np
pn.extension('tabulator')

sel_df = pd.DataFrame(np.random.randn(3, 5), columns=list('ABCDE'))

select_table = pn.widgets.Tabulator(sel_df, selection=[0, 2])

def click(event):
    print(f'Clicked cell in {event.column!r} column, row {event.row!r} with value {event.value!r}')

select_table.on_click(click) 

select_table

How do I make a table with clickable cells in jupyter notebook?

2 Answers2