---
title: "Tool Panel Component"
enterprise: true
framework: javascript
version: "36.1.0"
---

# Tool Panel Component

Custom Tool Panel Components can be included into the grid's Side Bar. Implement these when you require more Tool Panels to meet your application requirements.

The example below provides a 'Custom Stats' Tool Panel to demonstrates how to create and register a Custom Tool Panel Component with the grid and include it the Side Bar:

#### Custom Stats

```ts
import {
  CellValueChangedEvent,
  ClientSideRowModelApiModule,
  ClientSideRowModelModule,
  ColDef,
  EventApiModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  NumberEditorModule,
  NumberFilterModule,
  RowApiModule,
  TextEditorModule,
  TextFilterModule,
  createGrid,
  enableDevValidations,
  iconOverrides,
  themeQuartz,
} from "ag-grid-community";
import {
  ColumnsToolPanelModule,
  FiltersToolPanelModule,
  SetFilterModule,
} from "ag-grid-enterprise";
import { CustomStatsToolPanel } from "./customStatsToolPanel";
import { IOlympicData } from "./interfaces";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelApiModule,
  NumberEditorModule,
  TextEditorModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  FiltersToolPanelModule,
  SetFilterModule,
  TextFilterModule,
  RowApiModule,
  EventApiModule,
]);

const columnDefs: ColDef[] = [
  { field: "athlete", width: 150, filter: "agTextColumnFilter" },
  { field: "age", width: 90 },
  { field: "country", width: 120 },
  { field: "year", width: 90 },
  { field: "date", width: 110 },
  { field: "gold", width: 100, filter: false },
  { field: "silver", width: 100, filter: false },
  { field: "bronze", width: 100, filter: false },
  { field: "total", width: 100, filter: false },
];

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  theme: themeQuartz.withPart(
    iconOverrides({
      type: "image",
      mask: true,
      icons: {
        // map of icon names to images
        "custom-stats": {
          svg: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><g stroke="#7F8C8D" fill="none" fill-rule="evenodd"><path d="M10.5 6V4.5h-5v.532a1 1 0 0 0 .36.768l1.718 1.432a1 1 0 0 1 0 1.536L5.86 10.2a1 1 0 0 0-.36.768v.532h5V10"/><rect x="1.5" y="1.5" width="13" height="13" rx="2"/></g></svg>',
        },
      },
    }),
  ),
  defaultColDef: {
    editable: true,
    flex: 1,
    minWidth: 100,
    filter: true,
  },
  icons: {
    "custom-stats": '<span class="ag-icon ag-icon-custom-stats"></span>',
  },
  columnDefs: columnDefs,
  sideBar: {
    toolPanels: [
      {
        id: "columns",
        labelDefault: "Columns",
        labelKey: "columns",
        iconKey: "columns",
        toolPanel: "agColumnsToolPanel",
      },
      {
        id: "filters",
        labelDefault: "Filters",
        labelKey: "filters",
        iconKey: "filter",
        toolPanel: "agFiltersToolPanel",
      },
      {
        id: "customStats",
        labelDefault: "Custom Stats",
        labelKey: "customStats",
        iconKey: "custom-stats",
        toolPanel: CustomStatsToolPanel,
        toolPanelParams: {
          title: "Custom Stats",
        },
      },
    ],
    defaultToolPanel: "customStats",
  },
  onCellValueChanged: (params: CellValueChangedEvent) => {
    params.api.refreshClientSideRowModel();
  },
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data) => {
    gridApi!.setGridOption("rowData", data);
  });
```

[Live example: Custom Stats](https://www.ag-grid.com/examples/component-tool-panel/custom-stats/typescript)

## Implementing a Tool Panel Component

Implement this interface to create a tool panel component.

```ts
interface IToolPanelComp {
    // mandatory methods

    // Returns the DOM element for this Tool Panel
    getGui(): HTMLElement;

    // optional methods

    // The init(params) method is called on the tool panel once upon component initialisation.
    init(params: IToolPanelParams): void;

    // Called when `api.refreshToolPanel()` is called (with the current params).
    // Also called when the `sideBar` grid option is updated (with the updated params).
    // When `sideBar` is updated, if this method returns `true`,
    // then the grid will take no further action.
    // Otherwise, the tool panel will be destroyed and recreated.
    refresh(params: IToolPanelParams): boolean | void;

    // If saving and restoring state, this should return the current state
    getState(): any;
}
```

The interface for the init parameters is as follows:

Properties available on the `IToolPanelParams&lt;TData = any, TContext = any, TState = any&gt;` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `onStateUpdated` | `Function` |  |  | If tool panel is saving and restoring state, this should be called after the state is updated |
| `initialState` | `TState` |  |  | The tool-panel-specific initial state as provided in grid options if applicable |
| `api` | [`GridApi`](https://www.ag-grid.com/javascript-data-grid/grid-api/) |  |  | The grid api. |
| `context` | [`TContext`](https://www.ag-grid.com/javascript-data-grid/typescript-generics/#context-tcontext) |  |  | Application context as set on `gridOptions.context`. |

## Registering Tool Panel Components

Registering a Tool Panel component follows the same approach as any other custom components in the grid. For more details see: [Registering Custom Components](https://www.ag-grid.com/javascript-data-grid/components/#registering-custom-components).

Once the Tool Panel Component is registered with the grid it needs to be included into the Side Bar. The following snippet illustrates this:

```js
const gridOptions: {
    sideBar: {
        toolPanels: [
            {
                id: 'customStats',
                labelDefault: 'Custom Stats',
                labelKey: 'customStats',
                iconKey: 'custom-stats',
                toolPanel: CustomStatsToolPanel,
                toolPanelParams: {
                    // can pass any custom params here
                },
            }
        ]
    }

    // other grid properties
}
```

For more details on the configuration properties above, refer to the [Side Bar Configuration](https://www.ag-grid.com/javascript-data-grid/side-bar/#sidebardef-configuration) section.