How to create a new table based on a selection in another table with a JScallback?

I’m new to Bokeh and trying to link 2 tables using a JS callback. I have 2 dictionaries of which one is already a table. My goal is to click on a row in that table1 and use the index of that row to display a second table (table2) with data of dictionary 2 (data2) with the same index as selected in table 1. I already figured out how to aquire the index of a selected row in table 1, but I don’t know how to proceed in creating a new table based on that selection. Below is what I came up with so far (with example data).

from import show
from bokeh.models import ColumnDataSource, DataTable,TableColumn, Div, CustomJS
from bokeh.layouts import row, column

data1 = {'example1': [10, 11, 12], 'example2': [20, 21, 22], 'example3': [20, 21, 22]}
data2 = {'example4': ['row11', 'row21', 'row31'], 'example5': ['row12', 'row22', 'row32'], 'example6': ['row13', 'row23', 'row33']}

source = ColumnDataSource(data1)
columns = [
        TableColumn(field="example1", title="example1"),
        TableColumn(field="example2", title="example2"),
        TableColumn(field="example3", title="example3")
data_table = DataTable(source=source, columns=columns, width=400, height=280, selectable = True)

output_div = Div()
row = row(data_table, output_div)
callback = CustomJS(args=dict(row=row, output_div=output_div), code="""
    var index = cb_obj.indices
    output_div.text = "Row: " + index
source.selected.js_on_change('indices', callback)

show(column(data_table, output_div))

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