[streamlit-aggrid version] Creating an Aggrid with columns with embedded URLs

[ths]

I posted Creating an Aggrid with columns with embedded URLs

It was resolved. However, I thought the root of the problem is version of streamlit-aggrid.

Example Code:

import streamlit as st
from st_aggrid import AgGrid, GridOptionsBuilder, GridUpdateMode
from st_aggrid.shared import JsCode
import pandas as pd

data = {
    "Name": ["Alice", "Bob", "Charlie"],
    "Age": [25, 30, 35],
    "link": [
        "https://example.com/alice",
        "https://example.com/bob",
        "https://example.com/charlie",
    ],
}

df = pd.DataFrame(data)
gb = GridOptionsBuilder.from_dataframe(df,
                                        editable=True)

cell_renderer =  JsCode("""
                        function(params) {return `<a href=${params.value} target="_blank">${params.value}</a>`}
                        """)


gb.configure_column("link",
                headerName="Link",
                cellRenderer=cell_renderer,
                width=100)


grid = AgGrid(df,
            gridOptions=gb.build(),
            updateMode=GridUpdateMode.VALUE_CHANGED,
            allow_unsafe_jscode=True)

output with streamlit-aggrid version 0.3.2 is

This is what I want.

On the other hand, if I use streamlit-aggrid version 0.3.4, the result is

Does anyone have same issue?
(Python version is 3.10)

[Caroline]

Hey @ths,

Thanks for sharing this question.

I did some digging and found a GitHub Issue focused on this problem in the GitHub repo for streamlit-aggrid.

It looks like the reason for this change is that the component creator Pablo Fonseca had to upgrade aggrid-react, which resulted in pure HTML responses no longer working. He noted that you’ll need to use a cellRenderer instead.

A few folks in that thread shared code snippets you might find helpful:

class BoldCellRenderer {
  init(params) {
    this.eGui = document.createElement('span');
    this.eGui.innerHTML = '<b>'+params.value+'</b>';
  }
  getGui() {
    return this.eGui;
  }
}

gb = GridOptionsBuilder()
gb.configure_column(
    "URL", "URL",
    cellRenderer=JsCode("""
        class UrlCellRenderer {
          init(params) {
            this.eGui = document.createElement('a');
            this.eGui.innerText = 'SomeText';
            this.eGui.setAttribute('href', params.value);
            this.eGui.setAttribute('style', "text-decoration:none");
            this.eGui.setAttribute('target', "_blank");
          }
          getGui() {
            return this.eGui;
          }
        }
    """)
)

[ths]

Thank you very much! It works!
Now the whole code becomes like below

import streamlit as st
from st_aggrid import AgGrid, GridOptionsBuilder, GridUpdateMode
from st_aggrid.shared import JsCode
import pandas as pd

data = {
    "Name": ["Alice", "Bob", "Charlie"],
    "Age": [25, 30, 35],
    "link": [
        "https://example.com/alice",
        "https://example.com/bob",
        "https://example.com/charlie",
    ],
}

df = pd.DataFrame(data)
gb = GridOptionsBuilder.from_dataframe(df,
                                        editable=True)

cell_renderer =  JsCode("""
                        function(params) {return `<a href=${params.value} target="_blank">${params.value}</a>`}
                        """)


gb.configure_column(
    "link",
    headerName="link",
    width=100,
    cellRenderer=JsCode("""
        class UrlCellRenderer {
          init(params) {
            this.eGui = document.createElement('a');
            this.eGui.innerText = 'SomeText';
            this.eGui.setAttribute('href', params.value);
            this.eGui.setAttribute('style', "text-decoration:none");
            this.eGui.setAttribute('target', "_blank");
          }
          getGui() {
            return this.eGui;
          }
        }
    """)
)

grid = AgGrid(df,
            gridOptions=gb.build(),
            updateMode=GridUpdateMode.VALUE_CHANGED,
            allow_unsafe_jscode=True)