Pivot Layouts

Defining Pivot Layouts

Summary

  • Pivot Layouts enable AG Grid instances with Pivoting to be defined
  • All elements of pivoting are supported - Pivot Columns, Row Groups and Aggregations
  • Pivot Layouts can also include Format Column styles
  • Pivot Layouts can be defined at design-time through Initial Adaptable State, or created at runtime in the UI Wizard

Pivot Layouts can be defined at design-time using Pivot Layout Initial Adaptable State.

Deep Dive

Anatomy of an AdapTable Pivot Layout

The main properties required to create a Pivot Layout are:

  • PivotColumns - columns which generate a Pivot Column Group for each distinct column value
  • PivotAggregationColumns - columns which will display Aggregated Values (in Pivot Result Columns)
  • PivotGroupedColumns - columns that AG Grid will use for Row Grouping

Hint

Developers can also provide PivotGrandTotal and PivotColumnTotal props which are used in Pivot Total Columns

Developer Guide

Defining a Pivot Layout

These are the steps required to set up a standard Pivot Layout.

To add Sorting, Pinning and other features see the relevant sections in the Table Layout Guide.

// 1. Provide a name ('Pivot Layout')
// 2. Set 1 Column to be pivoted by AG Grid:
//    a. 'language'
// 3. Set Row Grouping on 2 Columns: 
//    a. 'license' 
//    b. 'has_wiki'
// 4. Provide  Aggregations for 2 Columns
//    a.  git_hub_stars - sum
//    b.  github_watchers - count
// 5. Define Column Widths on the 2 Aggregated Columns
//    a.  github_watchers - 100 pixels
//    b.  github_stars - 475 pixels
const initialState: InitialState = {
  Layout: {
    CurrentLayout: 'Pivot Layout',
    Layouts: [
    {
      Name: 'Pivot Layout',
      PivotColumns: ['language'],
      PivotGroupedColumns: ['license', 'has_wiki'],
      RowGroupValues: {
        RowGroupDefaultBehavior: 'always-expanded',
      },
      PivotAggregationColumns: [
      {
        ColumnId: 'github_watchers',
        AggFunc: 'count',
      },
      {
        ColumnId: 'github_stars',
        AggFunc: 'sum',
      },
      ],
      ColumnSizing: {
        github_watchers: {Width: 475},
        github_stars: {Width: 200},
      },
    }],
  },
}
1
Give the Pivot Layout a Name

Choose something unique but relevant.

This is how AdapTable will refer to the Layout in the UI

2
Define Pivot Columns (mandatory)

PivotColumns is an array of (string) Column Ids.

AG Grid dynamically creates a Pivot Result Column for each unique value in each Pivot Column, and each set is displayed in the order provided here.

Caution

AdapTable does not save the actual Pivot Result Columns, since they are dynamically created, nor the order in which they are displayed

If you do not require Pivot Columns, provide an empty array.

3
Provide Pivot Grouped Columns

PivotGroupedColumns is an array of (string) Column Ids.

The Columns will be row-grouped in the order provided.

Specify the Row Group Expanded / Collapsed Behaviour as required.

4
Provide Aggregations

PivotAggregationColumns defines Aggregations to display

It comprises an array of objects which contain 2 properties:

  • a ColumnId (string)
  • either an aggFunc (e.g. sum) or true (to use default aggFunc)
5
Provide Column Sizing (if required)

Set the sizing for both Aggregation and Pivot Result Columns.

ColumnSizing is a map where the ColumnId is the key, and an object (to define sizing, using either Widths or Flex) is the value.

Alternatively use the AutoSizeColumns property to autosize all Layout Columns

Aggregation-Only Layouts

Typically Pivot Layouts include one or more "Pivot Columns" and AG Grid creates a dynamic Pivot Result column for each unique permutation of Pivot Column value and Aggregation Column.

However it is possible to create Pivot Layouts that only contain Aggregated Columns (and no Pivot Columns).

When this happens AG Grid will still create a Pivot Result Column for each Aggregation Column but no Pivot Column Groups.

Caution

When defining an Aggregation-only Pivot Layout, provide an empty array for the mandatory pivotColumns property

Developer Guide

Defining an Aggregation Only Pivot Layout

// 1. Set no Pivot Columns
// 2. Set Row Grouping on license Column 
// 3. Provide  Aggregations for git_hub_stars and github_watchers Columns
const initialState: InitialState = {
  Layout: {
    CurrentLayout: 'Pivot Agg Only Layout',
    Layouts: [
    {
      Name: 'Pivot Agg Only Layout',
      PivotColumns: ['language'],
      PivotGroupedColumns: ['license', 'has_wiki'],
      PivotAggregationColumns: [
      {
        ColumnId: 'github_watchers',
        AggFunc: 'count',
      },
      {
        ColumnId: 'github_stars',
        AggFunc: 'sum',
      },
    ],
  },
}
1
Give the Pivot Layout a Name

Choose something unique but relevant.

This is how AdapTable will refer to the Layout in the UI

2
Provide empty Pivot Columns

As you do not require Pivot Columns, provide an empty array.

3
Provide Pivot Grouped Columns

Provide Columns to be row-grouped using the PivotGroupedColumns property

4
Provide Aggregations

Define the Aggregations to display using the PivotAggregationColumns property.

Pivot Aggregation Layouts
Fork
  • This example creates a Pivot Layout which contains:
    • no PivotColumns
    • 2 PivotAggregationColumns - Github Stars & Github Stars (with ColumnSizing set for both columns, and SuppressAggFuncInHeader set to true)
    • 1 PivotGroupedColumn - Language
PreviousPivot LayoutsNextFormatting Pivot Layouts