React Data GridTool Panel Component
Enterprise
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
To configure custom tool panels, first enable the grid option reactiveCustomComponents.
When a tool panel component is instantiated then the following will be made available on props:
Properties available on the CustomToolPanelProps<TData = any, TContext = any, TState = any> interface.
stateTypeTState | undefined | The current state for the component (used in grid state). Initially set to the same value as initialState
|
on | If using grid state, callback that should be called every time the state in the component changes. If not using grid state, not required.
|
initial | The tool-panel-specific initial state as provided in grid options if applicable |
apiTypeGridApi | The grid api. |
contextTypeTContext | Application context as set on gridOptions.context. |
Enabling reactiveCustomComponents affects all custom components. If you have custom components built in an imperative way instead of setting the reactiveCustomComponents option, they may need to be rebuilt to take advantage of the new features that reactiveCustomComponents offers. Using custom components built in an imperative way is now deprecated, and in AG Grid v32 the reactiveCustomComponents option will be true by default. See Migrating to Use reactiveCustomComponents.
Registering Tool Panel Components
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:
<AgGridReact
sideBar: {{
toolPanels: [
{
id: 'customStats',
labelDefault: 'Custom Stats',
labelKey: 'customStats',
iconKey: 'custom-stats',
toolPanel: CustomStatsToolPanel,
toolPanelParams: {
// can pass any custom props here
},
}
]
}}
...other props...
/>For more details on the configuration properties above, refer to the Side Bar Configuration section.