How to style editable columns in st.data_editor using pandas Styler or column_config?

Using Streamlit
, ,
1

Hey guys,
I’m trying to display a DataFrame in Streamlit using st.data_editor, where:

  • Some columns are editable (e.g., Proposed Price)
  • Some columns are non-editable (e.g., Brand, Current Price, Price Change %)
  • I want to apply background colors differently for editable vs non-editable columns

I can style non-editable columns using pandas Styler.map, but it seems that styling does not work for editable columns.
Streamlit version : 1.50.0 , Python version : 3.12.7
Code example:

if 'df' not in st.session_state:
    st.session_state.df = pd.DataFrame({
        'Brand': ['Brand1', 'Brand2', 'Brand3', 'Brand4', 'Brand5'],
        'Current Price': [100.00, 250.00, 75.50, 180.00, 320.00],
        'Proposed Price': [105.00, 240.00, 80.00, 190.00, 300.00],
        'Price Change %': [0.0, 0.0, 0.0, 0.0, 0.0]
    })

def calculate_percentage_change(current, proposed):
    if current == 0:
        return 0.0
    return ((proposed - current) / current) * 100

# Update price change %
for i in range(len(st.session_state.df)):
    current = st.session_state.df.loc[i, 'Current Price']
    proposed = st.session_state.df.loc[i, 'Proposed Price']
    st.session_state.df.loc[i, 'Price Change %'] = calculate_percentage_change(current, proposed)

# Styling functions
def color_percentage(val):
    if val > 0:
        return 'background-color: #d4edda; color: #155724'
    elif val < 0:
        return 'background-color: #f8d7da; color: #721c24'
    else:
        return 'background-color: #fff3cd; color: #856404'

def color_editable(val):
    return 'background-color: #f5f5f5;'  # Trying to style editable columns

styled_df = st.session_state.df.style.map(color_percentage, subset=['Price Change %']) \
                                     .map(color_editable, subset=['Current Price', "Brand", "Proposed Price"])

# Column configuration
column_config = {
    "Brand": st.column_config.TextColumn("Brand 🔒", disabled=True, pinned=True),
    "Current Price": st.column_config.NumberColumn("Current Price 🔒", disabled=True),
    "Proposed Price": st.column_config.NumberColumn("Proposed Price", format="%d ✏️"),
    "Price Change %": st.column_config.NumberColumn("Price Change %", format="%.2f%%", disabled=True)
}

# Data editor
edited_df = st.data_editor(
    styled_df,
    column_config=column_config,
    width='stretch',
    hide_index=True
)

output:

image
image592×314 35 KB

  • Non-editable columns (Brand, Current Price, Price Change %) should have their respective background colors applied using pandas Styler.
  • Editable column (Proposed Price) should also have a distinct background color.
  • I tried using map(color_editable, subset=['Proposed Price']) does not apply the background color to the editable column. Styling works only for non-editable columns.

Is there any way in Streamlit to:

  1. Apply custom background colors to editable columns in st.data_editor?
  2. Or use column_config options to achieve the same styling effect?

Thanks.

2

Sorry, pandas styler can only be applied to non-editable columns at this time.

image
image908×629 56.3 KB

3

Thanks for the clarification, I just confirmed that as well. Do you know if there’s an alternative or workaround to apply styling (such as background color) to editable columns?