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);
});
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.