# How to change font-size for the title of DataTable

**URL:** <https://discourse.bokeh.org/t/how-to-change-font-size-for-the-title-of-datatable/9487>\
**Category:** Community Support\
**Created:** [August 20, 2022, 12:37pm UTC](https://discourse.bokeh.org/t/how-to-change-font-size-for-the-title-of-datatable/9487 "2022-08-20T12:37:39Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![saiyasaibing](https://discourse.bokeh.org/letter_avatar_proxy/v4/letter/s/ed8c4c/32.png) [@saiyasaibing](https://discourse.bokeh.org/u/saiyasaibing)\
**Post date:** [August 20, 2022, 12:37pm UTC](https://discourse.bokeh.org/t/how-to-change-font-size-for-the-title-of-datatable/9487/1 "2022-08-20T12:37:39Z")

</div>

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.

```auto
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](https://discourse-uploads.bokeh.org/original/2X/9/92a2ee31fc2db3061f3158af4ef8fad7230682ee.png)

---

<div class="post-metadata">

**Author:** ![gmerritt123](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/gmerritt123/32/4101_2.png) [@gmerritt123](https://discourse.bokeh.org/u/gmerritt123)\
**Post date:** [August 24, 2022, 1:12pm UTC](https://discourse.bokeh.org/t/how-to-change-font-size-for-the-title-of-datatable/9487/2 "2022-08-24T13:12:20Z")

</div>

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:

```auto
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](https://discourse-uploads.bokeh.org/original/2X/5/5e8caca8da4d3afc9f64edc62efa66c6279ae382.png)

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](https://discourse.bokeh.org/t/including-css-classes-for-datatable/9055)

Hopefully this helps!

---

<div class="post-metadata">

**Author:** ![saiyasaibing](https://discourse.bokeh.org/letter_avatar_proxy/v4/letter/s/ed8c4c/32.png) [@saiyasaibing](https://discourse.bokeh.org/u/saiyasaibing)\
**Post date:** [August 24, 2022, 1:29pm UTC](https://discourse.bokeh.org/t/how-to-change-font-size-for-the-title-of-datatable/9487/3 "2022-08-24T13:29:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://discourse-uploads.bokeh.org/original/2X/1/14eb24f9e10e4e9b78e3f10f66c04ffa96446e5a.svg) [@system](https://discourse.bokeh.org/u/system)\
**Post date:** [November 22, 2022, 1:30pm UTC](https://discourse.bokeh.org/t/how-to-change-font-size-for-the-title-of-datatable/9487/4 "2022-11-22T13:30:06Z")

</div>

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