Vue Data GridQuick Access Toolbar

The Toolbar appears above the grid and provides quick access to common grid actions.

Configure the Toolbar with the toolbar grid option. The property takes a list of Toolbar Items.

<ag-grid-vue
    :toolbar="toolbar"
    /* other grid options ... */>
</ag-grid-vue>

this.toolbar = {
    alignment: 'right',
    items: [
        { toolbarItem: 'agRowGroupPanelToolbarItem', alignment: 'left' },
        'agFindToolbarItem',
        {
            key: 'autoSizeAll',
            label: 'Auto Size All',
            icon: 'maximize',
            action: (params) => params.api.autoSizeAllColumns(),
        },
        {
            key: 'resetColumns',
            tooltip: 'Reset Columns',
            icon: 'minimize',
            action: (params) => params.api.resetColumnState(),
        },
    ]
};

Built-in Items Copy Link

The following built-in items are available:

• agFindToolbarItem: A text input that searches within grid cells using the Find feature. Requires FindModule.
• agPivotPanelToolbarItem: Embeds the Pivot Panel in the toolbar. Requires RowGroupingPanelModule. Configured independently of the pivotPanelShow grid option — if both are set, both will render.
• agRowGroupPanelToolbarItem: Embeds the Row Group Panel in the toolbar. Requires RowGroupingPanelModule. Configured independently of the rowGroupPanelShow grid option — if both are set, both will render.
• agQuickFilterToolbarItem: A text input that filters grid rows using the Quick Filter. Requires QuickFilterModule.

Built-in items require their corresponding modules to be registered. If a required module is not registered, the item will not render and a console warning will be logged.

To add buttons that trigger grid actions — such as auto-sizing columns, opening the column chooser, toggling a tool panel, exporting data, or resetting column state — define an Action Button. For more complex controls, provide a Custom Component.

Configuration Copy Link

Each entry in items is either a built-in item name or an item object. Items are partitioned by alignment: left-aligned items render first in their declared order, followed by right-aligned items in their declared order.

An item object supports the following properties:

• key: a unique identifier for the item.
• alignment: 'left' or 'right'. See Default Alignment.
• toolbarItem: a built-in item name or a reference to a Custom Component.
• toolbarItemParams: additional props forwarded to the component.
• label, tooltip, icon, action: shorthand for rendering an Action Button without a component.

<ag-grid-vue
    :toolbar="toolbar"
    /* other grid options ... */>
</ag-grid-vue>

this.toolbar = {
    items: [
        'agQuickFilterToolbarItem',
        {
            key: 'myItem',
            toolbarItem: CustomToolbarComponent,
            alignment: 'right',
            toolbarItemParams: {
                label: 'Custom Label'
            }
        }
    ]
};

Default Alignment Copy Link

When an item does not specify its own alignment, it falls back to the toolbar-level alignment, which itself defaults to left in LTR and right in RTL. Set alignment at the toolbar level to change the default for every item that does not override it.

<ag-grid-vue
    :toolbar="toolbar"
    /* other grid options ... */>
</ag-grid-vue>

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

Custom Components Copy Link

The Toolbar accepts two kinds of user-defined items: Action Buttons — a declarative shorthand for rendering a button — and Custom Components that can render anything.

Action Buttons Copy Link

Set label, tooltip, icon and action on an item to render a button inline, without writing a component. The action callback fires on click and receives the grid api, context, and the item key.

<ag-grid-vue
    :toolbar="toolbar"
    /* other grid options ... */>
</ag-grid-vue>

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

label is the visible text rendered next to the icon; omit it to render an icon-only button. tooltip sets the hover tooltip and aria-label, and falls back to label when omitted.

Custom Component Copy Link

For anything beyond a button — custom markup, external state, or composed controls — set toolbarItem to a component reference. The grid instantiates the component once per item; each instance receives the standard IToolbarItemParams merged with whatever is passed via toolbarItemParams.

The example below defines a single CustomToolbarButton component and reuses it across the toolbar with different params to open tool panels, export data, auto-size columns, and reset column state.

The toolbarItem property accepts the following values:

1. String: the name of a registered Toolbar Item Component — see Registering Custom Components.

this.gridOptions = {
    toolbar: {
        items: [
            {
                key: 'autoSizeAll',
                toolbarItem: 'customToolbarButton',
                toolbarItemParams: {
                    label: 'Auto Size All',
                    onClick: (api) => api.autoSizeAllColumns(),
                },
            },
            'agQuickFilterToolbarItem',
        ],
    },
    // ...other properties
}

interface IToolbarItem {
    // Called when the `toolbar` grid option is updated.
    // If this method returns `true`, the grid assumes that
    // the toolbar item has updated with the latest params,
    // and takes no further action. If this method returns `false`,
    // or is not implemented, the grid will destroy and
    // recreate the toolbar item.
    refresh(params: IToolbarItemParams): boolean;
}

Updating at Runtime Copy Link

Use setGridOption('toolbar', ...) to change the toolbar configuration after the grid has been created.

The following example switches between three toolbar configurations using buttons, each showing a different set of toolbar items.