Bokeh DataTables overlapping in both Row and Gridplot

Question

I want to display two DataTables in one row, but when I do so, the two DataTables are not spaced apart and overlap. Does anyone know how I can prevent this?

In the example code below two datatables are created; however, you cannot read the value column of table1 because table2 is directly on top of it.

x = [1,2,3]
y1 = np.random.randn(3)
y2 = np.random.randn(3)

def create_data_table(x,y):
    source = ColumnDataSource(data=dict())
    source.data = {'index': x, 'value':y}
    columns = [TableColumn(field="index", title="index"),TableColumn(field="value", title="value")]
    data_table = DataTable(source=source, columns=columns)
    table = widgetbox(data_table)
    return table
table1 = create_data_table(x,y1)
table2 = create_data_table(x,y2)
show(row(table1,table2))

screen shot 2017-03-20 at 11 22 04 am

-------------------------------------------- EDIT ---------------------------------------------------

The above example does not have enough columns/data to fully illestrate the problem. Here is an example that does:

from bokeh.models import ColumnDataSource,TableColumn,DataTable
from bokeh.layouts import widgetbox,row
from bokeh.io import show
import random
x = [1,2,3]
def random_list():
    return [round(random.random(),3) for i in range(3)]

def create_data_table(x):
    source = ColumnDataSource(data=dict())
    source.data = {'index': x, 'value':random_list()}
    width=60
    columns = [TableColumn(field="index", title="index", width=width),
               TableColumn(field="value", title="value", width=width)]
    for i in range(4):
        source.data[str(i)] = random_list()
        columns.append(TableColumn(field=str(i), title=str(i), width=width))
    data_table = DataTable(source=source, columns=columns, width=width*6,row_headers=None)
    table = widgetbox(data_table)
    return table
table1 = create_data_table(x)
table2 = create_data_table(x)
show(row(table1,table2))

Pablo Reyes · Accepted Answer · 2017-03-21T18:06:34.017

Seems like each DataTable wants to use the whole plot width. One way around this is to assign some width values to the columns and to the whole table:

from bokeh.models import ColumnDataSource,TableColumn,DataTable
from bokeh.layouts import widgetbox,row
from bokeh.io import show
x = [1,2,3]
y1 = np.random.randn(3)
y2 = np.random.randn(3)

def create_data_table(x,y):
    source = ColumnDataSource(data=dict())
    source.data = {'index': x, 'value':y}
    columns = [TableColumn(field="index", title="index", width=50),
               TableColumn(field="value", title="value", width=200)]
    data_table = DataTable(source=source, columns=columns,width=250)
    table = widgetbox(data_table)
    return table
table1 = create_data_table(x,y1)
table2 = create_data_table(x,y2)
show(row(table1,table2))

Update

In DataTable you might want to specify also the height= and probably you don't need the row headers, so you can use row_headers=False also inside DataTable

Update 2

When adding more columns turned out that another width was needed inside widgetbox: The same width from DataTable plus some extra for separation. In this example I use 50 for extra separation:

from bokeh.models import ColumnDataSource,TableColumn,DataTable
from bokeh.layouts import widgetbox,row
from bokeh.io import show
import random
x = [1,2,3]
def random_list():
    return [round(random.random(),3) for i in range(3)]

def create_data_table(x):
    source = ColumnDataSource(data=dict())
    source.data = {'index': x, 'value':random_list()}
    width=60
    columns = [TableColumn(field="index", title="index", width=width),
               TableColumn(field="value", title="value", width=width)]
    for i in range(4):
        source.data[str(i)] = random_list()
        columns.append(TableColumn(field=str(i), title=str(i), width=width))
    data_table = DataTable(source=source, columns=columns, width=width*6,row_headers=None)
    table = widgetbox(data_table,width=width*6+50)
    return table
table1 = create_data_table(x)
table2 = create_data_table(x)
show(row(table1,table2))

Thank you Pablo. This is very helpful; however, I do not think it fixes the issue when more columns are present. Please view my edits above. Thank you — jackalack, Mar 21 '17 at 17:43
The solution was a matter to also specify the width inside `widgetbox` adding some extra width. You can see the change in my updated answer. — Pablo Reyes, Mar 21 '17 at 18:15

Bokeh DataTables overlapping in both Row and Gridplot

-------------------------------------------- EDIT ---------------------------------------------------

1 Answers1