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:
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 (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<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-specific initial state as provided in grid options if applicable |
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.