Add URL hyperlink to a single cell in an AG-Grid Table

🧩 Streamlit Components streamlit-aggrid
1

Hello

Is it possible to add a hyperlink to a single cell in an AG-Grid Table, using streamlit-aggrid? I have previously used the following code to create clickable hyperlinks for all cells within a column, but I am not sure how to do it for a single cell in a column.

cellRenderer = JsCode(
“”“function(params) {return <a href=${params.value} target="_blank">${params.value}</a>}”“”
)
gb.configure_column(cellRenderer=cellRenderer)

Any advice would be greatly appreciated!

Thanks and best wishes

John

2

Hi,

Your concept is correct: create the cellRenderer as JsCode and then pass it in to ‘configure_column’ as the cellRenderer param, and you do have to say which column you are configuring.

There is a syntax error in the JS in the post, I don’t know if that was a copy and paste error or if that is contributing to your issue?

e.g.

cell_renderer =  JsCode("""
function(params) {return `<a href=${params.value} target="_blank">${params.value}</a>`}
""")

gb.configure_column("apple", cellRenderer=cell_renderer)
2 Likes
3

Hi Alan

Many thanks for your reply. Sorry - I think that was a cut and paste error.

I have no problem configuring a whole column so that all entries are hyperlinks. However, my problem is that I would like to designate a single cell within the column as a hyperlink. (None of the other cells in the column are hyperlinks). Do I still need to use configure_column or should this be done in a different way?

Many thanks

John

4

Sorry I misread your question.

It is possible but it would be done using other properties in the params either for a specific value, or if the cell was part of the row.

the params provides access to the full grid API and the column API so you can use that to conditionally decide to return html for a link or for just the value:

AG Grid also has the concept of cellRendererSelectors

Which allow use of different selectors, with the condition being performed at the selection stage rather than in the cellRenderer itself.

But… AG Grid does not have a way of assigning a specific cellRenderer to a specific cell, the cellRenderer or cellRendererSelector would use the APIs or the values in params like the rowNode, data, column definition etc. to decide what rendering to use.

So you might look at the value and if it can be converted to a URL without throwing an exception new URL(string) then return the <a>...</a> otherwise just return the params.value.

5

Hi Alan

OK, that makes sense - many thanks for the clear explanation. I will try to do as you suggest.

Best wishes

John

6

I am able to create link in agarid column using bellow code. Is it possible in href instead of “https://www.google.com” we can call our python method

from st_aggrid import JsCode
   
gb.configure_column("link",
                            headerName="Link",
                            cellRenderer=JsCode('''function(params) {return '<a href="https://www.google.com">params.value</a>'}'''),
                            width=300)