Make Streamlit table results hyperlinks or add radio buttons to table?

I have a large data set that I’m filtering through. After the user chooses the filters they want and clicks submit, I have a table that displays results (similar to the image below).

I want to make each entry in the “Link Number” column clickable. Is there a way to easily make the items in the list clickable with hyperlinks? Or does the hyperlink text need to just be included in the original dataframe?

Or as another option, is there a way to show radio buttons for each line entry in a table? If so, is there a way to use that radio button to grab the text from the “Line Number” column then use that text in the URL?

Hey @srog,

I dont think its easily doable with st.table but you sure can do it with bokeh.

import streamlit as st
import pandas as pd
from bokeh.plotting import figure

from bokeh.models import ColumnDataSource, CustomJS
from bokeh.models import DataTable, TableColumn, HTMLTemplateFormatter


df = pd.DataFrame({
        "links": ["https://www.google.com", "https://streamlit.io", "https://outlook.com"],
})
cds = ColumnDataSource(df)
columns = [
TableColumn(field="links", title="links", formatter=HTMLTemplateFormatter(template='<a href="<%= value %>"target="_blank"><%= value %>')),
]
p = DataTable(source=cds, columns=columns, css_classes=["my_table"])
st.bokeh_chart(p)

Now if you want the text from the line number you need use a custom component, streamlit-bokeh-events something like this,

import streamlit as st
import pandas as pd
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource, CustomJS
from bokeh.models import DataTable, TableColumn, HTMLTemplateFormatter
from streamlit_bokeh_events import streamlit_bokeh_events


df = pd.DataFrame({
        "links": ["https://www.google.com", "https://streamlit.io", "https://outlokk"],
})
# create plot
cds = ColumnDataSource(df)
columns = [
TableColumn(field="links", title="links", formatter=HTMLTemplateFormatter(template='<a href="<%= value %>"target="_blank"><%= value %>')),
]

# define events
cds.selected.js_on_change(
"indices",
CustomJS(
        args=dict(source=cds),
        code="""
        document.dispatchEvent(
        new CustomEvent("INDEX_SELECT", {detail: {data: source.selected.indices}})
        )
        """
)
)
p = DataTable(source=cds, columns=columns, css_classes=["my_table"])
result = streamlit_bokeh_events(bokeh_plot=p, events="INDEX_SELECT", key="foo", refresh_on_update=False, debounce_time=0, override_height=100)
if result:
        if result.get("INDEX_SELECT"):
                st.write(df.iloc[result.get("INDEX_SELECT")["data"]])

This will work look like this,

Hope it helps !

1 Like