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

Uses `@svgrid/grid` (MIT). Category: Selection & Clipboard. Live demo: https://svgrid.com/demos/144-status-bar/

Install: `npm i @svgrid/grid` (Svelte 5).

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

```text
<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

- [Status bar](https://svgrid.com/docs/help/status-bar.md)

## Related articles

- [Copy a Cell Range to the Clipboard in SvGrid](https://svgrid.com/blog/copy-cell-range-to-clipboard/) - How SvGrid copies selected cell ranges as tab-separated values that paste cleanly into Excel and Google Sheets, plus headers, programmatic copy, and format control.
- [Row Selection and Clipboard Copy-Paste in SvGrid](https://svgrid.com/blog/row-selection-and-copy-paste/) - How checkbox row selection, cell range copy, and Excel-compatible clipboard output work together in SvGrid - with a full working example.
- [Spreadsheet-Style Cell Range Selection in SvGrid](https://svgrid.com/blog/cell-range-selection/) - How to enable drag-to-select cell ranges, read live selection state, and build a status-bar footer that sums and averages the selected values.

## Source code (144-status-bar.svelte)

```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](https://github.com/sv-grid/sv-grid/blob/main/examples/src/demos/144-status-bar.svelte)