Customize Bokeh DataTable

I tried this code that gmerritt posted here on the discourse. I dont get a customized header. Looks like this when I plot the code below:

Anyone know how to customize a datatables in bokeh? Unable to change font, nothing works for me from what I have tried.

from bokeh.models.widgets import DataTable, TableColumn
from bokeh.models import CheckboxGroup, ColumnDataSource
from jinja2 import Template
from bokeh.embed import components
from bokeh.resources import Resources
from bokeh.layouts import layout

#make dummy stuff
data = {'things':['apple','banana','thing3']}
src=ColumnDataSource(data)
cbg = CheckboxGroup(labels=data['things'],active=[0,1,2]
                    ,css_classes=['cbstyle'] ##???? probably not doing this right? do 
                    )
col = TableColumn(field='things',title='WHY NOT ALIGNED RIGHT?')
tbl = DataTable(source=src,columns=[col])
#put em together in a layout
lo = layout([[cbg,tbl]])
#break into script and div componenents
script,div = components(lo)

#some of this schtuff works, some of it doesn't...
css_stuff = '''
                <style>
                  .slick-header-columns {
                    background-color: #17648D !important;
                    font-family: arial;
                    font-weight: bold;
                    font-size: 12pt;
                    color: #FFFFFF;
                    text-align: right;
                    }
                  .slick-row{
                    font-size: 8pt;
                    font-family: arial;
                    text-align: right;
                    }
                  .cbstyle{
                      font-size: 45pt;
                      background: red;
                      }
                </style>
            '''

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>
        ''')
resources = Resources().render()
html = tpl.render(resources=resources,script=script,div=div)
with open('test.html', mode="w", encoding="utf-8") as f:
    f.write(html)

I installed the newest bokeh version (3.1.0) and tried the InlineStyleSheet which worked:

from bokeh.models import DataTable, TableColumn, ColumnDataSource
from bokeh.models import InlineStyleSheet
from bokeh.plotting import save

data = {'things': ['apple', 'banana', 'thing3']}
src = ColumnDataSource(data)

col = TableColumn(field='things', title='Things')
tbl = DataTable(source=src, columns=[col], width=400)

table_style = InlineStyleSheet(css="""
    .slick-header-columns {
        background-color: #17648D !important;
        font-family: arial;
        font-weight: bold;
        font-size: 12pt;
        color: #FFFFFF;
        text-align: right;
    }
    .slick-row {
        font-size: 16pt;
        font-family: arial;
        text-align: right;
    }
""")

tbl.stylesheets = [table_style]

save(tbl, 'styled_datatable.html')
2 Likes

I’ve tried your solution, but the test alignment in the header row seems not to work. I want to set the title in one of the header column to right alignment.