statusBar

Shows the figures of the block of cells, and the row counts, in a strip under the rows.

Import	import { statusBar } from '@dzgrid/dom/statusbar';
Signature	statusBar(o?: StatusBarOptions): StatusBarFeature
Texts	import { EN_STATUS } from '@dzgrid/dom/locales/en-status'; languages: en, fr, ar
Own CSS	STATUS_CSS — to add yourself with injectStyles: false
Declared in	packages/dom/src/statusbar/index.ts

Options	Type
items	readonly string[]
maxCells	number

What it does

statusBar() adds a strip under the rows. While a block of two cells or more is taken, it shows at the end: the count of cells that are not empty, then the sum, mean, min and max of the numbers in its type: 'number' columns (from two numbers; a text column holding « 12 » is counted, never summed). Each figure is written in its column’s format, in the grid’s digits. On a paged grid it shares the strip of the pagination footer.

The block’s figures need range: without it they stay empty, with one missing-feature warning (detail range). Past maxCells, a moving block shows « … » until it stops.

A screen reader hears nothing on its own: the strip is plain text, named « Status bar ». api(grid).announce() says it in one sentence, and so does « Read the totals » in the contextMenu when you give it use: { status }. api(grid).stats() returns the figures now.

Options

• items: the items, in order — status.rows, status.filtered, status.selected, status.count, status.sum, status.avg, status.min, status.max, or a status part of your own. By default the block’s five figures. A name that is no item is skipped, with an unknown-part problem.
• maxCells: past this many cells, a moving block shows « … » until it stops (150 ms after a key, or the pointer released). Default 200 000; a value that is not a whole number from 1 takes it back, with an invalid-setting warning.

Example

import { createGrid } from '@dzgrid/dom';
import { range } from '@dzgrid/dom/range';
import { statusBar } from '@dzgrid/dom/statusbar';
import { EN } from '@dzgrid/dom/locales/en';
import { EN_RANGE } from '@dzgrid/dom/locales/en-range';
import { EN_STATUS } from '@dzgrid/dom/locales/en-status';

type River = { id: string; river: string; km: number };

const bar = statusBar({ items: ['status.rows', 'status.count', 'status.sum', 'status.avg'] });

const grid = createGrid<River>(document.getElementById('rivers')!, {
  rows: [{ id: 'r1', river: 'Willowmere', km: 84 }, { id: 'r2', river: 'Stonebeck', km: 31.5 }],
  columns: [
    { id: 'river', header: 'River' },
    { id: 'km', header: 'Length (km)', type: 'number' },
  ],
  getRowId: (r) => r.id,
  messages: { ...EN, text: { ...EN.text, ...EN_RANGE.text, ...EN_STATUS.text } },
  features: [range(), bar],
});

console.log(bar.api(grid)?.stats());

See also

• range: the block the figures come from.
• pagination: the pager in the same strip.
• contextMenu: « Read the totals » for a screen reader.