7 Reasons Why You Should Use the Streamlit AgGrid Component | by Ahmed Besbes | Towards Data Science

It’s a great library to quickly prototype visually appealing web applications that interact with data and machine learning models in a fun way. As a data scientist, I find Streamlit extremely helpful to share experiments with other team members.
What makes Streamlit even better, besides being a world-class product, is its large set of extensions (also called Streamlit components) that the open-source community releases and maintains.
In this quick post, I’ll be reviewing one of these components. It’s called streamlit-aggrid, it’s built on top of AG Grid and it’s meant to supercharge Streamlit native capabilities of displaying dataframes.
We’ll see how this component works and how you can use it on tabular data by going through 7 tips.
Without further ado, let’s have a look 🔍
Streamlit-aggrid is based, as the name suggests, on AG Grid.
AG Grid (short for Agnostic Grid ) is a fully-featured and highly customizable JavaScript data grid that can be used both as a standalone library or within any modern web framework such as React, Vue or Angular.
Ag-Grid has basic features such as:
Column Interactions (resize, reorder, and pin columns)
Pagination
Sorting
Row Selection
and less standard ones such as:
Grouping / Aggregation
In-place Cell Editing
Records Lazy Loading
Server-Side Records Operations
Live Stream Updates
and more
It also has a paid enterprise version with more advanced features such as Grouping, Aggregation, Server Side operations, real-time data, etc
To install the library:
pip install streamlit-aggrid
To demonstrate what streamlit-aggrid is capable of, let’s play with this dataset that lists Netflix movies and TV shows.
After installing pandas, streamlitand streamlit-aggrid, create a python file named app.pyand paste the following code into it.
This will load a dataframe and pass it to the AgGrid class that’ll be in charge of displaying it.
At first glance, this looks like a standard dataframe.
something you’d simply display with thest.dataframe native function from Streamlit:
However, if you look closer, you can notice some cool features. Some of them are not obvious to see directly. But let’s dive in to explore them, shall we?
This makes it easier to read. st.dataframe always truncates text. This can be annoying sometimes.
Just like Excel files.
You can interactively move and swap columns in any order you want. This makes interaction with the data easier.
To add pagination, you’ll have to slightly modify the code by customizing the style of the grid.
To add these features, just configure a sidebar in the grid options and set the enable_enterprise_modules argument in the AgGrid class to True.
This will first allow you to pin columns, and filter on them with more filtering options.
Then, you’ll notice at the right end of your dataframe a sidebar that you can use to filter columns, perform a pivot table or grouping and aggregation (by mean or sum) operations.
Say you want to highlight American TV and movie shows by changing the background colour of the country column when the value contains “United States”.
To do this, you’ll have to configure the country column in the grid option to change its colour depending on its value. This can be done by injecting a JavaScript code as a string.
To be able to do this, you’ll also have to set allow_unsafe_jscode to True inside the AgGrid class.
This is one of the most interesting features of streamlit-aggrid.
You can capture any event (e.g. sorting a column, check-boxing a line or multiple lines, manually changing a value, etc) that happens on the grid and make it change the global layout of the Streamlit app.
The way this is implemented is very simple. Let’s understand with an example.
Say we want to select multiple rows, and each time we select a new one, we’d like to see an updated histogram of the show ratings grouped by show types (movie/tv show).
To first make rows selectable, we’ll have to change the grid options, as always, by configuring the selection.
Then, we’ll have to specify the update_mode argument inside the AgGrid class.
We’ll set it to SELECTION_CHANGED: this means that each time one or multiple rows are selected, the layout changes. You can also listen to other events such as manual changes of the data or column filtering.
Now, how does this affect the Streamlit app? Very simple.
Each time a row is selected, the AgGird class returns a new value and since this value changes at each selection, Streamlit understands that it has to re-render the app from top to bottom.
To confirm this, let’s write data , the returned value, to the screen after selecting one row.
As you can see data shows that the selected row is captured inside a dictionary. The same goes with multi-row selections: if you select three rows, you’ll get a list of three dictionaries.
Now, if we want to display a plotly chart that summarizes the rows we selected, all we need to do is to add the following code, that creates an intermediate dataframe and passes it to plotly.
And here’s how it looks like when you select multiple rows.
As always, you can check the following links to learn more about streamlit-aggrid.
https://streamlit.io/components
https://www.ag-grid.com/
https://github.com/ag-grid/ag-grid
https://github.com/PablocFonseca/streamlit-aggrid
https://medium.com/ssense-tech/streamlit-tips-tricks-and-hacks-for-data-scientists-d928414e0c16
👉 You can also run the official examples and dive into the code to understand what’s happening.
👉 If you’re interested in learning more about Streamlit, you can check my previous story on building Playground, a Streamlit app that interacts with models directly from the browser.
towardsdatascience.com
Again, if you’ve made it this far, I would like to thank you for your time and hope that streamlit-aggrid will help you in your Streamlit projects.
That’s all for me. Until next time!