JavaScript Data GridQuick 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 or Custom Components.

Configuring the Toolbar Copy Link

Set the toolbar grid option to a Toolbar object. The items array accepts built-in item names, Action Buttons, and Custom Components.

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

    // other grid options ...
}

Alignment Copy Link

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.

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

    // other grid options ...
}

Built-in Items Copy Link

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.

Row Group and Pivot Panels Copy Link

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

Dropdown Menus Copy Link

Use the agMenuToolbarItem to render a dropdown of Menu Items. 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.
• 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 menu item names as used by the Context Menu.

const gridOptions = {
    toolbar: {
        items: [
            {
                toolbarItem: 'agMenuToolbarItem',
                icon: 'save',
                toolbarItemParams: {
                    menuItems: ['csvExport', 'excelExport'],
                },
            },
        ],
    },

    // other grid options ...
}

Action Buttons Copy Link

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

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

    // other grid options ...
}

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

Custom Components Copy Link

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 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 tool panels on the right. The radio group's setSelected method is called via getToolbarItemInstance in onToolPanelVisibleChanged to stay in sync when a panel is opened or closed elsewhere, such as via a sidebar tab.

When defining a custom component, provide the toolbarItem with:

1. String: the name of a registered Toolbar Item Component. See Registering Custom Components.
2. Class: a direct reference to a Toolbar Item Component.

// WinnersToggle and ToolPanelRadio are the custom components defined above.
// Any toolbarItemParams set on the item are accessible via params.toolbarItemParams inside the component.
const gridOptions = {
    toolbar: {
        items: [
            { toolbarItem: WinnersToggle, key: 'winners' },
            { toolbarItem: ToolPanelRadio, key: 'toolPanel', alignment: 'right' },
        ],
    },
    // ...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 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;

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

Theme Parameters Copy Link

The toolbar exposes the following Theme Parameters:

Accessing Toolbar Items Copy Link

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 example above, where it's used to keep a toolbar radio in sync with side bar tool panel changes.

API Reference Copy Link

Toolbar Copy Link

IToolbarItemParams Copy Link