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:
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";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
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);
});
import type { IToolPanelComp, IToolPanelParams } from 'ag-grid-community';
export interface CustomStatsToolPanelParams extends IToolPanelParams {
title: string;
}
export class CustomStatsToolPanel implements IToolPanelComp {
eGui!: HTMLDivElement;
init(params: CustomStatsToolPanelParams) {
this.eGui = document.createElement('div');
this.eGui.style.textAlign = 'center';
// calculate stats when new rows loaded, i.e. onModelUpdated
const renderStats = () => {
this.eGui.innerHTML = this.calculateStats(params);
};
params.api.addEventListener('modelUpdated', renderStats);
}
getGui() {
return this.eGui;
}
refresh(): void {}
calculateStats(params: CustomStatsToolPanelParams) {
let numGold = 0,
numSilver = 0,
numBronze = 0;
params.api.forEachNode(function (rowNode) {
const data = rowNode.data;
if (data.gold) numGold += data.gold;
if (data.silver) numSilver += data.silver;
if (data.bronze) numBronze += data.bronze;
});
return `
<span>
<h2><i class="fa fa-calculator"></i> ${params.title}</h2>
<dl style="font-size: large; padding: 30px 40px 10px 30px">
<dt style="padding-bottom: 15px">Total Medals: <b>${numGold + numSilver + numBronze}</b></dt>
<dt style="padding-bottom: 15px">Total Gold: <b>${numGold}</b></dt><dt style="padding-bottom: 15px">Total Silver: <b>${numSilver}</b></dt>
<dt style="padding-bottom: 15px">Total Bronze: <b>${numBronze}</b></dt>
</dl>
</span>`;
}
}
<div style="height: 100%; box-sizing: border-box">
<div id="myGrid" style="height: 100%"></div>
</div>
export interface IOlympicData {
athlete: string,
age: number,
country: string,
year: number,
date: string,
sport: string,
gold: number,
silver: number,
bronze: number,
total: number
} Implementing a Tool Panel Component Copy Link
Implement this interface to create a tool panel component.
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, and when `api.setState`
// restores side bar state (with the updated params).
// When `sideBar` is updated or state is restored, 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<TData = any, TContext = any, TState = any> interface.
If tool panel is saving and restoring state, this should be called after the state is updated |
The tool panel state to apply, if applicable. Provided from initialState in the grid options, and again with each api.setState restore that includes side bar state.
|
The grid api. |
Application context as set on gridOptions.context. |
Registering Tool Panel Components Copy Link
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:
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 section.