How to change the header color and font in st.dataframe() and st.data_editor()?

Using Streamlit
, ,
1

When I want to change something I usually just change the style via CSS, but I can’t find the correct data-testid nor the parameter to change the color of the headers and borders of a dataframe, I’m nowhere near a front-end developer, maybe that is part of the issue lol.

Is this possible to do in streamlit?

2

Hey @renanklehm :wave:

Here’s an example with Pandas Styler:

image
image716×574 10.2 KB

import streamlit as st
import pandas as pd

df = pd.DataFrame({
    'Column 1': [1, 2, 3],
    'Column 2': [4, 5, 6]
})

def style_dataframe(df):
    return df.style.set_table_styles(
        [{
            'selector': 'th',
            'props': [
                ('background-color', '#4CAF50'),
                ('color', 'white'),
                ('font-family', 'Arial, sans-serif'),
                ('font-size', '16px')
            ]
        }, 
        {
            'selector': 'td, th',
            'props': [
                ('border', '2px solid #4CAF50')
            ]
        }]
    )

styled_df = style_dataframe(df)

st.write(styled_df.to_html(), unsafe_allow_html=True)

Would that work for you?

Best,
Charly

3

Thanks!
I assume that there is no way of setting a “default” style to all tables, right?

4

Also, Is there a way of using a similar approach with data_editor()?

1 Like
5

Well, you could streamline the process by defining a utility function for styling and then applying it to any DataFrame you want to display! :smiling_face:

Let me know if you’d need any help on this.

Charly

6

Not with data_editor() afaik, but then there’s always the streamlit-aggrid option.

Best,
Charly

7

Here’s how @renanklehm:

import streamlit as st
import pandas as pd

df1 = pd.DataFrame({
    'Column 1': [1, 2, 3],
    'Column 2': [4, 5, 6]
})

df2 = pd.DataFrame({
    'Column A': ['A', 'B', 'C'],
    'Column B': ['D', 'E', 'F']
})

def style_dataframe(df):
    return df.style.set_table_styles(
        [{
            'selector': 'th',
            'props': [
                ('background-color', '#4CAF50'),
                ('color', 'white'),
                ('font-family', 'Arial, sans-serif'),
                ('font-size', '16px')
            ]
        }, 
        {
            'selector': 'td, th',
            'props': [
                ('border', '2px solid #4CAF50')
            ]
        }]
    )

def display_dataframe(df):
    styled_df = style_dataframe(df)
    st.write(styled_df.to_html(), unsafe_allow_html=True)

# Display DataFrames
st.header("DataFrame 1")
display_dataframe(df1)

st.header("DataFrame 2")
display_dataframe(df2)

I hope that helps.

Charly

1 Like
8

can you do that but row level depending on value? or column?