πŸ“Š Tutorial: Advanced Interactive Tables with streamlit-slickgrid (Grouping, Formatting & Callbacks)

Hey Streamlit Community! :waving_hand:

I wanted to share a detailed walkthrough on how to level up your data display games using the streamlit-slickgrid component developed by our Streamlit Heros @thiago and @dataprofessor who also give me some extrahelp with my project. While standard dataframes are great, sometimes you need specific features like hierarchical grouping, advanced conditional formatting, and interactive row selections to really make a dashboard pop.

:movie_camera: The Video & The Language Barrier (Solved!)

The original tutorial was recorded in Spanish, but thanks to YouTube’s AI Audio Dubbing, it is fully accessible to English speakers! :headphone:

When you play the video, YouTube should automatically detect your language settings and play the English audio track. If not, simply go to the video settings (gear icon) β†’ Audio Track β†’ English. It works surprisingly well!

:television: Watch the tutorial here:

:rocket: What’s covered in the video:

  • Tree Data Grouping: How to organize data hierarchically (e.g., Continent β†’ Country) without losing performance.

  • Conditional Formatting: applying color logic to specific cells (like formatting percent changes in red or green based on value).

  • Custom HTML Injection: How to render images (like country flags) directly inside the grid cells.

  • Interactivity: Using callbacks to trigger events (like opening a modal chart) when a user clicks a specific row.

  • Pandas Data Prep: How to structure your DataFrame specifically for the SlickGrid JSON requirements.

:laptop: The Code

Code is often the best way to learn. I’ve made the full source code for the demo application available on GitHub. You can clone it, run it, and start tweaking the grid options to fit your own data.

:open_file_folder: GitHub Repository: Streamlit-Demo-Apps/streamlitSlickGrid at main Β· gcastano/Streamlit-Demo-Apps Β· GitHub

I hope this helps anyone looking to implement more complex grids in their Streamlit apps. Let me know if you have any questions about the implementation or the component!

Happy Streamlit-ing! :balloon:

4 Likes