Display URLs in dataframe column as a clickable hyperlink

Using Streamlit
,
1

One of the columns of a dataframe I want to display in my streamlit app contains URLs and I would like it to displayed as a clickable hyperlink.

How can I do this? I tried modifying the column or using a style to wrap the url with html tags but it does not render correctly.

5 Likes
2

You can do df.to_html(escape=False) and then your dataframe should render that column containing HTML href= code.

3

You can do:

st.write(your_dataframe.to_html(escape=False, index=False), unsafe_allow_html=True)

But what gets rendered is just plain HTML, not the nice looking streamlit rendered dataframe. So perhaps not what you want. Until the streamlit team allows execution of HTML within the streamlit version of dataframe, not sure what else can be done. There is a separate post concerning allowing HTML code execution.

5 Likes
4

I need to display URLs as a clickable hyperlink also. Can it be accomplished using pandas Styler?

5

Thanks, all. I got this to work now. Here’s what I am doing:

def make_clickable(link):
    # target _blank to open new window
    # extract clickable text to display for your link
    text = link.split('=')[1]
    return f'<a target="_blank" href="{link}">{text}</a>'

# link is the column with hyperlinks
df['link'] = df['link'].apply(make_clickable)
df = df.to_html(escape=False)
st.write(df, unsafe_allow_html=True)
8 Likes
6

How many characters is your link/markup? I have the problem that streamlit or pandas is cutting off the text at a certain character (followed by an ellipsis ...) which then breaks the HTML.

Edit

Ah got it working, if anyone has the same issue then you need to change pandas` display options:

pd.set_option('display.max_colwidth', -1)

2 Likes
7

Hmm I was not able to get this work for me within streamlit. Works outside of using streamlit.

EDIT: Per this discussion your suggestion does not work. However, the current workaround is to use st.table() which perhaps is what you did, but forgot to include that info, which also has some drawbacks too.

1 Like
8

If by “outside of streamlit” you mean just a table rather than the scrollable tables then yes, you are right. Ideally I would like to use the scrollable table and HTML (all I really need is the link), but for now I’m happy to settle with having just a static table w/ the links.

As for the implementation, I used a combination of the suggestions here:

# pandas display options
pd.set_option('display.max_colwidth', -1)

def add_stream_url(track_ids):
	return [f'https://open.spotify.com/track/{t}' for t in track_ids]

def make_clickable(url, text):
    return f'<a target="_blank" href="{url}">{text}</a>'

# show data
if st.checkbox('Include Preview URLs'):
	df['preview'] = add_stream_url(df.track_id)
	df['preview'] = df['preview'].apply(make_clickable, args = ('Listen',))
	st.write(df.to_html(escape = False), unsafe_allow_html = True)
else:
	st.write(df)
4 Likes
9

Thanks for this thread! It helped me a lot!

I have only a problem… How can you show a link that is just a file?

I use:

def make_clickable(link,text):
return f’<a target=“_blank” href='file:///{link}">{text}

I am using the address server to access the file. If I look in the dataframe, the text is correctly written:

<a target=“_blank” href='file:///\\server\file.txt">{link}

But if I click on the hyperlink, it is not working. If I tell Mozilla to copy the hyperlink, it copies the following:

file://///server/file.txt

It changes the backslash into slash and the hyperlink does not work. I have to use windows for this application, that’s why the mess of the backslash and slash.

Do you have any ideas, how to fix this?

Thanks very much!!!

1 Like
12

Hey everyone, :wave:

Wanted to share the LinkColumn formatting for dataframes update that just came out in Release 1.30.0!

You can now customize the display text of a linked column in your dataframes, instead of only showing the raw URL. :star_struck:

Check it out in the docs and let us know what you think!

4 Likes
13

I would love if we could display as a hyperlink, with one column being the name and one column being the link. Can this be done with LinkColumn?