Bokeh datatable reorder columns

Question

When I read the Bokeh documentation on datatable the reorderable option seems to indicate that drag and drop reordering is possible.

”Allows the reordering of a table’s columns. To reorder a column, click and drag a table’s header to the desired location in the table. The columns on either side will remain in their previous order.”

I can not get this to work. Code below. Does any one know how this works?

import numpy as np
import pandas as pd

from bokeh.io import curdoc
from bokeh.layouts import column, widgetbox
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import DataTable, TableColumn

df = pd.DataFrame(columns=['x1', 'x2'])
n=10
np.random.seed(0)
df['x1'] = np.random.rand(n)
df['x2'] = np.random.rand(n)

source = ColumnDataSource(df)
columns=[TableColumn(field=Ci, title=Ci) for Ci in df.columns]
data_table = DataTable(source=source, columns=columns, name="table", sizing_mode="scale_both", reorderable=True, sortable=True, fit_columns=True)
l1 = widgetbox([data_table])

curdoc().add_root(l1)

user_3406693 · Answer

I am not sure how well it is documented, but if you look on the browser JS console, you will see the reason why:

[bokeh] – "jquery-ui is required to enable DataTable.reorderable" document.js:1

We don't automatically include jq-ui because there is no way to justify that amount of package bloat just for this one tiny feature. (Which evidently almost no-one ever tries to use, this is the first question about it in ~6 years).

So, you will need to make a template for your Bokeh app, and explicitly load jquery and jquery-ui yourself in the template. Something like:

You can see an example of using a template for a Bokeh app in the gapminder example.

Bokeh datatable reorder columns

1 Answers