Search code examples
pythonbokeh

Why is the text in the bokeh DataTable that is styled with a custom HTMLTemplateFormatter not displayed corretly?

I want to have a colored rectangle in a bokeh DataTable. Therefore I found these helpful examples.

Out of the four examples I want to use number 4 in a slightly modified way. Here is how I changed the code:

from bokeh.io import output_notebook, show
output_notebook()
from bokeh.palettes import Spectral

from random import randint
from bokeh.io import output_file, show
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import DataTable, DateFormatter, TableColumn, HTMLTemplateFormatter

output_file("data_table.html")

data = dict(
    cola=[randint(0, 100) for i in range(10)],
    colb=[randint(0, 100) for i in range(10)],
    colc=['&#9608' for i in range(10)],
#     color=['#00FF00' for i in range(10)]
    color = Spectral[10]
)

source = ColumnDataSource(data)

template="""                
            <p style="color:<%= 
                (function colorfromint(){
                    return(color)
                    }()) %>;"> 
                <%= value %>
            </p>
            """

formatter =  HTMLTemplateFormatter(template=template)

columns = [TableColumn(field="cola", title="CL1", width = 100),
           TableColumn(field='colb', title='CL2', width = 100),
           TableColumn(field='colc', title='CL3', formatter=formatter, width=500),
           TableColumn(field='color', title='CL4')
          ]
data_table = DataTable(source=source,
                       columns=columns,
                       fit_columns=True,
                       selectable = True,
                       sortable = True,
                       width=400,height=400)

show(data_table)

The problem now is that the rectangles (or any other text) I write in the customly styled filed is not displayed correctly. It is offset to far down in the table field and half cut off.

enter image description here

On the other hand when I display the same table in a jupyter notebook it is displayed correctly as can be seen here:

enter image description here

How do I need to change the template to format and display the text in the bokeh DataTable field correctly outside the jupyter notebook? Or in other words, why is the text in the bokeh DataTable that is styled with a custom HTMLTemplateFormatter not displayed corretly outside the jupyter notebook?

Solution

  • To understand why it looks the way it does, using your browser's DevTools is really helpful. In this case, you're using <p> which by default (at least, in Google Chrome) as some margins. Just place the p tag with the span tag.