Multi/grouped/hierarchical headers DataTable using ColumnDataSource


This has already been asked here.

I am looking for the implementation of this kind of multi/grouped/hierarchical header in DataTable widget using ColumnDataSource. If it has already been answered/solved, can anyone redirect me there or post below a working code snippet, please?

Thank you.

@Bryan @p-himik @mhinds

@mattpap might know, I am actually not especially familiar with the DataTable library source code these days, I have not looked at it in a number of years.

1 Like

Hi @Bryan,

Thank you for quick response. Can you please re-tag @mattpap? It seems the tagged username doesn’t exist.

Best regards. :slight_smile:

cc @mateusz

1 Like

We don’t have anything like this, though it looks like something fairly easy to add, based on that example. You may want to start a new feature request for this in Bokeh’s issue tracker.

1 Like


Thank you for your reply @mateusz. I utilized pandas to make a hierarchical/grouped/multi header data frame then using pandas df.to_html(), I created a bokeh Div model from the data frame HTML and utilized it in my app. Its not using the DataTable widget and CDS but doing what I wanted. Snippet is given below, might be useful for someone.

Thank you :slight_smile:

import pandas as pd
import random
from bokeh.models import Div
from import show

# Dummy dataframe generator
def dummy_df(size):
    df = pd.DataFrame(zip([random.randint(0, 100) for i in range(size)],
                          [random.randint(100, 200) for i in range(size)]),
                      columns=['x', 'y'])
    return df

# Dummy dataframes
df1 = dummy_df(10)
df2 = dummy_df(10)

# Concating dataframes and setting hierarchical headers as dataframe names
table = pd.concat([df1,df2], keys=['DF1', 'DF2'], axis=1)

# Concated dataframe html to div 
table_div = Div(text=table.to_html(justify="justify-all", index=False))

# Showing table div
1 Like