Hyperlink in Tabulator

Panel
, ,
1

I’ve a below code in which I show dataframe data in Tabulator. I would like to add hyperlinks in this tabulator without mentioning whole website. Any idea how to do that?

import panel as pn
import param
import pandas as pd

pn.extension('tabulator')

class Example(param.Parameterized):
    df = param.DataFrame()

def show_data():
    ex_obj = Example()
    data_list = [{'sr': 1, 'name': 'Stephen', 'Website': '<a href="https://www.google.com">Google</a>'},
                 {'sr': 2, 'name': 'Alex', 'Website': '<a href="https://www.facebook.com">Facebook</a>'}]
    ex_obj.df = pd.DataFrame(data_list)
    gspec = pn.GridSpec(sizing_mode='stretch_both', max_height=200)
    data_table = pn.widgets.Tabulator.from_param(ex_obj.param.df, pagination="remote", disabled=True, render_links=True)
    gspec[0:2, :3] = data_table
    tabs = pn.Tabs(('Analytics', gspec))
    return tabs

def show(page):
    tabs = show_data()
    return tabs

page = pn.widgets.RadioButtonGroup(
    value='First Page',
    options=['First Page', 'Second Page'],
    name="Page",
    button_type="success",
    orientation="vertical")

ishow = pn.bind(show, page=page)

pn.template.FastListTemplate(
    title="Data Analytics",
    sidebar=[page],
    main=[ishow]).servable()

It looks like below in browser

Screenshot 2023-10-13 at 10.45.28 AM
Screenshot 2023-10-13 at 10.45.28 AM3000×1328 158 KB

2

You can use formatters:

import panel as pn

pn.extension("tabulator")

from bokeh.models import HTMLTemplateFormatter

bokeh_formatters = {
    "Website": HTMLTemplateFormatter(template="<code><%= value %></code>")
}
data_list = [
    {
        "sr": 1,
        "name": "Stephen",
        "Website": '<a href="https://www.google.com">Google</a>',
    },
    {
        "sr": 2,
        "name": "Alex",
        "Website": '<a href="https://www.facebook.com">Facebook</a>',
    },
]
df = pd.DataFrame(data_list)
pn.widgets.Tabulator(df, formatters=bokeh_formatters)

image

1 Like
3

@Hoxbro it worked pretty well. Thank you so much :slightly_smiling_face:
Below little modification I did to open link in new tab

data_list = [{'sr': 1, 'name': 'Stephen', 'Website': '<a href="https://www.google.com" target="_blank">Google</a>'},
             {'sr': 2, 'name': 'Alex', 'Website': '<a href="https://www.facebook.com" target="_blank">Facebook</a>'}]

I’ve added target=“_blank” in the Website to open link in new tab.

1 Like