React Data GridStatus Bar

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 Cell 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.

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.