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.
Below is an example of a tool panel component:
const totalStyle = {paddingBottom: '15px'};
export default props => {
const [numMedals, setNumMedals] = useState(0);
const [numGold, setNumGold] = useState(0);
const [numSilver, setNumSilver] = useState(0);
const [numBronze, setNumBronze] = useState(0);
const updateTotals = () => {
let numGold = 0, numSilver = 0, numBronze = 0;
props.api.forEachNode(function (rowNode) {
const data = rowNode.data;
if (data.gold) numGold += data.gold;
if (data.silver) numSilver += data.silver;
if (data.bronze) numBronze += data.bronze;
});
const numMedals = numGold + numSilver + numBronze;
setNumMedals(numMedals);
setNumGold(numGold);
setNumSilver(numSilver);
setNumBronze(numBronze);
};
useEffect(() => {
props.api.addEventListener('modelUpdated', updateTotals);
return () => props.api.removeEventListener('modelUpdated', updateTotals);
}, []);
return (
<div style={{textAlign: "center"}}>
<span>
<h2><i className="fa fa-calculator"></i> Custom Stats</h2>
<dl style={{fontSize: 'large', padding: '30px 40px 10px 30px'}}>
<dt style={totalStyle}>Total Medals: <b>{numMedals}</b></dt>
<dt style={totalStyle}>Total Gold: <b>{numGold}</b></dt>
<dt style={totalStyle}>Total Silver: <b>{numSilver}</b></dt>
<dt style={totalStyle}>Total Bronze: <b>{numBronze}</b></dt>
</dl>
</span>
</div>
);
};
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:
Any valid React component can be a tool panel component.
When a tool panel component is instantiated then the following will be made available on props
:
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,
}
]
}}
...other props...
/>
For more details on the configuration properties above, refer to the Side Bar Configuration section.