Status Bar

The status bar appears below the grid and holds components that typically display information about the data in the grid.

Within the Status Bar you can specify which Status Bar Panels you want to display.

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

Grid Provided Status Bar Components

The status bar components 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.

Configuring the Status Bar

The status bar is configured using the statusBar grid option. The option takes a list of components identified by component name, alignment and additionally component parameters.

If align is not specified the components will default to being aligned to the right.

key is useful for accessing status bar component instances - see below for more information.

The snippet below shows a status bar configured with the grid provided components.

gridOptions: { statusBar: { statusPanels: [ { statusPanel: 'agTotalAndFilteredRowCountComponent', align: 'left' } ] } // ...other grid properties }

Component Alignment

Components can be aligned either to the left, in the center of the bar or on the right (the default). Components within these alignments will be added in the order specified.

Simple Status Bar Example

The example below shows a simply configured status bar. Note the following:

  • The total row count is displayed by the agTotalRowCountComponent component, aligned to the left.
  • The row count after filtering is displayed by the agFilteredRowCountComponent component.
  • The selected row count is displayed by the agSelectedRowCountComponent component.
  • When a range is selected (by dragging the mouse over a range of cells) the agAggregationComponent displays the summary information Average, Count, Min, Max and Sum. Only Count is displayed if the range contains no numeric data.

Configuring The Aggregation Panel

If you have multiple ranges selected (by holding down ctrl while dragging) and a cell is in multiple ranges, the cell will be only included once in the aggregation.

If the cell does not contain a simple number value, then it will not be included in average, min max or sum, however it will still be included in count.

In the grid below, select a range by dragging the mouse over cells and notice the status bar showing the aggregation values as you drag.

By default all of the aggregations available will be displayed but you can configure the aggregation component to only show a subset of the aggregations.

In this code snippet we have configured the aggregation component to only show min, max and average:

gridOptions: { statusBar: { statusPanels: [ { statusPanel: 'agAggregationComponent', statusPanelParams: { // possible values are: 'count', 'sum', 'min', 'max', 'avg' aggFuncs: ['min', 'max', 'avg'] } } ] } // ...other grid properties }

Accessing Status Panels

Accessing status panel instances is possible using api.getStatusPanel(key). The key will be the value provided in the component configuration (see above), but will default to the component name if not provided.

See Accessing Status Bar Panel Instances for more information.

Configuration with Component Parameters

Some of the status panel components, or your own custom components, can take further parameters. These are provided using componentParams.

The snippet below shows a status bar configured with the grid provided aggregation component only. The component is further configured to only show average and sum functions.

gridOptions: { statusBar: { statusPanels: [ { statusPanel: 'agAggregationComponent', statusPanelParams: { // possible values are: 'count', 'sum', 'min', 'max', 'avg' aggFuncs: ['avg', 'sum'] } } ] } // ...other grid properties }

Example Component Parameters

The example below demonstrates providing parameters to the status bar components. Note the following:

  • The component agAggregationComponent is provided with parameters aggFuncs: ['avg', 'sum'].
  • When a range of numbers is selected, only avg and sum functions are displayed.

Status Bar Height

The status bar sizes it's height to fit content. That means when not components are visible, the status bar will have zero height - it will not be shown.

The have the status bar with a fixed height, add CSS to the status bar div as follows:

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

To build your own status bar component please see the section on Status Bar Panels (Components).