Angular Data Grid

Status Bar

angular logo

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.

    /* other grid options ... */>

this.statusBar = {
    statusPanels: [
        { statusPanel: 'agTotalAndFilteredRowCountComponent' },
        { statusPanel: 'agTotalRowCountComponent' },
        { statusPanel: 'agFilteredRowCountComponent' },
        { statusPanel: 'agSelectedRowCountComponent' },
        { statusPanel: 'agAggregationComponent' }

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.


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.

    /* other grid options ... */>

this.statusBar = {
    statusPanels: [
            key: 'aUniqueString',
            statusPanel: 'agTotalRowCountComponent',
            align: 'left'
            statusPanel: 'agAggregationComponent',
            statusPanelParams: {
                // possible values are: 'count', 'sum', 'min', 'max', 'avg'
                aggFuncs: ['avg', 'sum']

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.

Implement this interface to create a status bar component.

interface IStatusPanelAngularComp {
   // mandatory methods

   // The agInit(params) method is called on the status bar component once.
   // See below for details on the parameters.
   agInit(params: IStatusPanelParams): void;

   // optional methods

   // Called when the `statusBar` grid option is updated.
   // If this method returns `true`, the grid assumes that
   // the status panel has updated with the latest params,
   // and takes no further action. If this method returns `false`,
   // or is not implemented, the grid will destroy and
   // recreate the status panel.
   refresh(params: IStatusPanelParams): boolean;

The agInit(params) method takes a params object with the items listed below: