---
title: "Quick Access Toolbar"
enterprise: true
framework: angular
version: "36.1.0"
---

# Quick Access Toolbar

The Toolbar appears above the grid and provides quick access to common grid actions. It supports built-in items such as quick filter and find, dropdown menus, and can be extended with [Action Buttons](#action-buttons) or [Custom Components](#custom-components).

#### Built-in Items

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ColumnAutoSizeModule,
  CsvExportModule,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  QuickFilterModule,
  TextFilterModule,
  Toolbar,
  enableDevValidations,
} from "ag-grid-community";
import {
  ContextMenuModule,
  ExcelExportModule,
  FindModule,
  ToolbarModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextFilterModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  ColumnAutoSizeModule,
  ContextMenuModule,
  CsvExportModule,
  ExcelExportModule,
  FindModule,
  QuickFilterModule,
  ToolbarModule,
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [toolbar]="toolbar"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete" },
    { field: "country" },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
  ];
  defaultColDef: ColDef = {
    minWidth: 100,
    filter: true,
  };
  toolbar: Toolbar = {
    items: [
      "agQuickFilterToolbarItem",
      "separator",
      "agFindToolbarItem",
      "separator",
      {
        label: "Fit Columns To Grid",
        icon: "maximize",
        alignment: "right",
        action: (params) => params.api.sizeColumnsToFit(),
      },
      {
        toolbarItem: "agMenuToolbarItem",
        icon: "save",
        alignment: "right",
        label: "Export",
        tooltip: "Export as CSV or Excel",
        toolbarItemParams: {
          menuItems: ["csvExport", "excelExport"],
        },
      },
    ],
  };
  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));
  }
}
```

[Live example: Built-in Items](https://www.ag-grid.com/examples/toolbar/built-in-items/angular/)

## Configuring the Toolbar

Set the `toolbar` grid option to a [Toolbar](https://www.ag-grid.com/angular-data-grid/grid-options/#reference-accessories-toolbar) object. The `items` array accepts built-in item names, [Action Buttons](#action-buttons), and [Custom Components](#custom-components).

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

this.toolbar = {
    items: [
        'agQuickFilterToolbarItem',
        'separator',
        'agFindToolbarItem',
        'separator',
        {
            label: 'Fit Columns To Grid',
            icon: 'maximize',
            alignment: 'right',
            action: (params) => params.api.sizeColumnsToFit(),
        },
        {
            toolbarItem: 'agMenuToolbarItem',
            icon: 'save',
            alignment: 'right',
            label: 'Download',
            tooltip: 'Download as CSV or Excel',
            toolbarItemParams: {
                menuItems: ['csvExport', 'excelExport'],
            },
        },
    ],
};
```

### Alignment

Toolbar items are aligned to the left by default. Set the `alignment` property on the toolbar to change the default alignment for all items, or set it individually per item.

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

