---
title: "Pivot Result Columns"
enterprise: true
framework: vue
version: "36.1.0"
---

# Pivot Result Columns

The grid generates pivot result columns to display the aggregated values for each unique permutation of pivot values.

#### Pivot Result Column Summary Example

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  PivotModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  PivotModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div style="display: flex; flex-direction: column; height: 100%">
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :autoGroupColumnDef="autoGroupColumnDef"
        :pivotMode="true"
        :rowData="rowData"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "country", rowGroup: true },
      { field: "sport", pivot: true },
      { field: "gold", aggFunc: "sum" },
      { field: "silver", aggFunc: "sum" },
      { field: "bronze", aggFunc: "sum" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 130,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      minWidth: 200,
    });
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      autoGroupColumnDef,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Pivot Result Column Summary Example](https://www.ag-grid.com/examples/pivoting-result-columns/pivot-result-summary/vue3)

## Column Definitions

Pivot Result Columns inherit [Column Definitions](https://www.ag-grid.com/vue-data-grid/column-definitions/) from the value column that they were created from. It is also possible to extend this definition further to specifically customise pivot result columns using the `processPivotResultColDef` grid option.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `processPivotResultColDef` | `ProcessPivotResultColDef` |  |  | Callback for the mutation of the generated pivot result column definitions Module: [`PivotModule`](https://www.ag-grid.com/vue-data-grid/modules/). |

In the example below, the `Gold` column has `cellStyle: { backgroundColor: '#f2e287' }` applied, this is then inherited by the pivot result columns, causing all of the `sum(Gold)` columns to have a gold background. Note that the `Silver` column does not have this background so neither do the `sum(Silver)` columns.

The grid option `processPivotResultColDef` is then also used, which sets the text colour of all the pivot result columns to `#2f73ff`.

#### Column Definitions Example

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AutoGroupColumnDef,
  CellStyleModule,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  ProcessPivotResultColDef,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  PivotModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  CellStyleModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  PivotModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div style="display: flex; flex-direction: column; height: 100%">
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :autoGroupColumnDef="autoGroupColumnDef"
        :pivotMode="true"
        :processPivotResultColDef="processPivotResultColDef"
        :rowData="rowData"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "country", rowGroup: true },
      { field: "sport", pivot: true },
      {
        field: "gold",
        aggFunc: "sum",
        cellStyle: { backgroundColor: "#f2e287" },
      },
      { field: "silver", aggFunc: "sum", cellStyle: {} },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 130,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      minWidth: 200,
    });
    const processPivotResultColDef = ref<ProcessPivotResultColDef>((colDef) => {
      if (typeof colDef.cellStyle === "object") {
        colDef.cellStyle.color = "#2f73ff";
      }
    });
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      autoGroupColumnDef,
      processPivotResultColDef,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Column Definitions Example](https://www.ag-grid.com/examples/pivoting-result-columns/column-definitions-example/vue3)

This uses the following configuration to both inherit and modify column definitions on the pivot result columns:

```ts
<ag-grid-vue
    :columnDefs="columnDefs"
    :pivotMode="pivotMode"
    :processPivotResultColDef="processPivotResultColDef"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    // ...other column definitions
    { field: 'gold', aggFunc: 'sum', cellStyle: { backgroundColor: '#f2e287' } },
    { field: 'silver', aggFunc: 'sum', cellStyle: {} },
];
this.pivotMode = true;
this.processPivotResultColDef = (colDef) => {
    colDef.cellStyle.color = '#2f73ff'; // the params are mutated directly, not returned
};
```

## Filtering

When pivot mode is enabled, you can [Filter](https://www.ag-grid.com/vue-data-grid/filtering-overview/) on the pivot result columns by setting the `filter` attribute on your value column.

#### Filtering Pivot Result Columns

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  FiltersToolPanelModule,
  PivotModule,
  SetFilterModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  FiltersToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  PivotModule,
  SetFilterModule,
  NumberFilterModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :autoGroupColumnDef="autoGroupColumnDef"
      :pivotMode="true"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "country", rowGroup: true },
      { field: "athlete", rowGroup: true },
      { field: "year", pivot: true },
      { field: "gold", aggFunc: "sum", filter: "agNumberColumnFilter" },
      { field: "silver", aggFunc: "sum", filter: "agNumberColumnFilter" },
      { field: "bronze", aggFunc: "sum", filter: "agNumberColumnFilter" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 130,
      floatingFilter: true,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      minWidth: 200,
    });
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      autoGroupColumnDef,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Filtering Pivot Result Columns](https://www.ag-grid.com/examples/pivoting-result-columns/secondary-columns-filter/vue3)

As pivot values are all aggregates, filtering out rows will not re-aggregate the parent, group and grand total rows. Refer to [Filtering Aggregated Values](https://www.ag-grid.com/vue-data-grid/aggregation-filtering/#filtering-for-aggregated-values) for more information.

> **Note**
>
> Pivot result columns inherit the properties of the value column from which they are generated. However, setting `filter: true` will instead default to a [Number Filter](https://www.ag-grid.com/vue-data-grid/filter-number/) in the case of a pivot result column. The [Set Filter](https://www.ag-grid.com/vue-data-grid/filter-set/) cannot be used for filtering pivot result columns.

## Best Practices

### Limiting Column Generation

When pivoting, changes in data, aggregation or pivot columns can cause the number of generated columns to scale exponentially. This can cause performance issues such as long delays in rendering, and often the resulting view would be unmanageable for the user.

To prevent this from happening, you can set the `pivotMaxGeneratedColumns` option. When the grid generates a number of pivot columns exceeding this value, it halts column generation, clears the view, and fires the `onPivotMaxColumnsExceeded` event to allow your application to intervene.

#### Extreme Pivot Handling

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  SideBarDef,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnsToolPanelModule,
  FiltersToolPanelModule,
  PivotModule,
  SideBarModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  SideBarModule,
  ColumnsToolPanelModule,
  FiltersToolPanelModule,
  PivotModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :autoGroupColumnDef="autoGroupColumnDef"
      :pivotMode="true"
      :sideBar="sideBar"
      :pivotMaxGeneratedColumns="pivotMaxGeneratedColumns"
      :rowData="rowData"
      @pivot-max-columns-exceeded="onPivotMaxColumnsExceeded"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "country", rowGroup: true, enableRowGroup: true },
      { field: "athlete", enablePivot: true },
      { field: "year", enablePivot: true },
      { field: "sport", enablePivot: true },
      { field: "gold", aggFunc: "sum" },
      { field: "silver", aggFunc: "sum" },
      { field: "bronze", aggFunc: "sum" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 130,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      minWidth: 200,
    });
    const sideBar = ref<SideBarDef | string | string[] | boolean | null>(
      "columns",
    );
    const pivotMaxGeneratedColumns = ref(1000);
    const rowData = ref<IOlympicData[]>(null);

    function onPivotMaxColumnsExceeded() {
      console.warn(
        "The limit of 1000 generated columns has been exceeded. Either remove pivot or aggregations from some columns or increase the limit.",
      );
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      autoGroupColumnDef,
      sideBar,
      pivotMaxGeneratedColumns,
      rowData,
      onGridReady,
      onPivotMaxColumnsExceeded,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Extreme Pivot Handling](https://www.ag-grid.com/examples/pivoting-result-columns/extreme-pivot/vue3)

In the example above, pivoting by the `Athlete` column will instead trigger the `pivotMaxColumnsExceeded` event, which logs an error in the browser console.

The example above demonstrates the following configuration:

```ts
<ag-grid-vue
    :pivotMode="pivotMode"
    :pivotMaxGeneratedColumns="pivotMaxGeneratedColumns"
    :onPivotMaxColumnsExceeded="onPivotMaxColumnsExceeded"
    /* other grid options ... */>
</ag-grid-vue>

this.pivotMode = true;
this.pivotMaxGeneratedColumns = 1000;
this.onPivotMaxColumnsExceeded = () => {
    console.error(
        'The limit of 1000 generated columns has been exceeded. Either remove pivot or aggregations from some columns or increase the limit.'
    );
};
```