---
title: "Quick Access Toolbar"
enterprise: true
framework: react
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

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ColumnAutoSizeModule,
  CsvExportModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  NumberFilterModule,
  QuickFilterModule,
  TextFilterModule,
  Toolbar,
  enableDevValidations,
} from "ag-grid-community";
import {
  ContextMenuModule,
  ExcelExportModule,
  FindModule,
  ToolbarModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
import { useFetchJson } from "./useFetchJson";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [
  TextFilterModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  ColumnAutoSizeModule,
  ContextMenuModule,
  CsvExportModule,
  ExcelExportModule,
  FindModule,
  QuickFilterModule,
  ToolbarModule,
];

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);

  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "athlete" },
    { field: "country" },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      minWidth: 100,
      filter: true,
    };
  }, []);
  const toolbar = useMemo<Toolbar>(() => {
    return {
      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 { data, loading } = useFetchJson<IOlympicData>(
    "https://www.ag-grid.com/example-assets/olympic-winners.json",
  );

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact<IOlympicData>
            rowData={data}
            loading={loading}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            toolbar={toolbar}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

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

## Configuring the Toolbar

Set the `toolbar` grid option to a [Toolbar](https://www.ag-grid.com/react-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).

```jsx
const 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'],
            },
        },
    ],
};

<AgGridReact toolbar={toolbar} />
```

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

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

<AgGridReact toolbar={toolbar} />
```

## 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/react-data-grid/filter-quick/). | `QuickFilterModule` |
| `agFindToolbarItem` | Text input that searches within grid cells using [Find](https://www.ag-grid.com/react-data-grid/find/). | `FindModule` |
| `agRowGroupPanelToolbarItem` | Embeds the [Row Group Panel](https://www.ag-grid.com/react-data-grid/grouping-group-panel/). | `RowGroupingPanelModule` |
| `agPivotPanelToolbarItem` | Embeds the [Pivot Panel](https://www.ag-grid.com/react-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/react-data-grid/grouping-group-panel/) and the [Pivot Panel](https://www.ag-grid.com/react-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

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ColumnApiModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  Toolbar,
  enableDevValidations,
} from "ag-grid-community";
import {
  PivotModule,
  RowGroupingModule,
  RowGroupingPanelModule,
  ToolbarModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
import { useFetchJson } from "./useFetchJson";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [
  ClientSideRowModelModule,
  ColumnApiModule,
  RowGroupingModule,
  RowGroupingPanelModule,
  PivotModule,
  ToolbarModule,
];

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);

  const [columnDefs, setColumnDefs] = useState<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" },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 120,
    };
  }, []);
  const autoGroupColumnDef = useMemo<AutoGroupColumnDef>(() => {
    return {
      minWidth: 200,
    };
  }, []);
  const toolbar = useMemo<Toolbar>(() => {
    return {
      items: [
        "agRowGroupPanelToolbarItem",
        "separator",
        "agPivotPanelToolbarItem",
        "separator",
        {
          icon: "columns",
          label: "Reset",
          alignment: "right",
          action: (params) => {
            params.api.setGridOption("pivotMode", true);
            params.api.resetColumnState();
          },
        },
      ],
    };
  }, []);

  const { data, loading } = useFetchJson<IOlympicData>(
    "https://www.ag-grid.com/example-assets/olympic-winners.json",
  );

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact<IOlympicData>
            rowData={data}
            loading={loading}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            autoGroupColumnDef={autoGroupColumnDef}
            pivotMode={true}
            toolbar={toolbar}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

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

### Dropdown Menus

Use the `agMenuToolbarItem` to render a dropdown of [Menu Items](https://www.ag-grid.com/react-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/react-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/react-data-grid/context-menu/#built-in-menu-items) menu item names as used by the Context Menu.

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

<AgGridReact toolbar={toolbar} />
```

## 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/react-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`.

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

<AgGridReact toolbar={toolbar} />
```

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

#### Action Buttons

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ColumnApiModule,
  ColumnAutoSizeModule,
  CsvExportModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  Toolbar,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  ToolbarModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
import { useFetchJson } from "./useFetchJson";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [
  ClientSideRowModelModule,
  TextFilterModule,
  NumberFilterModule,
  ColumnMenuModule,
  CsvExportModule,
  ColumnAutoSizeModule,
  ColumnApiModule,
  ContextMenuModule,
  ToolbarModule,
];

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);

  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "athlete" },
    { field: "country", filter: "agTextColumnFilter" },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      minWidth: 100,
      filter: true,
    };
  }, []);
  const toolbar = useMemo<Toolbar>(() => {
    return {
      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 { data, loading } = useFetchJson<IOlympicData>(
    "https://www.ag-grid.com/example-assets/olympic-winners.json",
  );

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact<IOlympicData>
            rowData={data}
            loading={loading}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            toolbar={toolbar}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

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

## 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/react-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

```tsx
'use client';
import React, {
  StrictMode,
  useCallback,
  useEffect,
  useMemo,
  useState,
} from "react";
import { createRoot } from "react-dom/client";

import type {
  ColDef,
  ToolPanelVisibleChangedEvent,
  Toolbar,
} from "ag-grid-community";
import { AllCommunityModule } from "ag-grid-community";
import {
  ColumnsToolPanelModule,
  FiltersToolPanelModule,
  SideBarModule,
  ToolbarModule,
} from "ag-grid-enterprise";
import { AgGridProvider, AgGridReact } from "ag-grid-react";

import {
  ToolPanelRadio,
  type ToolPanelRadioHandle,
  WinnersToggle,
} from "./customToolbarItem";
import "./styles.css";

const modules = [
  AllCommunityModule,
  ColumnsToolPanelModule,
  FiltersToolPanelModule,
  SideBarModule,
  ToolbarModule,
];

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<any[]>();

  useEffect(() => {
    fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .then((response) => response.json())
      .then((data) => setRowData(data));
  }, []);

  const columnDefs = useMemo<ColDef[]>(
    () => [
      { field: "athlete" },
      { field: "country" },
      { field: "gold", filter: "agNumberColumnFilter" },
      { field: "silver", filter: "agNumberColumnFilter" },
      { field: "bronze" },
    ],
    [],
  );
  const defaultColDef = useMemo<ColDef>(
    () => ({
      minWidth: 100,
      filter: true,
    }),
    [],
  );
  const sideBar = useMemo(() => ({ toolPanels: ["columns", "filters"] }), []);
  const toolbar = useMemo<Toolbar>(
    () => ({
      items: [
        { toolbarItem: WinnersToggle, key: "winners" },
        { toolbarItem: ToolPanelRadio, key: "toolPanel", alignment: "right" },
      ],
    }),
    [],
  );
  const onToolPanelVisibleChanged = useCallback(
    (event: ToolPanelVisibleChangedEvent) => {
      const radio =
        event.api.getToolbarItemInstance<ToolPanelRadioHandle>("toolPanel");
      radio?.setSelected(event.visible ? event.key : "none");
    },
    [],
  );

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact
            rowData={rowData}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            sideBar={sideBar}
            toolbar={toolbar}
            onToolPanelVisibleChanged={onToolPanelVisibleChanged}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

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

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/react-data-grid/components/#registering-custom-components).
2. `Component`: a direct reference to a Toolbar Item Component.

```jsx
{/* WinnersToggle and ToolPanelRadio are the custom components defined above. */}
{/* Any toolbarItemParams set on the item are accessible via props.toolbarItemParams inside the component. */}
<AgGridReact
    toolbar={{
        items: [
            { toolbarItem: WinnersToggle, key: 'winners' },
            { toolbarItem: ToolPanelRadio, key: 'toolPanel', alignment: 'right' },
        ],
    }}
    // ...other props
/>
```

When a toolbar item component is instantiated then the following will be made available on `props`:

## Theme Parameters

The toolbar exposes the following [Theme Parameters](https://www.ag-grid.com/react-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/react-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/react-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/react-data-grid/grid-api/) |  |  | The grid api. |
| `context` | [`TContext`](https://www.ag-grid.com/react-data-grid/typescript-generics/#context-tcontext) |  |  | Application context as set on `gridOptions.context`. |