I am trying to figure out how to change font-size for the title of a datatable. Below is my example code. I did some search and found post said there is no direct way of changing font size for it. But on the other hand I also saw post mentioned method through CSS which I have minimal knowledge…
I am working on a standalone html dashboard. Not going to host bokeh server due to some cooperate governance. So I am wondering how to leverage CSS for task like setting font-size font style for title of datatable in a standalone html.
Appreciate your input.
import pandas as pd
import numpy as np
from bokeh.models import ColumnDataSource, TableColumn, DataTable,HTMLTemplateFormatter, Select, CustomJS
from bokeh.plotting import figure, output_notebook, show
from bokeh.layouts import row, column
output_notebook()
t = pd.DataFrame(np.array([[100,40,50,190]]),columns=['A','B','C','all'])
t_source = ColumnDataSource(t)
template1="""<div style="font-size: 36px; color: lightslategray; font-weight: bold; text-align: center; line-height: 75px;"> <%= value %> </div>"""
cols1 = TableColumn(field='all', width=50, formatter=HTMLTemplateFormatter(template=template1), sortable=False, title='font-size bigger')
data_table1 = DataTable(source=t_source, columns=[cols1], height = 150, width = 150, row_height=75, index_position=None)
#JS select dropdown box callback
stage_menu = [("all","Test All"),("A","Test A"),("B","Test B"),("C","Test C")]
select = Select(value = 'all', options=stage_menu, width=150)
code = '''
//callbacks for data_table1
cols1.field = select.value
cols1.change.emit()
data_table1.change.emit()
'''
select_cb = CustomJS(args=dict(cols1=cols1,data_table1=data_table1,select=select),code=code)
select.js_on_change('value', select_cb)
#show(data_table1)
show(column(select,data_table1))