unable to make Datatable responsive -Bokeh

Question

I am trying to make bokeh datatable responsive by making sizing_mode attribute to "stretch_both" . but unlike other models its not working with datatable.width of the datatable is shown as fixed

data_table = DataTable(
    source=sourceDT,
    columns=columns,
    height=200,
fit_columns=True,
    editable=False,
    index_position=None,name="DT"
)
data_table.sizing_mode = "scale_width"

how can i make this responsive .somebody please

Answer 1

Unfortunately the sizing_mode has no effect on DataTable. A work-around is a slider that sets the table width dynamically (Bokeh v1.0.4).

from bokeh.io import show
from bokeh.layouts import widgetbox
from bokeh.models import ColumnDataSource, Slider, DataTable, TableColumn, CustomJS

source = ColumnDataSource(dict(x = list(range(6)), y = [x ** 2 for x in range(6)]))
columns = [TableColumn(field = "x", title = "x"), TableColumn(field = "y", title = "x**2")]
table = DataTable(source = source, columns = columns, width = 320)
slider = Slider(start = 1, end = 100, value = 6, step = 1, title = "i", width = 300)
callback_code = """ var i = slider.value;
                    const new_data = {"x": [1, 2, 3, 4, 5], "y": [1, 4, 9, 16, 25]}
                    table.source.data = new_data
                    table.width = 320 + i * 25;  """
callback = CustomJS(args = dict(slider = slider, table = table), code = callback_code)
slider.js_on_change('value', callback)
show(widgetbox(slider, table))