Hi Streamlit Community! 
We all know that st.components.v2 opens up a massive world of possibilities for our apps, but bridging the gap between Python and JavaScript/HTML can sometimes feel like a hurdle.
I’m excited to share a video tutorial that walks you through creating a custom component from scratch—specifically, an interactive table using the MaterializeCSS framework.
Bridging the Language Gap
While the original video was recorded in Spanish, it utilizes YouTube’s AI multi-language audio feature. You can seamlessly switch the audio track to English to follow along with the technical explanation.
Watch the Tutorial Here:
What you’ll learn in this video:
-
HTML/JS Integration: How to inject third-party libraries (like MaterializeCSS) into your Streamlit app.
-
Bi-directional Communication: How to render data from a Pandas DataFrame into HTML and, crucially, how to capture button clicks in JavaScript and send that data back to Python.
-
The isolate_styles Parameter: A practical explanation of how to use this parameter to decide if your component should live in the Shadow DOM (isolated) or inherit global styles from your app.
-
State Management: handling the interaction between the component’s return values and Streamlit’s session state.
Get the Source Code
Don’t want to type along? The full source code is available on GitHub for you to clone, test, and modify for your own projects:
I hope this helps anyone looking to add more interactivity and custom styling to their apps without needing a complex React setup.
Let me know if you have any questions about the code or the component logic!
Happy coding! 