---
product: "AG Grid"
title: "Status Bar"
description: "The Status Bar appears below the grid and contains Status Bar Panels. Panels can be Grid Provided Panels or Custom Status Bar Panels."
enterprise: true
framework: vue
version: "36.2.0"
related:
    - title: "Tool Panels"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/tool-panel/"
    - title: "Quick Access Toolbar"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/toolbar/"
    - title: "Column Menu"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/column-menu/"
    - title: "Column Chooser"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/column-chooser/"
    - title: "Context Menu"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/context-menu/"
    - title: "Menu Item Component"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/component-menu-item/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# 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-vue
    :statusBar="statusBar"
    /* other grid options ... */>
</ag-grid-vue>

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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
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";
import { IOlympicData } from "./interfaces";

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

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

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :rowSelection="rowSelection"
      :cellSelection="true"
      :statusBar="statusBar"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<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" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
      filter: true,
    });
    const rowSelection = ref<RowSelectionOptions | "single" | "multiple">({
      mode: "multiRow",
    });
    const statusBar = ref<StatusBar>({
      statusPanels: [
        { statusPanel: "agTotalAndFilteredRowCountComponent" },
        { statusPanel: "agTotalRowCountComponent" },
        { statusPanel: "agFilteredRowCountComponent" },
        { statusPanel: "agSelectedRowCountComponent" },
        { statusPanel: "agAggregationComponent" },
      ],
    });
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      rowSelection,
      statusBar,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

## 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](https://www.ag-grid.com/archive/36.2.0/vue-data-grid/status-bar/#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-vue
    :statusBar="statusBar"
    /* other grid options ... */>
</ag-grid-vue>

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/archive/36.2.0/vue-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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  StatusBar,
  enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, StatusBarModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

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

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

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :statusBar="statusBar"
      :cellSelection="true"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<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" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const statusBar = ref<StatusBar>({
      statusPanels: [
        {
          statusPanel: "agTotalRowCountComponent",
          align: "left",
        },
        {
          statusPanel: "agAggregationComponent",
          statusPanelParams: {
            aggFuncs: ["avg", "sum"],
          },
        },
      ],
    });
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      statusBar,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

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-vue
    :statusBar="statusBar"
    /* other grid options ... */>
</ag-grid-vue>

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

#### Custom Value Formatter

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  IStatusPanelValueFormatterParams,
  ModuleRegistry,
  StatusBar,
  enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, StatusBarModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

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

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

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :statusBar="statusBar"
      :cellSelection="true"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<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" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const statusBar = ref<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);
            },
          },
        },
      ],
    });
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      statusBar,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

## Custom Panels

Applications that are using [Server-side Data](https://www.ag-grid.com/archive/36.2.0/vue-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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
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";
import ClickableStatusBarComponent from "./clickableStatusBarComponentVue";
import CountStatusBarComponent from "./countStatusBarComponentVue";

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

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

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :rowData="rowData"
      :rowSelection="rowSelection"
      :statusBar="statusBar"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
    ClickableStatusBarComponent,
    CountStatusBarComponent,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        field: "row",
      },
      {
        field: "name",
      },
    ]);
    const defaultColDef = ref<ColDef>({
      editable: true,
      flex: 1,
      minWidth: 100,
      filter: true,
    });
    const rowData = ref<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" },
    ]);
    const rowSelection = ref<RowSelectionOptions | "single" | "multiple">({
      mode: "multiRow",
    });
    const statusBar = ref<StatusBar>({
      statusPanels: [
        {
          statusPanel: "CountStatusBarComponent",
        },
        {
          statusPanel: "ClickableStatusBarComponent",
        },
        {
          statusPanel: "agAggregationComponent",
          statusPanelParams: {
            aggFuncs: ["count", "sum"],
          } as IAggregationStatusPanelParams,
        },
      ],
    });

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      rowData,
      rowSelection,
      statusBar,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

Any valid Vue component can be a status bar component, however it is also possible to implement the following optional methods:

```ts
interface IStatusPanel {
    // 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;
}
```

When a custom status bar component is instantiated then the following will be made available on `this.params`.

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

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `key` | `string` |  |  |  |
| `api` | `GridApi` |  |  |  |
| `context` | `TContext` |  |  |  |

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

```js
export default {
  methods: {
    updateStatusBar() { ... },
  },
  created() {
    // Remove event listener when destroyed
    this.params.api.addEventListener(
      'modelUpdated',
      this.updateStatusBar.bind(this)
    );
  },
};
```

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

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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
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";
import ClickableStatusBarComponent from "./clickableStatusBarComponentVue";

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

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

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

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <button v-on:click="toggleStatusBarComp()" style="margin-bottom: 10px">Toggle Status Bar Component</button>
    <ag-grid-vue
      style="width: 100%; height: 90%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :rowData="rowData"
      :rowSelection="rowSelection"
      :statusBar="statusBar"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
    ClickableStatusBarComponent,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        field: "row",
      },
      {
        field: "name",
      },
    ]);
    const defaultColDef = ref<ColDef>({
      editable: true,
      flex: 1,
      minWidth: 100,
      filter: true,
    });
    const rowData = ref<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" },
    ]);
    const rowSelection = ref<RowSelectionOptions | "single" | "multiple">({
      mode: "multiRow",
    });
    const statusBar = ref<StatusBar>({
      statusPanels: [
        {
          statusPanel: "ClickableStatusBarComponent",
          key: "statusBarCompKey",
        },
        {
          statusPanel: "agAggregationComponent",
          statusPanelParams: {
            aggFuncs: ["count", "sum"],
          },
        },
      ],
    });

    function toggleStatusBarComp() {
      const statusBarComponent =
        gridApi.value!.getStatusPanel<IClickableStatusBar>("statusBarCompKey")!;
      statusBarComponent.setVisible(!statusBarComponent.isVisible());
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      rowData,
      rowSelection,
      statusBar,
      onGridReady,
      toggleStatusBarComp,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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