Injecting CSS formatting to a st.data_editor() widget

[eurojourney]

Hi!

I am interested in being able to inject CSS to a st.data_editor() widget. I tried using styable_containers, that did not work due to the nature of the widget, i.e. it renders as a React component. Any suggestion? I’ve read a bit about another component named aggrid, would that be a potential solution, and if so, would it have the same behavior as st.data_editor (being able to copy one cell into multiple cells like in Excel) and just plain general cell editing ?

Thanks!

[raethlein]

Hey @eurojourney, I think aggrid is pretty sophisticated and probably the best thing you can do is to try it out and see whether it fulfils all your requirements: GitHub - PablocFonseca/streamlit-aggrid: Implementation of Ag-Grid component for Streamlit

Other than that, you could also leverage Streamlit’s st.html directive like

st.html("""
<style>
YOUR CSS HERE
</style>
""")

to apply custom styles. However, we do not give any guarantees about the DOM structure between release versions etc., so this might break with future versions. Although we have just recently merged more stable CSS classes into develop that should give some stability at least.
I hope this helps