this.toolbar = {
    alignment: 'right',
    items: [
        'agFindToolbarItem',
        { toolbarItem: 'agQuickFilterToolbarItem', alignment: 'left' },
    ]
};
```

## Built-in Items

A number of built-in toolbar items are provided for common use cases that integrate with existing grid features. Be sure to include the required feature module, otherwise the toolbar item will be excluded.

| Item | Description | Required Modules |
| --- | --- | --- |
| `agQuickFilterToolbarItem` | Text input that filters grid rows using the [Quick Filter](https://www.ag-grid.com/angular-data-grid/filter-quick/). | `QuickFilterModule` |
| `agFindToolbarItem` | Text input that searches within grid cells using [Find](https://www.ag-grid.com/angular-data-grid/find/). | `FindModule` |
| `agRowGroupPanelToolbarItem` | Embeds the [Row Group Panel](https://www.ag-grid.com/angular-data-grid/grouping-group-panel/). | `RowGroupingPanelModule` |
| `agPivotPanelToolbarItem` | Embeds the [Pivot Panel](https://www.ag-grid.com/angular-data-grid/pivoting/#enabling-the-pivot-panel). | `RowGroupingPanelModule` |
| [`agMenuToolbarItem`](#dropdown-menus) | Button that opens a [dropdown menu](#dropdown-menus). | `ContextMenuModule` or `ColumnMenuModule` |
| `separator` | Vertical divider used to group items visually. Has no behaviour of its own. | None |

### Row Group and Pivot Panels

The Row Group Panel and Pivot Panel can both be embedded in the Quick Access Toolbar using `agRowGroupPanelToolbarItem` and `agPivotPanelToolbarItem`. Both panels are configured independently of the [Row Group Panel](https://www.ag-grid.com/angular-data-grid/grouping-group-panel/) and the [Pivot Panel](https://www.ag-grid.com/angular-data-grid/pivoting/#enabling-the-pivot-panel), so you can display each panel in the Toolbar, above the grid, or both at the same time.

The example below shows both panels in the toolbar along with a reset action button. Use the panels to rearrange columns, then click Reset to restore the initial layout.

#### Row Group and Pivot Panels

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ColumnApiModule,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  Toolbar,
  enableDevValidations,
} from "ag-grid-community";
import {
  PivotModule,
  RowGroupingModule,
  RowGroupingPanelModule,
  ToolbarModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ColumnApiModule,
  RowGroupingModule,
  RowGroupingPanelModule,
  PivotModule,
  ToolbarModule,
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [autoGroupColumnDef]="autoGroupColumnDef"
    [pivotMode]="true"
    [toolbar]="toolbar"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "country", enableRowGroup: true, rowGroup: true },
    { field: "year", enableRowGroup: true, enablePivot: true, pivot: true },
    { field: "sport", enableRowGroup: true, enablePivot: true },
    { field: "gold", enableValue: true, aggFunc: "sum" },
    { field: "silver", enableValue: true, aggFunc: "sum" },
    { field: "total", enableValue: true, aggFunc: "sum" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 120,
  };
  autoGroupColumnDef: AutoGroupColumnDef = {
    minWidth: 200,
  };
  toolbar: Toolbar = {
    items: [
      "agRowGroupPanelToolbarItem",
      "separator",
      "agPivotPanelToolbarItem",
      "separator",
      {
        icon: "columns",
        label: "Reset",
        alignment: "right",
        action: (params) => {
          params.api.setGridOption("pivotMode", true);
          params.api.resetColumnState();
        },
      },
    ],
  };
  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));
  }
}
```

