Status bar

The status bar shows Excel's Average, Count and Sum for the selected cells, next to the size of the selection.

import type { createSpreadsheetShell } from "@sheetwrite/core/shell";
declare const shell: ReturnType<typeof createSpreadsheetShell>;

shell.grid.setSelection({
  kind: "range",
  range: { sheet: "sales", start: { row: 0, col: 1 }, end: { row: 2, col: 1 } },
});

import { initSheetwrite, type ColumnarData, type Workbook } from "@sheetwrite/core";
import { createSpreadsheetShell } from "@sheetwrite/core/shell";
import "@sheetwrite/core/styles.css";
import "@sheetwrite/core/shell.css";

const host = document.querySelector<HTMLElement>("#app");
if (host === null) throw new Error("Missing #app host");
host.style.height = "480px";

const workbook: Workbook = {
  activeSheet: "sales",
  sheets: [
    {
      id: "sales",
      name: "Sales",
      rowCount: 3,
      columns: [
        { key: "product", header: "Product", width: 180, type: "text" },
        { key: "amount", header: "Amount", width: 100, type: "number" },
      ],
    },
  ],
};
const data: ColumnarData = {
  rowCount: 3,
  columns: {
    product: ["Notebook", "Pen", "Folder"],
    amount: new Float64Array([12, 4, 8]),
  },
};

await initSheetwrite();
const shell = createSpreadsheetShell(host, { grid: { workbook, data } });

// Select B1:B3, the three amounts.
shell.grid.setSelection({
  kind: "range",
  range: { sheet: "sales", start: { row: 0, col: 1 }, end: { row: 2, col: 1 } },
});

Turn it on

createSpreadsheetShell always adds the status bar to its bottom row, next to the sheet tabs. There is no flag to turn it on.

To use it with a grid that you created yourself, for example the Grid from a framework adapter, mount the piece into your own element:

import { createSelectionStatus } from "@sheetwrite/core/shell";

const statusHost = document.createElement("div");
host.after(statusHost);

const status = createSelectionStatus(statusHost, grid);
// Later, when the grid goes away:
status.destroy();

createSelectionStatus(host, grid) appends an <output role="status"> with the class sheetwrite-shell-status to host and returns a ShellPiece: element is the <output>, and destroy() removes it and stops its listeners. Import @sheetwrite/core/shell.css for the shell styles.

What it shows

The parts are joined with ·. When there is nothing to show, the <output> is hidden, and so is its host when the status bar is the host's only child.

The status bar updates on each selection and change event. It is a polite live region, so screen readers announce changes without interrupting the user.

Read the totals yourself

grid.summarizeSelection(signal?) returns the totals that the status bar uses. Use it to build your own status bar, or to show Min and Max.

let pending: AbortController | null = null;

grid.on("selection", async () => {
  pending?.abort();
  const controller = new AbortController();
  pending = controller;
  try {
    const summary = await grid.summarizeSelection(controller.signal);
    if (summary === null || summary.numericCount === 0) return;
    console.log(`Min: ${summary.min} · Max: ${summary.max}`);
  } catch (error) {
    if (!controller.signal.aborted) throw error;
  }
});

With B1:B3 from the first example selected, this logs Min: 4 · Max: 12.

Options

createSelectionStatus and createSpreadsheetShell have no status bar options. These are the fields of the SelectionSummary that summarizeSelection resolves:

summarizeSelection resolves null when nothing is selected.

Edge cases and limits

• The totals cover only the cells the user can see. Rows that a filter hides are left out.
• Overlapping ranges in a multi selection count once per range, as in Excel.
• Whole-row selections stop at the last column; there are no cells past it.
• Large selections are read in chunks of 65,536 cells, with a pause between frames, so the page stays responsive. In one measurement, 4 million cells took about 160 ms in total and at most 10 ms per chunk.
• Abort the signal to stop early. The promise then rejects with the signal's reason. The status bar aborts an unfinished summary when the selection or the data changes.
• The totals use the selection and the active sheet as they were when the call started.

See also

• Selection and keyboard
• createSelectionStatus API
• createSpreadsheetShell API
• Grid.summarizeSelection API