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
Any valid Vue component can be a tool panel component, however it is also possible to implement the following optional methods:
interface IToolPanel {
// 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;
}
When a custom tool panel component is instantiated then the following will be made available on this.params:
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:
this.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.