I have a pandas dataframe containing clickable links. In jupyter notebook, it displays a dataframe with clickable links that directs me corresponding directories as shown below:
However, when I try to run display the dataframe in streamlit, it wouldnāt render html and does not show the clickable link as shown below:
One way would be to use the to_html method in pandas and combine it with Streamlitās options for injecting html. Though this would lose the interactivity of the pandas dataframe and make it a static table.
I see in the documentation that there is experimental support for pandas styler, but I donāt know off the bat how it behaves with styling links since Streamlit is a bit specific about how it accepts and displays html. Iām playing around with it right now and will post again if I find something.
Thanks for your suggestion here. Iād like to make my table interactive and Ag-Grid seems like the option here, but Iāve never used it before. According to the reference you shared, it looks like itās using Ag-Grid and importing javascript function to make the values in a specific column clickable. Do you happen to have a working example that would work in this example? Thanks so much for your help
You are right. A JsCode instance is passed to the cellRendered kwarg. The JsCode is just a JS function that takes the content in the column and builds an HTML hyperlink tag:
With the latest Streamlit release (1.23) we added new column types that can be used with st.dataframe or st.data_editor. This also includes the LinkColumn which can just URLs as clickable hyperlinks:
import pandas as pd
import streamlit as st
data_df = pd.DataFrame(
{
"apps": [
"https://roadmap.streamlit.app",
"https://extras.streamlit.app",
"https://issues.streamlit.app",
"https://30days.streamlit.app",
],
}
)
st.data_editor(
data_df,
column_config={
"apps": st.column_config.LinkColumn("Trending apps")
},
hide_index=True,
)
Itās currently not possible to show a label instead of the URL, if you would like to do that as well you can upvote this feature request on Github.