CODEWITHSUNDEEP
javascriptpythoncallbackwidgetbokeh
ragesz
ragesz

Reputation: 9527

Python bokeh CustomJS callback update DataTable widget

How can I update the values of my DataTable widget using Select widget? Here is my sample code:

import pandas as pd
from bokeh.io import show
from bokeh.layout import column
from bokeh.models import ColumnDataSource, CustomJS, Select
from bokeh.models.widgets import DataTable, TableColumn

df = pd.DataFrame({'a': range(10,50), 'b': range(110,150)})

source_foo = ColumnDataSource(data=df.loc[df['a'] < 25])
source_bar = ColumnDataSource(data=df.loc[df['a'] > 25])
source_fill = ColumnDataSource(data=df.loc[df['a'] < 25])

table_columns = [TableColumn(field=i, title=i) for i in ['a', 'b']]

select = Select(title='Selected value:', value='foo', options=['foo', 'bar'])

update = CustomJS(args=dict(source_fill=source_fill, source_foo=source_foo,
        source_bar=source_bar), code="""

    var data_foo = source_foo.data;
    var data_bar = source_bar.data;
    var data_fill = source_fill.data;
    var f = cb_obj.value;
    var list = ['a', 'b']

    if (f == 'foo') {
        for(var i = 0, size = list.length; i < size ; i++) {
            var e = list[i];
            delete data_fill[e];
            data_fill[e] = data_foo[e];
        }
    }
    if (f == 'bar') {
        for(var i = 0, size = list.length; i < size ; i++) {
            var e = list[i];
            delete data_fill[e];
            data_fill[e] = data_bar[e];
        }
    }

    source_fill.change.emit();
    """)

select.js_on_change('value', update)

data_table = DataTable(source=source_fill, columns=table_columns, width=150,
    height=300, row_headers=False, selectable=False)

layout = column(select, data_table)

bio.show(layout)

Here the data values are not changing if selectable=False. If I set selectable=True then the first row is refreshed. If I reorder one of the columns of DataTable (regardless of selectable) then the values are refreshed. How can refreshing be forced automatically?

Thank you!

Upvotes: 0

Views: 1356

Answers (1)

HYRY
HYRY

Reputation: 97281

You can just make the source_fill.data pointer to new data:

if (f == 'foo') { source_fill.data = source_foo.data; } if (f == 'bar') { source_fill.data = source_bar.data; }

Upvotes: 2

Related Questions