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.