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

```jsx
const statusBar = useMemo(() => { 
	return {
        statusPanels: [
            { statusPanel: 'agTotalAndFilteredRowCountComponent' },
            { statusPanel: 'agTotalRowCountComponent' },
            { statusPanel: 'agFilteredRowCountComponent' },
            { statusPanel: 'agSelectedRowCountComponent' },
            { statusPanel: 'agAggregationComponent' }
        ]
    };
}, []);

<AgGridReact statusBar={statusBar} />
```

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

#### Status Bar Simple

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  ModuleRegistry,
  NumberFilterModule,
  RowSelectionModule,
  RowSelectionOptions,
  StatusBar,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, StatusBarModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
import { useFetchJson } from "./useFetchJson";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [
  TextFilterModule,
  RowSelectionModule,
  ClientSideRowModelModule,
  CellSelectionModule,
  StatusBarModule,
  NumberFilterModule,
];

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);

  const [columnDefs, setColumnDefs] = useState<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 = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 100,
      filter: true,
    };
  }, []);
  const rowSelection = useMemo<
    RowSelectionOptions | "single" | "multiple"
  >(() => {
    return { mode: "multiRow" };
  }, []);
  const statusBar = useMemo<StatusBar>(() => {
    return {
      statusPanels: [
        { statusPanel: "agTotalAndFilteredRowCountComponent" },
        { statusPanel: "agTotalRowCountComponent" },
        { statusPanel: "agFilteredRowCountComponent" },
        { statusPanel: "agSelectedRowCountComponent" },
        { statusPanel: "agAggregationComponent" },
      ],
    };
  }, []);

  const { data, loading } = useFetchJson<IOlympicData>(
    "https://www.ag-grid.com/example-assets/olympic-winners.json",
  );

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact<IOlympicData>
            rowData={data}
            loading={loading}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            rowSelection={rowSelection}
            cellSelection={true}
            statusBar={statusBar}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

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

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

```jsx
const statusBar = useMemo(() => { 
	return {
        statusPanels: [
            {
                key: 'aUniqueString',
                statusPanel: 'agTotalRowCountComponent',
                align: 'left'
            },
            {
                statusPanel: 'agAggregationComponent',
                statusPanelParams: {
                    // possible values are: 'count', 'sum', 'min', 'max', 'avg'
                    aggFuncs: ['avg', 'sum']
                }
            }
        ]
    };
}, []);

<AgGridReact statusBar={statusBar} />
```

Labels (e.g. "Rows", "Total Rows", "Average") and number formatting are changed using the grid's [Localisation](https://www.ag-grid.com/react-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

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  ModuleRegistry,
  StatusBar,
  enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, StatusBarModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
import { useFetchJson } from "./useFetchJson";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [
  ClientSideRowModelModule,
  CellSelectionModule,
  StatusBarModule,
];

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);

  const [columnDefs, setColumnDefs] = useState<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 = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 100,
    };
  }, []);
  const statusBar = useMemo<StatusBar>(() => {
    return {
      statusPanels: [
        {
          statusPanel: "agTotalRowCountComponent",
          align: "left",
        },
        {
          statusPanel: "agAggregationComponent",
          statusPanelParams: {
            aggFuncs: ["avg", "sum"],
          },
        },
      ],
    };
  }, []);

  const { data, loading } = useFetchJson<IOlympicData>(
    "https://www.ag-grid.com/example-assets/olympic-winners.json",
  );

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact<IOlympicData>
            rowData={data}
            loading={loading}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            statusBar={statusBar}
            cellSelection={true}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

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

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.

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

<AgGridReact statusBar={statusBar} />
```

### IProvidedStatusPanelParams

Properties available on the `IProvidedStatusPanelParams` interface.

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

#### Custom Value Formatter

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  IStatusPanelValueFormatterParams,
  ModuleRegistry,
  StatusBar,
  enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, StatusBarModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
import { useFetchJson } from "./useFetchJson";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [
  ClientSideRowModelModule,
  CellSelectionModule,
  StatusBarModule,
];

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);

  const [columnDefs, setColumnDefs] = useState<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 = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 100,
    };
  }, []);
  const statusBar = useMemo<StatusBar>(() => {
    return {
      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 { data, loading } = useFetchJson<IOlympicData>(
    "https://www.ag-grid.com/example-assets/olympic-winners.json",
  );

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact<IOlympicData>
            rowData={data}
            loading={loading}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            statusBar={statusBar}
            cellSelection={true}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

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

## Custom Panels

Applications that are using [Server-side Data](https://www.ag-grid.com/react-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

```tsx
'use client';
import React, { StrictMode, useMemo, useState } from "react";
import { createRoot } from "react-dom/client";

