Search code examples
pythonlayoutbokeh

How can I show one figure and one datatable on one tab if there is multiple datatables in bokeh?


I have four figure, on four tabs. I also have four datatables, one for each datasource/figure.

I want to show only one datatable in one tab.

I tried to use column layout and but it is not iterable.

show( column( data_table4,Tabs(tabs=[tab4]) ), column( data_table3,Tabs(tabs=[tab3]) ) )

Solution

  • The trick is to use a layout like row, column or grid inside a TabPanel. Pass the layout to the child argument.

    Minimal Example

    from bokeh.models import TabPanel, Tabs, DataTable, ColumnDataSource, TableColumn
    from bokeh.layouts import column
    from bokeh.plotting import figure, show, output_notebook
    output_notebook()
    
    source = ColumnDataSource({
        'x': [1, 2, 3, 4, 5],
        'y1':[6, 7, 2, 4, 5],
        'y2':[7, 3, 2, 3, 1],
    })
    
    p1 = figure(width=300, height=300)
    p1.circle('x', 'y1', size=20, color="navy", alpha=0.5, source=source)
    columns1 = [
        TableColumn(field='x', title='x'),
        TableColumn(field='y1', title='y1'),
    ]
    data_table1 = DataTable(source=source, columns=columns1, width=300, height=300)
    tab1 = TabPanel(child=column([p1, data_table1]), title="circle")
    
    p2 = figure(width=300, height=300)
    p2.line('x', 'y2', line_width=3, color="navy", alpha=0.5, source=source)
    columns2 = [
        TableColumn(field='x', title='x'),
        TableColumn(field='y2', title='y2'),
    ]
    data_table2 = DataTable(source=source, columns=columns2, width=300, height=300)
    tab2 = TabPanel(child=column([p2, data_table2]), title="line")
    
    show(Tabs(tabs=[tab1, tab2]))
    

    Output

    tabs with inner layout

    Attention: In bokeh older than 3.0.0 TabPanel was named Panel.

    The solution is base on the examples tab_panes and data_table_plot.