St.data_editor - LinkColumn with different label and URL?

[noamgat]

Summary

We want to display download links for files inside an st.data_editor (could also be a normal table).
The column config has a LinkColumn, however the text must be the complete link.
Is it possible (via raw html or some sort) to have something like (taking the example as a reference)

data_df = pd.DataFrame(
     {
         "apps": [
             '<a href="https://roadmap.streamlit.app">roadmap</a>',
             "https://extras.streamlit.app",
             "https://issues.streamlit.app",
             "https://30days.streamlit.app",
         ],
     }
 )

Additional information

I’ve had a brief look at st-aggrid. Would that be an easier solution for this use case?

[Abishek_Haththakage]

This can be done in Streamlit by using the ‘st.dataframe’ function rather than the ‘st.data_editor’ or a standard table. With the use of the ‘st.dataframe’ function, which supports rendering HTML content, you can show download links with various labels and URLs.

Here is an illustration of how to use ‘st.dataframe’ to display download links with various labels and URLs:

import pandas as pd
import streamlit as st

data_df = pd.DataFrame(
    {
        "apps": [
            '<a href="https://roadmap.streamlit.app">roadmap</a>',
            '<a href="https://extras.streamlit.app">extras</a>',
            '<a href="https://issues.streamlit.app">issues</a>',
            '<a href="https://30days.streamlit.app">30days</a>',
        ],
    }
)

st.dataframe(data_df, unsafe_allow_html=True)

The ‘unsafe_allow_html=True’ option is used in this example to permit the rendering of HTML content inside the ‘st.dataframe’ method. HTML anchor tags (‘a>’) with the proper ‘href’ attributes are present in the ‘apps’ column for each link.

If you’d rather use “st-aggrid,” you can also create a custom renderer to do the same thing. Here’s an illustration:

import pandas as pd
import streamlit as st
import streamlit.components.v1 as components

data_df = pd.DataFrame(
    {
        "apps": [
            "roadmap",
            "extras",
            "issues",
            "30days",
        ],
        "urls": [
            "https://roadmap.streamlit.app",
            "https://extras.streamlit.app",
            "https://issues.streamlit.app",
            "https://30days.streamlit.app",
        ],
    }
)

renderer_code = """
function(params) {
  var link = document.createElement('a');
  link.setAttribute('href', params.value);
  link.setAttribute('target', '_blank');
  link.innerText = params.data.urls[params.rowIndex];
  return link;
}
"""

components.html(
    f"""
    <div id="ag-grid-container" style="height: 300px;"></div>
    <script>
        var gridOptions = {{
            columnDefs: [
                {{ field: 'apps', headerName: 'Apps', cellRenderer: 'linkRenderer' }},
            ],
            rowData: {data_df.to_json(orient='records')},
            components: {{
                linkRenderer: {renderer_code},
            }},
        }};
        new agGrid.Grid(document.querySelector('#ag-grid-container'), gridOptions);
    </script>
    """,
    height=400,
)

In this demonstration, we use JavaScript to build a custom cell renderer that generates an anchor tag (‘a>’) with the proper link and label. The labels are located in the DataFrame’s “apps” column, while the URLs are located in the “urls” column. The labels will appear as clickable links in the produced grid.

Both strategies will produce the desired outcome, so you can pick the one that best meets your preferences and needs.

[edsaac]

@Abishek_Haththakage

The ‘unsafe_allow_html=True’ option is used in this example to permit the rendering of HTML content inside the ‘st.dataframe’ method.

st.dataframe has no argument unsafe_allow_html, your LLM is probably hallucinating on this one

---

In a nutshell, this is currently (v. 1.23) not possible using LinkColumn (check this other thread How to display a clickable link pandas dataframe - #6 by lukasmasuch). But feel free to upvote this feature request to have that in the future.