---
title: "Status Bar"
enterprise: true
framework: javascript
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.

```js
const gridOptions = {
    statusBar: {
        statusPanels: [
            { statusPanel: 'agTotalAndFilteredRowCountComponent' },
            { statusPanel: 'agTotalRowCountComponent' },
            { statusPanel: 'agFilteredRowCountComponent' },
            { statusPanel: 'agSelectedRowCountComponent' },
            { statusPanel: 'agAggregationComponent' }
        ]
    },

    // other grid options ...
}
```

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

#### Status Bar Simple

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  NumberFilterModule,
  RowSelectionModule,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, StatusBarModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextFilterModule,
  RowSelectionModule,
  ClientSideRowModelModule,
  CellSelectionModule,
  StatusBarModule,
  NumberFilterModule,
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { 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: {
    flex: 1,
    minWidth: 100,
    filter: true,
  },
  rowSelection: { mode: "multiRow" },
  cellSelection: true,
  statusBar: {
    statusPanels: [
      { statusPanel: "agTotalAndFilteredRowCountComponent" },
      { statusPanel: "agTotalRowCountComponent" },
      { statusPanel: "agFilteredRowCountComponent" },
      { statusPanel: "agSelectedRowCountComponent" },
      { statusPanel: "agAggregationComponent" },
    ],
  },
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data));
```

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

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

```js
const gridOptions = {
    statusBar: {
        statusPanels: [
            {
                key: 'aUniqueString',
                statusPanel: 'agTotalRowCountComponent',
                align: 'left'
            },
            {
                statusPanel: 'agAggregationComponent',
                statusPanelParams: {
                    // possible values are: 'count', 'sum', 'min', 'max', 'avg'
                    aggFuncs: ['avg', 'sum']
                }
            }
        ]
    },

    // other grid options ...
}
```

Labels (e.g. "Rows", "Total Rows", "Average") and number formatting are changed using the grid's [Localisation](https://www.ag-grid.com/javascript-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 {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, StatusBarModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  CellSelectionModule,
  StatusBarModule,
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { 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: {
    flex: 1,
    minWidth: 100,
  },
  statusBar: {
    statusPanels: [
      {
        statusPanel: "agTotalRowCountComponent",
        align: "left",
      },
      {
        statusPanel: "agAggregationComponent",
        statusPanelParams: {
          aggFuncs: ["avg", "sum"],
        },
      },
    ],
  },
  cellSelection: true,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data));
```

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

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.

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

    // other grid options ...
}
```

### IProvidedStatusPanelParams

Properties available on the `IProvidedStatusPanelParams` interface.

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

#### Custom Value Formatter

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  IStatusPanelValueFormatterParams,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, StatusBarModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  CellSelectionModule,
  StatusBarModule,
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { 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: {
    flex: 1,
    minWidth: 100,
  },
  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);
          },
        },
      },
    ],
  },
  cellSelection: true,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data));
```

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

## Custom Panels

Applications that are using [Server-side Data](https://www.ag-grid.com/javascript-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 {
  ClientSideRowModelModule,
  ColDef,
  EventApiModule,
  GridApi,
  GridOptions,
  IAggregationStatusPanelParams,
  ModuleRegistry,
  RowApiModule,
  RowSelectionModule,
  TextEditorModule,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, StatusBarModule } from "ag-grid-enterprise";
import { ClickableStatusBarComponent } from "./clickableStatusBarComponent";
import { CountStatusBarComponent } from "./countStatusBarComponent";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextEditorModule,
  TextFilterModule,
  RowSelectionModule,
  ClientSideRowModelModule,
  CellSelectionModule,
  StatusBarModule,
  RowApiModule,
  EventApiModule,
]);

const columnDefs: ColDef[] = [
  {
    field: "row",
  },
  {
    field: "name",
  },
];

let gridApi: GridApi;

const gridOptions: GridOptions = {
  defaultColDef: {
    editable: true,
    flex: 1,
    minWidth: 100,
    filter: true,
  },
  columnDefs: columnDefs,
  rowData: [
    { 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: {
    mode: "multiRow",
  },
  statusBar: {
    statusPanels: [
      {
        statusPanel: CountStatusBarComponent,
      },
      {
        statusPanel: ClickableStatusBarComponent,
      },
      {
        statusPanel: "agAggregationComponent",
        statusPanelParams: {
          aggFuncs: ["count", "sum"],
        } as IAggregationStatusPanelParams,
      },
    ],
  },
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
```

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

Implement this interface to create a status bar component.

```ts
interface IStatusPanelComp {
    // mandatory methods

    // Return the DOM element of your component, this is what the grid puts into the DOM.
    getGui(): HTMLElement;

    // optional methods

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

    // 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;

    // Gets called when the grid is destroyed.
    // If your status bar components needs to do any cleanup, do it here.
    destroy(): void;
}
```

The method init(params) takes a params object with the interface `IStatusPanelParams`.

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/javascript-data-grid/grid-api/) |  |  | The grid api. |
| `context` | [`TContext`](https://www.ag-grid.com/javascript-data-grid/typescript-generics/#context-tcontext) |  |  | Application context as set on `gridOptions.context`. |

Custom Panels are configured alongside Provided Panels.

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

```js
class ClickableStatusBarComponent() {
    init(params) {
        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/javascript-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 {
  ClientSideRowModelModule,
  ColDef,
  GridApi,
  GridOptions,
  ModuleRegistry,
  RowSelectionModule,
  TextEditorModule,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, StatusBarModule } from "ag-grid-enterprise";
import { ClickableStatusBarComponent } from "./clickableStatusBarComponent";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextEditorModule,
  TextFilterModule,
  RowSelectionModule,
  ClientSideRowModelModule,
  CellSelectionModule,
  StatusBarModule,
]);

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

const columnDefs: ColDef[] = [
  {
    field: "row",
  },
  {
    field: "name",
  },
];

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

let gridApi: GridApi;

const gridOptions: GridOptions = {
  defaultColDef: {
    editable: true,
    flex: 1,
    minWidth: 100,
    filter: true,
  },
  columnDefs: columnDefs,
  rowData: [
    { 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: {
    mode: "multiRow",
  },
  statusBar: {
    statusPanels: [
      {
        statusPanel: ClickableStatusBarComponent,
        key: "statusBarCompKey",
      },
      {
        statusPanel: "agAggregationComponent",
        statusPanelParams: {
          aggFuncs: ["count", "sum"],
        },
      },
    ],
  },
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).toggleStatusBarComp = toggleStatusBarComp;
}
```

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