Unable to display tabs of DataTable inline in Jupyter notebook

Hi all:

I am a newbie here. I have several pandas dataframe that I want to display within several tabs inline in a jupyter notebook.

Here is the code:

from bokeh.models.widgets import DataTable, DateFormatter, TableColumn, Panel, Tabs

from bokeh.io import output_notebook, show

from bokeh.models import ColumnDataSource

from bokeh.plotting import figure

from bokeh.resources import INLINE


source = ColumnDataSource(train.head())

columns = [TableColumn(field=col, title=col) for col in train.columns.tolist()]

data_table = DataTable(source=source, columns=columns, width=400, height=280)

tab1 = Panel(child=data_table, title=“Train”)

source = ColumnDataSource(prop.head())

columns = [TableColumn(field=col, title=col) for col in prop.columns.tolist()]

data_table = DataTable(source=source, columns=columns, width=len(columns)*100, height=280)

tab2 = Panel(child=data_table, title=“Properties”)

tabs = Tabs(tabs=[tab1, tab2])


If I save the file as a html file, it will display ok, but I can’t get it to display online, with the error message:

Javascript error adding output!

Error: SlickGrid’s ‘enableColumnReorder = true’ option requires jquery-ui.sortable module to be loaded

See your browser Javascript console for more details.

When I first ran the code, I have all the tabs stack on top of one another. I later update to Bokeh 0.12.7, then I couldn’t display inline anymore. Here are the packages I am running:
Python 3.6.1 :: Anaconda custom (64-bit)

Ubuntu 16.04 LTS






Thanks in advance for all your help!