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

[ash2shukla]

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 !