I am trying to create a Bokeh datatable that is linked to a select widget using a customJS callback. The idea is that when I change the select, the data table will update to show only the relevant rows that correspond with chosen select value. My Code is as follows:

from bokeh.io import output_file, show
from bokeh.layouts import widgetbox
from bokeh.models.widgets import Select, DataTable, TableColumn
from bokeh.models.sources import ColumnDataSource, CDSView
from bokeh.models import CustomJS


output_file("CatDog.html")




select = Select(title="Animal", options=["Cat","Dog"])

source=ColumnDataSource(data=dict(Animal=["Cat","Cat","Cat","Cat","Dog","Dog","Dog","Dog",],Breed=["Siamese","Persian","Bengal","Burmese","Lab","Golden", "Poodle","Pug"]))

filteredSource = ColumnDataSource(data=dict(Animal=[],Breed=[]))

columns = [TableColumn(field="Animal",title="Animal"),TableColumn(field="Breed",title="Breed",sortable=True)]

callback = CustomJS(args=dict(source=source,filteredSource = filteredSource), code="""
var data = source.data;
var f = cb_obj.value;
var d2 = filteredSource.data;
d2['Animal']=[]
d2['Breed']=[]


for(i = 0; i < data['Animal'].length;i++){

if(data['Animal'][i]==f){

    d2['Animal'].push(data['Animal'][i])
    d2['Breed'].push(data['Breed'][i])
}

}

alert(d2['Breed'])
filteredSource.change.emit()

""")

select.js_on_change('value',callback)

data_table=DataTable(source=filteredSource,columns=columns )
data_table_unfiltered=DataTable(source=source,columns=columns )
show(widgetbox(data_table,select,data_table_unfiltered))

The alert correctly displays the rows that I would expect depending on which category select is on but the "filteredSource" DataTable does not update, it stays blank. Any guidance would be greatly appreciated!

solution

It seems to make this work, you need to trigger a change on the Data Table itself. This question has actually been asked before here: Bokeh DataTable won't update after trigger('change') without clicking on header

None the less, rearranging your code slightly to the below fixes the problem (using bokeh 0.12.14)

from bokeh.io import output_file, show
from bokeh.layouts import widgetbox
from bokeh.models.widgets import Select, DataTable, TableColumn
from bokeh.models.sources import ColumnDataSource, CDSView
from bokeh.models import CustomJS


output_file("CatDog.html")

select = Select(title="Animal", options=["Cat","Dog"])

source=ColumnDataSource(data=dict(Animal=["Cat","Cat","Cat","Cat","Dog","Dog","Dog","Dog",],Breed=["Siamese","Persian","Bengal","Burmese","Lab","Golden", "Poodle","Pug"]))

filteredSource = ColumnDataSource(data=dict(Animal=[],Breed=[]))

columns = [TableColumn(field="Animal",title="Animal"),
           TableColumn(field="Breed",title="Breed",sortable=True)]


data_table=DataTable(source=filteredSource,columns=columns, width=800 )
data_table_unfiltered=DataTable(source=source,columns=columns, width=800 )

callback = CustomJS(args=dict(source=source,
                              filteredSource=filteredSource,
                              data_table=data_table), code="""
var data = source.data;
var f = cb_obj.value;
var d2 = filteredSource.data;
d2['Animal']=[]
d2['Breed']=[]


for(i = 0; i < data['Animal'].length;i++){

if(data['Animal'][i]==f){

    d2['Animal'].push(data['Animal'][i])
    d2['Breed'].push(data['Breed'][i])
}

}

filteredSource.change.emit()
// trigger change on datatable
data_table.change.emit()

""")
select.js_on_change('value',callback)
show(widgetbox(data_table,select,data_table_unfiltered))