How to Create Well-Styled Streamlit Dataframes, Part 2: using AgGrid
In my previous post, we covered how to create pretty styled dataframes using the pandas Styler object. In this post, I want to tell you about a second option: Streamlit AgGrid. I will share how to build dataframes like the one displayed above. After reading this post you will learn:
- The key components inside AgGrid. These are
gridOptions(),configure_column(),configure_default_column(), andconfigure_side_bar(). - The main options to enable filtering and aggregating tables using the directly the UI. No more building ad-hoc queries for simple transformations!
- Making the dataframe prettier with Javascript functions. You will be able to copy paste them in your code if you want. Or check my Git repo.
Disclaimer 1: I have no affiliation or partnership with AgGrid. I just find a lot of value in the open-source product. AgGrid does have a paid tiered product, but the blog will only use the free components of AgGrid.
Disclaimer 2: All images and GIFs are authored by myself unless specified otherwise.
What is AgGrid
AgGrid is a powerful and customizable data grid component that you can use in web applications to display and manipulate large amounts of data in a table format. The best analogy I find is that it is the web-app version of Excel. Think of it as a supercharged table that not only shows data but also allows users to interact with it in many ways, like editing cells, aggregating & pivoting, or even integrating with charts. It's actually used in a lot of enterprises.
Now, AgGrid is built using Javascript
