Status bar

Users read totals of a selection without exporting it. data-grid-status-bar computes them from the grid's own data: <DataGridStatusBar /> renders the bar, and useDataGridSelectionStats is the headless hook. It reads committed values only, never the open editor's draft, and writes nothing, so readOnly grids work unchanged.

pnpm dlx shadcn@latest add @gridcn/data-grid-status-bar

Place the bar inside DataGridProvider, next to DataGridRoot, like the pagination bar:

import { DataGridStatusBar } from "@/components/data-grid-status-bar/data-grid-status-bar";

<DataGridProvider {...grid} columns={columns}>
  <DataGridRoot>
    <DataGridHeader />
    <DataGridBody />
  </DataGridRoot>
  <DataGridStatusBar />
</DataGridProvider>;

Which cells count

The bar aggregates the union of every selection channel: the primary range, the stacked Ctrl+click ranges, whole-row selections, and whole-column selections. A cell that sits in two channels counts once. Hidden columns, filtered rows, and unloaded lazy rows are never in the view, so they never count.

Which values count

A cell is numeric when its raw value is a finite number. Detection reads the value, so a custom numeric type aggregates without configuration. count counts the non-empty cells, where empty means the column's cell type isEmpty returns true. sum, avg, min, and max run over the numeric cells; the sum uses Neumaier-compensated summation, so 0.1 + 0.2 shows 0.3.

Display and formatting

The bar renders nothing while fewer than 2 cells are selected. count always shows; sum, avg, min, and max show only while at least one numeric cell is selected.

When every numeric cell comes from one column, that column's toDisplayText formats sum, avg, min, and max. A number column with a format option shows currency. Otherwise the default Intl.NumberFormat(locale, { maximumFractionDigits: 4 }) applies. formatValue overrides both.

When it computes

The hook recomputes after the selection settles: at once for a selection of up to 5,000 cells, otherwise on a 150 ms trailing timer, so dragging a large range does not walk the whole selection on every frame. A walk stops at 200,000 cells (MAX_STATUS_CELLS); above the cap, every value gets a ≈ prefix and the bar's title says how many cells the values cover.

Props

Related

• Selection & keyboard: the selection channels the bar aggregates
• Cell types: isEmpty and toDisplayText
• Pagination: page-local data: the bar aggregates the current page slice
• Pinned rows: the other totals surface, for a fixed band