React Data Grid

Status Bar

react logo
Enterprise

The Status Bar appears below the grid and contains Status Bar Panels. Panels can be Grid Provided Panels or Custom Status Bar Panels.

Configure the Status Bar with the statusBar grid property. The property takes a list of Status Bar Panels.

const statusBar = useMemo(() => { 
	return {
        statusPanels: [
            { statusPanel: 'agTotalAndFilteredRowCountComponent' },
            { statusPanel: 'agTotalRowCountComponent' },
            { statusPanel: 'agFilteredRowCountComponent' },
            { statusPanel: 'agSelectedRowCountComponent' },
            { statusPanel: 'agAggregationComponent' }
        ]
    };
}, []);

<AgGridReact statusBar={statusBar} />

Some Status Panels only show when a Range Selection is present.

Provided Panels

The Status Bar Panels provided by the grid are as follows:

  • agTotalRowCountComponent: Provides the total row count.
  • agTotalAndFilteredRowCountComponent: Provides the total and filtered row count.
  • agFilteredRowCountComponent: Provides the filtered row count.
  • agSelectedRowCountComponent: Provides the selected row count.
  • agAggregationComponent: Provides aggregations on the selected range.

Configuration

The align property can be left, center or right (default).

The key is used for Accessing Panel Instances via the grid API getStatusPanel(key). This can be useful for interacting with Custom Panels.

Additional props are passed to Status Panels using statusPanelParams. The provided panel agAggregationComponent can have aggFuncs passed.

const statusBar = useMemo(() => { 
	return {
        statusPanels: [
            {
                key: 'aUniqueString',
                statusPanel: 'agTotalRowCountComponent',
                align: 'left'
            },
            {
                statusPanel: 'agAggregationComponent',
                statusPanelParams: {
                    // possible values are: 'count', 'sum', 'min', 'max', 'avg'
                    aggFuncs: ['avg', 'sum']
                }
            }
        ]
    };
}, []);

<AgGridReact statusBar={statusBar} />

Labels (e.g. "Rows", "Total Rows", "Average") and number formatting are changed using the grid's Localisation.

The Aggregation Panel agAggregationComponent will only work on number values.

The Status Bar sizes its height to fit content. When no panels are visible, the Status Bar will have zero height (not be shown). Add CSS to have a fixed height on the Status Bar.

.ag-status-bar {
    min-height: 35px;
}

Custom Panels

Applications that are using Server-side Data or which require bespoke Status Bar Panels can provide their own custom Status Bar panels.

To configure custom status bar panels, first enable the grid option reactiveCustomComponents.

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

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

If you do not enable the grid option reactiveCustomComponents, it is still possible to use custom status bar panels. However your status bar panel will not update with prop changes, but will instead be destroyed/recreated..

Custom Panels are configured alongside Provided Panels.

<AgGridReact 
      statusBar: {{
          statusPanels: [
              {
                  statusPanel: MyStatusBarComponent
              },
              {
                  statusPanel: 'agAggregationComponent'
              }
          ]
      }}
      ...other props...
/>

Custom Panels can listen to grid events to react to grid changes. An easy way to listen to grid events from inside a Status Panel is using the API provided via props.

 const updateStatusBar = () => { ... }

 useEffect(() => {
   props.api.addEventListener('modelUpdated', updateStatusBar);

   // Remove event listener when destroyed
   return () => {
       if (!props.api.isDestroyed()) {
           props.api.removeEventListener('modelUpdated', updateStatusBar);
       }
   }
 }, []);

Accessing Instances

Use the grid API getStatusPanel(key) to access a panel instance. This can be used to expose Custom Panels to the application.