---
title: "Key Features"
framework: angular
version: "36.1.0"
---

# Key Features

The page provides an overview of and introduction to popular features available in AG Grid. Learn how to use Community features, configure and customise themes, and explore advanced Enterprise features.

[Angular Data Grid quick start video tutorial](https://www.youtube.com/watch?v=X_Ip_jGDtho&list=PLsZlhayVgqNw6VHFn4j6FcJM5vLACsf0x)

> **Note**
>
> The following sections assume a level of familiarity with common Data Grid concepts. If you're new to Angular Data Grids in general, we recommend starting with our [Introductory Tutorial](https://www.ag-grid.com/angular-data-grid/deep-dive/) instead.

## Showing Data

### Mapping Values

The `field` or `valueGetter` attributes [Map Data to Columns](https://www.ag-grid.com/angular-data-grid/column-definitions/). A field maps to a field in the data. A [Value Getter](https://www.ag-grid.com/angular-data-grid/value-getters/) is a function callback that returns the cell value.

The `headerName` provides the title for the header. If missing the title is derived from `field`.

```ts
<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */ />

this.columnDefs = [
    { headerName: "Make & Model", valueGetter: p => p.data.make + ' ' + p.data.model},
    { field: "price" },
];
```

### Text Formatting

Format text for cell content using a [Value Formatter](https://www.ag-grid.com/angular-data-grid/value-formatters/).

```ts
<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */ />

this.columnDefs = [
    { field: "price", valueFormatter: p => '£' + p.value.toLocaleString() },
];
```

### Cell Components

Add buttons, checkboxes or images to cells with a [Cell Component](https://www.ag-grid.com/angular-data-grid/component-cell-renderer/).

```js
@Component({
    standalone: true,
    template: `<button (click)="buttonClicked()">Push Me!</button>`,
})
export class CustomButtonComponent implements ICellRendererAngularComp {
    agInit(params: ICellRendererParams): void {}
    refresh(params: ICellRendererParams) {
        return true;
    }
    buttonClicked() {
        alert("clicked");
    }
}

columnDefs: ColDef[] = [
    { field: "button", cellRenderer: CustomButtonComponent },
    // ...
];
```

### Resizing Columns

Columns are [Resized](https://www.ag-grid.com/angular-data-grid/column-sizing/) by dragging the Column Header edges. Additionally assign `flex` values to allow columns to flex to the grid width.

```ts
<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */ />

this.columnDefs = [
    { field: "make", flex: 2 }, //This column will be twice as wide as the others
    { field: "model", flex: 1 },
    { field: "price", flex: 1 },
    { field: "electric", flex: 1 }
];
```

### Example

This example demonstrates mapping and formatting values, cell components, and resizing columns. The button logs to the developer console.

#### Showing Data Example

```ts
import { ChangeDetectionStrategy, Component } from "@angular/core";

import type { ICellRendererAngularComp } from "ag-grid-angular";
import { AgGridAngular } from "ag-grid-angular";
import type {
  ColDef,
  ICellRendererParams,
  ValueGetterParams,
} from "ag-grid-community";
import {
  AllCommunityModule,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";

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

ModuleRegistry.registerModules([AllCommunityModule]);

@Component({
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<button (click)="buttonClicked()">Push Me!</button>`,
})
export class CustomButtonComponent implements ICellRendererAngularComp {
  agInit(params: ICellRendererParams): void {}
  refresh(params: ICellRendererParams) {
    return true;
  }
  buttonClicked() {
    console.log("clicked");
  }
}

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: ` <ag-grid-angular
    style="width: 100%; height: 100%;"
    [rowData]="rowData"
    [columnDefs]="columnDefs"
  />`,
})
export class AppComponent {
  public rowData: any[] | null = [
    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
    { make: "Ford", model: "F-Series", price: 33850, electric: false },
    { make: "Toyota", model: "Corolla", price: 29600, electric: false },
    { make: "Mercedes", model: "EQA", price: 48890, electric: true },
    { make: "Fiat", model: "500", price: 15774, electric: false },
    { make: "Nissan", model: "Juke", price: 20675, electric: false },
  ];
  public columnDefs: ColDef[] = [
    {
      headerName: "Make & Model",
      valueGetter: (p: ValueGetterParams) => p.data.make + " " + p.data.model,
      flex: 2,
    },
    {
      field: "price",
      valueFormatter: (p) => "£" + Math.floor(p.value).toLocaleString(),
      flex: 1,
    },
    { field: "electric", flex: 1 },
    { field: "button", cellRenderer: CustomButtonComponent, flex: 1 },
  ];
}
```

[Live example: Showing Data Example](https://www.ag-grid.com/examples/key-features/showing-data-example/angular)

## Working with Data

By default, the row data is used to infer the [Cell Data Type](https://www.ag-grid.com/angular-data-grid/cell-data-types/). The cell data type allows grid features, such as filtering and editing, to work without additional configuration.

### Filtering

[Column Filters](https://www.ag-grid.com/angular-data-grid/filtering/) are embedded into each column menu. These are enabled using the `filter` attribute. The filter type is inferred from the cell data type.

```ts
<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */ />

this.columnDefs = [
    { field: "make", filter: true },
];
```

There are 5 [Provided Filters](https://www.ag-grid.com/angular-data-grid/filtering/) which can be set through this attribute. You can also create your own [Custom Filter](https://www.ag-grid.com/angular-data-grid/component-filter/).

[Floating Filters](https://www.ag-grid.com/angular-data-grid/floating-filters/) embed the Column Filter into the header for ease of access.

```ts
<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */ />

this.columnDefs = [
    { field: "make", filter: true, floatingFilter: true },
];
```

### Editing

Enable [Editing](https://www.ag-grid.com/angular-data-grid/cell-editing/) by setting the `editable` attribute to `true`. The cell editor is inferred from the cell data type.

```ts
<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */ />

this.columnDefs = [
    { field: "make", editable: true },
];
```

Set the cell editor type using the `cellEditor` attribute. There are 8 [Provided Cell Editors](https://www.ag-grid.com/angular-data-grid/provided-cell-editors/) which can be set through this attribute. You can also create your own [Custom Editors](https://www.ag-grid.com/angular-data-grid/cell-editors/).

```ts
<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */ />

this.columnDefs = [
    {
        field: "make",
        editable: true,
        cellEditor: 'agSelectCellEditor',
        cellEditorParams: {
            values: ['Tesla', 'Ford', 'Toyota'],
        },
    },
];
```

### Sorting

Data is [Sorted](https://www.ag-grid.com/angular-data-grid/row-sorting/) by clicking the column headers. Sorting is enabled by default.

### Row Selection

[Row Selection](https://www.ag-grid.com/angular-data-grid/row-selection/) is enabled using the `rowSelection` attribute.

```ts
<ag-grid-angular
    [columnDefs]="columnDefs"
    [rowSelection]="rowSelection"
    /* other grid options ... */ />

// Column Definitions: Defines the columns to be displayed.
this.columnDefs = [
    { field: "make" },
];
this.rowSelection = {
    mode: 'multiRow',
};
```

### Pagination

Enable [Pagination](https://www.ag-grid.com/angular-data-grid/row-pagination/) by setting `pagination` to be true.

```ts
<ag-grid-angular
    [pagination]="pagination"
    [paginationPageSize]="paginationPageSize"
    [paginationPageSizeSelector]="paginationPageSizeSelector"
    /* other grid options ... */ />

this.pagination = true;
this.paginationPageSize = 10;
this.paginationPageSizeSelector = [10, 25, 50];
```

### Example

This example demonstrates filtering, editing, sorting, row selection, and pagination.

#### Working With Data Example

```ts
import { Component, ViewChild } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import {
  AllCommunityModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowSelectionOptions,
  enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([AllCommunityModule]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [rowData]="rowData"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [rowSelection]="rowSelection"
    [pagination]="true"
    [paginationPageSize]="paginationPageSize"
    [paginationPageSizeSelector]="paginationPageSizeSelector"
  /> `,
})
export class AppComponent {
  rowData: any[] | null = [
    {
      make: "Tesla",
      model: "Model Y",
      price: 64950,
      electric: true,
      month: "June",
    },
    {
      make: "Ford",
      model: "F-Series",
      price: 33850,
      electric: false,
      month: "October",
    },
    {
      make: "Toyota",
      model: "Corolla",
      price: 29600,
      electric: false,
      month: "August",
    },
    {
      make: "Mercedes",
      model: "EQA",
      price: 48890,
      electric: true,
      month: "February",
    },
    {
      make: "Fiat",
      model: "500",
      price: 15774,
      electric: false,
      month: "January",
    },
    {
      make: "Nissan",
      model: "Juke",
      price: 20675,
      electric: false,
      month: "March",
    },
    {
      make: "Vauxhall",
      model: "Corsa",
      price: 18460,
      electric: false,
      month: "July",
    },
    {
      make: "Volvo",
      model: "EX30",
      price: 33795,
      electric: true,
      month: "September",
    },
    {
      make: "Mercedes",
      model: "Maybach",
      price: 175720,
      electric: false,
      month: "December",
    },
    {
      make: "Vauxhall",
      model: "Astra",
      price: 25795,
      electric: false,
      month: "April",
    },
    {
      make: "Fiat",
      model: "Panda",
      price: 13724,
      electric: false,
      month: "November",
    },
    {
      make: "Jaguar",
      model: "I-PACE",
      price: 69425,
      electric: true,
      month: "May",
    },
    {
      make: "Tesla",
      model: "Model Y",
      price: 64950,
      electric: true,
      month: "June",
    },
    {
      make: "Ford",
      model: "F-Series",
      price: 33850,
      electric: false,
      month: "October",
    },
    {
      make: "Toyota",
      model: "Corolla",
      price: 29600,
      electric: false,
      month: "August",
    },
    {
      make: "Mercedes",
      model: "EQA",
      price: 48890,
      electric: true,
      month: "February",
    },
    {
      make: "Fiat",
      model: "500",
      price: 15774,
      electric: false,
      month: "January",
    },
    {
      make: "Nissan",
      model: "Juke",
      price: 20675,
      electric: false,
      month: "March",
    },
    {
      make: "Vauxhall",
      model: "Corsa",
      price: 18460,
      electric: false,
      month: "July",
    },
    {
      make: "Volvo",
      model: "EX30",
      price: 33795,
      electric: true,
      month: "September",
    },
    {
      make: "Mercedes",
      model: "Maybach",
      price: 175720,
      electric: false,
      month: "December",
    },
    {
      make: "Vauxhall",
      model: "Astra",
      price: 25795,
      electric: false,
      month: "April",
    },
    {
      make: "Fiat",
      model: "Panda",
      price: 13724,
      electric: false,
      month: "November",
    },
    {
      make: "Jaguar",
      model: "I-PACE",
      price: 69425,
      electric: true,
      month: "May",
    },
    {
      make: "Tesla",
      model: "Model Y",
      price: 64950,
      electric: true,
      month: "June",
    },
    {
      make: "Ford",
      model: "F-Series",
      price: 33850,
      electric: false,
      month: "October",
    },
    {
      make: "Toyota",
      model: "Corolla",
      price: 29600,
      electric: false,
      month: "August",
    },
    {
      make: "Mercedes",
      model: "EQA",
      price: 48890,
      electric: true,
      month: "February",
    },
    {
      make: "Fiat",
      model: "500",
      price: 15774,
      electric: false,
      month: "January",
    },
    {
      make: "Nissan",
      model: "Juke",
      price: 20675,
      electric: false,
      month: "March",
    },
    {
      make: "Vauxhall",
      model: "Corsa",
      price: 18460,
      electric: false,
      month: "July",
    },
    {
      make: "Volvo",
      model: "EX30",
      price: 33795,
      electric: true,
      month: "September",
    },
    {
      make: "Mercedes",
      model: "Maybach",
      price: 175720,
      electric: false,
      month: "December",
    },
    {
      make: "Vauxhall",
      model: "Astra",
      price: 25795,
      electric: false,
      month: "April",
    },
    {
      make: "Fiat",
      model: "Panda",
      price: 13724,
      electric: false,
      month: "November",
    },
    {
      make: "Jaguar",
      model: "I-PACE",
      price: 69425,
      electric: true,
      month: "May",
    },
  ];
  columnDefs: ColDef[] = [
    {
      field: "make",
      editable: true,
      cellEditor: "agSelectCellEditor",
      cellEditorParams: {
        values: [
          "Tesla",
          "Ford",
          "Toyota",
          "Mercedes",
          "Fiat",
          "Nissan",
          "Vauxhall",
          "Volvo",
          "Jaguar",
        ],
      },
    },
    { field: "model" },
    { field: "price", filter: "agNumberColumnFilter" },
    { field: "electric" },
    {
      field: "month",
      comparator: (valueA, valueB) => {
        const months = [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December",
        ];
        const idxA = months.indexOf(valueA);
        const idxB = months.indexOf(valueB);
        return idxA - idxB;
      },
    },
  ];
  defaultColDef: ColDef = {
    filter: "agTextColumnFilter",
    floatingFilter: true,
  };
  rowSelection: RowSelectionOptions | "single" | "multiple" = {
    mode: "multiRow",
    headerCheckbox: false,
  };
  paginationPageSize = 10;
  paginationPageSizeSelector: number[] | boolean = [10, 25, 50];
}
```

[Live example: Working With Data Example](https://www.ag-grid.com/examples/key-features/working-with-data-example/angular)

## Themes & Style

### Themes

[Grid Themes](https://www.ag-grid.com/angular-data-grid/theming/) define how the grid looks (colours, font, spacing etc). The default theme is called Quartz. You can choose a [different theme](https://www.ag-grid.com/angular-data-grid/themes/), or customise a built-in theme by changing parameters. Here we create a new theme based on Quartz:

```js
import { themeQuartz } from "ag-grid-community"; // or themeBalham, themeAlpine

const myTheme = themeQuartz.withParams({
    /* Low spacing = very compact */
    spacing: 2,
    /* Changes the colour of the grid text */
    foregroundColor: 'rgb(14, 68, 145)',
    /* Changes the colour of the grid background */
    backgroundColor: 'rgb(241, 247, 255)',
    /* Changes the header colour of the top row */
    headerBackgroundColor: 'rgb(228, 237, 250)',
    /* Changes the hover colour of the row*/
    rowHoverColor: 'rgb(216, 226, 255)',
});

// ...
    template: `<div style="height: 100%; box-sizing: border-box;">
        <ag-grid-angular
            // ...
            [theme]="theme"
            />
    </div>`,
// ...
public theme = myTheme;
```

#### Customising Quartz Theme

```ts
import { Component, ViewChild } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  AllCommunityModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  Theme,
  enableDevValidations,
  themeQuartz,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([AllCommunityModule]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [theme]="theme"
    [rowData]="rowData"
    [defaultColDef]="defaultColDef"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 170 },
    { field: "age" },
    { field: "country" },
    { field: "year" },
    { field: "date" },
    { field: "sport" },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ];
  theme: Theme | "legacy" = myTheme;
  defaultColDef: ColDef = {
    editable: true,
    filter: true,
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}

const myTheme = themeQuartz.withParams({
  /* Low spacing = very compact */
  spacing: 2,
  /* Changes the colour of the grid text */
  foregroundColor: "rgb(14, 68, 145)",
  /* Changes the colour of the grid background */
  backgroundColor: "rgb(241, 247, 255)",
  /* Changes the header colour of the top row */
  headerBackgroundColor: "rgb(228, 237, 250)",
  /* Changes the hover colour of the row*/
  rowHoverColor: "rgb(216, 226, 255)",
});
```

[Live example: Customising Quartz Theme](https://www.ag-grid.com/examples/key-features/custom-quartz-theme/angular)

### Theme Builder

Use the [Theme Builder](https://www.ag-grid.com/theme-builder/) to create a custom theme with our visual editor. Browse and customise 100's of theme parameters and preview the changes in real-time. Automatically generate the theme code to copy & paste into your application.

[Video](https://www.ag-grid.com/_astro/theme-builder-demo.DqpCSmGG.mp4)

### Figma

If you are designing within Figma, you can use the [AG Grid Design System](https://www.ag-grid.com/angular-data-grid/ag-grid-design-system/) to replicate the Quartz AG Grid theme within Figma. This default theme can be extended with Figma variables to match any existing visual design or create entirely new AG Grid themes. These can then be exported and generated into new AG Grid themes.

[AG Grid Design System (Figma)](https://www.figma.com/community/file/1360600846643230092/ag-grid-design-system)

### Cell Style

Define rules to apply [Styling to Cells](https://www.ag-grid.com/angular-data-grid/cell-styles/) using `cellClassRules`. This can be used, for example, to set cell background colour based on its value.

```css
.rag-green {
    background-color: #33cc3344;
}
```

```ts
<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */ />

this.columnDefs = [{
    field: 'electric',
    cellClassRules: {
        // apply green to electric cars
        'rag-green': params => params.value === true,
    }
}];
```

### Row Style

Define rules to apply [Styling to Rows](https://www.ag-grid.com/angular-data-grid/row-styles/) using `rowClassRules`. This allows changing style (e.g. row colour) based on row values.

```css
.rag-red {
    background-color: #cc222244;
}
```

```ts
<ag-grid-angular
    [rowClassRules]="rowClassRules"
    /* other grid options ... */ />

this.rowClassRules = {
    // apply red to Ford cars
    'rag-red': params => params.data.make === 'Ford',
};
```

### Example

This example demonstrates cell style and row style.

#### Cell and Row Style

```ts
import { Component, ViewChild } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  AllCommunityModule,
  CellClassRules,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowClassRules,
  RowSelectionOptions,
  enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([AllCommunityModule]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [rowData]="rowData"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [rowClassRules]="rowClassRules"
    [rowSelection]="rowSelection"
  /> `,
})
export class AppComponent {
  rowData: any[] | null = [
    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
    { make: "Ford", model: "F-Series", price: 33850, electric: false },
    { make: "Toyota", model: "Corolla", price: 29600, electric: false },
    { make: "Mercedes", model: "EQA", price: 48890, electric: true },
    { make: "Fiat", model: "500", price: 15774, electric: false },
    { make: "Nissan", model: "Juke", price: 20675, electric: false },
    { make: "Vauxhall", model: "Corsa", price: 18460, electric: false },
    { make: "Volvo", model: "EX30", price: 33795, electric: true },
    { make: "Mercedes", model: "Maybach", price: 175720, electric: false },
    { make: "Vauxhall", model: "Astra", price: 25795, electric: false },
    { make: "Fiat", model: "Panda", price: 13724, electric: false },
    { make: "Jaguar", model: "I-PACE", price: 69425, electric: true },
  ];
  columnDefs: ColDef[] = [
    {
      field: "make",
    },
    { field: "model" },
    { field: "price", filter: "agNumberColumnFilter" },
    {
      field: "electric",
      cellClassRules: ragCellClassRules,
    },
  ];
  defaultColDef: ColDef = {
    filter: "agTextColumnFilter",
    floatingFilter: true,
    flex: 1,
  };
  rowClassRules: RowClassRules = {
    // apply red to Ford cars
    "rag-red": (params) => params.data.make === "Ford",
  };
  rowSelection: RowSelectionOptions | "single" | "multiple" = {
    mode: "multiRow",
    headerCheckbox: false,
  };
}

const ragCellClassRules: CellClassRules = {
  // apply green to electric cars
  "rag-green": (params) => params.value === true,
};
```

[Live example: Cell and Row Style](https://www.ag-grid.com/examples/key-features/cell-row-style/angular)

## Enterprise Features  (Enterprise)

AG Grid comes in two forms:

- **AG Grid Community**: Free for everyone, including production use - no licence required.
- **AG Grid Enterprise**: Requires a licence to use in production. Free to test locally, or request a [trial](https://www.ag-grid.com/angular-data-grid/community-vs-enterprise/#request-a-30-day-enterprise-bundle-trial-licence) to test in production.

To learn more about the differences between AG Grid Community and Enterprise, when to use each version, and how to access our [free trial](https://www.ag-grid.com/angular-data-grid/community-vs-enterprise/#request-a-30-day-enterprise-bundle-trial-licence) or purchase a licence, see the [Community vs Enterprise](https://www.ag-grid.com/angular-data-grid/community-vs-enterprise/) docs.

### Integrated Charts  (Enterprise)

[Integrated Charts](https://www.ag-grid.com/angular-data-grid/integrated-charts/) allow users to build and customise charts directly within the grid.

Enable Integrated Charts by setting `enableCharts` to `true`. Set `cellSelection` to `true` to allow users to create charts by selecting a range of cells:

```ts
<ag-grid-angular
    [enableCharts]="enableCharts"
    [cellSelection]="cellSelection"
    /* other grid options ... */ />

this.enableCharts = true;
this.cellSelection = true;
```

### Grouping Rows  (Enterprise)

Enable [Row Grouping](https://www.ag-grid.com/angular-data-grid/grouping/) by setting `rowGroup` to `true`:

```ts
<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */ />

this.columnDefs = [
    { field: 'country', rowGroup: true },
    // ...
];
```

### Aggregating Rows  (Enterprise)

Enable [Aggregation](https://www.ag-grid.com/angular-data-grid/aggregation/) by setting `aggFunc` to one of `sum`, `min`, `max`, `count`, `avg`, `first`, or `last`:

```ts
<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */ />

this.columnDefs = [
    { field: 'gold', aggFunc: 'sum' },
    // ...
];
```

### Pivoting Rows  (Enterprise)

Enable [Pivoting](https://www.ag-grid.com/angular-data-grid/pivoting/) by setting `pivotMode` to `true`. Define pivot columns by setting `pivot` to `true`:

```ts
<ag-grid-angular
    [columnDefs]="columnDefs"
    [pivotMode]="pivotMode"
    /* other grid options ... */ />

this.columnDefs = [
    { field: 'sport', pivot: true },
];
this.pivotMode = true;
```

### Displaying Tree Data  (Enterprise)

Tree Data provides a way to supply the grid with structured hierarchical data.

Enable Tree Data by setting `treeData` to `true`. Provide a `getDataPath` callback to configure the [Row Hierarchy](https://www.ag-grid.com/angular-data-grid/tree-data-paths/#providing-hierarchy):

```ts
<ag-grid-angular
    [treeData]="treeData"
    [getDataPath]="getDataPath"
    /* other grid options ... */ />

this.treeData = true;
this.getDataPath = data => data.path;
```

### Displaying Tool Panels  (Enterprise)

The grid provides [Tool Panels](https://www.ag-grid.com/angular-data-grid/tool-panel/) for [Columns](https://www.ag-grid.com/angular-data-grid/tool-panel-columns/) and [Filters](https://www.ag-grid.com/angular-data-grid/tool-panel-filters/). You can also provide [Custom Tool Panels](https://www.ag-grid.com/angular-data-grid/component-tool-panel/).

To enable Column and Filter Tool Panels, set `sideBar` to `true`. To display only the Column or Filter Tool Panel, set `sideBar` to `'columns'` or `'filters'`:

```ts
<ag-grid-angular
    [sideBar]="sideBar"
    /* other grid options ... */ />

this.sideBar = true;
```

### Example

This example demonstrates Integrated Charting, Row Grouping, Pivoting, Aggregation and Tool Panels:

#### Enterprise Features

```ts
import { Component, ViewChild } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  AllCommunityModule,
  CellSelectionOptions,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowGroupingDisplayType,
  SideBarDef,
  enableDevValidations,
} from "ag-grid-community";
import {
  AllEnterpriseModule,
  IntegratedChartsModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  AllCommunityModule,
  AllEnterpriseModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [rowData]="rowData"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [groupDisplayType]="groupDisplayType"
    [cellSelection]="true"
    [enableCharts]="true"
    [sideBar]="sideBar"
    (firstDataRendered)="onFirstDataRendered($event)"
  /> `,
})
export class AppComponent {
  rowData: any[] | null = [
    {
      make: "Tesla",
      model: "Model Y",
      price: 64950,
      electric: true,
      month: "June",
    },
    {
      make: "Ford",
      model: "F-Series",
      price: 33850,
      electric: false,
      month: "October",
    },
    {
      make: "Toyota",
      model: "Corolla",
      price: 29600,
      electric: false,
      month: "August",
    },
    {
      make: "Mercedes",
      model: "EQA",
      price: 48890,
      electric: true,
      month: "February",
    },
    {
      make: "Fiat",
      model: "500",
      price: 15774,
      electric: false,
      month: "January",
    },
    {
      make: "Nissan",
      model: "Juke",
      price: 20675,
      electric: false,
      month: "March",
    },
    {
      make: "Vauxhall",
      model: "Corsa",
      price: 18460,
      electric: false,
      month: "July",
    },
    {
      make: "Volvo",
      model: "EX30",
      price: 33795,
      electric: true,
      month: "September",
    },
    {
      make: "Mercedes",
      model: "Maybach",
      price: 175720,
      electric: false,
      month: "December",
    },
    {
      make: "Vauxhall",
      model: "Astra",
      price: 25795,
      electric: false,
      month: "April",
    },
    {
      make: "Fiat",
      model: "Panda",
      price: 13724,
      electric: false,
      month: "November",
    },
    {
      make: "Jaguar",
      model: "I-PACE",
      price: 69425,
      electric: true,
      month: "May",
    },
    {
      make: "Tesla",
      model: "Model Y",
      price: 64950,
      electric: true,
      month: "June",
    },
    {
      make: "Ford",
      model: "F-Series",
      price: 33850,
      electric: false,
      month: "October",
    },
    {
      make: "Toyota",
      model: "Corolla",
      price: 29600,
      electric: false,
      month: "August",
    },
    {
      make: "Mercedes",
      model: "EQA",
      price: 48890,
      electric: true,
      month: "February",
    },
    {
      make: "Fiat",
      model: "500",
      price: 15774,
      electric: false,
      month: "January",
    },
    {
      make: "Nissan",
      model: "Juke",
      price: 20675,
      electric: false,
      month: "March",
    },
    {
      make: "Vauxhall",
      model: "Corsa",
      price: 18460,
      electric: false,
      month: "July",
    },
    {
      make: "Volvo",
      model: "EX30",
      price: 33795,
      electric: true,
      month: "September",
    },
    {
      make: "Mercedes",
      model: "Maybach",
      price: 175720,
      electric: false,
      month: "December",
    },
    {
      make: "Vauxhall",
      model: "Astra",
      price: 25795,
      electric: false,
      month: "April",
    },
    {
      make: "Fiat",
      model: "Panda",
      price: 13724,
      electric: false,
      month: "November",
    },
    {
      make: "Jaguar",
      model: "I-PACE",
      price: 69425,
      electric: true,
      month: "May",
    },
    {
      make: "Tesla",
      model: "Model Y",
      price: 64950,
      electric: true,
      month: "June",
    },
    {
      make: "Ford",
      model: "F-Series",
      price: 33850,
      electric: false,
      month: "October",
    },
    {
      make: "Toyota",
      model: "Corolla",
      price: 29600,
      electric: false,
      month: "August",
    },
    {
      make: "Mercedes",
      model: "EQA",
      price: 48890,
      electric: true,
      month: "February",
    },
    {
      make: "Fiat",
      model: "500",
      price: 15774,
      electric: false,
      month: "January",
    },
    {
      make: "Nissan",
      model: "Juke",
      price: 20675,
      electric: false,
      month: "March",
    },
    {
      make: "Vauxhall",
      model: "Corsa",
      price: 18460,
      electric: false,
      month: "July",
    },
    {
      make: "Volvo",
      model: "EX30",
      price: 33795,
      electric: true,
      month: "September",
    },
    {
      make: "Mercedes",
      model: "Maybach",
      price: 175720,
      electric: false,
      month: "December",
    },
    {
      make: "Vauxhall",
      model: "Astra",
      price: 25795,
      electric: false,
      month: "April",
    },
    {
      make: "Fiat",
      model: "Panda",
      price: 13724,
      electric: false,
      month: "November",
    },
    {
      make: "Jaguar",
      model: "I-PACE",
      price: 69425,
      electric: true,
      month: "May",
    },
  ];
  columnDefs: ColDef[] = [
    // Group by 'make', hiding it once grouped
    { field: "make", rowGroup: true, hide: true },
    { field: "model" },
    // Aggregate the average price per group
    { field: "price", filter: "agNumberColumnFilter", aggFunc: "avg" },
    { field: "electric" },
    { field: "month" },
  ];
  defaultColDef: ColDef = {
    filter: "agTextColumnFilter",
    floatingFilter: true,
    sortable: true,
    resizable: true,
  };
  groupDisplayType: RowGroupingDisplayType = "singleColumn";
  sideBar: SideBarDef | string | string[] | boolean | null = {
    toolPanels: ["columns", "filters"],
    defaultToolPanel: "columns",
  };

  onFirstDataRendered(params) {
    params.api.createRangeChart({
      cellRange: {
        rowStartIndex: 0,
        rowEndIndex: 8,
        columns: ["model", "price"],
      },
      chartType: "groupedColumn",
      chartThemeOverrides: {
        common: {
          title: {
            enabled: true,
            text: "Average Price by Make",
          },
        },
      },
    });
  }
}
```

[Live example: Enterprise Features](https://www.ag-grid.com/examples/key-features/enterprise-features-example/angular)