Hyperlink in Streamlit dataframe

Question

I am attempting to display a clickable hyperlink inside a dataframe containing filtered results on Streamlit. This is my code so far:

import pandas as pd
import streamlit as st
import openpyxl
import numpy as np
from IPython.core.display import display, HTML

df = pd.read_excel(

  io='list.xlsx',
  engine= 'openpyxl',
 ).fillna('')

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

# TRAILER is the column with hyperlinks
df['TRAILER'] = df['TRAILER'].apply(make_clickable)

df['TRAILER'] = HTML(display(df.to_html(render_links=True, escape=False), raw=True))

If I use:

df['TRAILER'] = df['TRAILER'].apply(make_clickable)

I get

<a target="_blank" href="{link}">{text}</a>

displayed as a string but not a hyperlink.

When I add:

df['TRAILER'] = HTML(display(df.to_html(render_links=True, escape=False), raw=True))

I get:

<IPython.core.display.HTML object>

displayed as a string but not a hyperlink.

These are the versions I am using. Other components of the site work only with a lower version of Streamlit which is why I am using this version.

streamlit == 0.83 numpy == 1.18 pandas == 1.2 openpyxl ipython == 7.22 python == 3.9

site screenshot

I cannot use st.markdown or st.write directly as I am using st.dataframe to display the results.

I think this can help [Display URLs in dataframe column as a clickable hyperlink](https://discuss.streamlit.io/t/display-urls-in-dataframe-column-as-a-clickable-hyperlink/743). Also please provide some sample data and your desired output. (See [How to make good reproducible pandas examples](https://stackoverflow.com/questions/20109391/how-to-make-good-reproducible-pandas-examples)). — RoseGod, Mar 28 '22 at 09:36

score 4 · Answer 1 · answered Apr 04 '22 at 12:15

You can use st.write(df.to_html(escape=False, index=False), unsafe_allow_html=True):

import pandas as pd
import streamlit as st
import openpyxl
import numpy as np
from IPython.core.display import display, HTML

df = pd.read_excel(
  io='list.xlsx',
  engine= 'openpyxl',
 ).fillna('')

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

# TRAILER is the column with hyperlinks
df['TRAILER'] = df['TRAILER'].apply(make_clickable)

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

On a working example:

import pandas as pd
import streamlit as st

link1 = "https://stackoverflow.com/questions/71641666/hyperlink-in-streamlit-dataframe"
link2 = "https://stackoverflow.com/questions/71731937/how-to-plot-comparison-in-streamlit-dynamically-with-multiselect"
df = pd.DataFrame(
    {
        "url": [
            f'<a target="_blank" href="{link1}">Hyperlink in Streamlit dataframe</a>',
            f'<a target="_blank" href="{link2}">How to plot comparison in Streamlit dynamically with multiselect?</a>'
        ],
        "label": ["question", "question"]
    }
)

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

It gives:

I cant use st.write or st.markdown as it wont show the final spreadsheet with the filtered results. I have already tried this. — May Mammaz, Apr 07 '22 at 13:37
@PhilippGärtner This will likely be [implemented](https://github.com/streamlit/streamlit/issues/983#issuecomment-1238484061) in streamlit in 2023 — RJ Adriaansen, Dec 28 '22 at 19:36
you will lose all other built-in features (etc. sort and search). — Karl, Mar 30 '23 at 15:53

Hyperlink in Streamlit dataframe

1 Answers1

Linked