Filter DataTable with Select

[Reinhold83]

Hello,

I have a minimal sample below to support my question.
I have a collection of dataframes in a dictionary that I used to generate DataTable(s) and storage them in an array with the def fDP, then storage in dictionaries the panels and tabs in order to filter them later with the Select widget as in the example. It works fine courtesy of @gmerritt123 in a previous topic. Still I would like to use another Select widget to filter the tabs even further, in that case by product. I tried few different approaches and none worked out, if someone could help me out please.

I added the second Select widget at the end of the code, to give a better idea what I have in mind.

d1 = {'table1' : [['Product1', 0], ['Product2',0]],
     'table2': [['Product1', 1], ['Product2',1]],
     'table3': [['Product1', 0], ['Product2',3]]}
 
dfs = {k:pd.DataFrame(v, columns=['Product', 'value']) for k, v in zip(d1.keys(), [d1[t] for t in d1.keys()])}
 
 
def fDP(df):
    tables = []
    for s in df.keys():
        src = ColumnDataSource(df[s])
        cls = [TableColumn(field=c, title=c) for c in df[s].columns]
        dt = DataTable(source=src,columns=cls, width=600, height=200,editable=True)
 
        tables.append(dt)
    
    return tables
 
plist = list(dfs['table1']['Product'].unique())
 
tables1 = fDP(dfs)
panels1 = {t: Panel(child=p, title='') for t, p in zip(dfs.keys(), tables1)}
tabs1 = Tabs(tabs=[x for x in panels1.values()], align='start', width=10)
 
 
ls = [x for x in dfs.keys()]
 
sel1 = Select(title='Select Check:', align='start', value=ls[0], options=ls, width=195, margin = (15, 5, 0, 0))
 
colT = column([sel1, tabs1], spacing=-26)
 
 
sel1.js_on_change('value', CustomJS(args={'sel':sel1, 'tab':tabs1, 'diPanel':panels1}
        ,code='''
        var sv = sel.value
        tab.tabs = [diPanel[sv]]
        '''))
show(colT)
 
selP = Select(title='Select Product:', align='start', value=plist[0], options=plist, width=195, margin = (15, 5, 0, 0))

[gmerritt123]

You likely want to incorporate either GroupFilter or CustomJSFilter → Providing data — Bokeh 2.4.3 Documentation

The general idea is:

• Initialize a GroupFilter with “Product” as column name and the initial select item (i.e. plist[0] as the group.
• Initialize a CDSView with the GroupFilter as the only applied filter
• Assign that CDSView to the DataTable (e.g. dt = DataTable(… view=your_view)
• Write some CustomJS that will trigger when the value of your select widget changes, and will perform the action of updating the group property of your GroupFilter instance to the current Select widget value
• Be sure to emit changes at the end of the callback (source.change.emit()) so the filtering “action” is refreshed"

Alternatively with CustomJSFilter you can do things like filter via checkbox group (filter for all checked off items etc) but you need to write more JS. For your specific need/question GroupFilter is probably the simplest/easiest to implement.