Cells rendered as text rather than HTML links

[Joel]

I’ve been following along this topic with this sample code:

import pandas as pd
import streamlit as st
from st_aggrid import AgGrid
from st_aggrid import JsCode
from st_aggrid.grid_options_builder import GridOptionsBuilder


df = pd.read_csv(
    "https://raw.githubusercontent.com/fivethirtyeight/data/master/airline-safety/airline-safety.csv"
)

# Display the DataFrame
gd = GridOptionsBuilder.from_dataframe(df)
gd.configure_column(
    "airline",
    headerName="airline",
    cellRenderer=JsCode(
        """
        function(params) {return `<a href="http://example.com/${params.value}" target="_blank">${params.value}</a>`}
        """
    ),
    width=300,
)
grid_options = gd.build()

AgGrid(
    df,
    gridOptions=grid_options,
    allow_unsafe_jscode=True,
    # height=500,
    theme="alpine",
)

The cell contents render like it’s a valueFormatter rather than a cellRenderer. I think I’m missing something, also mentioned in this topic.

[Joel]

Ok, I found this which seems to work:

gd.configure_column(
    "airline",
    headerName="airline",
    cellRenderer=JsCode(
        """
        class UrlCellRenderer {
          init(params) {
            this.eGui = document.createElement('a');
            this.eGui.innerText = params.value;
            this.eGui.setAttribute('href', '/x?id=' + params.value);
            this.eGui.setAttribute('style', "text-decoration:none");
            this.eGui.setAttribute('target', "_blank");
          }
          getGui() {
            return this.eGui;
          }
        }
        """
    ),
    width=300,
)