create CompositeFormatter to enable HTMLTemplateFormatter with other formatters such as NumberFormatter

[russellburdt]

Problem description

The objective is to create a DataTable with numeric and text columns and be able to set a consistent (larger) font size in all columns. A minimal example and app screenshot are below. HTMLTemplateFormatter can be used for text columns and font-size can be specified as in the minimal example. NumberFormatter can be used for numeric columns however there currently does not seem to be any way to modify font-size in that case. The result is a table with different column font sizes. Note that string-formatting of numeric columns is not a solution, as that can break the sortable feature of DataTable. For example, sorting will not work properly if column values 72.3, 7.1, 23.7 are cast as strings.

from bokeh.io import curdoc
from bokeh.models import DataTable, TableColumn, HTMLTemplateFormatter, NumberFormatter, ColumnDataSource

c1 = TableColumn(width=100, field='text',
    formatter=HTMLTemplateFormatter(template=f"""<div style="font-size:18px;"><%=value%></div>"""),
    title=f"""<div style="font-size:18px;">text</div>""")

c2 = TableColumn(width=100, field='num',
    formatter=NumberFormatter(format=f'0,0.0'),
    title=f"""<div style="font-size:18px;">num</div>""")

cds = ColumnDataSource({
    'text': ['a','b','c','d'],
    'num': [1,2,3,4]})

table = DataTable(width=200, height=200, index_position=None, columns=[c1, c2], sortable=True, source=cds)

curdoc().add_root(table)

app screenshot

Feature description

A previous PR has already described the feature and implementation, and significant progress was made, however the PR was declined as the author disappeared. The issue has also been discussed on bokeh discourse. To summarize, the feature may work by importing the new formatter object and initializing with a list of other formatter objects. For example -

from bokeh.models import CompositeFormatter
fmt1 = HTMLTemplateFormatter(template=f"""<div style="font-size:18px;"><%=value%></div>""")
fmt2 = NumberFormatter(format=f'0,0.0')
fmt = CompositeFormatter(formatters=[fmt1, fmt2])

The formatter object could then be used in a TableColumn as formatters are currently used.

Potential alternatives

A potential alternative is to implement a font_size keyword argument in existing formatters, eg NumberFormatter and DateFormatter.

Additional information

No response

[thomktz]

Couldn't we implement a font_size argument to CellFormatter ? The same way we already have font_style, etc

[bryevdv]

Possibly, but I think the main issue case is when people want a formatted number to slot into an otherwise HTML formatted cell, which is often used to style more than just the font, e.g. background color, etc. IMO it does not make sense to have any styling options for fonts, etc on the HTML formatter at all, since the HTML is intended to be responsible for all of that. So we might need to add some new classes in the hierarchy to distinguish the HTML cell formatter from others that have basic property-based styling.