How to change font-size for the title of DataTable

Community Support
1

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))

image

2

This is probably not the slickest solution, but I figured out a while back that you can override the slick-grid table formatting defaults (this is what bokeh relies on) by making a custom template html with additional css styling embedded in it:

from jinja2 import Template
from bokeh.embed import components
from bokeh.resources import Resources
from bokeh.models import DataTable, TableColumn, ColumnDataSource


#css stuff formatting the slick-header-columns
css_stuff = '''
                <style>
                  .slick-header-columns {
                    background-color: #17648D !important;
                    font-family: arial;
                    font-weight: bold;
                    font-size: 12pt;
                    color: #FFFFFF;
                    }
                </style>
            '''

#from what i can tell (not knowledgeable in this at all)
#, but we need to kinda override bokeh's default "to html" templating with our own that contains these css instructions
tpl = Template('''<!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="utf-8">
                <title>'''+'Here is a title'+'''</title>
                {{ resources }}
                {{ script }}
                '''+css_stuff+'''
            </head>
            <body>
                <div>
                {{ div }}
                </div>
            </body>
        </html>
        ''')

#now make a basic table
src = ColumnDataSource(data={'A':[1,2,3]})

col = TableColumn(title='Column Title',field='A')

tbl = DataTable(columns=[col],source=src)

#and putting it all together...
#break into script and div componenents
script,div = components(tbl)
resources = Resources().render()
html = tpl.render(resources=resources,script=script,div=div)
with open(r'C:\Repo\Proofing\test.html', mode="w", encoding="utf-8") as f:
    f.write(html)

image

This honestly just took me a lot of trial and error and my understanding on how it actually works is quite shaky. A relevant thread is here too → Including CSS Classes for DataTable

Hopefully this helps!

2 Likes
3

Thank you @gmerritt123 . I found the original post of yours about it.

1 Like
4

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.