Problem

We are using tables as a common visualisation on our dashboards and we want full control over the formatting of table cells. For example, we want to add tooltips that give extra details on a value, or show Jira issue keys as hyperlinks to the issue in Jira.

This should be possible by using a pandas.Styler for a DataFrame, but although st.dataframe will accept a Styler it completely ignores any styles or formatting, while st.table does apply any CSS but it escapes any HTML in table cells, so any formatting applied via the Styler doesn't work (you just see the raw HTML tags as text).

This Streamlit app demonstrates the problem:

import streamlit as st
import pandas as pd

data = pd.DataFrame(data=[range(3), range(3), range(3)], columns=["alpha", "beta", "gamma"])

# Hiding the index does not work.
view = data.style.hide(axis="index")

# Adding CSS styles works for st.table but not st.dataframe
view.set_table_styles([
    {'selector': "th", 'props': [("font-weight", "bold"), ("text-transform", "capitalize")]},
])

# Adding HTML formats does not work (tags are escaped)
view.format(lambda x: f"<i title='tooltip'>{x}</i>", 'beta')

# Rendering as dataframe ignores styler.
st.text("st.dataframe - neither CSS nor HTML")
st.dataframe(view)

# Rendering as dataframe honours CSS but escapes HTML.
st.text("st.table - CSS but not HTML")
st.table(view)

# Rendering as raw HTML works properly.
st.text("st.markdown - both CSS and HTML")
st.markdown(view.to_html(), unsafe_allow_html=True)

Result:

Solution

Add an option to st.table that stops it from escaping HTML applied via a Styler, but still escapes any HTML in data.

This seems quite safe because we have complete control in our code over the HTML applied via a Styler, whereas we don't necessarily control whether data in the underlying DataFrame contains HTML tags.

Also honour other Styler things like hide(axis="index") to hide the index column.

Additional context

Our workaround is to use markdown with HTML enabled, as shown in the demo above. This is not ideal because it would also leave any HTML tags in the data un-escaped. It also causes tables to overlap when placed in a row using st.columns if the table is too wide for the column.

Note that the API docs (for 1.21) say st.dataframe will apply styles and formats when passed a Styler, but the demo above shows that this is not the case.

Community voting on feature requests enables the Streamlit team to understand which features are most important to our users.

If you'd like the Streamlit team to prioritize this feature request, please use the 👍 (thumbs up emoji) reaction in response to the initial post.