Creating an Aggrid with columns with embedded URLs

[ths]

I would like to make link column clickable. However, the code doesn’t work.

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=1000)


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

The code shows

I checked this discussion. However, it didn’t work for me.
Add URL hyperlink to a single cell in an AG-Grid Table

Any helps are appreciated.

[ferdy]

Use a backtick in:

'<a href=${params.value} target="_blank">${params.value}</a>'

like this:

`<a href=${params.value} target="_blank">${params.value}</a>`

[ths]

@ferdy

Use a backtick in:

Thank you very much for your suggestion. I tried it.
My entire code becomes

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)

However, the result is same.

[ths]

I don’t know the root of the problem. However,
this solution works well, when I built new pipenv environment.

The reason why this solution did not work correctly was because of my environment.
Thank you very much!!!

[ths]

I forgot paste a result of the solution and new environment.

[george-j-thomas]

What about your environment needed to change? I’m in the same boat, and I also use pipenv.

[ths]

If you are facing the same problem please refer to this link. It shows a radical solution.
https://discuss.streamlit.io/t/streamlit-aggrid-version-creating-an-aggrid-with-columns-with-embedded-urls/39640/2