Status Bar

The status bar sits at the bottom of the grid and displays row counts, filter counts, selection counts, and numeric aggregations for selected cell ranges.

Live Demo

Select numeric cells (Age, Salary) to see aggregations in the status bar

Live

Name	Age	Salary	Department
Alice Johnson	25	$50,000	Engineering
Bob Smith	26	$53,500	Marketing
Carol Lee	27	$57,000	Sales
David Kim	28	$60,500	Finance
Eve Torres	29	$64,000	Operations
Frank Wu	30	$67,500	Engineering
Grace Park	31	$71,000	Marketing
Henry Adams	32	$74,500	Sales
Irene Costa	33	$78,000	Finance
Jack Rivera	34	$81,500	Operations

Showing 1 to 10 of 25 items

Rows102550100

Try it in your framework

The demo above uses Radix UI for styling. To see this feature with your framework's design system (Fluent UI, Material UI, Vuetify, PrimeNG, etc.), click "Open in online demo" below the demo.

Quick Example

React

import { OGrid } from '@alaarab/ogrid-react-radix';

function App() {
  return (
    <OGrid
      columns={columns}
      data={data}
      getRowId={(r) => r.id}
      statusBar
    />
  );
}

Switching UI libraries

The OGrid component has the same props across all React UI packages. To switch, just change the import:

• Radix (lightweight, default): from '@alaarab/ogrid-react-radix'
• Fluent UI (Microsoft 365 / SPFx): from '@alaarab/ogrid-react-fluent' — wrap in <FluentProvider>
• Material UI (MUI v7): from '@alaarab/ogrid-react-material' — wrap in <ThemeProvider>

Angular

import { Component } from '@angular/core';
import { OGridComponent } from '@alaarab/ogrid-angular-material';

@Component({
  standalone: true,
  imports: [OGridComponent],
  template: `<ogrid [props]="gridProps" />`
})
export class GridComponent {
  gridProps = {
    columns: columns,
    data: data,
    getRowId: (r: Row) => r.id,
    statusBar: true,
  };
}

Switching UI libraries

Same component API across Angular packages. To switch, just change the import:

• Radix (CDK): from '@alaarab/ogrid-angular-radix' (default, lightweight)
• Angular Material: from '@alaarab/ogrid-angular-material'
• PrimeNG: from '@alaarab/ogrid-angular-primeng'

All components are standalone — no NgModule required.

Vue

<script setup lang="ts">
import { OGrid } from '@alaarab/ogrid-vue-vuetify';

const gridProps = {
  columns,
  data,
  getRowId: (r) => r.id,
  statusBar: true,
};
</script>

<template>
  <OGrid :gridProps="gridProps" />
</template>

Switching UI libraries

Same component API across Vue packages. To switch, just change the import:

• Radix (Headless UI): from '@alaarab/ogrid-vue-radix' (default, lightweight)
• Vuetify: from '@alaarab/ogrid-vue-vuetify' — wrap in <v-app> for theming
• PrimeVue: from '@alaarab/ogrid-vue-primevue'

Vanilla JS

import { OGrid } from '@alaarab/ogrid-js';
import '@alaarab/ogrid-js/styles';

const grid = new OGrid(document.getElementById('grid'), {
  columns: columns,
  data: data,
  getRowId: (r) => r.id,
  statusBar: true,
});

Set statusBar={true} and the bar appears at the bottom showing "Rows: 150".

How It Works

The status bar dynamically shows information based on the current grid state.

Basic Row Count

With statusBar={true}, the bar always shows the total row count.

Rows: 150

Filtered Count

When filters are active and reduce the displayed rows, a "Filtered" count appears alongside the total.

Rows: 150  |  Filtered: 42

Selected Row Count

When row selection is enabled and the user selects rows, a "Selected" count appears.

Rows: 150  |  Selected: 5

Cell Aggregations

When the user selects a range of cells that includes numeric values, the status bar shows aggregation values: Sum, Avg, Min, Max, and Count.

Rows: 150  |  Cells: 12  |  Sum: 4800  |  Avg: 400  |  Min: 150  |  Max: 900  |  Count: 12

Aggregations:

• Only appear when 2 or more cells are selected.
• Only include cells with numeric values.
• Avg is rounded to 2 decimal places.
• Disappear when the selection is cleared.

Combining Indicators

All indicators can appear simultaneously. The status bar shows whichever are relevant:

Rows: 1000  |  Filtered: 250  |  Selected: 3  |  Cells: 8  |  Sum: 12500  |  Avg: 1562.50  |  Min: 800  |  Max: 3200  |  Count: 8

Advanced: Custom Status Bar Props

For full control, pass an IStatusBarProps object instead of true.

<OGrid
  columns={columns}
  data={data}
  getRowId={(r) => r.id}
  statusBar={{
    totalCount: data.length,
    filteredCount: filteredData.length,
    selectedCount: selectedRows.size,
    panels: ['rowCount', 'filteredRowCount', 'selectedRowCount'],
  }}
/>

Props Reference

Type	Field	Description
IOGridProps<T>	statusBar	boolean or IStatusBarProps
IStatusBarProps	totalCount	Total number of rows (unfiltered)
IStatusBarProps	filteredCount	Number of rows after filtering (omit to hide)
IStatusBarProps	selectedCount	Number of selected rows (omit or 0 to hide)
IStatusBarProps	panels	Array of panel IDs to show: 'rowCount', 'filteredRowCount', 'selectedRowCount'
IStatusBarProps	aggregation	{ sum, avg, min, max, count } | null for selected numeric cells

Related

• CSV Export -- export the data behind the counts
• Server-Side Data -- status bar works with server-side totalCount
• Keyboard Navigation -- Shift+Arrow to select cell ranges for aggregation