Clickable hyperlinks in dataframes

Using Streamlit
1

Summary

What is the best way to make cell contents clickable as hyperlinks today?

Various approaches have been put forward over the years but the ag-grid approach seems to have stopped working. cf. How to display a clickable link pandas dataframe - #5 by edsaac – just displays an empty frame. The to_html approach is, frankly, clunky and not very streamlitian (what’s the word for that?)

It looks like the new underlying tech for st.dataframe – glide-data – supports clickable hyperlinks via an @urlcolumn parameter https://github.com/streamlit/streamlit/pull/5972 – but did that make it into 1.19? Is it coming soon in 1.20?

Ideas for best practice going forward? @lukasmasuch ?

2

Personally I’m pinning streamlit-aggrid==0.3.3, pandas<2.0 and waiting for Streamlit 1.20.

3

We will release URL columns for st.dataframe within the next few weeks :slight_smile:

6 Likes
4

I don’t see this in 1.21, will it (likely) be in 1.22?

5

Still not seeing this in 1.22 @lukasmasuch did I miss it somewhere in release notes? Or is it not out yet?

Link a data point/row in a table to a graph
7

A little late, but if anyone here is still curious or for anyone else who comes across this thread looking for an answer…

See the LinkColumn configuration.

You can see an example of what this looks like in the ‘Configuring columns’ section here.

Here is a small code snippet of how I am using it:

st.dataframe(
    df,
    column_config={
        "website": st.column_config.LinkColumn()
    }
)

where website corresponds to a column in my DataFrame.

5 Likes
8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.

10

Hey everyone, :wave:

Updating here to share the latest update to LinkColumn in dataframes as of Release 1.30.0. You can now display custom text for your links instead of just seeing the raw URL!

Looking forward to hearing what you think and seeing your new dataframes!

2 Likes
11

# NOTE: st.dataframe does does not currently have a straightforward solution yes to display hyperlinks in st.dataframe().

# display_text can only be a part of the URL not something else. For example if the link is ‘www.toyota.com’ and you want display_text to be ‘camry’ you can’t do that. You can only display ‘toyota’ using a regex

# To solve this we add the display_text at the end of the url using ‘#’. The browser ignores anything after # in the url. example: www.toyota.com#camry

# Then we use this regex: r"https://.*?#(.*)$" to extact the display_text from the url.

# So this should display camry with a link to wwww.toyota.com

import streamlit as st

import pandas as pd

# Dictionary data

car_data = {

"https://www.toyota.com": "Camry",

"https://www.honda.com": "Civic",

"https://www.ford.com": "Mustang",

"https://www.bmw.com": "X5"

}

df = pd.DataFrame(list(car_data.items()), columns=[“URL”, “Model”])

df[‘Model’] = df[‘URL’] + ‘#’ + df[‘Model’] # Add Model to the URL

del (df[‘URL’]) # We don’t need it anymore

st.title(“Car Models”)

st.dataframe(

df,

*column_config*={

    "Model": st.column_config.LinkColumn(

        "Car Model", *display_text*= *r*"https://.\*?#(.\*)$"    # This extracts anything in the URL after '#'

    )

},

*hide_index*=True

)

image
image737×290 9.03 KB