@ghxstship/xos-ui 0.0.0-stage → 4.16.0

package/src/Grids/BudgetGrid.tsx

@@ -0,0 +1,164 @@
+import { useState, type ReactElement } from "react";
+import type { BudgetLine, GLAccount } from "../types/reference";
+import { cx } from "../lib/cx.ts";
+import { useFormat, useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Money } from "../Forms/Forms.tsx";
+import { SegmentedControl } from "../Navigation/Navigation.tsx";
+import { ScrollRegion } from "../Layout/Layout.tsx";
+import { type BudgetGridProps, type Grade } from "./Grids.types.ts";
+import { glForCode } from "./glForCode.tsx";
+
+function blank(v: number | null | undefined): v is null | undefined {
+  return v === null || v === undefined;
+}
+
+/**
+ * Budget lines grouped by GL account in numeric order, with a grade toggle. Posting and amounts are
+ * derived, never stored; any unpriced line makes its subtotal and the total Unpriced.
+ */
+export function BudgetGrid({
+  accounts,
+  accountType = "Expense",
+  lines,
+  grades,
+  grade: initial = "base",
+  scopeLabel,
+  label,
+  onGradeChange,
+}: BudgetGridProps): ReactElement {
+  const t = useT();
+  const fmt = useFormat();
+  const [grade, setGrade] = useState<Grade>(initial);
+  const amount = (l: BudgetLine): number | null => {
+    const rate = l[grade];
+    if (blank(rate)) return null;
+    if (l.qty === undefined) return rate;
+    return blank(l.qty) ? null : l.qty * rate;
+  };
+  const sum = (ls: BudgetLine[]): number | null => {
+    let total = 0;
+    for (const l of ls) {
+      const a = amount(l);
+      if (a === null) return null;
+      total += a;
+    }
+    return ls.length ? total : null;
+  };
+  const groups = new Map<string, { account: GLAccount | null; lines: BudgetLine[] }>();
+  for (const l of lines) {
+    const account = glForCode(l.urid, accounts, accountType);
+    const key = account?.code ?? "~";
+    const group = groups.get(key) ?? { account, lines: [] };
+    group.lines.push(l);
+    groups.set(key, group);
+  }
+  const ordered = [...groups.entries()]
+    .sort(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0))
+    .map(([, g]) => g);
+  const hasQty = lines.some((l) => l.qty !== undefined);
+  const heads = [
+    t("budget.gl"),
+    t("budget.costCenter"),
+    t("budget.urid"),
+    t("budget.line"),
+    ...(hasQty ? [t("budget.qty"), t("budget.rate")] : []),
+    t("budget.amount"),
+  ];
+  const lead = heads.length - 1;
+  const th = cx(
+    "h-control-lg px-12 font-medium text-text-12 text-text-secondary bg-bg-surface border-b border-border-subtle",
+  );
+  const td = cx("h-row-default px-12 border-b border-border-subtle whitespace-nowrap");
+  return (
+    <div className="flex flex-col gap-12">
+      <div className="flex flex-wrap items-center justify-between gap-8">
+        <SegmentedControl
+          label={t("budget.grade")}
+          value={grade}
+          options={grades}
+          onChange={(g) => {
+            setGrade(g as Grade);
+            onGradeChange?.(g);
+          }}
+        />
+        {scopeLabel ? <span className="text-text-secondary">{scopeLabel}</span> : null}
+      </div>
+      <ScrollRegion label={label ?? t("scroll.region")}>
+        <table className="w-full border-collapse text-text-13">
+          <thead>
+            <tr>
+              {heads.map((h, i) => (
+                <th key={h} scope="col" className={cx(th, i >= 4 ? "text-end" : "text-start")}>
+                  {h}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          {ordered.map((g) => (
+            <tbody key={g.account?.code ?? "unmapped"}>
+              <tr className="bg-bg-surface">
+                <th scope="rowgroup" colSpan={lead} className={cx(td, "text-start font-regular")}>
+                  {g.account ? (
+                    <span className="font-mono text-text-12">{g.account.code}</span>
+                  ) : (
+                    <span className="text-warning">
+                      <Icon name="TriangleAlert" size={14} />
+                    </span>
+                  )}{" "}
+                  <strong className="font-semibold">
+                    {g.account?.name ?? t("budget.unmapped")}
+                  </strong>
+                </th>
+                <td className={cx(td, "text-end font-semibold")}>
+                  <Money amount={sum(g.lines)} />
+                </td>
+              </tr>
+              {g.lines.map((l, i) => (
+                <tr key={`${l.urid}-${i}`} className="hover:bg-bg-hover">
+                  <td className={td} />
+                  <td className={cx(td, "font-mono text-text-12 text-text-secondary")}>{l.cc}</td>
+                  <td className={td}>
+                    <span className="font-mono text-text-12">{l.urid}</span>
+                  </td>
+                  <td className={cx(td, "whitespace-normal")}>
+                    {l.name}
+                    {l.type ? <span className="text-text-secondary"> · {l.type}</span> : null}
+                  </td>
+                  {hasQty ? (
+                    <td className={cx(td, "text-end tabular-nums")}>
+                      {blank(l.qty) ? "" : fmt.number(l.qty)}
+                      {l.unit ? <span className="text-text-secondary"> {l.unit}</span> : null}
+                    </td>
+                  ) : null}
+                  {hasQty ? (
+                    <td className={cx(td, "text-end")}>
+                      <Money amount={l[grade]} />
+                    </td>
+                  ) : null}
+                  <td className={cx(td, "text-end")}>
+                    <Money amount={amount(l)} />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          ))}
+          <tfoot>
+            <tr>
+              <th
+                scope="row"
+                colSpan={lead}
+                className={cx(td, "text-start font-semibold bg-bg-surface")}
+              >
+                {t("table.total")}
+              </th>
+              <td className={cx(td, "text-end font-semibold bg-bg-surface")}>
+                <Money amount={sum(lines)} />
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+      </ScrollRegion>
+    </div>
+  );
+}

package/src/Grids/Grids.shared.tsx

@@ -0,0 +1,5 @@
+import type { GridColumn } from "../types/reference";
+
+export function isNumeric(c: GridColumn): boolean {
+  return c.type === "money" || c.type === "number" || c.type === "multiplier";
+}

package/src/Grids/Grids.tsx

@@ -0,0 +1,11 @@
+export {
+  type SpreadsheetGridProps,
+  type BudgetGridProps,
+  type BidSheetProps,
+} from "./Grids.types.ts";
+export { parseCell } from "./parseCell.tsx";
+export { columnTotal } from "./columnTotal.tsx";
+export { SpreadsheetGrid } from "./SpreadsheetGrid.tsx";
+export { glForCode } from "./glForCode.tsx";
+export { BudgetGrid } from "./BudgetGrid.tsx";
+export { BidSheet } from "./BidSheet.tsx";

package/src/Grids/Grids.types.ts

@@ -0,0 +1,38 @@
+import type {
+  BidSheetProps as ReferenceBidSheetProps,
+  BudgetGridProps as ReferenceBudgetGridProps,
+  SpreadsheetGridProps as ReferenceSpreadsheetGridProps,
+} from "../types/reference";
+
+export type Cell = string | number | null;
+
+export type Row = Record<string, Cell>;
+
+export type SpreadsheetGridProps = ReferenceSpreadsheetGridProps & {
+  /** Called with every row after an edit, clear or paste. */
+  onChange?: (rows: Row[]) => void;
+  /**
+   * The column that identifies a row. When set, new `rows` are merged into the grid by this key
+   * instead of being ignored: rows added or removed elsewhere appear or go, and a row whose incoming
+   * values differ from the last ones received for it takes them, except the row with an open cell,
+   * which keeps its draft. The selection and the open cell follow their row.
+   */
+  rowKey?: string;
+  /** Called with the key of the row whose cell opens for editing, and null when it closes. */
+  onEditingChange?: (rowKey: string | null) => void;
+  /**
+   * Called with the key of the row a person selects, once they pick a cell, and whenever the selected
+   * row changes; it follows the row when rows move, and reports null when the row leaves. Needs rowKey.
+   */
+  onSelectionChange?: (rowKey: string | null) => void;
+};
+
+export type BudgetGridProps = ReferenceBudgetGridProps & {
+  onGradeChange?: (grade: string) => void;
+};
+
+export type BidSheetProps = ReferenceBidSheetProps & {
+  onChange?: (lines: ReferenceBidSheetProps["lines"]) => void;
+};
+
+export type Grade = "base" | "elevated" | "premium";

package/src/Grids/SpreadsheetGrid.tsx

@@ -0,0 +1,445 @@
+import {
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type ClipboardEvent,
+  type KeyboardEvent,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { Direction } from "radix-ui";
+import type { GridColumn } from "../types/reference";
+import { cx } from "../lib/cx.ts";
+import { useFormat, useT } from "../lib/context.tsx";
+import { Money } from "../Forms/Forms.tsx";
+import { ScrollRegion } from "../Layout/Layout.tsx";
+import { isNumeric } from "./Grids.shared.tsx";
+import { type Cell, type Row, type SpreadsheetGridProps } from "./Grids.types.ts";
+import { columnTotal } from "./columnTotal.tsx";
+import { parseCell } from "./parseCell.tsx";
+
+function editable(c: GridColumn): boolean {
+  return Boolean(c.editable) && !c.derive;
+}
+
+function sameRow(a: Row, b: Row): boolean {
+  const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+  for (const k of keys) if ((a[k] ?? null) !== (b[k] ?? null)) return false;
+  return true;
+}
+
+interface Received {
+  readonly rows: readonly Row[];
+  /** The last row received for each key, which a new `rows` is compared against. */
+  readonly byKey: ReadonlyMap<string, Row>;
+}
+
+/**
+ * Merges new `rows` into the grid's rows by key. A row takes the incoming values only when they
+ * differ from the last ones received for it, never because they differ from what the person typed:
+ * a refresh carrying the version from before this tab's own save leaves the typed value in place.
+ * The row with an open cell keeps its values, and its last received row stays as it was, so the
+ * difference applies with the next rows after the cell closes.
+ */
+function reconcile(
+  incoming: readonly Row[],
+  local: readonly Row[],
+  received: ReadonlyMap<string, Row>,
+  keyOf: (row: Row) => string,
+  editingKey: string | null,
+): { rows: Row[]; byKey: Map<string, Row> } {
+  const mine = new Map(local.map((r) => [keyOf(r), r]));
+  const byKey = new Map<string, Row>();
+  const rows = incoming.map((row) => {
+    const key = keyOf(row);
+    const current = mine.get(key);
+    const before = received.get(key);
+    if (current && key === editingKey) {
+      byKey.set(key, before ?? row);
+      return current;
+    }
+    byKey.set(key, row);
+    return current && before && sameRow(before, row) ? current : { ...row };
+  });
+  return { rows, byKey };
+}
+
+/**
+ * Spreadsheet-speed editing as an ARIA grid (the accessible model a Glide Data Grid surface keeps):
+ * arrows and Tab move, Enter or typing edits, Escape cancels, Delete clears to Unpriced, and a paste
+ * from Excel fills the range from the selected cell. Derived columns are read-only. With appendRow a
+ * trailing blank row becomes a new row once typed or pasted into; errors mark cells invalid in place,
+ * each message named by its cell (aria-describedby), and a column's parse reads its own shorthand.
+ */
+export function SpreadsheetGrid({
+  label,
+  columns,
+  rows: given,
+  totalsLabel,
+  appendRow = false,
+  errors,
+  onChange,
+  rowKey,
+  onEditingChange,
+  onSelectionChange,
+}: SpreadsheetGridProps): ReactElement {
+  const t = useT();
+  const fmt = useFormat();
+  const dir = Direction.useDirection();
+  const [rows, setRows] = useState<Row[]>(() => given.map((r) => ({ ...r })));
+  const [sel, setSel] = useState<[number, number]>([0, 0]);
+  const [editing, setEditing] = useState<{ draft: string } | null>(null);
+  const cells = useRef(new Map<string, HTMLTableCellElement>());
+  const input = useRef<HTMLInputElement>(null);
+  const keyOf = (row: Row | undefined) => (row && rowKey ? String(row[rowKey] ?? "") : "");
+  const [received, setReceived] = useState<Received>(() => ({
+    rows: given,
+    byKey: new Map(given.map((r) => [rowKey ? String(r[rowKey] ?? "") : "", r])),
+  }));
+
+  // New rows from the page, merged by key while the selection and the open cell follow their row.
+  if (rowKey && given !== received.rows) {
+    const selectedKey = keyOf(rows[sel[0]]);
+    const merged = reconcile(given, rows, received.byKey, keyOf, editing ? selectedKey : null);
+    const at = merged.rows.findIndex((r) => keyOf(r) === selectedKey);
+    setReceived({ rows: given, byKey: merged.byKey });
+    setRows(merged.rows);
+    if (at < 0) {
+      setSel([Math.max(0, Math.min(sel[0], merged.rows.length - 1)), sel[1]]);
+      if (editing) setEditing(null);
+    } else if (at !== sel[0]) {
+      setSel([at, sel[1]]);
+    }
+  }
+
+  const editingKey = rowKey && editing ? keyOf(rows[sel[0]]) : null;
+  const reportEditing = useRef(onEditingChange);
+  reportEditing.current = onEditingChange;
+  // The row a person selected, reported when it changes and following the row when rows move. The
+  // first cell holds the keyboard focus before anyone picks a row, so nothing reports until then.
+  const [picked, setPicked] = useState(false);
+  const selectedRowKey = rowKey && picked ? keyOf(rows[sel[0]]) || null : null;
+  const reportSelection = useRef(onSelectionChange);
+  reportSelection.current = onSelectionChange;
+  const reportedSelection = useRef<string | null>(null);
+  useEffect(() => {
+    if (reportedSelection.current === selectedRowKey) return;
+    reportedSelection.current = selectedRowKey;
+    reportSelection.current?.(selectedRowKey);
+  }, [selectedRowKey]);
+  const reported = useRef<string | null>(null);
+  useEffect(() => {
+    if (reported.current === editingKey) return;
+    reported.current = editingKey;
+    reportEditing.current?.(editingKey);
+  }, [editingKey]);
+  const errorId = useId();
+  const blank = (): Row => Object.fromEntries(columns.map((c) => [c.key, null]));
+  // The rows shown: the grid's rows and, with appendRow, one blank row after them.
+  const shown = appendRow ? [...rows, blank()] : rows;
+  const errorAt = (r: number, key: string) => errors?.[`${r}:${key}`];
+  const errorList = Object.entries(errors ?? {});
+
+  useEffect(() => {
+    if (editing) input.current?.focus();
+    else cells.current.get(`${sel[0]}:${sel[1]}`)?.focus({ preventScroll: false });
+  }, [sel, editing]);
+
+  const commit = (next: Row[]) => {
+    setRows(next);
+    onChange?.(next);
+  };
+  const setCell = (r: number, c: number, value: Cell) => {
+    const col = columns[c];
+    if (!col || !editable(col)) return;
+    if (r >= rows.length) {
+      // Typing into the blank row adds it; clearing it adds nothing.
+      if (value === null) return;
+      commit([...rows, { ...blank(), [col.key]: value }]);
+      return;
+    }
+    commit(rows.map((row, i) => (i === r ? { ...row, [col.key]: value } : row)));
+  };
+  const show = (col: GridColumn, row: Row): ReactNode => {
+    const v = col.derive ? col.derive(row) : row[col.key];
+    if (col.type === "money")
+      return (
+        <Money
+          amount={typeof v === "number" ? v : null}
+          {...(col.currency ? { currency: col.currency } : {})}
+        />
+      );
+    if (v === null || v === undefined || v === "") return null;
+    if (col.type === "multiplier" && typeof v === "number") {
+      return (
+        <span className="tabular-nums">
+          {t("fmt.multiplier", {
+            n: new Intl.NumberFormat(fmt.locale, {
+              minimumFractionDigits: 1,
+              maximumFractionDigits: 2,
+            }).format(v),
+          })}
+        </span>
+      );
+    }
+    if (col.type === "code") return <span className="font-mono text-text-12">{String(v)}</span>;
+    if (col.type === "number" && typeof v === "number")
+      return <span className="tabular-nums">{fmt.number(v)}</span>;
+    return String(v);
+  };
+
+  const move = (dr: number, dc: number) =>
+    setSel(([r, c]) => [
+      Math.max(0, Math.min(shown.length - 1, r + dr)),
+      Math.max(0, Math.min(columns.length - 1, c + dc)),
+    ]);
+
+  const onKeyDown = (e: KeyboardEvent<HTMLTableCellElement>) => {
+    if (editing) return;
+    const [r, c] = sel;
+    const col = columns[c];
+    const forward = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+    const back = dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+    const moves: Record<string, [number, number]> = {
+      ArrowUp: [-1, 0],
+      ArrowDown: [1, 0],
+      [forward]: [0, 1],
+      [back]: [0, -1],
+    };
+    const step = e.key === "Tab" ? ([0, e.shiftKey ? -1 : 1] as [number, number]) : moves[e.key];
+    if (
+      step &&
+      !(e.key === "Tab" && ((e.shiftKey && c === 0) || (!e.shiftKey && c === columns.length - 1)))
+    ) {
+      e.preventDefault();
+      move(step[0], step[1]);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setSel(e.ctrlKey || e.metaKey ? [0, 0] : [r, 0]);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setSel(
+        e.ctrlKey || e.metaKey ? [shown.length - 1, columns.length - 1] : [r, columns.length - 1],
+      );
+    } else if ((e.key === "Enter" || e.key === "F2") && col && editable(col)) {
+      e.preventDefault();
+      const v = shown[r]?.[col.key];
+      setEditing({ draft: v === null || v === undefined ? "" : String(v) });
+    } else if ((e.key === "Delete" || e.key === "Backspace") && col && editable(col)) {
+      e.preventDefault();
+      setCell(r, c, null);
+    } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && col && editable(col)) {
+      e.preventDefault();
+      setEditing({ draft: e.key });
+    }
+  };
+
+  const onPaste = (e: ClipboardEvent<HTMLTableElement>) => {
+    const text = e.clipboardData.getData("text/plain");
+    if (!text || editing) return;
+    e.preventDefault();
+    const grid = text
+      .replace(/\r/g, "")
+      .replace(/\n$/, "")
+      .split("\n")
+      .map((line) => line.split("\t"));
+    const next = rows.map((row) => ({ ...row }));
+    grid.forEach((line, dr) => {
+      const r = sel[0] + dr;
+      // A paste reaching past the last row adds rows when the grid appends.
+      if (appendRow) while (next.length <= r) next.push(blank());
+      line.forEach((value, dc) => {
+        const col = columns[sel[1] + dc];
+        const row = next[r];
+        if (row && col && editable(col)) row[col.key] = parseCell(col, value);
+      });
+    });
+    commit(next);
+  };
+
+  const finish = (save: boolean, draft: string) => {
+    const col = columns[sel[1]];
+    if (save && col) setCell(sel[0], sel[1], parseCell(col, draft));
+    setEditing(null);
+  };
+
+  const th = cx(
+    "h-control-lg px-12 font-medium text-text-12 text-text-secondary bg-bg-surface border-b border-e border-border-subtle",
+  );
+  const td = cx(
+    "relative h-control-lg px-12 border-b border-e border-border-subtle whitespace-nowrap",
+  );
+  return (
+    <div className="flex flex-col gap-6">
+      <ScrollRegion label={label}>
+        <table
+          role="grid"
+          aria-label={label}
+          aria-rowcount={shown.length + 2}
+          onPaste={onPaste}
+          onPointerDownCapture={() => setPicked(true)}
+          onKeyDownCapture={() => setPicked(true)}
+          className="w-full border-collapse text-text-13"
+        >
+          <thead>
+            <tr aria-rowindex={1}>
+              <th scope="col" className={cx(th, "w-(--space-40) text-center")}>
+                <span className="sr-only">{t("grid.row")}</span>
+              </th>
+              {columns.map((c) => (
+                <th
+                  key={c.key}
+                  scope="col"
+                  className={cx(th, isNumeric(c) ? "text-end" : "text-start")}
+                  style={c.width ? { inlineSize: c.width } : undefined}
+                >
+                  {c.label}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {shown.map((row, ri) => (
+              <tr
+                key={rowKey ? (ri < rows.length ? `k:${keyOf(row)}` : "blank") : ri}
+                aria-rowindex={ri + 2}
+              >
+                <td
+                  className={cx(
+                    td,
+                    "text-center text-text-11 text-text-tertiary bg-bg-surface tabular-nums",
+                  )}
+                >
+                  {ri < rows.length ? (
+                    ri + 1
+                  ) : (
+                    <span aria-label={t("grid.newRow")}>{t("grid.newRowMark")}</span>
+                  )}
+                </td>
+                {columns.map((c, ci) => {
+                  const on = sel[0] === ri && sel[1] === ci;
+                  const isEditing = on && editing !== null;
+                  const message = errorAt(ri, c.key);
+                  return (
+                    <td
+                      key={c.key}
+                      ref={(el) => {
+                        if (el) cells.current.set(`${ri}:${ci}`, el);
+                        else cells.current.delete(`${ri}:${ci}`);
+                      }}
+                      role="gridcell"
+                      aria-selected={on}
+                      aria-readonly={editable(c) ? undefined : true}
+                      aria-invalid={message ? true : undefined}
+                      aria-describedby={message ? `${errorId}-${ri}-${c.key}` : undefined}
+                      tabIndex={on ? 0 : -1}
+                      title={c.derive ? t("grid.derived") : undefined}
+                      onClick={() => setSel([ri, ci])}
+                      onDoubleClick={() => {
+                        setSel([ri, ci]);
+                        if (editable(c)) {
+                          const v = row[c.key];
+                          setEditing({ draft: v === null || v === undefined ? "" : String(v) });
+                        }
+                      }}
+                      onKeyDown={onKeyDown}
+                      className={cx(
+                        td,
+                        isNumeric(c) && "text-end",
+                        !editable(c) && "text-text-secondary",
+                        message && "ring-(length:--stroke-width-hairline) ring-inset ring-danger",
+                        on && "ring-(length:--stroke-width-focus) ring-inset ring-accent",
+                        "outline-none forced-colors:border",
+                      )}
+                    >
+                      {isEditing ? (
+                        <input
+                          ref={input}
+                          aria-label={c.label}
+                          aria-invalid={message ? true : undefined}
+                          aria-describedby={message ? `${errorId}-${ri}-${c.key}` : undefined}
+                          defaultValue={editing.draft}
+                          onBlur={(e) => finish(true, e.target.value)}
+                          onKeyDown={(e) => {
+                            e.stopPropagation();
+                            if (e.key === "Enter") {
+                              finish(true, e.currentTarget.value);
+                              move(1, 0);
+                            } else if (e.key === "Escape") finish(false, "");
+                            else if (e.key === "Tab") {
+                              e.preventDefault();
+                              finish(true, e.currentTarget.value);
+                              move(0, e.shiftKey ? -1 : 1);
+                            }
+                          }}
+                          className="w-full border-0 bg-transparent outline-none text-inherit text-text-13 tabular-nums"
+                        />
+                      ) : (row[c.key] === null || row[c.key] === undefined || row[c.key] === "") &&
+                        c.blankHint?.(row) ? (
+                        <span className="text-text-tertiary">{c.blankHint(row)}</span>
+                      ) : (
+                        show(c, row)
+                      )}
+                      {on && !isEditing && editable(c) ? (
+                        <span
+                          aria-hidden="true"
+                          className="absolute -end-(--stroke-width-focus) -bottom-(--stroke-width-focus) z-base size-(--space-6) bg-accent border border-bg-canvas"
+                        />
+                      ) : null}
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+          </tbody>
+          <tfoot>
+            <tr aria-rowindex={shown.length + 2}>
+              <td className={cx(td, "bg-bg-surface")} />
+              {columns.map((c, i) => (
+                <td
+                  key={c.key}
+                  className={cx(td, "font-semibold bg-bg-surface", isNumeric(c) && "text-end")}
+                >
+                  {c.total ? (
+                    <Money
+                      amount={columnTotal(
+                        rows
+                          .filter((r) => c.totalIncludes?.(r) ?? true)
+                          .map((r) => (c.derive ? { ...r, [c.key]: c.derive(r) ?? null } : r)),
+                        c.key,
+                      )}
+                      {...(c.currency ? { currency: c.currency } : {})}
+                    />
+                  ) : i === 0 ? (
+                    (totalsLabel ?? t("table.total"))
+                  ) : null}
+                </td>
+              ))}
+            </tr>
+          </tfoot>
+        </table>
+      </ScrollRegion>
+      {errorList.length > 0 ? (
+        <ul className="m-0 flex list-none flex-col gap-2 p-0 text-text-12 text-danger-text">
+          {errorList.map(([key, text]) => {
+            const [r, col] = key.split(":");
+            const column = columns.find((c) => c.key === col);
+            return (
+              <li key={key} id={`${errorId}-${r}-${col}`}>
+                {t("grid.cellError", {
+                  row: Number(r) + 1,
+                  column: column?.label ?? col ?? "",
+                  message: text,
+                })}
+              </li>
+            );
+          })}
+        </ul>
+      ) : null}
+      <p className="m-0 text-text-11 text-text-secondary">
+        {appendRow ? t("grid.hintAppend") : t("grid.hint")}
+      </p>
+    </div>
+  );
+}

package/src/Grids/columnTotal.tsx

@@ -0,0 +1,14 @@
+import { type Row } from "./Grids.types.ts";
+
+/** Column total, or null when any line is blank (the silence rule). */
+export function columnTotal(rows: Row[], key: string): number | null {
+  let sum = 0;
+  let any = false;
+  for (const r of rows) {
+    const v = r[key];
+    if (v === null || v === undefined || v === "") return null;
+    sum += Number(v);
+    any = true;
+  }
+  return any ? sum : null;
+}