ths
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
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
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
ths
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.
ths
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!!!
ths
5
I forgot paste a result of the solution and new environment.