How to create a table with clickable hyperlink in pandas & Jupyter Notebook

Question

print('http://google.com') outputs a clickable url.

How do I get clickable URLs for pd.DataFrame(['http://google.com', 'http://duckduckgo.com']) ?

Toucan

Answer 1

Try using pd.DataFrame.style.format for this:

df = pd.DataFrame(['http://google.com', 'http://duckduckgo.com'])

def make_clickable(val):
    return '<a href="{}">{}</a>'.format(val,val)

df.style.format(make_clickable)

I hope this proves useful.

Taskwork

you could use '<a href="{0}">{0}</a>'.format(val) – Constitutional

on a sidenote: first add the column via apply.. then just df.style suffices – Skillern

or Python3 you could use f"<a href="{val}">{val}</a>" – Williams

This looks great. As an addendum, how might I create a clickable link that executes an underlying function that I define elsewhere? – Blubbery

Answer 2

If you want to apply URL formatting only to a single column, you can use:

data = [dict(name='Google', url='http://www.google.com'),
        dict(name='Stackoverflow', url='http://stackoverflow.com')]
df = pd.DataFrame(data)

def make_clickable(val):
    # target _blank to open new window
    return '<a target="_blank" href="{}">{}</a>'.format(val, val)

df.style.format({'url': make_clickable})

(PS: Unfortunately, I didn't have enough reputation to post this as a comment to @Abdou's post)

Abhor

How do I make the "name" clickable and hide the url? – Microclimate

@Microclimate Something like this: df['nameurl'] = df['name'] + '#' + df['url'], def make_clickable_both(val): name, url = val.split('#'), return f'<a href="{url}">{name}</a>', df.style.format({'nameurl': make_clickable_both}) – Abhor

Great stuff! Question: is it possible then to delete the 'name' and 'url' columns from df or can we create a new pandas data frame with only the 'nameurl' column? – Mistiemistime

@Mistiemistime : yes, only the nameurl column is needed. So you can e.g. use new_df = df[['nameurl']] to create a dataframe with only the nameurl column. – Abhor

@ dloeckx Thanks! – Mistiemistime

@Abhor .. If we have multiple columns in a dataframe , how to display complete dataframe in a web page (or html table to get displayed in hyper link) – Haywire

@Haywire Take a look at pandas.DataFrame.to_html(). See also #49904273 . – Abhor

@Abhor .. Thanks for the reply.. I am trying to display the html table in an url. I want to create a url and display this html data in that url , can you please help me if there is any link i can refer and try – Haywire

@Haywire To be able to generate a URL and display this HTML data in that URL is beyond the reach of Pandas afaik. You can take a look at Flask to setup a web server, or save the file to a directory that is served to the web. Note that if you would like to make the link public, you might open a lot of security holes! – Abhor

Answer 3

I found this at How to Create a Clickable Link(s) in Pandas DataFrame and JupyterLab which solved my problem:

HTML(df.to_html(render_links=True, escape=False))

Lemur

In my case (JupyterNotebook) it requires from IPython.display import HTML – Sjoberg

Answer 4

@shantanuo : not enough reputation to comment. How about the following?

def make_clickable(url, name):
    return '<a href="{}" rel="noopener noreferrer" target="_blank">{}</a>'.format(url,name)

df['name'] = df.apply(lambda x: make_clickable(x['url'], x['name']), axis=1)

Slr

Answer 5

from IPython.core.display import display, HTML
import pandas as pd

# create a table with a url column
df = pd.DataFrame({"url": ["http://google.com", "http://duckduckgo.com"]})

# create the column clickable_url based on the url column
df["clickable_url"] = df.apply(lambda row: "<a href='{}' target='_blank'>{}</a>".format(row.url, row.url.split("/")[2]), axis=1)

# display the table as HTML. Note, only the clickable_url is being selected here
display(HTML(df[["clickable_url"]].to_html(escape=False)))

Thorsten