Can one inject CSS to a st.data_editor() widget?

Using Streamlit
, ,
2

Hi @eurojourney,

Thanks for sharing this question. You can add custom CSS for your st.data_editor widget, although it’s worth noting that this isn’t officially supported – check out our FAQ on this topic here (pasting the relevant section below for reference as well).

3. CSS styling

To further customize the app, you can use CSS customization. This allows you to make detailed adjustments to the app’s appearance through CSS styling. While using custom CSS with Streamlit is safe, it’s not officially endorsed. Consequently, the class names and IDs of Streamlit widgets and page elements might change in future releases, thereby necessitating updates to your custom CSS to maintain consistent styling.

To allow the Streamlit app to use CSS style information, you’ll need to embed them within a <style> HTML tag. This can be achieved by using the unsafe_allow_html optional keyword of st.markdown or st.write as shown below:

Consider the following simple example of customizing the font size, text alignment and text letter case of the <h1> tag:

st.markdown("""
<style>
   h1 {
      font-size: 16px;
      text-align: center;
      text-transform: uppercase;
   }
</style>
""", unsafe_allow_html=True)

There are also several other specific use cases of CSS styling in the forum that you can look into for ideas as well as tutorial videos on how to implement these in a step-by-step fashion.

Here are further resources to look into:

Forum posts on CSS styling

YouTube videos on CSS styling