Skip to main content

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
Try it in your framework

The demo above uses Radix UI for styling. To see this feature with the Fluent UI implementation, click "Open in online demo" below the demo.

Quick Example​

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>

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​

TypeFieldDescription
IOGridProps<T>statusBarboolean or IStatusBarProps
IStatusBarPropstotalCountTotal number of rows (unfiltered)
IStatusBarPropsfilteredCountNumber of rows after filtering (omit to hide)
IStatusBarPropsselectedCountNumber of selected rows (omit or 0 to hide)
IStatusBarPropspanelsArray of panel IDs to show: 'rowCount', 'filteredRowCount', 'selectedRowCount'
IStatusBarPropsaggregation{ sum, avg, min, max, count } | null for selected numeric cells