JavaScript 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.

const gridOptions = {
    toolbar: {
        alignment: 'right',
        items: [
            { toolbarItem: 'agRowGroupPanelToolbarItem', alignment: 'left' },
            'separator',
            'agFindToolbarItem',
            {
                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(),
            },
        ]
    },

    // other grid options ...
}

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.
• agMenuToolbarItem: A button that opens a dropdown menu of Menu Items. Requires ContextMenuModule or ColumnMenuModule. Supply menuItems via toolbarItemParams, along with an optional label, tooltip, and icon. menuItems accepts the same entries as the Context Menu — MenuItemDef objects or built-in string names such as 'copy', 'export', or 'separator'.

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.

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

    // other grid options ...
}

Separators Copy Link

Group toolbar items visually by inserting the string 'separator' between them. A separator renders as a vertical divider and has no other behaviour.

const gridOptions = {
    toolbar: {
        items: [
            'agQuickFilterToolbarItem',
            'separator',
            'agFindToolbarItem',
        ]
    },

    // other grid options ...
}

Default Alignment Copy Link

When an item does not specify its own alignment, it falls back to the toolbar-level alignment, which defaults to left. Set alignment at the toolbar level to define the default for all items that do not override it.

const gridOptions = {
    toolbar: {
        alignment: 'right',
        items: [
            'agFindToolbarItem',
            { toolbarItem: 'agQuickFilterToolbarItem', alignment: 'left' },
        ]
    },

    // other grid options ...
}

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.

const gridOptions = {
    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(),
            },
        ],
    },

    // other grid options ...
}

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.
2. Class: a direct reference to a Toolbar Item Component.

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

interface IToolbarItemComp {
    // mandatory methods

    // Return the DOM element of your component, this is what the grid puts into the DOM.
    getGui(): HTMLElement;

    // optional methods

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

    // 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;

    // Gets called when the grid is destroyed.
    // If your toolbar item needs to do any cleanup, do it here.
    destroy(): void;
}

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.