[Live example: Row Group and Pivot Panels](https://www.ag-grid.com/examples/toolbar/row-group-pivot-panels/angular/)

### Dropdown Menus

Use the `agMenuToolbarItem` to render a dropdown of [Menu Items](https://www.ag-grid.com/angular-data-grid/component-menu-item/). Configure the button and menu contents using the following properties:

- `label`: Visible text rendered next to the icon. Omit to render an icon-only button.
- `icon`: Icon displayed on the button. Accepts any [provided icon](https://www.ag-grid.com/angular-data-grid/custom-icons/#provided-icons).
- `tooltip`: Hover tooltip and `aria-label`. Falls back to `label` when omitted.
- `toolbarItemParams.menuItems`: Items to include in the dropdown. Each entry is either a `MenuItemDef` or one of the [built-in](https://www.ag-grid.com/angular-data-grid/context-menu/#built-in-menu-items) menu item names as used by the Context Menu.

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

this.toolbar = {
    items: [
        {
            toolbarItem: 'agMenuToolbarItem',
            icon: 'save',
            toolbarItemParams: {
                menuItems: ['csvExport', 'excelExport'],
            },
        },
    ],
};
```

## Action Buttons

Action buttons provide a convenient way to trigger custom behaviour on click of a toolbar item. Configure an action button using the following properties:

- `label`: Visible text rendered next to the icon. Omit to render an icon-only button.
- `icon`: Icon displayed on the button. Accepts any [provided icon](https://www.ag-grid.com/angular-data-grid/custom-icons/#provided-icons).
- `tooltip`: Hover tooltip and `aria-label`. Falls back to `label` when omitted.
- `action`: Callback fired on click. Receives the grid `api`, `context`, and the item `key`.

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

this.toolbar = {
    items: [
        {
            key: 'autoSizeAll',
            label: 'Auto Size All',
            icon: 'maximize',
            action: (params) => params.api.autoSizeAllColumns(),
        },
    ],
};
```

The example below shows icon-only buttons with tooltips for sizing columns, sorting, and resetting filters and column state, divided by separators.

#### Action Buttons

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ColumnApiModule,
  ColumnAutoSizeModule,
  CsvExportModule,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  Toolbar,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  ToolbarModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  TextFilterModule,
  NumberFilterModule,
  ColumnMenuModule,
  CsvExportModule,
  ColumnAutoSizeModule,
  ColumnApiModule,
  ContextMenuModule,
  ToolbarModule,
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [toolbar]="toolbar"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete" },
    { field: "country", filter: "agTextColumnFilter" },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
  ];
  defaultColDef: ColDef = {
    minWidth: 100,
    filter: true,
  };
  toolbar: Toolbar = {
    items: [
      {
        key: "sizeColumnsToFit",
        icon: "maximize",
        tooltip: "Size Columns to Fit",
        action: (params) => params.api.sizeColumnsToFit(),
      },
      {
        key: "autoSizeAll",
        icon: "minimize",
        tooltip: "Auto-size All Columns",
        action: (params) => params.api.autoSizeAllColumns(),
      },
      "separator",
      {
        key: "sortFirstColumnAsc",
        icon: "sortAscending",
        tooltip: "Sort First Column Ascending",
        action: (params) =>
          params.api.applyColumnState({
            state: [{ colId: "athlete", sort: "asc" }],
            defaultState: { sort: null },
          }),
      },
      {
        key: "sortFirstColumnDesc",
        icon: "sortDescending",
        tooltip: "Sort First Column Descending",
        action: (params) =>
          params.api.applyColumnState({
            state: [{ colId: "athlete", sort: "desc" }],
            defaultState: { sort: null },
          }),
      },
      "separator",
      {
        key: "addFilter",
        icon: "filter-add",
        tooltip: "Add Filter",
        action: (params) =>
          params.api.setFilterModel({
            country: { filterType: "text", type: "contains", filter: "Canada" },
          }),
      },
      {
        key: "clearFilters",
        icon: "filterActive",
        tooltip: "Clear All Filters",
        action: (params) => params.api.setFilterModel(null),
      },
      "separator",
      {
        key: "showColumnChooser",
        icon: "columns",
        tooltip: "Open Column Chooser",
        action: (params) => params.api.showColumnChooser(),
      },
    ],
  };
  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));
  }
}
```

[Live example: Action Buttons](https://www.ag-grid.com/examples/toolbar/action-buttons/angular/)

## Custom Components

For controls beyond a button, such as toggles, inputs, or any stateful UI, set `toolbarItem` to a custom component. Custom components can render arbitrary HTML and call any grid API, so they suit cases that the [Action Button](#action-buttons) shorthand cannot express.

The example below defines two custom items: checkbox toggles that apply column filters on the left, and a radio group that opens [Side Bar](https://www.ag-grid.com/angular-data-grid/tool-panel/) tool panels on the right. The radio group's `setSelected` method is called via [`getToolbarItemInstance`](#reference-accessories-getToolbarItemInstance) in `onToolPanelVisibleChanged` to stay in sync when a panel is opened or closed elsewhere, such as via a sidebar tab.

#### Custom Toolbar Item

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  AllCommunityModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  SideBarDef,
  ToolPanelVisibleChangedEvent,
  Toolbar,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnsToolPanelModule,
  FiltersToolPanelModule,
  SideBarModule,
  ToolbarModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  AllCommunityModule,
  ColumnsToolPanelModule,
  FiltersToolPanelModule,
  SideBarModule,
  ToolbarModule,
]);
import { ToolPanelRadio } from "./tool-panel-radio.component";
import { WinnersToggle } from "./winners-toggle.component";
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular, ToolPanelRadio, WinnersToggle],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [sideBar]="sideBar"
    [toolbar]="toolbar"
    [rowData]="rowData"
    (toolPanelVisibleChanged)="onToolPanelVisibleChanged($event)"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete" },
    { field: "country" },
    { field: "gold", filter: "agNumberColumnFilter" },
    { field: "silver", filter: "agNumberColumnFilter" },
    { field: "bronze" },
  ];
  defaultColDef: ColDef = {
    minWidth: 100,
    filter: true,
  };
  sideBar: SideBarDef | string | string[] | boolean | null = {
    toolPanels: ["columns", "filters"],
  };
  toolbar: Toolbar = {
    items: [
      { toolbarItem: WinnersToggle, key: "winners" },
      { toolbarItem: ToolPanelRadio, key: "toolPanel", alignment: "right" },
    ],
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onToolPanelVisibleChanged(event: ToolPanelVisibleChangedEvent) {
    const radio = event.api.getToolbarItemInstance<ToolPanelRadio>("toolPanel");
    radio?.setSelected(event.visible ? event.key : "none");
  }

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

[Live example: Custom Toolbar Item](https://www.ag-grid.com/examples/toolbar/toolbar-custom/angular/)

When defining a custom component, provide the `toolbarItem` with:

1. `String`: the name of a registered Toolbar Item Component. See [Registering Custom Components](https://www.ag-grid.com/angular-data-grid/components/#registering-custom-components).
2. `Component`: a direct reference to a Toolbar Item Component.

```js
// WinnersToggle and ToolPanelRadio are the custom components defined above.
// Any toolbarItemParams set on the item are accessible via params.toolbarItemParams inside the component.
this.gridOptions = {
    toolbar: {
        items: [
            { toolbarItem: WinnersToggle, key: 'winners' },
            { toolbarItem: ToolPanelRadio, key: 'toolPanel', alignment: 'right' },
        ],
    },
    // ...other properties
}
```

Implement this interface to create a toolbar item component.

```ts
interface IToolbarItemAngularComp {
    // mandatory methods

