Multiple links in one dataframe field

[mj907]

hi all,

Im trying to display a dataframe which includes a couple of links in one field. The users request the links to be clickable, instead of copy paste.
here’s a small example of data:

data = [
        ['Google', "'https://www.google.com','https://www.github.com', 'https://www.github.com'" ],
        ['GitHub', "'https://www.github.com', 'https://www.github.com', 'https://www.github.com'"],
        ['Stack Overflow', "'https://www.stackoverflow.com', 'https://www.github.com', 'https://www.github.com'"]
        ]
df = pd.DataFrame(data, columns=['Name', 'Link'])
st.dataframe(df)

I tried the lambda function, I tried st.column_config.LinkColumn (then the full string becomes one meaningless link) - any advice? Do I have to totally restructure my tables? Any help appreciated.

[edsaac]

I’m afraid that’s true, each individual element in a ListColumn cannot be interpreted as individual links. But it would make a good feature request imo, because splitting the columns to get the separate links does not look as nice.

Code:

import streamlit as st
import pandas as pd

data = [
    [
        "Google",
        "https://www.google.com, https://www.github.com, https://www.github.com",
    ],
    [
        "GitHub",
        "https://www.github.com, https://www.github.com, https://www.github.com",
    ],
    [
        "Stack Overflow",
        "https://www.stackoverflow.com",
    ],
    [
        "Streamlit",
        "https://stpyvista.streamlit.app, https://streamlit.io",
    ],
]

df = pd.DataFrame(data, columns=["Name", "Link List"])

"### Original approach"
st.dataframe(df, column_config={"Link List": st.column_config.ListColumn()})


"### Split list into separate columns"
df[["Link_1", "Link_2", "Link_3"]] = df["Link List"].str.split(",", expand=True)

st.dataframe(
    df.drop("Link List", axis=1),
    column_config={
        k: st.column_config.LinkColumn(label="🔗") for k in df.columns if "Link" in k
    },
)

[mj907]

thanks, any workaround besides splitting into more columns/rows? any easy way to create buttons that show next to the said table?

[mj907]

also, how did you manage in the original approach to have those gray buttons? Is that a 1.35 feature? Im running 1.33

[edsaac]

The alternative that comes to mind is Ag-grid, but I would not call that an easy way and I am not certain that is actually possible.

The gray buttons (pills?) are the default rendering for a ListColumn. I checked and they look the same between versions 1.33 and 1.35. You can tweak their color modifying the secondaryBackgroundColor parameter in your config.toml (See: https://docs.streamlit.io/develop/concepts/configuration/theming
).

[mj907]

oh, gotya, sorry I was thinking st.column_config.LinkColumn

and read in your code what I wanted to hear haha

[mj907]

ok, if anybody will end up reading this wanting to do the same thing:

in my case best thing to do was to add another column in the dataframe that allows to select a checkbox [show details]
If user selects the row then nice grid of details per selected dataset shows, and in that grid you can just add a markup language with multiple links.

[edsaac]

This was a great idea, so sharing here an example using st.dialog:

Code:

import streamlit as st
import pandas as pd


@st.experimental_dialog("Links")
def dialog_with_links(links: list[str]):
    for link in links:
        st.link_button(link, url=link)


data = [
    [
        "Search",
        "🔎",
        "https://www.google.com, https://duckduckgo.com/, https://www.bing.com",
    ],
    [
        "Version control",
        "⏲️",
        "https://www.github.com, https://gitlab.com, https://bitbucket.org",
    ],
    ["Tutorials", "🙋‍♂️", "https://www.python.org, https://realpython.com/"],
    [
        "Streamlit",
        "🎈",
        "https://stpyvista.streamlit.app, https://streamlit.io, https://discuss.streamlit.io/",
    ],
]

df = pd.DataFrame(data, columns=["Name", "Emoji", "link_list"])


def main():
    left_column, right_column = st.columns([2, 1])

    with left_column:
        "### Simple dataframe"

        st.dataframe(
            df,
            use_container_width=True,
            column_config={"link_list": st.column_config.ListColumn("Links")},
        )

    with right_column:
        "### Trigger a dialog with options"

        selection = st.dataframe(
            df,
            use_container_width=True,
            column_config={"link_list": None},
            hide_index=True,
            selection_mode="single-row",
            on_select="rerun",
        )

        if row := selection["selection"]["rows"]:
            links = df["link_list"].loc[row].values[0].split(",")
            dialog_with_links(links)


if __name__ == "__main__":
    main()