
When building Data apps using Streamlit, sometimes you may need to display your dataframe as a table in the app. Streamlit has its native data display elements to display tabular data conveniently using st.write()
, st.dataframe()
or st.table()
.
One drawback with these methods is that the table displayed in the app looks plain and static. You can scroll up-down or left-right to view the data, and even use pandas.Styler
with st.dataframe()
to change the styles of the rendered dataframe to some extent, but that’s pretty much how far you can go in terms of styling the table and making it interactive.

In this post, I would like to share with you an awesome Streamlit custom component, streamlit-aggrid
, that is built on top of AG Grid (Agnostic Grid ). You can use streamlit-aggrid
to display Pandas dataframes as interactive, editable tables in Streamlit. You can edit, sort, filter the tables just like how you do it in Excel. You can also select or multi-select rows in the dataframe and pass the selected data to another component in your app, e.g., a plotly chart, a map, another table, etc.
There are many wonderful features of streamlit-aggrid
that enable a variety of interactive activities to be performed on a dataframe. In this post, I’ll mainly focus on the following functionalities:
- Add a ‘theme’ to your table
- Add pagination to your table
- Sort, filter, and select/multi-select rows in your table
- Pass selected data to another component in your app
Here is a quick demo of the interactive table created using Streamlit-aggrid
. Without further delay, let’s see how it works in action!
Before creating an interactive table using streamlit-aggrid
, let’s install streamlit-aggrid
and import our sample dataset into a pandas dataframe. The sample dataset was created from the U.S. Department of Education’s College Scorecard open data (License: Creative Commons Attribution).
pip install streamlit-aggrid

Now we have our sample dataframe ready, let’s first create a basic interactive table using streamlit-aggrid
. With just one line of code, your table already looks much better than the plain dataframe shown earlier!
AgGrid(df)

Next, let’s add more interactive functionalities to the table using the following code:
Line 1–5: We configure various gridOptions
features including pagination, sidebar, and row selection.
Line 7–18: We construct the grid by passing the dataframe name, gridOptions
, theme
, and other parameters to AgGrid()
. Line 10–11 allows grid data to be updated based on row selections and sent back to streamlit.
Line 20–22: If any rows are selected from the grid, the selected data will be passed to an intermediate dataframe and can be reused for other components.
The following screen-recording shows various ways you can interact with the table, such as sorting, filtering, pagination, selecting rows, and passing selected data to an intermediate dataframe.

Lastly, we can make this exercise more fun by passing the selected data to a Folium map. For any selected universities, we can instantly show their locations on the map and some additional information in the tooltip about the institutions. All you need to do here is just to use the intermediate dataframe (df) as the input to your Folium map.

I have already written two detailed articles about how to create a Folium map with customized markers and tooltips like the one shown above so I won’t spend time explaining how this part is done in this post. You can read my articles here to learn more about Folium maps.
Folium Map: How to Create a Table-Style Pop-up with HTML Code
Use HTML in Folium Maps: A Comprehensive Guide for Data Scientists
As I mentioned earlier, streamlit-aggrid
has many more features that you can explore. For example, you can make the cells editable, highlight cells based on max/min values, make columns groupable, etc. You can check out streamlit-aggrid’s GitHub page for more examples.
Please note that AG-Grid Enterprise is a commercial product distributed under EULA and supported by Ag-Grid technical staff. You need to purchase a license from Ag-Grid if you are going to use the enterprise features. The pricing information can be found here: https://www.ag-grid.com/license-pricing.php
Thanks for reading and I hope you enjoyed the article.
References and Data Sources:
Reference:
Streamlit-Aggrid documentation page in Github: https://github.com/PablocFonseca/streamlit-aggrid
Data Source:
U.S. Department of Education’s College Scorecard open data platform (https://data.ed.gov/dataset/college-scorecard-all-data-files/resources).
License: Creative Commons Attribution. This work is licensed under a Creative Commons Attribution License.
Access Level: Public
Access URL: https://ed-public-download.app.cloud.gov/downloads/CollegeScorecard_Raw_Data_02072022.zip
You can unlock full access to my writing and the rest of Medium by signing up for Medium membership ($5 per month) through this referral link. By signing up through this link, I will receive a portion of your membership fee at no additional cost to you. Thank you!