    // The agInit(params) method is called on the toolbar item component once.
    // See below for details on the parameters.
    agInit(params: IToolbarItemParams): void;

    // optional methods

    // Called when the `toolbar` grid option updates.
    // Return `true` if the component updates itself with the new params.
    // Return `false` (or omit) to have the grid destroy and recreate the component.
    refresh(params: IToolbarItemParams): boolean;
}
```

The `agInit(params)` method receives a params object that implements `IToolbarItemParams`:

## Theme Parameters

The toolbar exposes the following [Theme Parameters](https://www.ag-grid.com/angular-data-grid/theming-parameters/):

| Parameter | Description |
| --- | --- |
| `toolbarBackgroundColor` | Background colour of the toolbar. Defaults to the header background colour. |
| `toolbarTextColor` | Text colour in the toolbar. Defaults to the header text colour. |
| `toolbarSeparatorBorder` | Border style for the vertical separator between toolbar items. |

## Accessing Toolbar Items

To access a toolbar item instance use the grid api method `getToolbarItemInstance(key)`. The `key` must match a `key` set on the item definition; items without an explicit key are not reachable via the API. This is demonstrated in the [Custom Components](#custom-components) example above, where it's used to keep a toolbar radio in sync with side bar tool panel changes.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `getToolbarItemInstance` | `Function` |  |  | Gets the toolbar item instance for the given `key`. Only toolbar items configured with a `key` can be accessed. Module: [`ToolbarModule`](https://www.ag-grid.com/angular-data-grid/modules/). |

## API Reference

### Toolbar

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `toolbar` | `Toolbar` |  |  | Specifies the toolbar items to use in the toolbar. Module: [`ToolbarModule`](https://www.ag-grid.com/angular-data-grid/modules/). |

### IToolbarItemParams

Properties available on the `IToolbarItemParams&lt;TData = any, TContext = any, TParams = any&gt;` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `key` | `string` |  |  | Identifier for the item. Mirrors the `key` set on the item definition, or an auto-generated key when none was provided. Used internally; only items with an explicit key on the definition are reachable via `api.getToolbarItemInstance(key)`. |
| `alignment` | `'left' \| 'right'` |  |  | Explicit alignment, when set on the item definition. |
| `toolbarItemParams` | `TParams` |  |  | Custom params forwarded from the item definition's `toolbarItemParams`. |
| `label` | `string` |  |  | Label, when set on the item definition (action-button shorthand or `agMenuToolbarItem`). |
| `tooltip` | `string` |  |  | Tooltip / aria-label, when set on the item definition. |
| `icon` | `IconName` |  |  | Icon name, when set on the item definition. |
| `action` | `Function` |  |  | Action callback, when using the action-button shorthand. |
| `api` | [`GridApi`](https://www.ag-grid.com/angular-data-grid/grid-api/) |  |  | The grid api. |
| `context` | [`TContext`](https://www.ag-grid.com/angular-data-grid/typescript-generics/#context-tcontext) |  |  | Application context as set on `gridOptions.context`. |