The world’s leading publication for data science, AI, and ML professionals.

Make Dataframes Interactive in Streamlit

How to Use Streamlit-Aggrid to Display Beautiful and Interactive Tables in Streamlit

Image by Pixabay (Modified by Author)
Image by Pixabay (Modified by Author)

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.

A dataframe displayed using st.write() (Image by Author)
A dataframe displayed using st.write() (Image by Author)

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
Image by Author
Image by Author

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)
Image by Author
Image by Author

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.

GIF by Author
GIF by Author

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.

GIF by Author
GIF by Author

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!


Related Articles