---
title: "Status Bar"
enterprise: true
framework: angular
version: "36.1.0"
---

# Status 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.

```ts
<ag-grid-angular
    [statusBar]="statusBar"
    /* other grid options ... */ />

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

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

#### Status Bar Simple

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  RowSelectionModule,
  RowSelectionOptions,
  StatusBar,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, StatusBarModule } from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextFilterModule,
  RowSelectionModule,
  ClientSideRowModelModule,
  CellSelectionModule,
  StatusBarModule,
  NumberFilterModule,
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [rowSelection]="rowSelection"
    [cellSelection]="true"
    [statusBar]="statusBar"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 200 },
    { field: "age", filter: "agNumberColumnFilter" },
    { field: "country", minWidth: 200 },
    { field: "year" },
    { field: "date", minWidth: 180 },
    { field: "sport", minWidth: 200 },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
    filter: true,
  };
  rowSelection: RowSelectionOptions | "single" | "multiple" = {
    mode: "multiRow",
  };
  statusBar: StatusBar = {
    statusPanels: [
      { statusPanel: "agTotalAndFilteredRowCountComponent" },
      { statusPanel: "agTotalRowCountComponent" },
      { statusPanel: "agFilteredRowCountComponent" },
      { statusPanel: "agSelectedRowCountComponent" },
      { statusPanel: "agAggregationComponent" },
    ],
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}
```

