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

Custom Components
,
2

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;
          }
        }
    """)
)
4 Likes