How to display a clickable link pandas dataframe

Using Streamlit
5

You are right. A JsCode instance is passed to the cellRendered kwarg. The JsCode is just a JS function that takes the content in the column and builds an HTML hyperlink tag:

function(params) { return '<a href=' + params.value + '> 🖱️ </a>' }

image

Code: 
import streamlit as st
import pandas as pd
from st_aggrid import AgGrid, JsCode, GridOptionsBuilder

df = pd.DataFrame(
        {"Site": "DuckDuckGo Google Bing".split(),
        "URL": "https://duckduckgo.com/ https://www.google.com/ https://www.bing.com/".split()}
    )

gb = GridOptionsBuilder.from_dataframe(df)

gb.configure_column("URL",
                    headerName="URL",
                    cellRenderer=JsCode(
                        """
                        function(params) {
                            return '<a href=' + params.value + '> 🖱️ </a>'
                            }
                        """))

gridOptions = gb.build()

AgGrid(df, gridOptions=gridOptions, allow_unsafe_jscode=True)
2 Likes