Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

React Data Grid: Status Bar Panels (Components)

Status Bar Panels allow you to add your own components to the grid's Status Bar. Use this when the provided status bar components do not meet your requirements.

Simple Status Bar Component

Below is a simple example of a status bar component as a Hook:

import React from 'react';

export default props => {
   const onClick = () => {
       alert('Selected Row Count: ' + props.api.getSelectedRows().length)
   }

   const style = {
       padding: 5,
       margin: 5
   }

   return <input style={style} type="button" onClick={onClick} value="Click Me For Selected Row Count"/>;
};

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

export default class ClickableStatusBarComponent extends Component {
   onClick = () =>  {
       alert('Selected Row Count: ' + this.props.api.getSelectedRows().length)
   }

   render() {
       const style = {
           padding: 5,
           margin: 5
       }
       return <input style={style} type="button" onClick={this.onClick} value="Click Me For Selected Row Count"/>;
   }
};

Status Bar Panel Interface

Any valid React component can be a status bar component.

When a status bar component is instantiated then the following will be made available on props:

Status Panel Parameters

Properties available on the IStatusPanelParams<TData = any> interface.

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

Configuring Status Bar Panels

In order to add new components to the Status Bar (or to configure the provided agAggregationComponent component) you need to provide the components and any associated information to statusBar:

<AgGridReact 
      statusBar: {{
          statusPanels: [
              {
                  statusPanel: MyStatusBarComponent
              },
              {
                  statusPanel: 'agAggregationComponent',
                  statusPanelParams : {
                      // only show count and sum ('min', 'max', 'avg' won't be shown)
                      aggFuncs: ['count', 'sum']
                  }
              }
          ]
      }}
      ...other props...
/>

In the configuration above we've specified a custom component (statusBarComponent) as well as the provided agAggregationComponent component.

Order is important here - the order of the components provided will determine the order in which they're rendered, from left to right.

Initialisation of Status Bar Components

Please refer to the documentation here.

Accessing Status Bar Panel Instances

After the grid has created an instance of a status bar component it is possible to access that instance. This is useful if you want to call a method that you provide on the status bar component that has nothing to do with the operation of the grid. Accessing a status bar component is done using the grid API getStatusPanel(key).

getStatusPanel
Function
Gets the status panel instance corresponding to the supplied id.
getStatusPanel = (key: string) => TStatusPanel | undefined;

The example below shows using getStatusPanel: