From Prototyping Jupyter to Deploying Data Apps with Dash AG Grid (2024)

Plotly

Published in

Plotly

What is Dash AG Grid?

Dash AG Grid is an advanced, interactive, and customizable data table component integrated into Dash applications. Dash is a framework from Plotly for creating analytical web applications without requiring advanced web development skills (including HTML, CSS, and Javascript).

AG Grid, a feature-rich data grid, is known for its performance, flexibility, and comprehensive set of features. When integrated with Dash, it enhances the data handling capabilities of Dash applications significantly.

Why Dash AG Grid?

In traditional data applications, much of the data manipulation — like filtering or pivoting — happens in the backend using Python code. This can be a major hurdle for non-technical users.

Dash AG Grid makes data manipulation more accessible: even non-technical users can perform complex data operations like filtering, selection, and pivoting directly within the grid interface.

This also simplifies the coding process: since many data manipulation tasks are offloaded to the front end, it reduces code complexity, making the developer’s job easier.

Dash AG Grid has transformed the way data apps are built and interacted with, particularly in terms of filtering capabilities, and it’s proven increasingly popular with users. It has seen more than 25,000 monthly downloads recently, with more than 75% of its usage being driven by financial services.

It’s clear why Dash AG Grid can be beneficial for many users and use cases in analytics. Let’s dive into a practical example.

Exploratory analysis in a Jupyter Notebook

Our application will use Our World in Data’s Energy dataset as it provides time-series data on global energy consumption, its sources, and impacts. We’ll use it to understand how global energy trends have changed over time across countries and regions. Follow along with the GitHub repository.

Exploratory data analysis

Before we create our dashboard with Plotly Dash, we need to first understand the distribution, trends, and patterns in the data. You can do this in a hosted notebook (e.g., Google Colab) or by spinning up a Jupyter Notebook on your computer. Jupyter Notebooks are suitable for exploratory data analysis as they provide an interactive environment and combine code, visual outputs, and documentation in one place.

After loading and performing some light data cleaning involving missing values, we can take a look at how renewable energy consumption has changed over the years:

# Line chart showing the trend of renewable energy consumption
fig = px.line(df, x='year', y='renewables_consumption', color='country', title='Renewable Energy Consumption Over Years')
fig.show()

From Prototyping Jupyter to Deploying Data Apps with Dash AG Grid (3)

Next, we can start to sketch out key components of a fully-fledged Dash application right in a Jupyter notebook. Building Dash applications piece-by-piece in a Jupyter Notebook makes it easy to build fully-fledged Dash applications.

In our Dash AG Grid table here, we can sort and filter data directly within the grid. There are many customization opportunities that we’ll dive into in the next section.

From Prototyping Jupyter to Deploying Data Apps with Dash AG Grid (4)

import dash
from dash import Dash, html, dcc
import dash_ag_grid as dag
from dash.dependencies import Input, Output
import pandas as pdapp = Dash(__name__)
app.layout = html.Div([
 dag.AgGrid(
 id='my_ag_grid',
 rowData=df.to_dict('records'),
 columnDefs=[{'field': c} for c in df.columns],
 # Add other AG-Grid properties as needed
 )
])
if __name__ == '__main__':
 app.run_server(debug=True)

Building our Dash application

We’re now ready to create a complete dashboard that uses Dash with Dash AG Grid components.

If you’re not familiar with a Dash application, check out our “Dash in 20 Minutes” tutorial that walks you through a basic Dash app. This application is fairly simple and contains the dependencies, data loading and preprocessing, layout design with Dash Bootstrap Components, the interactive components which include the dropdowns and AG Grid, and the callbacks for interactivity.

In a typical data science workflow, a data scientist would use Python to clean and filter this data. However, with Dash AG Grid, end users can interactively explore trends, like how renewable energy consumption has evolved over the years, by applying filters and sorting data directly within a Dash AG Grid table.

We incorporated Dash AG Grid’s advanced filtering capabilities in the table as it reduces code complexity compared to a traditional Dash DataTable, with two main benefits:

Filtering UI embedded in columns: Each column in the Dash AG Grid can have its own filter interface. This allows users to apply filters directly within the grid, manipulating the dataset at a granular level.

