Status bar (range aggregates)

Excel-style bar under the grid with live aggregates of the selected cell range: Count, Sum, Avg, Min, Max. Enable with statusBar + enableCellSelection, then drag a rectangle across numeric cells. Choose the aggregate set via statusBar={ aggregates }.

A live, editable Svelte 5 data grid example from the SvGrid gallery (Selection & Clipboard). See the SvGrid documentation for the full API.

About this example

An Excel-style status bar under the Svelte 5 data grid with live aggregates of the selected cell range: count, sum, average, min and max. Turn it on with statusBar alongside enableCellSelection and drag a rectangle across numeric cells; statusBar={{ aggregates: ['sum', 'avg'] }} picks the aggregate set.

The Excel-style bar under the grid that shows live aggregates of the SELECTED cell range - count, sum, average, min, max. Turn it on with statusBar (and enableCellSelection), then drag a rectangle across the numeric cells.

<SvGrid responsive={true} enableCellSelection statusBar /> <SvGrid responsive={true} enableCellSelection statusBar={{ aggregates: ['sum', 'avg'] }} />

Imports, features and API used

Imports: @svgrid/grid

Columns: product (Product), q1 (Q1), q2 (Q2), q3 (Q3), q4 (Q4)

Frequently asked questions

How do I enable the status bar?

Add statusBar and enableCellSelection to <SvGrid>. The bar appears under the grid and updates as the selection changes, with no other wiring.

Can I choose which aggregates show?

Yes. Pass an object: statusBar={{ aggregates: ['sum', 'avg'] }} shows only those two. The available names are count, numericCount, sum, avg, min and max.

What happens with non-numeric cells in the range?

count includes every selected cell, numericCount only the numbers, and sum, avg, min and max consider only numeric cells, so a rectangle that spans the product name column still gives correct totals.

Related documentation

Related articles

Source code (144-status-bar.svelte)

<!-- Documented in: docs/help/status-bar.md -->
<script lang="ts">
  /**
   * 144. Status bar
   * ---------------
   * The Excel-style bar under the grid that shows live aggregates of the
   * SELECTED cell range - count, sum, average, min, max. Turn it on with
   * `statusBar` (and `enableCellSelection`), then drag a rectangle across
   * the numeric cells.
   *
   *   <SvGrid responsive={true} enableCellSelection statusBar />
   *   <SvGrid responsive={true} enableCellSelection statusBar={{ aggregates: ['sum', 'avg'] }} />
   */
  import { SvGrid, tableFeatures, type ColumnDef,
    type GridColumns } from '@svgrid/grid'

  const features = tableFeatures({})

  type Row = {
    id: number
    product: string
    q1: number
    q2: number
    q3: number
    q4: number
  }

  let seed = 0xbee5
  const rnd = () => ((seed = (seed * 1103515245 + 12345) >>> 0) / 0xffffffff)
  const PRODUCTS = ['Industrial PLC', 'Cordless driver', 'Stainless rivets', 'Aluminum stock', 'Wire rope', 'Hardwood pallet', 'I/O module', 'Torque wrench', 'Steel sheet', 'Drum, 55 gal', 'Bearing set', 'Hydraulic hose']
  const rows: Row[] = PRODUCTS.map((product, id) => ({
    id,
    product,
    q1: Math.round(5_000 + rnd() * 95_000),
    q2: Math.round(5_000 + rnd() * 95_000),
    q3: Math.round(5_000 + rnd() * 95_000),
    q4: Math.round(5_000 + rnd() * 95_000),
  }))

  const money: ColumnDef<typeof features, Row>['format'] = {
    type: 'currency',
    currency: 'USD',
    options: { maximumFractionDigits: 0 },
  }
  const columns: GridColumns<Row> = [
    { field: 'product', header: 'Product', width: 200 },
    { field: 'q1', header: 'Q1', width: 130, align: 'right', format: money },
    { field: 'q2', header: 'Q2', width: 130, align: 'right', format: money },
    { field: 'q3', header: 'Q3', width: 130, align: 'right', format: money },
    { field: 'q4', header: 'Q4', width: 130, align: 'right', format: money },
  ]
</script>

<section class="flex flex-col flex-1 min-h-0 gap-3">
  <div
    class="shrink-0 rounded-lg border px-4 py-3"
    style="border-color: var(--sg-border); background: var(--sg-header-bg);"
  >
    <p class="text-sm font-semibold" style="color: var(--sg-fg);">
      Live range aggregates via <code>statusBar</code>
    </p>
    <p class="mt-1 text-xs" style="color: var(--sg-muted);">
      Drag a rectangle across the quarter columns. The bar under the grid
      updates with Count / Sum / Avg / Min / Max of the selection - just like
      Excel. Numeric stats appear only when the selection holds numbers.
    </p>
  </div>

  <div class="flex-1 min-h-0">
    <SvGrid responsive={true}
      columnResize
      data={rows}
      columns={columns}
      features={features}
      enableCellSelection
      statusBar
      selectionMode="cell"
      rowHeight={36}
      containerHeight="100%"
      fitColumns={true}
    />
  </div>
</section>

View this example on GitHub

More Selection & Clipboard examples

  • Bulk-action bar - selectionBar floats a bar over the grid while rows are selected - the count, your actions, an overflow menu, and Clear - the pattern an issue tracker uses for bulk edit. position pins it to the bottom (default) or top edge. Actions receive the selected rows in display order, and hidden / disabled re-check against the live selection so buttons appear and grey out as the set changes.
  • Selection + copy/paste - Row + cell-range selection with TSV clipboard round-trip.
  • Selection API + events - Drive cell selection with api.selectCells / api.getSelected; subscribe to changes via onCellSelectionChange. Live SUM/AVG/MIN/MAX panel + event log + copy-as-TSV.
  • Range selection (Excel-style) - Drag any rectangle of cells, or Ctrl/Cmd+drag to add MORE ranges - all stay highlighted and copy together. Toolbar issues common ranges; live SUM/AVG/MIN/MAX/COUNT status bar; copy as TSV.
  • Bulk actions toolbar - Select rows → sticky action bar with Mark / Delete / Copy as TSV. The Gmail / Linear pattern.