Adding color coding to individual columns on datatable

Community Support
2

I’m entirely sure there is an especially efficient way to do this. You can use an HTMLTemplateFormatter to control the the appearance of every cell, but you will need to explicitly specify the color/style information for every cell. Here is the only small example I have at hand:

 from bokeh.io import show
from bokeh.models import ColumnDataSource, DataRange1d, Plot, LinearAxis, Grid, Circle, HoverTool, BoxSelectTool
from bokeh.models.widgets import (DataTable, TableColumn, 
                                  StringFormatter, NumberFormatter, HTMLTemplateFormatter,
                                  StringEditor, IntEditor, NumberEditor, SelectEditor)

from bokeh.sampledata.periodic_table import elements

elements['name_lower'] = elements['name'].str.lower()
source = ColumnDataSource(elements)

columns = [
    TableColumn(field='atomic number', title='Atomic Number'),
    TableColumn(field='symbol', title='Symbol'),
    TableColumn(field='name', title='Name', 
                formatter=HTMLTemplateFormatter(template='<font color="<%= CPK %>"><%= value %></font>'))
]
data_table = DataTable(source=source, columns=columns, editable=False)

show(data_table)

Which produces

45%20AM
45%20AM1368×944 101 KB

Alternatively, to get something more space efficient (e.g. where every cell has a default color and you only specify a few that get some different treatment), you would have to create a Custom Extension subclass of CellFormatter.

2 Likes