[Live example: Status Bar Simple](https://www.ag-grid.com/examples/status-bar/status-bar-simple/angular/)

## 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](#accessing-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.

```ts
<ag-grid-angular
    [statusBar]="statusBar"
    /* 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](https://www.ag-grid.com/angular-data-grid/localisation/).

The Aggregation Panel `agAggregationComponent` works with number and `bigint` values. When `bigint` values are present, `avg` uses integer division and discards the fractional part.

#### Status Bar Params

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  StatusBar,
  enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, StatusBarModule } from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  CellSelectionModule,
  StatusBarModule,
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [statusBar]="statusBar"
    [cellSelection]="true"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 200 },
    { field: "age" },
    { field: "country", minWidth: 200 },
    { field: "year" },
    { field: "date", minWidth: 180 },
    { field: "sport", minWidth: 200 },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  statusBar: StatusBar = {
    statusPanels: [
      {
        statusPanel: "agTotalRowCountComponent",
        align: "left",
      },
      {
        statusPanel: "agAggregationComponent",
        statusPanelParams: {
          aggFuncs: ["avg", "sum"],
        },
      },
    ],
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}
```

[Live example: Status Bar Params](https://www.ag-grid.com/examples/status-bar/status-bar/angular/)

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.

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

## Value Formatting

Each Status Bar Panel can have its displayed values customised using a **valueFormatter** function. This allows for formatting values before they are rendered in the UI.

The `valueFormatter` function is provided in the `statusPanelParams` object.

```ts
<ag-grid-angular
    [statusBar]="statusBar"
    /* other grid options ... */ />

this.statusBar = {
    statusPanels: [
        {
            statusPanel: 'agTotalAndFilteredRowCountComponent',
            statusPanelParams: {
                valueFormatter: (statusPanelValueFormatterParams) => {
                    const { value } = statusPanelValueFormatterParams;
                    if (value > 1000) {
                        return value / 1000 + ' K';
                    }
                    return String(value);
                }
            }
        },
    ]
};
```

### IProvidedStatusPanelParams

Properties available on the `IProvidedStatusPanelParams` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `valueFormatter` | `Function` |  |  | (params: IStatusPanelValueFormatterParams) => string |

#### Custom Value Formatter

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  IStatusPanelValueFormatterParams,
  ModuleRegistry,
  StatusBar,
  enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, StatusBarModule } from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  CellSelectionModule,
  StatusBarModule,
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [statusBar]="statusBar"
    [cellSelection]="true"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 200 },
    { field: "age" },
    { field: "country", minWidth: 200 },
    { field: "year" },
    { field: "date", minWidth: 180 },
    { field: "sport", minWidth: 200 },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  statusBar: StatusBar = {
    statusPanels: [
      {
        statusPanel: "agTotalRowCountComponent",
        align: "left",
        statusPanelParams: {
          valueFormatter: (params: IStatusPanelValueFormatterParams) => {
            const { value, bigintValue } = params;
            if (bigintValue != null) {
              return bigintValue.toString();
            }
            if (typeof value === "number" && value > 1000) {
              return (value / 1000).toFixed(1) + " K";
            }
            return String(value);
          },
        },
      },
    ],
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}
```

[Live example: Custom Value Formatter](https://www.ag-grid.com/examples/status-bar/status-bar-value-formatter/angular/)

## Custom Panels

Applications that are using [Server-side Data](https://www.ag-grid.com/angular-data-grid/row-models/) or which require bespoke Status Bar Panels can provide their own custom Status Bar panels.

Clicking on the button in the status bar will log the number of selected rows to the developer console.

#### Custom Panels

```ts
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  EventApiModule,
  GridApi,
  GridOptions,
  GridReadyEvent,
  IAggregationStatusPanelParams,
  ModuleRegistry,
  RowApiModule,
  RowSelectionModule,
  RowSelectionOptions,
  StatusBar,
  TextEditorModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, StatusBarModule } from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextEditorModule,
  TextFilterModule,
  RowSelectionModule,
  ClientSideRowModelModule,
  CellSelectionModule,
  StatusBarModule,
  RowApiModule,
  EventApiModule,
]);
import { ClickableStatusBarComponent } from "./clickable-status-bar-component.component";
import { CountStatusBarComponent } from "./count-status-bar-component.component";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [
    AgGridAngular,
    ClickableStatusBarComponent,
    CountStatusBarComponent,
  ],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [rowData]="rowData"
    [rowSelection]="rowSelection"
    [statusBar]="statusBar"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    {
      field: "row",
    },
    {
      field: "name",
    },
  ];
  defaultColDef: ColDef = {
    editable: true,
    flex: 1,
    minWidth: 100,
    filter: true,
  };
  rowData: any[] | null = [
    { row: "Row 1", name: "Michael Phelps" },
    { row: "Row 2", name: "Natalie Coughlin" },
    { row: "Row 3", name: "Aleksey Nemov" },
    { row: "Row 4", name: "Alicia Coutts" },
    { row: "Row 5", name: "Missy Franklin" },
    { row: "Row 6", name: "Ryan Lochte" },
    { row: "Row 7", name: "Allison Schmitt" },
    { row: "Row 8", name: "Natalie Coughlin" },
    { row: "Row 9", name: "Ian Thorpe" },
    { row: "Row 10", name: "Bob Mill" },
    { row: "Row 11", name: "Willy Walsh" },
    { row: "Row 12", name: "Sarah McCoy" },
    { row: "Row 13", name: "Jane Jack" },
    { row: "Row 14", name: "Tina Wills" },
  ];
  rowSelection: RowSelectionOptions | "single" | "multiple" = {
    mode: "multiRow",
  };
  statusBar: StatusBar = {
    statusPanels: [
      {
        statusPanel: CountStatusBarComponent,
      },
      {
        statusPanel: ClickableStatusBarComponent,
      },
      {
        statusPanel: "agAggregationComponent",
        statusPanelParams: {
          aggFuncs: ["count", "sum"],
        } as IAggregationStatusPanelParams,
      },
    ],
  };
}
```

[Live example: Custom Panels](https://www.ag-grid.com/examples/status-bar/custom-component/angular/)

Implement this interface to create a status bar component.

```ts
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:

