Skip to content

lab2.dev is launched! Build python web apps with plain English, no code required.

Streamlit AgGrid: Unleashing the Power of Data Visualization

In the realm of data analysis and visualization, tools that simplify the process and enhance the output are always in high demand. One such tool that has been making waves in the Python community is Streamlit AgGrid. This powerful tool combines the simplicity of Streamlit with the versatility of AgGrid, providing a user-friendly platform for creating interactive data applications. In this article, we will delve into the world of Streamlit AgGrid, exploring its features, installation process, customization options, and practical applications.

Have you heard of this awesome Data Analysis & Data Visualisation tool, that turns your Streamlit App into Tableau?

PyGWalker (opens in a new tab) is a Python Library that helps you easily embed a tableau-alternative UI into your own Streamlit app effortlessly.

PyGWalker for Data visualization in Streamlit (opens in a new tab)

Understanding Streamlit AgGrid

What is Streamlit AgGrid?

Streamlit AgGrid is an open-source grid system designed for Python web applications. It was created by Pablo Fonseca and is built upon AgGrid, a JavaScript-based grid system known for its speed and ease of use. Streamlit AgGrid brings the power of AgGrid to Streamlit, a popular framework for building machine learning and data science web apps. The result is a tool that not only simplifies data visualization but also enhances the overall user experience.

How does Streamlit AgGrid work?

At its core, Streamlit AgGrid is a JavaScript-based grid system. This means it operates using JavaScript code, which is integrated with Python through the use of the JsCode library. This library allows JavaScript code to be used within the grid, providing a high level of flexibility and customization.

Streamlit AgGrid works by creating a GridOptionsBuilder object, which is configured with a dataframe read from a local CSV file. This object is then used to decide which columns are editable, whether a checkbox is used, and if multi-selection is allowed.

Features of Streamlit AgGrid

Streamlit AgGrid comes packed with a host of enterprise features. It allows for the creation of stylish graphs and tables, enhancing the visual appeal of your data. One of its standout features is the GridOptionsBuilder. This tool provides AgGrid configuration with various methods, including configure_columns, configure_selection, configure_pagination, and configure_grid_options. These methods allow for a high level of customization, enabling you to tailor the grid to your specific needs.

Installation and Customization of Streamlit AgGrid

Installing Streamlit AgGrid

Getting Streamlit AgGrid up and running on your system is a piece of cake. It's as simple as importing a few specific libraries to create a mutable and interactive table. Here's a quick rundown:

pip install streamlit-aggrid

This command should get you started with Streamlit AgGrid. But remember, the devil is in the details. We'll dive deeper into the step-by-step installation process and the necessary libraries in the next section of this article.

Customizing Streamlit AgGrid

Streamlit AgGrid isn't just a one-size-fits-all solution. It's a tool that you can tweak and twist to fit your unique needs. Want to change the background properties of columns or cells? No problem! You can do that by adding JavaScript code to the Python code.

Here's a quick example:

from streamlit_aggrid import AgGrid, JsCode
 
js_code = JsCode("""
function(params) {
    if (params.value > 0) {
        return {backgroundColor: 'green'}
    } else {
        return {backgroundColor: 'red'}
    }
}
""")
 
gridOptions = {
    'columnDefs': [
        {'headerName': "Value", 'field': "value", 'cellStyle': js_code},
    ],
    ...
}
 
AgGrid(df, gridOptions=gridOptions)

In this example, we're using the JsCode library, which enables the use of JS code in the Grid. This allows us to change the cell background color based on the cell value.

Practical Guide to Using Streamlit AgGrid

Using Streamlit AgGrid with Your Data

Once you've installed and customized Streamlit AgGrid, it's time to put it to work. This involves creating the Ag Grid object and making it appear on the screen. Here's a quick example:

from streamlit_aggrid import AgGrid
 
df = pd.DataFrame(
    np.random.randint(-100, 100, size=(100, 10)),
    columns=list('ABCDEFGHIJ'))
 
AgGrid(df)

In this example, we're creating a DataFrame with random values and displaying it using AgGrid. After the user makes the necessary updates, the current dataframe in AgGrid can be retrieved using the get_data function.

Streamlit AgGrid Examples and Tutorials

To truly understand the power and versatility of Streamlit AgGrid, it's helpful to see it in action. In the upcoming sections, we will walk through practical examples of using Streamlit AgGrid, from creating interactive tables to visualizing complex datasets. We will also provide tutorials for beginners, ensuring you have all the knowledge and skills needed to make the most of this powerful tool.

Let's take a look at these examples:

Example 1. Create a Basic Interactive Table

In the first example, let's use Streamlit AgGrid to create an interactive table.

from st_aggrid import AgGrid
import pandas as pd
 
# Load data into a pandas DataFrame
df = pd.read_csv('your_dataset.csv')
 
# Display the DataFrame in an AgGrid table
AgGrid(df)

Example 2: Visualizing Complex Datasets

Let's work with a sample dataset and demonstrate how to create interactive charts and graphs based on the data displayed in the AgGrid table.

import streamlit as st
from st_aggrid import AgGrid
import pandas as pd
import plotly.express as px
 
# Load data into a pandas DataFrame
df = pd.read_csv('your_dataset.csv')
 
# Display the DataFrame in an AgGrid table
table = AgGrid(df)
 
# Retrieve the updated data from the table
updated_data = table['data']
 
# Create a chart based on the updated data
fig = px.bar(updated_data, x='column1', y='column2')
 
# Display the chart
st.plotly_chart(fig)

Example 3. Connect to External Databases in Stramlit

