---
product: "AG Grid"
title: "Pivot Column Groups"
description: "The grid generates pivot column groups representing each unique pivoted value."
enterprise: true
framework: javascript
version: "36.2.0"
related:
    - title: "Overview"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pivoting/"
    - title: "Pivot Result Columns"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pivoting-result-columns/"
    - title: "Pivot Totals"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pivoting-totals/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# Pivot Column Groups

The grid generates pivot column groups representing each unique pivoted value.

#### Column Group Summary Example

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  PivotModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

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

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "country", rowGroup: true },
    { field: "sport", pivot: true },
    { field: "gold", aggFunc: "sum" },
    { field: "silver", aggFunc: "sum" },
    { field: "bronze", aggFunc: "sum" },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 130,
  },
  autoGroupColumnDef: {
    minWidth: 200,
  },
  pivotMode: true,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data));
```

[Live example: Column Group Summary Example](https://www.ag-grid.com/archive/36.2.0/examples/pivoting-column-groups/column-group-summary/typescript/)

## Customising Group Definitions

Pivot Result Column Group definitions can be configured using the `processPivotResultColGroupDef` grid option.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `processPivotResultColGroupDef` | `ProcessPivotResultColGroupDef` |  |  |  |

In the example below, the `processPivotResultColGroupDef` callback is used to apply a class to the group header cells, which is subsequently used to style them with a golden background.

#### Column Group Definitions Example

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  PivotModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

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

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "country", rowGroup: true },
    { field: "sport", pivot: true },
    { field: "gold", aggFunc: "sum" },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 130,
  },
  autoGroupColumnDef: {
    minWidth: 200,
  },
  pivotMode: true,
  processPivotResultColGroupDef: (colDef) => {
    colDef.headerClass = "pivot-gold";
  },
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data));
```

[Live example: Column Group Definitions Example](https://www.ag-grid.com/archive/36.2.0/examples/pivoting-column-groups/column-group-definitions-example/typescript/)

This demonstrates the following configuration for applying a class to the group header cells:

```js
const gridOptions = {
    pivotMode: true,
    processPivotResultColGroupDef: (colDef) => {
        colDef.headerClass = 'pivot-gold'; // the params are mutated directly, not returned
    },

    // other grid options ...
}
```

## Ordering Groups

The pivot result groups are initially displayed in alphabetical order. You can change this default order by providing a `pivotComparator` function to the pivoted column's definition.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `pivotComparator` | `PivotComparatorFunc` |  |  |  |

In the example below, note that a `pivotComparator` has been supplied to the `sport` column, and the pivot result groups are instead sorted in reversed alphabetical order.

#### Ordering Pivot Groups

```ts
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { PivotModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule, PivotModule]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "country", rowGroup: true },
    {
      field: "sport",
      pivot: true,
      pivotComparator: (a: string, b: string) => b.localeCompare(a),
    },
    { field: "gold", aggFunc: "sum" },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 130,
  },
  autoGroupColumnDef: {
    minWidth: 200,
  },
  pivotMode: true,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data));
```

[Live example: Ordering Pivot Groups](https://www.ag-grid.com/archive/36.2.0/examples/pivoting-column-groups/order-pivot-groups/typescript/)

This demonstrates the following configuration for modifying the resulting order of groups:

```js
const gridOptions = {
    columnDefs: [
        // ...other column definitions
        {
            field: 'sport',
            pivot: true,
            pivotComparator: (a, b) => b.localeCompare(a),
        },
    ],
    pivotMode: true,

    // other grid options ...
}
```

> **Note**
>
> If the `pivotComparator` returns 0, the order of the groups is then further determined by the order in which they appear in the data.
>
> This means that writing a `pivotComparator` function that always returns 0 will result in the groups being ordered by the order in which they appear in the data.

### Changing Data, Filters, and Configurations

When changing data, filters, or configurations such as `pivotRowTotals` the generated column groups and their order is impacted. The grid will add new columns and column groups at the end of their parent groups. This is to maintain any changes the user may have made to their column order.

This behaviour can be toggled to instead reset the column order when the columns are generated by setting the `enableStrictPivotColumnOrder` grid option to `true`.

The example below demonstrates a changing data set while in pivot mode. Note that when `enableStrictPivotColumnOrder` is set to `false`, new columns are appended. When set to `true` all columns are re-sorted according to the `pivotComparator` (or alphanumerically if omitted).

#### Strict Column Order

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { PivotModule } from "ag-grid-enterprise";
import { getData } from "./data";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule, PivotModule]);

let gridApi: GridApi;

let count = 0;

const gridOptions: GridOptions = {
  columnDefs: [
    { field: "pivotValue", pivot: true },
    { field: "agg", aggFunc: "sum", rowGroup: true },
  ],
  defaultColDef: {
    width: 130,
  },
  autoGroupColumnDef: {
    minWidth: 100,
  },
  pivotMode: true,
  getRowId: (p) => String(p.data.pivotValue),

  onGridReady: () => {
    setInterval(() => {
      count += 1;
      const rowData = getData();
      gridApi.setGridOption(
        "rowData",
        rowData.slice(0, (count % rowData.length) + 1),
      );
    }, 1000);
  },
};