Properties available on the `IStatusPanelParams&lt;TData = any, TContext = any&gt;` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `key` | `string` |  |  | string |
| `api` | [`GridApi`](https://www.ag-grid.com/angular-data-grid/grid-api/) |  |  | The grid api. |
| `context` | [`TContext`](https://www.ag-grid.com/angular-data-grid/typescript-generics/#context-tcontext) |  |  | Application context as set on `gridOptions.context`. |

Custom Panels are configured alongside Provided Panels.

```js
this.gridOptions = {
    statusBar: {
        statusPanels: [
            {
                statusPanel: MyStatusBarComponent
            },
            {
                statusPanel: 'agAggregationComponent'
            }
        ]
    },
    // ...other properties
}
```

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

```ts
class ClickableStatusBarComponent() {
    agInit(params: IStatusPanelParams) {
        this.params = params;

        // Remove event listener when destroyed
        params.api.addEventListener('modelUpdated', () => {
            // On the modelUpdated event rows will be available
            this.updateStatusBar();
        });
    }
    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.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `getStatusPanel` | `Function` |  |  | Gets the status panel instance corresponding to the supplied `id`. Module: [`StatusBarModule`](https://www.ag-grid.com/angular-data-grid/modules/). |

Clicking on the button in the status bar will log the number of selected rows to the developer console.

#### Get Status Bar Panel Instance

```ts
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowSelectionModule,
  RowSelectionOptions,
  StatusBar,
  TextEditorModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, StatusBarModule } from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextEditorModule,
  TextFilterModule,
  RowSelectionModule,
  ClientSideRowModelModule,
  CellSelectionModule,
  StatusBarModule,
]);
import { ClickableStatusBarComponent } from "./clickable-status-bar-component.component";

export interface IClickableStatusBar {
  setVisible(visible: boolean): void;
  isVisible(): boolean;
}

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular, ClickableStatusBarComponent],
  template: `<button
      (click)="toggleStatusBarComp()"
      style="margin-bottom: 10px"
    >
      Toggle Status Bar Component
    </button>
    <ag-grid-angular
      style="width: 100%; height: 90%;"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [rowData]="rowData"
      [rowSelection]="rowSelection"
      [statusBar]="statusBar"
      (gridReady)="onGridReady($event)"
    /> `,
})
export class AppComponent {
  private gridApi!: GridApi;

  columnDefs: ColDef[] = [
    {
      field: "row",
    },
    {
      field: "name",
    },
  ];
  defaultColDef: ColDef = {
    editable: true,
    flex: 1,
    minWidth: 100,
    filter: true,
  };
  rowData: any[] | null = [
    { row: "Row 1", name: "Michael Phelps" },
    { row: "Row 2", name: "Natalie Coughlin" },
    { row: "Row 3", name: "Aleksey Nemov" },
    { row: "Row 4", name: "Alicia Coutts" },
    { row: "Row 5", name: "Missy Franklin" },
    { row: "Row 6", name: "Ryan Lochte" },
    { row: "Row 7", name: "Allison Schmitt" },
    { row: "Row 8", name: "Natalie Coughlin" },
    { row: "Row 9", name: "Ian Thorpe" },
    { row: "Row 10", name: "Bob Mill" },
    { row: "Row 11", name: "Willy Walsh" },
    { row: "Row 12", name: "Sarah McCoy" },
    { row: "Row 13", name: "Jane Jack" },
    { row: "Row 14", name: "Tina Wills" },
  ];
  rowSelection: RowSelectionOptions | "single" | "multiple" = {
    mode: "multiRow",
  };
  statusBar: StatusBar = {
    statusPanels: [
      {
        statusPanel: ClickableStatusBarComponent,
        key: "statusBarCompKey",
      },
      {
        statusPanel: "agAggregationComponent",
        statusPanelParams: {
          aggFuncs: ["count", "sum"],
        },
      },
    ],
  };

  toggleStatusBarComp() {
    const statusBarComponent =
      this.gridApi.getStatusPanel<IClickableStatusBar>("statusBarCompKey")!;
    statusBarComponent.setVisible(!statusBarComponent.isVisible());
  }

  onGridReady(params: GridReadyEvent) {
    this.gridApi = params.api;
  }
}
```

[Live example: Get Status Bar Panel Instance](https://www.ag-grid.com/examples/status-bar/component-instance/angular/)