Adding custom css_classes to a Datatable Rows (Underscore Template)

Community Support
,
1

Unique background color (for entire row) needs to be provided for unique ‘col1’ values . However , assigned css_classes via customjs (Underscore Template) do not render the desired colors. How to rectify this ?

from bokeh.io import show
from bokeh.models import ColumnDataSource, DataTable, TableColumn, HTMLTemplateFormatter, Div, GlobalInlineStyleSheet
from bokeh.layouts import column

data = {
    'col1': [1, 1, 1, 2, 2, 3, 3],
    'col2': ['A', 'B', 'C', 'D', 'E', 'F', 'G']
}
source = ColumnDataSource(data=data)

# Define CSS for unique row colors based on col1 values
css_uniquebgcolor = """
<style>
    .color-group-1 { background-color: red; }  
    .color-group-2 { background-color: green; } 
    .color-group-3 { background-color: blue }  
</style>
"""
css_stylesheet = GlobalInlineStyleSheet(css = css_uniquebgcolor)
# HTMLTemplateFormatter with conditional class assignment based on col1 value
template = """
    <div class="<% if (col1 == 1) { %>color-group-1<% } else if (col1 == 2) { %>color-group-2<% } else if (col1 == 3) { %>color-group-3<% } %>">
        <%= value %>
    </div>
"""
formatter = HTMLTemplateFormatter(template=template)

# Define table columns with the formatter applied to each column
columns = [
    TableColumn(field="col1", title="Column 1", formatter=formatter),
    TableColumn(field="col2", title="Column 2", formatter=formatter)
]

data_table = DataTable(source=source, columns=columns, width=400, height=280,stylesheets = [css_stylesheet],css_classes=["color-group-1","color-group-2","color-group-3",])
show(data_table)