Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

Angular Data Grid: 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.

Simple Tool Panel Component

Below is a simple example of a tool panel component:

import {Component} from "@angular/core";
import {IToolPanel, IToolPanelParams, RowNode} from "@ag-grid-community/all-modules";

   selector: 'custom-stats',
   template: `
     <div style="text-align: center">
               <h2><i class="fa fa-calculator"></i> Custom Stats</h2>
               <dl style="font-size: large; padding: 30px 40px 10px 30px">
                   <dt class="totalStyle">Total Medals: <b>{{ numMedals }}</b></dt>
                   <dt class="totalStyle">Total Gold: <b>{{ numGold }}</b></dt>
                   <dt class="totalStyle">Total Silver: <b>{{ numSilver }}</b></dt>
                   <dt class="totalStyle">Total Bronze: <b>{{ numBronze }}</b></dt>
   styles: [`
       .totalStyle {
           padding-bottom: 15px
export class CustomStatsToolPanel implements IToolPanel {
   private params: IToolPanelParams;

   private numMedals: number;
   private numGold: number;
   private numSilver: number;
   private numBronze: number;

   agInit(params: IToolPanelParams): void {
       this.params = params;

       this.numMedals = 0;
       this.numGold = 0;
       this.numSilver = 0;
       this.numBronze = 0;

       // calculate stats when new rows loaded, i.e. onModelUpdated
       this.params.api.addEventListener('modelUpdated', this.updateTotals.bind(this));

   updateTotals(): void {
       let numGold = 0, numSilver = 0, numBronze = 0;

       this.params.api.forEachNode((rowNode:RowNode) => {
           const data =;
           if ( numGold +=;
           if (data.silver) numSilver += data.silver;
           if (data.bronze) numBronze += data.bronze;

       this.numMedals = numGold + numSilver + numBronze;
       this.numGold = numGold;
       this.numSilver = numSilver;
       this.numBronze = numBronze;

Example: 'Custom Stats' Tool Panel Component

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:

Tool Panel Interface

Implement this interface to create a tool panel component.

interface IToolPanelAngularComp {
   /** The agInit(params) method is called on the tool panel component once.
       See below for details on the parameters. */
   agInit(params: IToolPanelParams): void;

The agInit(params) method takes a params object with the items listed below:

interface IToolPanelParams {
    // Grid API
    api: GridApi;
    // Column API
    columnApi: ColumnApi;

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.

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

this.gridOptions: {
   sideBar: {
       toolPanels: [
               id: 'customStats',
               labelDefault: 'Custom Stats',
               labelKey: 'customStats',
               iconKey: 'custom-stats',
               component: 'customStatsToolPanel',
   components: {
       customStatsToolPanel: CustomStatsComponent

   // other grid properties

For more details on the configuration properties above, refer to the Side Bar Configuration section.