ths
March 19, 2023, 2:39pm
1
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)
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;
}
}
""")
)
1 Like
ths
April 30, 2023, 3:43am
3
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)
3 Likes
system
Closed
May 2, 2023, 3:43am
4
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.