import type {
  ColDef,
  RowSelectionOptions,
  StatusPanelDef,
} from "ag-grid-community";
import {
  ClientSideRowModelModule,
  EventApiModule,
  RowApiModule,
  RowSelectionModule,
  TextEditorModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, StatusBarModule } from "ag-grid-enterprise";
import { AgGridProvider, AgGridReact } from "ag-grid-react";

import ClickableStatusBarComponent from "./clickableStatusBarComponent";
import CountStatusBarComponent from "./countStatusBarComponent";
import "./styles.css";

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

const modules = [
  EventApiModule,
  TextEditorModule,
  TextFilterModule,
  RowSelectionModule,
  RowApiModule,
  ClientSideRowModelModule,
  StatusBarModule,
  CellSelectionModule,
];

const rowSelection: RowSelectionOptions = {
  mode: "multiRow",
};

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<any[]>([
    { 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 [columnDefs, setColumnDefs] = useState<ColDef[]>([
    {
      field: "row",
    },
    {
      field: "name",
    },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      editable: true,
      flex: 1,
      minWidth: 100,
      filter: true,
    };
  }, []);
  const statusBar = useMemo<{
    statusPanels: StatusPanelDef[];
  }>(() => {
    return {
      statusPanels: [
        {
          statusPanel: CountStatusBarComponent,
        },
        {
          statusPanel: ClickableStatusBarComponent,
        },
        {
          statusPanel: "agAggregationComponent",
          statusPanelParams: {
            aggFuncs: ["count", "sum"],
          },
        },
      ],
    };
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact
            rowData={rowData}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            rowSelection={rowSelection}
            statusBar={statusBar}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

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

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

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

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

Custom Panels are configured alongside Provided Panels.

```jsx
<AgGridReact
      statusBar: {{
          statusPanels: [
              {
                  statusPanel: MyStatusBarComponent
              },
              {
                  statusPanel: 'agAggregationComponent'
              }
          ]
      }}
      ...other props...
/>
```

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

```jsx
const updateStatusBar = () => { ... }

useEffect(() => {
    props.api.addEventListener('modelUpdated', updateStatusBar);

    // Remove event listener when destroyed
    return () => {
        if (!props.api.isDestroyed()) {
            props.api.removeEventListener('modelUpdated', 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/react-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

```tsx
'use client';
import React, {
  StrictMode,
  useCallback,
  useMemo,
  useRef,
  useState,
} from "react";
import { createRoot } from "react-dom/client";

import type {
  ColDef,
  IStatusPanel,
  RowSelectionOptions,
  StatusPanelDef,
} from "ag-grid-community";
import {
  ClientSideRowModelModule,
  RowSelectionModule,
  TextEditorModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, StatusBarModule } from "ag-grid-enterprise";
import { AgGridProvider, AgGridReact, getInstance } from "ag-grid-react";

import ClickableStatusBarComponent from "./clickableStatusBarComponent";
import "./styles.css";

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

const modules = [
  TextEditorModule,
  TextFilterModule,
  RowSelectionModule,
  ClientSideRowModelModule,
  StatusBarModule,
  CellSelectionModule,
];

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

const rowSelection: RowSelectionOptions = {
  mode: "multiRow",
};

const GridExample = () => {
  const gridRef = useRef<AgGridReact>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "90%", width: "100%" }), []);
  const [rowData, setRowData] = useState<any[]>([
    { 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 [columnDefs, setColumnDefs] = useState<ColDef[]>([
    {
      field: "row",
    },
    {
      field: "name",
    },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      editable: true,
      flex: 1,
      minWidth: 100,
      filter: true,
    };
  }, []);
  const statusBar = useMemo<{
    statusPanels: StatusPanelDef[];
  }>(() => {
    return {
      statusPanels: [
        {
          statusPanel: ClickableStatusBarComponent,
          key: "statusBarCompKey",
        },
        {
          statusPanel: "agAggregationComponent",
          statusPanelParams: {
            aggFuncs: ["count", "sum"],
          },
        },
      ],
    };
  }, []);

  const toggleStatusBarComp = useCallback(() => {
    getInstance(
      gridRef.current!.api.getStatusPanel<IClickableStatusBar>(
        "statusBarCompKey",
      )!,
      (statusBarComponent) => {
        statusBarComponent!.setVisible(!statusBarComponent!.isVisible());
      },
    );
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <button onClick={toggleStatusBarComp} style={{ marginBottom: "10px" }}>
          Toggle Status Bar Component
        </button>

        <div style={gridStyle}>
          <AgGridReact
            ref={gridRef}
            rowData={rowData}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            rowSelection={rowSelection}
            statusBar={statusBar}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

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