Creating an Aggrid with columns with embedded URLs

🧩 Custom Components streamlit-aggrid
,
1

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

st_grid
st_grid738×251 11.2 KB

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.

2

Use a backtick in:

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

like this:

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

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.

st_grid2
st_grid2725×179 12.7 KB

4

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!!!

5

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

st_grid3
st_grid3768×136 8.86 KB

6

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

7

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