Results:
Loading...
Javascript Data GridJavascriptReact Data GridReactAngular Data GridAngularVue Data GridVue

React Data Grid: Tool Panel Component

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.

Simple Tool Panel Component

Below is a simple example of a tool panel component as a Hook:

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>
   );
};

And here is the same example as a Class-based Component:

export default class CustomStatsToolPanel extends Component {
   constructor(props) {
       super(props);

       this.state = {numMedals: 0, numGold: 0, numSilver: 0, numBronze: 0};

       // calculate stats when new rows loaded, i.e. onModelUpdated
       this.props.api.addEventListener('modelUpdated', this.updateTotals.bind(this));
   }

   render() {
       const totalStyle = {paddingBottom: '15px'};

       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>{this.state.numMedals}</b></dt>
                       <dt style={totalStyle}>Total Gold: <b>{this.state.numGold}</b></dt>
                       <dt style={totalStyle}>Total Silver: <b>{this.state.numSilver}</b></dt>
                       <dt style={totalStyle}>Total Bronze: <b>{this.state.numBronze}</b></dt>
                   </dl>
               </span>
           </div>
       );
   }

   updateTotals() {
       let numGold = 0, numSilver = 0, numBronze = 0;

       this.props.api.forEachNode(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;
       this.setState({numMedals, numGold, numSilver, numBronze});
   }
}

Example: 'Custom Stats' Tool Panel Component

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:

Tool Panel Interface

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:

Properties available on the IToolPanelParams<TData = any, TContext = any> interface.

api
GridApi
The grid api.
columnApi
ColumnApi
The column api.
context
TContext
Application context as set on gridOptions.context.

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,
           }
       ]
   }}
      ...other props...
/>

For more details on the configuration properties above, refer to the Side Bar Configuration section.