Bokeh DataTable won't update after trigger('change') without clicking on header
Question: Bokeh version: 0.10 Python: 3.4 Jupiter: 4.x

Goal: create a table that only shows data selected from a scatter plot

Problem: the DataTable only refreshes itself after being clicked on despite
the: s2.trigger('change'). In other examples on Bokeh site one plot will
update another using this technique: see
<http://bokeh.pydata.org/en/latest/docs/user_guide/interaction.html#customjs-
for-selections>

the code below should run in a Jupyter notebook if you're using the above
mentioned versions.

and, thanks for any help. Joe

    
    
        from bokeh.io import output_notebook, show
        from bokeh.plotting import figure
        from bokeh.models import CustomJS, ColumnDataSource
        from bokeh.models.widgets import DataTable, TableColumn
        from bokeh.io import vform
    
        output_notebook()
    
        x = list(range(-20, 21))
        y0 = [abs(xx) for xx in x]
    
        # create a column data source for the plots to share
        source = ColumnDataSource(data=dict(x=x, y0=y0))
        s2 = ColumnDataSource(data=dict(x=[1],y0=[2]))
    
        source.callback = CustomJS(args=dict(s2=s2), code="""
                var inds = cb_obj.get('selected')['1d'].indices;
                var d1 = cb_obj.get('data');
                var d2 = s2.get('data');
                d2['x'] = []
                d2['y0'] = []
                for (i = 0; i < inds.length; i++) {
                    d2['x'].push(d1['x'][inds[i]])
                    d2['y0'].push(d1['y0'][inds[i]])
                }
                s2.trigger('change');
            """)
    
    
        # create DataTable
    
        columns = [
                TableColumn(field="x", title="x"),
                TableColumn(field="y0", title="y0"),
            ]
        dt = DataTable(source=s2, columns=columns, width=300, height=300 )
    
        # create a new plot and add a renderer
        TOOLS = "box_select,lasso_select,help"
        left = figure(tools=TOOLS, width=300, height=300)
        left.circle('x', 'y0', source=source)
    
    
        show(vform(left,dt))
    


Answer: only s2 change is triggered in the `CustomJS`, so it's normal that dt doesn't
change.

this will do the job, dt moved above the JS, dt is passed in the JS, and dt is
triggered :

    
    
    dt = DataTable(source=s2, columns=columns, width=300, height=300 )
    source.callback = CustomJS(args=dict(s2=s2, dt=dt), code="""
            var inds = cb_obj.get('selected')['1d'].indices;
            var d1 = cb_obj.get('data');
            var d2 = s2.get('data');
            d2['x'] = []
            d2['y0'] = []
            for (i = 0; i < inds.length; i++) {
                d2['x'].push(d1['x'][inds[i]])
                d2['y0'].push(d1['y0'][inds[i]])
            }
            console.log(dt);
            s2.trigger('change');
            dt.trigger('change');
        """)
    

