Pivot

Pivot is an AG Grid Enterprise feature, so you’ll need a license key to use it. See Using AG Grid Enterprise for an example of how to use your license key with Dash AG Grid components.

Pivoting allows you to take a column’s values and turn them into columns. For example, you can pivot on Country to make columns for Ireland, United Kingdom, USA, etc.

Pivoting only makes sense when mixed with aggregation. If you turn a column into a pivot column, you must have at least one aggregation (value) active for the configuration to make sense. For example, if pivoting by country, you must provide something you are measuring such as ‘gold medals per country’.

Pivot Mode

Pivot mode is required to be turned on for pivoting to work. When the grid is in pivot mode, the following will happen:

If pivot mode is off, then adding or removing pivot columns will have no effect.

To allow a column to be used as pivot column via the Tool Panel, set enablePivot=true on the required columns. Otherwise you won’t be able to drag and drop the columns to the pivot drop zone from the Tool Panel.

Specifying Pivot Columns

To pivot rows by a particular column, mark the column you want to group with pivot=true. There is no limit on the number of columns that the grid can pivot by. For example, the following will pivot the rows in the grid by country and then sport:

columnDefs = [
    { "field": "country", "pivot": True },
    { "field": "sport", "pivot": True }
]

Example: Simple Pivot

The example below shows a simple pivot on the Sport column using the Gold, Silver and Bronze columns for values.

Columns Date and Year, although defined as columns, are not displayed in the grid as they have no group, pivot or value associated with them.

import dash_ag_grid as dag
from dash import Dash, html, dcc
import pandas as pd

import os

app = Dash(__name__)


df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)


columnDefs = [
    {"field": "country", "rowGroup": True, "enableRowGroup": True},
    {"field": "sport", "pivot": True},
    {"field": "year"},
    {"field": "date"},
    {"field": "gold", "aggFunc": "sum"},
    {"field": "silver", "aggFunc": "sum"},
    {"field": "bronze", "aggFunc": "sum"},
]

defaultColDef = {"flex": 1, "minWidth": 150}


app.layout = html.Div(
    [
        dcc.Markdown("Demonstration of pivot in a Dash AG Grid."),
        dcc.Markdown(
            "The example below shows a simple pivot on the Sport column using the Gold, Silver and Bronze columns for values."
        ),
        dag.AgGrid(
            id="pivot-ag-grid-example",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            dashGridOptions={
                "autoGroupColumnDef": {"minWidth": 250},
                "animateRows": False,
                "pivotMode": True,
            },
            defaultColDef=defaultColDef,
            # Pivot groupings is an ag-grid Enterprise feature.
            # A license key should be provided if it is used.
            # License keys can be passed to the `licenseKey` argument of dag.AgGrid
            enableEnterpriseModules=True,
            licenseKey=os.environ['AGGRID_ENTERPRISE'],
        ),
    ]
)


if __name__ == "__main__":
    app.run(debug=True)

Demonstration of pivot in a Dash AG Grid.

The example below shows a simple pivot on the Sport column using the Gold, Silver and Bronze columns for values.