You can also connect Streamlit AgGrid to external databases, such as Google Sheets or SQL databases. You will learn how to establish a connection, retrieve data from the database, and display it in an interactive AgGrid table. We will also cover techniques for updating and persisting data back to the database, enabling real-time collaboration and seamless integration with external data sources.

from st_aggrid import AgGrid
import pandas as pd
import gspread
 
# Connect to Google Sheets
gc = gspread.service_account(filename='credentials.json')
sh = gc.open('your_google_sheet')
worksheet = sh.get_worksheet(0)
 
# Retrieve data from Google Sheets into a pandas DataFrame
data = worksheet.get_all_records()
df = pd.DataFrame(data)
 
# Display the DataFrame in an AgGrid table
AgGrid(df)

Please note that the sample codes provided are simplified examples and may require modifications to suit your specific use case, such as adapting the file paths, credentials, or API configurations to match your environment.

What Else Can You Do with Stramlit AGrid?

Streamlit AgGrid for Data Visualization

Data visualization is at the heart of Streamlit AgGrid. With its stylish graphs and tables, it provides a visually appealing way to present your data. Here are a few standout features:

  • Customizable Column Definitions: You can customize the appearance and behavior of columns in Streamlit AgGrid.
  • Interactive Features: Streamlit AgGrid supports interactive features like sorting, filtering, and column resizing.

Streamlit AgGrid for Large Datasets

One of the key strengths of Streamlit AgGrid is its ability to handle large datasets. This makes it an excellent tool for big data analysis and visualization. Here are a few ways Streamlit AgGrid handles large datasets:

  • Efficient Rendering: Streamlit AgGrid only renders the rows that are currently visible in the viewport. This means it can handle large datasets without any performance degradation.
  • Server-Side Operations: Streamlit AgGrid supports server-side operations like sorting, filtering, and grouping. This allows it to handle large datasets that wouldn't fit in browser memory.

Streamlit AgGrid for Web Applications

Streamlit AgGrid is not just for data analysis - it's also a powerful tool for web application development. Its JavaScript-based grid system integrates seamlessly with Python web applications, providing a user-friendly platform for creating interactive data applications. Whether you're building a dashboard for data analysis or a full-fledged web application, Streamlit AgGrid can be a valuable addition to your toolkit.

Streamlit AgGrid for Machine Learning and Data Analysis

Streamlit AgGrid is also a valuable tool in the field of machine learning and data analysis. Its ability to handle large datasets and create interactive visualizations makes it an excellent choice for these applications. Here are a few ways you can use Streamlit AgGrid in machine learning and data analysis:

  • Exploratory Data Analysis (EDA): Streamlit AgGrid's interactive features make it a great tool for EDA.
  • Feature Selection: You can use Streamlit AgGrid to visualize the importance of different features in your dataset.
  • Model Evaluation: Streamlit AgGrid can be used to visualize the performance of different models.

Alternatives to Streamlit AgGrid

While Streamlit AgGrid is a powerful tool, it's not the only option available for data visualization in Python. PyGWalker (opens in a new tab) is also another awesome tool that works wonders as the alternative to Streamlit AgGrid.

PyGWalker + Streamlit Online Demo (opens in a new tab)

PyGWalker (opens in a new tab) is a Python Library that helps you easily embed a tableau-alternative UI into your own Streamlit app effortlessly.

Check out this amazing video how to explore data with pygwalker (opens in a new tab) demonstrating the detailed steps for empowering your Streamlit app with this powerful Data Visualization Python Library!


Special Thanks to Sven and his great contribution (opens in a new tab) to PyGWalker community!

Additionally, you can also check out these resources:

Visualize Data in Streamlit with PyGWalker (opens in a new tab)

Besides PyGWalker, here are a few alternatives, each with their own strengths and weaknesses:

  • Matplotlib: A versatile library for creating static, animated, and interactive visualizations in Python.
  • Seaborn: A Python data visualization library based on Matplotlib. It provides a high-level interface for drawing attractive and informative statistical graphics.
  • Plotly: A graphing library that makes interactive, publication-quality graphs.

Conclusion

Streamlit AgGrid is a powerful tool that combines the simplicity of Streamlit with the versatility of AgGrid, providing a user-friendly platform for creating interactive data applications. Whether you're a data scientist looking to visualize complex datasets, a web developer building interactive applications, or a machine learning engineer conducting exploratory data analysis, Streamlit AgGrid has something to offer. Its ability to handle large datasets, coupled with its customizable features and ease of use, make it an excellent choice for a wide range of applications. So why wait? Dive into the world of Streamlit AgGrid and discover the power of interactive data visualization!

Frequently Asked Questions

What is Streamlit AgGrid?

Streamlit AgGrid is an open-source grid system designed for Python web applications. It combines the simplicity of Streamlit with the versatility of AgGrid, providing a user-friendly platform for creating interactive data applications.

How do I make my ag grid responsive?

To make your AgGrid responsive, you can use the domLayout property and set it to 'autoHeight'. This will make the grid's height adjust automatically to fit its content. You can also use CSS to set the width and height of the grid to percentages, which will make the grid resize based on the size of its container.

What is the height of the Ag grid filter?

The height of the AgGrid filter is not fixed and can be adjusted based on your needs. By default, the filter will display enough rows to fit the content without scrolling. However, you can set a maximum height for the filter by using the maxDisplayedRows property in the filter params.

What is Streamlit component?

Streamlit components are Python libraries that allow you to extend the functionality of Streamlit. They can be used to integrate with other JavaScript libraries and frameworks, create new types of visualizations, or add new user interface elements. Streamlit AgGrid is an example of a Streamlit component.