How to get value change from SelectEditor in a datatable

Hi,

I’m trying to understand how to get the updated value from a SelectEditor cell in a datatable using a CustomJS and notify the change to the ColumnDataSource immediately (to reflect the change in the plot).

In the example below, if I click on a cell of the column color and update the value, the js_on_change("patching", ...) is not triggered and the plot is not updated. Only when I click another cell that the callback is called and the plot updated.

How to trigger a js callback and get the plot updated as soon as the value of a SelectEditor cell is changed?

from bokeh.layouts import column
from bokeh.models import (
    ColumnDataSource,
    CustomJS,
    DataTable,
    IntEditor,
    SelectEditor,
    TableColumn,
)
from bokeh.plotting import curdoc, figure

# Data
COLORS = ["blue", "red", "green", "purple", "navy"]

data = dict(
    x=[1, 2, 3],
    y=[1, 2, 3],
    z=[1, 2, 3],
    size=[20, 20, 30],
    color=["blue", "red", "green"],
)

# Event callback
cjs_patching = CustomJS(
    code="""
        console.log("patching in table", cb_obj.data);   
    """
)

# ColumnDataSource
source = ColumnDataSource(data=data)
source.js_on_change("patching", cjs_patching)

# Plot
plot = figure(title="Plot 1")
plot.xaxis.axis_label = "x"
plot.yaxis.axis_label = "y"
plot.scatter("x", "y", source=source, fill_alpha=0.4, size="size", color="color")
plot.legend.location = "top_left"

# Table
columns = [
    TableColumn(field="x", title="x"),
    TableColumn(field="y", title="y"),
    TableColumn(field="z", title="z"),
    TableColumn(field="size", title="size", editor=IntEditor()),
    TableColumn(field="color", title="color", editor=SelectEditor(options=COLORS)),
]

data_table = DataTable(
    source=source,
    columns=columns,
    width=400,
    editable=True,
    auto_edit=True,
)

curdoc().add_root(column(plot, data_table))

Any help would be appreciated. Thanks.

AFAIK you have to hit enter or tab (or more generally move out of the cell) to confirm the edit. All of the integration tests seem to be consistent with this as well:

bokeh/test_cell_editors.py at branch-3.0 · bokeh/bokeh · GitHub

Thanks for your answer. I think hitting enter after the selection is good enough for the usage I’m looking for.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.