bokeh DataTable with conditionally coloured cells

Question

I want to display a DataTable in bokeh, wich cells are either red or orange, according to the text content of the cell.

For example, if the cell contains the word \"

Answer 1

Looking through the documentation, you can use a HTMLTemplateFormatter and underscore js to format the table. See http://docs.bokeh.org/en/latest/docs/reference/models/widgets.tables.html and http://underscorejs.org/#template for more info. I attached an example to format based on integer values, although you could extend it as you want.

Note: this essentially imbeds a div within each table cell, so there is still a small white border around each. If possible you could resize the inner divs, or style the parent elements.

Update: depending on the bokeh version you are using you may need to include lodash or underscore js in your html document i.e. : <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>

from bokeh.models import ColumnDataSource
from bokeh.models.widgets import DataTable, TableColumn, HTMLTemplateFormatter
from bokeh.io import show

dict1 = {'x':[0]*6,'y':[0,1,0,1,0,1]}
source = ColumnDataSource(data=dict1)

template="""
<div style="background:<%= 
    (function colorfromint(){
        if(value == 1){
            return("blue")}
        else{return("red")}
        }()) %>; 
    color: white"> 
<%= value %></div>
"""

formater =  HTMLTemplateFormatter(template=template)
columns = [
    TableColumn(field="x", title="x"),
    TableColumn(field="y", title="y",formatter=formater)
]

data_table = DataTable(source=source, columns=columns, width=800)

If you are happy to define the colors within python, a simpler method is to define the colors as a field in the column data source and reference the value in the template code.

dict1 = {'x':[0]*6, 
         'y':[0, 1, 0, 1, 0, 1],
         'color':['blue', 'red', 'blue', 'red', 'blue', 'red']}
source = ColumnDataSource(data=dict1)

template="""
<div style="background:<%=color%>"; color="white";>
<%= value %></div>
"""

formater =  HTMLTemplateFormatter(template=template)

If you are relying completely on javascript (i.e. no python based callbacks), this approach wont update the fill colors if the underlying values change.