function toggleOption() {
  const isChecked = document.querySelector<HTMLInputElement>(
    "#enableStrictPivotColumnOrder",
  )!.checked;
  gridApi.setGridOption("enableStrictPivotColumnOrder", isChecked);
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).toggleOption = toggleOption;
}
```

[Live example: Strict Column Order](https://www.ag-grid.com/archive/36.2.0/examples/pivoting-column-groups/strict-column-order/typescript/)

This demonstrates the following configuration for changing the behaviour for new column groups:

```js
const gridOptions = {
    enableStrictPivotColumnOrder: true,

    // other grid options ...
}
```

## Sorting Pivot Columns

End users can sort the pivot columns by clicking a pivot column's pill in the pivot panel or the Column Tool Panel, the same way row group columns are sorted from their pills.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `pivotSort` | `SortDirection` |  |  |  |

`pivotSort` is independent of `sort`: it controls the order of a pivoted column's result columns only, and neither direction flows to or from the column's own sort. Pivot columns the grid generates are sorted ascending by default, while pivot result columns supplied through [`setPivotResultColumns`](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/server-side-model-pivoting/#creating-pivot-result-columns-advanced) default to no sort so their supplied order is kept. Clicking a pill cycles through ascending, descending and no sort, where no sort keeps the order the columns were generated or supplied in. When a `pivotComparator` is supplied, ascending uses that comparator's order and descending reverses it.

#### Sorting Pivot Columns

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  PivotModule,
  RowGroupingPanelModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

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

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    {
      field: "country",
      rowGroup: true,
      enableRowGroup: true,
      enablePivot: true,
    },
    { field: "sport", enableRowGroup: true, enablePivot: true },
    { field: "year", pivot: true, enableRowGroup: true, enablePivot: true },
    { field: "age", enableValue: true },
    { field: "gold", aggFunc: "sum", enableValue: true },
    { field: "silver", enableValue: true },
    { field: "bronze", enableValue: true },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 130,
  },
  autoGroupColumnDef: {
    minWidth: 200,
  },
  pivotMode: true,
  sideBar: {
    toolPanels: ["columns"],
  },
  rowGroupPanelShow: "always",
  pivotPanelShow: "always",
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data));
```

[Live example: Sorting Pivot Columns](https://www.ag-grid.com/archive/36.2.0/examples/pivoting-column-groups/sort-pivot-columns/typescript/)

The direction can also be set through the API using `applyColumnState`:

```js
api.applyColumnState({
    state: [{ colId: 'year', pivotSort: 'desc' }],
});
```

Sorting reorders the pivot column groups while preserving any column width and within-group ordering changes the user has made.

Set the `pivotPanelSuppressSort` grid option to `true` to disable this interaction. Pills for columns with `sortable: false` are not interactive, though `pivotSort` can still be set on them via `applyColumnState`.

## Pivoting by Dates and Times

When pivoting by date/time values, the grid can optionally generate pivot group columns based on components of the date/time.

To enable this for a particular column, use the `groupHierarchy` property of the [Column Definition](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/column-properties/#reference-grouping-groupHierarchy).

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `groupHierarchy` | `(GroupHierarchyParts \| string \| ColDef)[]` |  |  |  |

```js
const gridOptions = {
    columnDefs: [
        {
            field: 'date',
            pivot: true,
            groupHierarchy: ['year', 'month']
        },
        // ...other column definitions
    ],

    // other grid options ...
}
```

This snippet is illustrated in the example below.

#### Pivoting by Dates and Times

```ts
import {
  CellStyleModule,
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  PivotModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

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

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    {
      field: "date",
      pivot: true,
      groupHierarchy: ["year", "formattedMonth"],
    },
    { field: "country", rowGroup: true },
    { field: "sport" },
    { field: "gold", aggFunc: "sum" },
    { field: "silver", aggFunc: "sum" },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 130,
  },
  autoGroupColumnDef: {
    minWidth: 200,
  },
  pivotMode: true,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) =>
    gridApi!.setGridOption(
      "rowData",
      data.map((d) => ({
        ...d,
        date: d.date?.split("/").reverse().join("-"),
      })),
    ),
  );
```

[Live example: Pivoting by Dates and Times](https://www.ag-grid.com/archive/36.2.0/examples/pivoting-column-groups/pivoting-date-time/typescript/)

> **Note**
>
> Date values must be formatted as ISO-8601 dates in order to be correctly parsed into their components.

## Filtering Pivoted Columns

When pivoting is active, filters can be applied to columns defined within the column definitions by using the [Filters Tool Panel](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/tool-panel-filters/) and the [Filter API](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/grid-api/#reference-filter).

In the example below, applying a filter to the `Sport` column (which has been pivoted) impacts the generated pivot column groups, instead of the grid rows or cell values.

#### Filtering Pivoted Columns

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  NumberFilterModule,
  createGrid,
  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") {
  // Enable extended validations only for development
  enableDevValidations();
}

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

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "country", rowGroup: true, filter: true },
    { field: "sport", pivot: true, filter: true },
    { field: "gold", aggFunc: "sum" },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 150,
  },
  pivotMode: true,
  sideBar: "filters",
  onGridReady: (params) => {
    const filtersToolPanel = params.api.getToolPanelInstance("filters");
    if (filtersToolPanel) {
      // expands 'year' and 'sport' filters in the Filters Tool Panel
      filtersToolPanel.expandFilters(["sport"]);
    }
  },
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data));
```

[Live example: Filtering Pivoted Columns](https://www.ag-grid.com/archive/36.2.0/examples/pivoting-column-groups/filter-pivoted-columns/typescript/)

> **Note**
>
> When filtering a pivoted column, the resulting pivot result column group is removed from the grid. If the filter is subsequently removed, the column group will be re-added to the end of grid.
>
> To configure this behaviour, refer to the section for [Changing Data, Filters, and Configurations](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pivoting-column-groups/#changing-data-filters-and-configurations).

## Expanded by Default

Pivot Column Groups can be configured to expand by default, down to a given depth. This depth can be configured using the `pivotDefaultExpanded` grid option.

The example below demonstrates `pivotDefaultExpanded` being used to expand the first pivot group level by default. Providing `-1` will expand all pivot group levels by default.

#### Open Pivot Group By Default

```ts
import {
  ClientSideRowModelModule,
  ColumnGroup,
  GridApi,
  GridOptions,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  FiltersToolPanelModule,
  PivotModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

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

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "country", rowGroup: true, enableRowGroup: true },
    { field: "athlete" },
    { field: "sport", pivot: true, enablePivot: true },
    { field: "year", pivot: true, enablePivot: true },
    { field: "date", pivot: true, enablePivot: true },
    { field: "gold", aggFunc: "sum" },
    { field: "silver", aggFunc: "sum" },
    { field: "bronze", aggFunc: "sum" },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 130,
  },
  autoGroupColumnDef: {
    minWidth: 200,
  },
  pivotMode: true,
  // first (sport) row group will be open by default
  pivotDefaultExpanded: 1,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data));
