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?

4

Sorry for the necro, but I run into this same problem myself and found a workaround that I thought might be worth sharing, namely by using streamlit-aggrid library and the GridOptionsBuilder component. Granted, the aesthetics of Aggrid are different from Streamlit, but at least you can style edtiable columns (you can even style the headers and data cell differently, if you wanted).

5

yeah. once i started using aggrid , i cant go back to streamlit dataframe as it is very powerful with jscode etc. for simple stuff i am still using st dataframe and data_editor.