How to change the color of the rows in a pandas dataframe in Streamlit?

Question

How to change the color of the rows in a pandas dataframe in Streamlit?

I am using a light background and I would like to put black for the rows color.

Answer 1

import pandas as pd
import numpy as np
      
# Seeding random data from numpy
np.random.seed(24)
      
# Making the DatFrame
df = pd.DataFrame({'A': np.linspace(1, 10, 10)})
df = pd.concat([df, pd.DataFrame(np.random.randn(10, 4), 
                                 columns=list('BCDE'))], axis=1)

# DataFrame without any styling
print("Original DataFrame:\n")
print(df)
print("\nModified Stlying DataFrame:")
df.style.set_properties(**{'background-color': 'black',
                           'color': 'green'})

With this code, you can set the background color of the data frame as black and the text color: green

Answer 2

I've spent HOURS trying to color a damn word in a dataset without any result. Then I found out that is possible to insert CSS in a streamlit page. So you just need to check how you can archieve the result you want looking inside the source code to find the classes you need.

For color a background of a row in my streamlit page i can do like this:

st.markdown('<style>.ReactVirtualized__Grid__innerScrollContainer div[class^="row"], .ReactVirtualized__Grid__innerScrollContainer div[class^="data row"]{ background:black; } </style>', unsafe_allow_html=True)

Should be similar on your page

In my case I wanted to color only the fields containing OK or KO so I used the following code since pandas report the value of every field in the title attribute

st.markdown('<style>div[title="OK"] { color: green; } div[title="KO"] { color: red; } .data:hover{ background:rgb(243 246 255)}</style>', unsafe_allow_html=True)