Replace the default data grids in Jupyter Labs with AG-Grid

3 min readJun 29, 2024

The default data grid that displays data frames is ok but can be better. AG-Grid is regarded as one of the best data grids out there, and below I will show you how to use it to replace the default data grid in order to enable features such as sorting, filtering, column reordering, grouping, aggregations, and many more.

1. AG-Grid is enabled in Python through a library called IPYAGGRID.

First, we must install the library using pip. In a cell, type:

pip install ipyaggrid

Note: Ensure that you are using compatible versions of Python (>=3.6) and Jupyter Notebook. You may also need to install additional dependencies such as ipywidgets.

2. Next, we need to put a new startup script to set up the data grid config.

Open a terminal and type:

nano ~/.ipython/profile_default/startup/ipyaggrid_init.py

adjust path if your startup directory is somewhere else.

3. Paste in the following code:

import pandas as pd
from ipyaggrid import Grid

# Constants
AGGRID_HEIGHT = 500

STANDARD_GRID_OPTIONS = {
    'defaultColDef': {
        'resizable': True,
        'sortable': True,
        'filter': True,
    },
    'enableValue': True,
    'enableRowGroup': True,
    'statusBar': {
        'statusPanels': [
            {'statusPanel': 'agTotalAndFilteredRowCountComponent', 'align': 'left'},
            {'statusPanel': 'agAggregationComponent', 'statusPanelParams': {'aggFuncs': ['avg', 'sum', 'count', 'min', 'max']}}
        ]
    },
    'groupIncludeTotalFooter': True,
    'enableRangeSelection': True,
}

ADDITIONAL_GRID_OPTIONS = {}

def display_ipyaggrid(df):
    """
    Display a pandas DataFrame using ipyaggrid with custom grid options.

    Parameters:
    df (pd.DataFrame): DataFrame to be displayed.
    """
    try:
        columnDefs = [
            {
                'headerName': col,
                'field': col,
                'enableRowGroup': True,
                'aggFunc': 'sum' if pd.api.types.is_numeric_dtype(df[col]) else None,
            } for col in df.columns
        ]

        grid_options = {**STANDARD_GRID_OPTIONS, **ADDITIONAL_GRID_OPTIONS}
        grid_options['columnDefs'] = columnDefs

        grid = Grid(
            grid_data=df.to_dict('records'),
            grid_options=grid_options,
            columns_fit="auto",
            quick_filter=True,
            height=AGGRID_HEIGHT
        )
        display(grid)
    except Exception as e:
        print(f"Error displaying DataFrame with ipyaggrid: {e}")

def pivot_dataframe(df):
    """
    Pivot a DataFrame for better display when there are few rows and many columns.

    Parameters:
    df (pd.DataFrame): DataFrame to be pivoted.

    Returns:
    pd.DataFrame: Pivoted DataFrame.
    """
    try:
        pivoted_df = df.T
        pivoted_df.columns = [f'Record_{i+1}' for i in range(len(df))]
        pivoted_df = pivoted_df.reset_index()
        pivoted_df.columns = ['Attribute'] + list(pivoted_df.columns[1:])
        return pivoted_df
    except Exception as e:
        print(f"Error pivoting DataFrame: {e}")
        return df

def custom_display(obj):
    """
    Custom display function for pandas DataFrames to determine the best display method.

    Parameters:
    obj (pd.DataFrame): DataFrame to be displayed.
    """
    try:
        if len(obj) <= 3:
            if len(obj.columns) >= 5:
                display_ipyaggrid(pivot_dataframe(obj))
            else:
                print(obj.to_string(index=False))
        else:
            display_ipyaggrid(obj)
    except Exception as e:
        print(f"Error in custom display function: {e}")

this sets up some standard features.

4. Save the file.

Control + X, then Y, then Enter.

5. Go back to a notebook and reload the Kernel.

6. Next, we need to actually override the default pandas display function. You can include this in the function above, but I have left it out so that we can always go back to the original dataframe by restarting the kernel.

In a cell, enter:

pd.DataFrame._ipython_display_ = custom_display

7. Refresh the page.

That’s it! Now it will use AG-Grid for data frame.

8. AG-Grid can do an lot more….

The script above setup a basic datagrid. It also exposes two global variables that can be changed ad-hoc from a notebook cell:

ADDITIONAL_GRID_OPTIONS = {'sideBar': True,}
AGGRID_HEIGHT = 1000