---
title: "Quick Access Toolbar"
enterprise: true
framework: vue
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 {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
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";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
TextFilterModule,
NumberFilterModule,
ClientSideRowModelModule,
ColumnAutoSizeModule,
ContextMenuModule,
CsvExportModule,
ExcelExportModule,
FindModule,
QuickFilterModule,
ToolbarModule,
]);
const VueExample = defineComponent({
template: `
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef | null>(null);
const columnDefs = ref([
{ field: "athlete" },
{ field: "country" },
{ field: "gold" },
{ field: "silver" },
{ field: "bronze" },
]);
const defaultColDef = ref({
minWidth: 100,
filter: true,
});
const toolbar = ref({
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"],
},
},
],
});
const rowData = ref(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,
toolbar,
rowData,
onGridReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
```
[Live example: Built-in Items](https://www.ag-grid.com/examples/toolbar/built-in-items/vue3/)
## Configuring the Toolbar
Set the `toolbar` grid option to a [Toolbar](https://www.ag-grid.com/vue-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
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
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/vue-data-grid/filter-quick/). | `QuickFilterModule` |
| `agFindToolbarItem` | Text input that searches within grid cells using [Find](https://www.ag-grid.com/vue-data-grid/find/). | `FindModule` |
| `agRowGroupPanelToolbarItem` | Embeds the [Row Group Panel](https://www.ag-grid.com/vue-data-grid/grouping-group-panel/). | `RowGroupingPanelModule` |
| `agPivotPanelToolbarItem` | Embeds the [Pivot Panel](https://www.ag-grid.com/vue-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/vue-data-grid/grouping-group-panel/) and the [Pivot Panel](https://www.ag-grid.com/vue-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 {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
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";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
ColumnApiModule,
RowGroupingModule,
RowGroupingPanelModule,
PivotModule,
ToolbarModule,
]);
const VueExample = defineComponent({
template: `
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef | null>(null);
const columnDefs = ref([
{ 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" },
]);
const defaultColDef = ref({
flex: 1,
minWidth: 120,
});
const autoGroupColumnDef = ref({
minWidth: 200,
});
const toolbar = ref({
items: [
"agRowGroupPanelToolbarItem",
"separator",
"agPivotPanelToolbarItem",
"separator",
{
icon: "columns",
label: "Reset",
alignment: "right",
action: (params) => {
params.api.setGridOption("pivotMode", true);
params.api.resetColumnState();
},
},
],
});
const rowData = ref(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,
toolbar,
rowData,
onGridReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
```
[Live example: Row Group and Pivot Panels](https://www.ag-grid.com/examples/toolbar/row-group-pivot-panels/vue3/)
### Dropdown Menus
Use the `agMenuToolbarItem` to render a dropdown of [Menu Items](https://www.ag-grid.com/vue-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/vue-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/vue-data-grid/context-menu/#built-in-menu-items) menu item names as used by the Context Menu.
```ts
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/vue-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
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 {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
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";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
TextFilterModule,
NumberFilterModule,
ColumnMenuModule,
CsvExportModule,
ColumnAutoSizeModule,
ColumnApiModule,
ContextMenuModule,
ToolbarModule,
]);
const VueExample = defineComponent({
template: `
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef | null>(null);
const columnDefs = ref([
{ field: "athlete" },
{ field: "country", filter: "agTextColumnFilter" },
{ field: "gold" },
{ field: "silver" },
{ field: "bronze" },
]);
const defaultColDef = ref({
minWidth: 100,
filter: true,
});
const toolbar = ref({
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(),
},
],
});
const rowData = ref(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,
toolbar,
rowData,
onGridReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
```
[Live example: Action Buttons](https://www.ag-grid.com/examples/toolbar/action-buttons/vue3/)
## 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/vue-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 {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
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";
import ToolPanelRadio from "./toolPanelRadioVue";
import WinnersToggle from "./winnersToggleVue";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
AllCommunityModule,
ColumnsToolPanelModule,
FiltersToolPanelModule,
SideBarModule,
ToolbarModule,
]);
const VueExample = defineComponent({
template: `
`,
components: {
"ag-grid-vue": AgGridVue,
ToolPanelRadio,
WinnersToggle,
},
setup(props) {
const gridApi = shallowRef | null>(null);
const columnDefs = ref([
{ field: "athlete" },
{ field: "country" },
{ field: "gold", filter: "agNumberColumnFilter" },
{ field: "silver", filter: "agNumberColumnFilter" },
{ field: "bronze" },
]);
const defaultColDef = ref({
minWidth: 100,
filter: true,
});
const sideBar = ref({
toolPanels: ["columns", "filters"],
});
const toolbar = ref({
items: [
{ toolbarItem: "WinnersToggle", key: "winners" },
{ toolbarItem: "ToolPanelRadio", key: "toolPanel", alignment: "right" },
],
});
const rowData = ref(null);
function onToolPanelVisibleChanged(event: ToolPanelVisibleChangedEvent) {
const radio =
event.api.getToolbarItemInstance("toolPanel");
radio?.setSelected(event.visible ? event.key : "none");
}
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,
sideBar,
toolbar,
rowData,
onGridReady,
onToolPanelVisibleChanged,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
```
[Live example: Custom Toolbar Item](https://www.ag-grid.com/examples/toolbar/toolbar-custom/vue3/)
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/vue-data-grid/components/#registering-custom-components).
```js
// winnersToggle and toolPanelRadio are the custom components defined above.
// Any toolbarItemParams set on the item are accessible via this.params.toolbarItemParams inside the component.
this.gridOptions = {
toolbar: {
items: [
{ toolbarItem: 'winnersToggle', key: 'winners' },
{ toolbarItem: 'toolPanelRadio', key: 'toolPanel', alignment: 'right' },
],
},
// ...other properties
}
```
Any valid Vue component can be a toolbar item component, however it is also possible to implement the following optional methods:
```ts
interface IToolbarItem {
// 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;
}
```
When a custom toolbar item component is instantiated then the following will be made available on `this.params`:
## Theme Parameters
The toolbar exposes the following [Theme Parameters](https://www.ag-grid.com/vue-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/vue-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/vue-data-grid/modules/). |
### IToolbarItemParams
Properties available on the `IToolbarItemParams<TData = any, TContext = any, TParams = any>` 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/vue-data-grid/grid-api/) | | | The grid api. |
| `context` | [`TContext`](https://www.ag-grid.com/vue-data-grid/typescript-generics/#context-tcontext) | | | Application context as set on `gridOptions.context`. |