Search code examples
javascriptpythonbokeh

Bokeh HTML template formatter not working

Please have a look at the page:

https://docs.bokeh.org/en/latest/docs/reference/models/widgets.tables.html#bokeh.models.widgets.tables.HTMLTemplateFormatter

I have been trying to use that formatter for a datatable of mine, but am having a problem : the location of the table file is appended before the actual link.

How create a url link with the formatter that correctly redirect to the target page?

EDIT:

Here is the code I am using: (this is the bokeh package from python):

from bokeh.io import output_file, show
from bokeh.layouts import widgetbox
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import DataTable, DateFormatter, TableColumn, HTMLTemplateFormatter
from datetime import datetime
from pandas import Timestamp

start, end = datetime(2018,4,18), datetime(2018,4,18,23,59)

input = {
        'datetime': [Timestamp('2018-04-18 00:34:16')],
        'event': ['Barbara Bush, former US First Lady, 1925-2018'],
        'url': ['https://www.ft.com/content/336e7f52-4189-11e8-93cf-67ac3a6482fd']}


output_file("data_table.html")

source = ColumnDataSource(input)

columns = [
        TableColumn(
            field="datetime", 
            title="Datetime", 
            width = 50, 
            formatter = DateFormatter(format = '%Y-%m-%d %H:%M')),
        TableColumn(
            field='event', 
            title='Event',
            width = 150,
            formatter =  HTMLTemplateFormatter(template = '<a href=”<%= url %>”><%= value %></a>'))]


data_table = DataTable(source=source, columns=columns, width=1000, height=1000)

show(widgetbox(data_table))

This create the following table: enter image description here

You can see in the inspect pane that the link is correct.

However, when clicking on it, it redirect to the page:

enter image description here

Solution

  • It's because the href value isn't a valid URL, so it's treated as a path relative to your domain. Add another slash:

    https://www.google.com/search

    Instead of 

    https:/www.google.com/search

    In the second example, the "double-quote" characters around the href attribute are the more stylized versions of double quotes, and aren't valid HTML. Use this instead:

    HTMLTemplateFormatter(template = '<a href="<%= url %>"><%= value %></a>'))]