I've followed the "Variant #3" example below to get conditionally colored text and boxes in my Bokeh DataTable, using Python 3.8.5 and Bokeh 2.2.1.
How to color rows and/or cells in a Bokeh DataTable?
However, this formatting gives me uneven vertical alignment for my columns (an issue which doesn't seem to happen in the original example).
Is there a way to ensure that the vertical alignment for the different columns is equal? The code:
from bokeh.io import output_notebook, show
output_notebook()
from random import randint
from bokeh.io import output_file, show
from bokeh.layouts import widgetbox
from bokeh.models import ColumnDataSource, Column
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=['█' for i in range(10)])
source = ColumnDataSource(data)
template="""
<p style="color:<%=
(function colorfromint(){
if (1 < Math.abs(cola - colb) && Math.abs(cola - colb) < 10)
{return('green')}
else if (10 < Math.abs(cola - colb) && Math.abs(cola - colb) < 40)
{return('blue')}
else
{return('red')}
}()) %>;">
<%= value %>
</p>
"""
formatter = HTMLTemplateFormatter(template=template)
columns = [TableColumn(field="cola", title="CL1", width = 100),
TableColumn(field='colb', title='CL2', formatter=formatter, width = 100),
TableColumn(field='colc', title='CL3', formatter=formatter, width = 5)
]
data_table = DataTable(source=source,
columns=columns,
autosize_mode = "force_fit",
selectable = True,
sortable = True,
width=400,height=400)
show(Column(data_table))
