---
title: "Tool Panels"
enterprise: true
framework: javascript
version: "36.1.0"
---

# Tool Panels

This section covers Tool Panels, available via the grid's Side Bar, which allow for easy access to powerful grid operations such as grouping, pivoting, and filtering. Custom Tool Panels can also be provided to the grid.

## Overview

Tool Panels are panels that sit in the Side Bar to the right of the grid. The Side Bar allows access to the tool panels via buttons that work like tabs. The Side Bar and a Tool Panel are shown in the screenshot below.

![Side Bar](https://www.ag-grid.com/_astro/sideBar.2GaW0ypU.png)

## Provided Tool Panels

The grid provides the following Tool Panels:

- [Columns Tool Panel](https://www.ag-grid.com/javascript-data-grid/tool-panel-columns/) - to control aggregations, grouping and pivoting.
- [Filters Tool Panel](https://www.ag-grid.com/javascript-data-grid/tool-panel-filters/) - to perform multiple column filters.
- [New Filters Tool Panel](https://www.ag-grid.com/javascript-data-grid/tool-panel-filters-new/) - a redesigned version of the Filters Tool Panel that provides improved UX.

## Custom Tool Panels

In addition to the provided Tool Panels, it is also possible to provide custom Tool Panels.

For more details refer to the section: [Custom Panel](https://www.ag-grid.com/javascript-data-grid/component-tool-panel/).

## API

The `gridApi` has the following methods that can be used to interact with the tool panel.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `openToolPanel` | `Function` |  |  | Opens a particular tool panel. Provide the ID of the tool panel to open. Optionally, provide a parent element to attach the tool panel to. Module: [`SideBarModule`](https://www.ag-grid.com/javascript-data-grid/modules/). |
| `closeToolPanel` | `Function` |  |  | Closes the currently open tool panel (if any). Module: [`SideBarModule`](https://www.ag-grid.com/javascript-data-grid/modules/). |
| `getOpenedToolPanel` | `Function` |  |  | Returns the ID of the currently shown tool panel if any, otherwise `null`. Module: [`SideBarModule`](https://www.ag-grid.com/javascript-data-grid/modules/). |
| `isToolPanelShowing` | `Function` |  |  | Returns `true` if the tool panel is showing, otherwise `false`. Module: [`SideBarModule`](https://www.ag-grid.com/javascript-data-grid/modules/). |
| `refreshToolPanel` | `Function` |  |  | Force refreshes all tool panels by calling their `refresh` method. Module: [`SideBarModule`](https://www.ag-grid.com/javascript-data-grid/modules/). |
| `getToolPanelInstance` | `Function` |  |  | Gets the tool panel instance corresponding to the supplied `id`. Module: [`SideBarModule`](https://www.ag-grid.com/javascript-data-grid/modules/). |

## Events

The following events are emitted from the tool panel.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `toolPanelVisibleChanged` | `ToolPanelVisibleChangedEvent` |  |  | The tool panel visibility has changed. Fires twice if switching between panels - once with the old panel and once with the new panel. See [Tool Panel Events](https://www.ag-grid.com/javascript-data-grid/tool-panel/#events) for more information. |
| `toolPanelSizeChanged` | `ToolPanelSizeChangedEvent` |  |  | The tool panel size has been changed. See [Tool Panel Events](https://www.ag-grid.com/javascript-data-grid/tool-panel/#events) for more information. |
| `columnMenuVisibleChanged` | `ColumnMenuVisibleChangedEvent` |  |  | The column menu visibility has changed. Fires twice if switching between tabs - once with the old tab and once with the new tab. See [Column Menu API / Events](https://www.ag-grid.com/javascript-data-grid/column-menu/#column-menu-api--events) for more information. |
| `contextMenuVisibleChanged` | `ContextMenuVisibleChangedEvent` |  |  | The context menu visibility has changed (opened or closed). See [Context Menu API / Events](https://www.ag-grid.com/javascript-data-grid/context-menu/#context-menu-api--events) for more information. |