Custom JS callback to change DataTable column visibility

[astathis]

I have a multi choice widget in which the options are columns in a data table. When the option is selected I would like to show those columns in the data table and hide the rest of the columns. Here is my code so far

import pandas as pd
from bokeh.plotting import figure, output_file, show
from bokeh.models import ColumnDataSource, HoverTool,CustomJS, Div, Legend, LegendItem,DatetimeTickFormatter, CDSView, GroupFilter,TabPanel, Tabs, MultiChoice,DateRangePicker
from bokeh.models.widgets import Select, DataTable, TableColumn, HTMLTemplateFormatter, FileInput
from bokeh.layouts import row, column, layout
from bokeh.transform import factor_cmap, factor_mark

df=pd.DataFrame({"Li":[10,20,30,40,50,60,70,80,90,100],"Be":[1,2,3,4,5,6,7,8,9,10],"Sc":[0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1.0]})

filtered_table_data=df[["Li","Be"]]

filtered_table_source= ColumnDataSource(data=filtered_table_data)

filtered_table_cols=[]

filtered_table_cols.append(TableColumn(field='Li', title='Li', width=750, visible=False))
filtered_table_cols.append(TableColumn(field='Be', title='Be', width=750,visible=False))
 
filtered_table=DataTable(source=filtered_table_source, columns=filtered_table_cols)

multi_choice = MultiChoice(value=[], options=df.columns[:-1].tolist(), title='Select elements:')

callback2 = CustomJS(args=dict(multi_choice=multi_choice, filtered_table=filtered_table), code="""
    for (var i=0; i<filtered_table.columns.length; i++)
    {
     for (var j=0; j<multi_choice.value.length;j++)
     {
             if (filtered_table.columns[i].field==multi_choice.value[j])
             {
                 filtered_table.columns[i].visible=True
             }
     }
    }             
""")

multi_choice.js_on_change("value",callback2)

l2=layout([multi_choice, filtered_table])

show(l2)

In this example what I would like to happen is if Be was selected with the multi choice widget then only the column Be would be visible in the data table. So far nothing happens when I select options with the multi choice widget

Posted question on Stack Overflow: javascript - Bokeh CustomJS callback to change data table column visibility to True - Stack Overflow

[Bryan]

@astathis It is very often the case that with runnable code, someone here can diagnose problems very quickly. Please update your post to include a complete Minimal Reproducible Example that can be run to investigate directly.

[astathis]

I edited my code so it should be runnable

[gmerritt123]

In the JS Callback:

True → true

Yup… I’ve done that one too many times…

My recommendation is to always use the browser console when testing CustomJS, and using console.log() (i.e. print statements) when you need to investigate an object or to try and see where it’s breaking. ‘True is not defined’ error was right there when I first ran your code.

[Gen]

Here’s a list I use when debugging Javascript calls from bokeh:

• Always end your JS statements with ";", just in case
  In your case, filtered_table.columns[i].visible=true;

• console.log() as @gmerritt123 mentioned

• Depending on how you call your code, <property>.change.emit(); is sometimes needed to “push” the changes (not in this particular example).

• This might add a layer of complexity, but I’ve found it significantly easier to debug it’s a lot easier when you have the JS code in a separate file as you will have Javascript syntax highlighting depending on your IDE.
  In this case, you quickly would have found this error with syntax highlighting.

• Make sure you are using Javascript syntax as opposed to Python syntax (separating the files and using some kind of IDE helps in this immensely).