From Prototyping Jupyter to Deploying Data Apps with Dash AG Grid (5)

2. Fewer callbacks: In traditional Dash apps, each input field would typically have its own callback function, triggering data updates or actions. With Dash AG Grid, a single callback can listen to changes across the entire grid, including all column filters. This callback reacts to any state change in the grid, whether it’s a filter change, a sort action, or an edit.

From Prototyping Jupyter to Deploying Data Apps with Dash AG Grid (6)

How does this work? Column-level filtering in the Dash AG Grid is set up through the configuration of column definitions and is dynamically managed through a callback function that responds to changes in the filter state.

We first define the columns in the AG Grid and specify that each column should have a filter. This is done in the columnDefs attribute of the AgGrid component, where the columns are tailored according to their data types for filtering, and other functionalities like resizing, sorting, and editing are enabled for enhanced user interaction:

columnDefs=[
 {
 "field": c,
 "filter": (
 "agNumberColumnFilter" 
 if c in [
 "year", 
 "primary_energy_consumption", 
 "renewables_consumption"
 ] 
 else "agTextColumnFilter"
 ),
 "floatingFilter": True,
 "resizable": True,
 "sortable": True,
 "editable": True,
 }
 for c in df.columns
],

The most crucial part of column-level filtering is how the app responds when filters are applied. This is managed by the callback function:

@callback(
 ...
 [Input('my_ag_grid', 'filterModel')],
 ...
)

Within the callback function, there’s logic to process the filterModel, which contains the current state of filters applied in the grid. This shows how changes made by the user are captured and processed:

if filter_model:
 for col, f in filter_model.items():
 if "filter" in f:
 filtered_column = filtered_df[col].astype(str)
 filter_condition = filtered_column.str.contains(f["filter"])
 filtered_df = filtered_df[filter_condition]

To show how Dash AG Grid makes it incredibly easy to filter data directly within the grid and allows end users to independently manipulate data through the Dash application user interface, we created the same app but with the Dash AG Grid table swapped out for a Dash DataTable instead:

From Prototyping Jupyter to Deploying Data Apps with Dash AG Grid (7)

With Dash DataTable, the filtering (filter_action) and sorting (sort_action) functionalities are native and basic. They provide standard filtering and sorting capabilities but lack the depth of customization available in Dash AG Grid:

dash_table.DataTable(
 id="my_datatable",
 columns=[{"name": i, "id": i} for i in df.columns],
 data=df.to_dict("records"),
 page_size=20,
 filter_action="native",
 sort_action="native",
)

By contrast, Dash AG Grid offers additional properties like floatingFilter, resizable, and editable to enhance user interaction — making the grid more flexible and interactive.

Having features like Dash AG Grid’s column-level filtering is helpful for data science workflows because embedding filters directly into the grid columns allows users to manipulate data more intuitively.

Users of all technical backgrounds can explore and analyze the data without deep technical knowledge of Python just by defining the appropriate filter types and other properties in Dash AG Grid’s columnDefs configuration.

This reduces the need for separate UI elements and callbacks for each filter, simplifying the interface. Writing fewer callbacks reduces the complexity associated with managing numerous filters, and a single callback for all grid changes makes for better performance, which is critical when handling large datasets.

Dash AG Grid is not just about handling data efficiently; it’s about democratizing data analysis. By enabling end-users to perform complex data operations through a user-friendly front end, AG Grid opens up new possibilities for data applications

This tutorial has showcased how Dash AG Grid can streamline your data science workflows, enabling the creation of professional-grade applications using only open-source Python tools. It simplifies traditionally time-consuming processes involved in cleaning, transforming, visualizing, and deploying data applications.

With Dash AG Grid, the challenges of debugging and managing increasingly complex codebases are substantially reduced, cutting down the time it takes to develop interactive data applications.

For data professionals looking to take their Dash applications to the next level — transitioning from prototypes to production-ready and secure applications — Dash Enterprise is the next step. With Dash Enterprise, you can effortlessly scale your apps, enjoy robust security features, and simplify the deployment process, ensuring seamless performance and protection for your data applications.

Data scientists and developers can not only expedite the development process but also ensure that the applications they build are robust, secure, and ready for the demands of real-world use. Questions or want to learn more? Email info@plotly.com.