```

[Live example: Open Pivot Group By Default](https://www.ag-grid.com/archive/36.2.0/examples/pivoting-column-groups/open-pivot-group-by-default/typescript/)

The example above demonstrates the following configuration for expanding pivot groups by default:

```js
const gridOptions = {
    pivotDefaultExpanded: 1,

    // other grid options ...
}
```

## Prevent Expanding Groups

When using multiple pivot columns, groups become expandable by default. To prevent this and instead always show all columns, set the grid option `suppressExpandablePivotGroups=true`.

#### Fixed Pivot Column Groups

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  FiltersToolPanelModule,
  PivotModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

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

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "country", rowGroup: true, enableRowGroup: true },
    { field: "athlete" },
    { field: "sport", pivot: true, enablePivot: true },
    { field: "year", pivot: true, enablePivot: true },
    { field: "gold", aggFunc: "sum" },
    { field: "silver", aggFunc: "sum" },
    { field: "bronze", aggFunc: "sum" },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 130,
  },
  autoGroupColumnDef: {
    minWidth: 200,
  },
  pivotMode: true,
  suppressExpandablePivotGroups: true,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data));
```

[Live example: Fixed Pivot Column Groups](https://www.ag-grid.com/archive/36.2.0/examples/pivoting-column-groups/fixed-pivot-column-groups/typescript/)

The example above demonstrates the following configuration:

```js
const gridOptions = {
    pivotMode: true,
    suppressExpandablePivotGroups: true,

    // other grid options ...
}
```

## Hide Group with Single Value Column

When pivoting with only one aggregated column, you can simplify the grid column header layout by omitting pivot column groups with only one child column. Enabling the grid option `removePivotHeaderRowWhenSingleValueColumn=true`, when set to `true` will instead skip the group and use the pivot keys to label the pivot result column instead.

#### Hiding Repeated Column Labels

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  FiltersToolPanelModule,
  PivotModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

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

let gridApi: GridApi<IOlympicData>;

function togglePivotHeader() {
  const checkbox = document.querySelector<HTMLInputElement>(
    "#removePivotHeaderRowWhenSingleValueColumn",
  )!;
  gridApi.setGridOption(
    "removePivotHeaderRowWhenSingleValueColumn",
    checkbox.checked,
  );
}

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "country", rowGroup: true },
    { field: "sport", pivot: true },
    { field: "gold", aggFunc: "sum" },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 130,
  },
  autoGroupColumnDef: {
    minWidth: 200,
  },
  pivotMode: true,
  removePivotHeaderRowWhenSingleValueColumn: true,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data));

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).togglePivotHeader = togglePivotHeader;
}
```

[Live example: Hiding Repeated Column Labels](https://www.ag-grid.com/archive/36.2.0/examples/pivoting-column-groups/hidden-single-value-column-header/typescript/)

The example above demonstrates the following configuration:

```js
const gridOptions = {
    columnDefs: [
        { field: 'country', rowGroup: true },
        { field: 'sport', pivot: true },
        { field: 'gold', aggFunc: 'sum' },
    ],
    pivotMode: true,
    removePivotHeaderRowWhenSingleValueColumn: true,

    // other grid options ...
}
```