How can I hide "<NA>" (NaN) values with st.dataframe() or st.table() in Streamlit?

Question

When I display a Pandas DataFrame in Streamlit, using st.dataframe() or st.table(), NaN values show up as the text <NA>. I would like to hide them.

Code:

# table.py
import pandas as pd
import streamlit as st

df = pd.read_csv("nlp_metrics_v2.csv", header=0)
st.dataframe(df)

# nlp_metrics_v2.csv
Model,NLP Model,NLP Prime,YOLO-NLP
Average Rouge 1,,,
  F1 Score,0.5,0.7,0.3
  Precision,0.5,0.2,0.5
  Recall,0.7,0.32,0.32
Average Rouge 2,,,
  F1 Score,0.4,0.3,0.5
  Precision,0.7,0.46,0.33
  Recall,0.6,0.7,0.5
Average Rouge L,,,
  F1 Score,0.8,0.45,0.5
  Precision,0.7,0.5,0.25
  Recall,0.1,0.8,0.25

# Command line
streamlit run table.py

Original Result:

Desired Result:

Hide the cells that contain <NA>, without hiding those rows since they give context about other rows. Any approach that lets me keep the values right-aligned with fixed precision (e.g., 2 decimal places) would be fine. (Ideally I'd like to do this without converting the values in those columns into strings, but that's not a hard requirement.)

I'm aware I'm not using DataFrames the way they were intended, but they seem to be the only mechanism I have for displaying tables in Streamlit.

Answer 1

I tried using pandas.io.formats.style.Styler.highlight_null to set "opacity: 0" or "visibility: hidden", but Streamlit seemed to ignore these CSS properties.

I found this solution by playing around with WebStorm and PyCharm:

# table.py
import pandas as pd
import streamlit as st

df = pd.read_csv("nlp_metrics_v2.csv", header=0)
df = df.style.highlight_null(props="color: transparent;")  # hide NaNs
st.dataframe(df)