Vue Data GridStatus Bar

Version 36.2.0

Enterprise

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.

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

main.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");

Provided Panels Copy Link

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 Copy Link

The align property can be left, center or right (default).

The key is used for Accessing Panel 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.

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

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

main.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");

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.

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

Value Formatting Copy Link

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.

<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 Copy Link

Properties available on the IProvidedStatusPanelParams interface.

Function

(params: IStatusPanelValueFormatterParams) => string

main.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");

Custom Panels Copy Link

Applications that are using Server-side Data 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.

main.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");

styles.css

.container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 5px;
    background-color: lightgrey;
    padding: 3px 5px 3px 5px;
    border-radius: 5px;
}

.component {
    margin-left: 5px;
    padding-top: 0;
    padding-bottom: 0;
}

.status-bar-input {
    height: initial !important;
}

clickableStatusBarComponentVue.ts

export default {
    template: `
      <div class="ag-status-name-value">
          <span>Status Bar Component&nbsp; 
            <input type="button" class="status-bar-input" v-on:click="onClick" value="Click Me"/>
          </span>
      </div>
    `,
    data: function () {
        return {};
    },
    methods: {
        onClick() {
            console.log('Selected Row Count: ' + this.params.api.getSelectedRows().length);
        },
    },
};

countStatusBarComponentVue.ts

export default {
    template: `
      <div class="ag-status-name-value">
        <span>Row Count Component&nbsp;:</span>
        <span class="ag-status-name-value-value">{{ count }}</span>
      </div>
    `,
    data: function () {
        return {
            count: null,
        };
    },
    beforeMount() {
        this.params.api.addEventListener('rowDataUpdated', () => {
            this.count = this.params.api.getDisplayedRowCount();
        });
    },
    methods: {
        onGridReady(params) {},
    },
};

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

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<TData = any, TContext = any> interface.

string

GridApi

The grid api.

TContext

Application context as set on gridOptions.context.

Custom Panels are configured alongside Provided Panels.

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.

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

Accessing Instances Copy Link

Use the grid API getStatusPanel(key) to access a panel instance. This can be used to expose Custom Panels to the application.

Function

Gets the status panel instance corresponding to the supplied id.

StatusBarModule

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

main.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");

styles.css

.container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 5px;
    padding: 3px 5px 3px 5px;
    border-radius: 5px;
}

.component {
    margin-left: 5px;
    padding-top: 0;
    padding-bottom: 0;
}

clickableStatusBarComponentVue.ts

export default {
    template: `
      <div class="container" v-if="visible">
      <div>
          <span class="component">Status Bar Component&nbsp;
            <input type="button" v-on:click="onClick" value="Click Me"/>
          </span>
      </div>
      </div>
    `,
    data: function () {
        return {
            visible: true,
        };
    },
    methods: {
        onClick() {
            console.log('Selected Row Count: ' + this.params.api.getSelectedRows().length);
        },
        setVisible(visible) {
            this.visible = visible;
        },
        isVisible() {
            return this.visible;
        },
    },
};

Getting Started

AI Features

Layout & Styling

Charting

Core Features

Advanced Features

Vue Data GridStatus Bar

Provided Panels Copy Link

Configuration Copy Link

Value Formatting Copy Link

IProvidedStatusPanelParams Copy Link

Custom Panels Copy Link

Accessing Instances Copy Link