JS callbacks for DataTable

Community Support
1

Hi!

I want to get a simple callback going for when I click on a row of a DataTable. After some research I put together the following:

 source = ColumnDataSource(df)
    columns = [
        TableColumn(field="title", title="Titel", width=500),
        TableColumn(field="source", title="Quelle", width=200),
        TableColumn(field='string', title="Keywords", width=300)
    ]
    data_table = DataTable(source=source, columns=columns, width=1000, height=280, fit_columns=False, index_position=None, selectable="checkbox")

    callback = CustomJS(code="""

        console.log("test")
        
    """)

    source.selected.js_on_change('selected', callback)
    layout = row(

        column(data_table)
    )
show(layout)

This will however just result in Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'n.connect') in my browser. I tried different combinations of the js_on_change, js_on_event and tried to do it with and without the .selected attribute of source. Either it doens’t work and the callback never gets triggered - or I’m just presented with a white screen and the aforementioned error message. What am I doing wrong? I just want to display some text based on what row I clicked on, but I can’t even get a console log to work.

Thanks!

2

Hi @phil,

I think the line you actually want is probably
source.selected.js_on_change('indices', callback)

It looks like what you’ve got is a combination of the new and old syntax. (See answer here: python - Bokeh Server callback from tools - Stack Overflow)

2 Likes
3

Thank you!

I guess I must have gotten things mixed up while trying to find a solution.
It works now, thanks!

2 Likes