@threestarsoftware/tssgrid 0.0.1 → 0.0.4

package/README.md

@@ -427,6 +427,30 @@ new TssGrid(el, {
 - **コアに合計行を埋めない**理由＝置き場が `minSpareRows`/ソート/空行処理と衝突して肥大化するため。集計を外出しして「どこに出すかは自由」にした。
 - formula と併用時は **`plugins: [TssFormula, TssTotals(...)]` の順**（合計を派生列の結果の後に計算するため）。`sum`/`avg`/`min`/`max` は数値セルのみ・`count` は非空セル数。
 
+### 同梱プラグイン: 条件付き合計（tss-sum / ラベル付き合計行・整列表示）
+
+`plugins/tss-sum.js`＝ **ラベル付きの"合計行"**（小計・消費税10%・消費税8%・合計 など）を、**条件(`when`)＋対象(`of`)を宣言**で定義して作る。`tss-totals` が「列ごと1値」なのに対し、こちらは**同じ列を条件別に何本でも集計**でき（消費税10%と8%は両方 amount 由来＝per-column では衝突する）、**ソースと同一列構成の readonly 集計グリッドを生成**するので**金額が縦にピッタリ揃う**（画面でも印刷でも）。請求書・見積などの合計欄に。動く例: [`examples/invoice.html`](https://tssgrid.threestarsoftware.co.jp/examples/invoice.html)（インボイス請求書の合計欄）。
+
+```html
+<script src="plugins/tss-merge.js"></script>  <!-- ラベルの横結合に利用 -->
+<script src="plugins/tss-sum.js"></script>
+```
+```js
+const sum = TssSum.attach(grid, document.getElementById('sumgrid'), {
+  format: v => '¥' + Number(v).toLocaleString('ja-JP'),
+  rows: [
+    { label: '小計（税抜）',  of: r => (+r[2]||0)*(+r[3]||0) },                                  // 全データ行の合計
+    { label: '消費税（10%）', when: r => r[4]==='10%', of: r => Math.round((+r[2]||0)*(+r[3]||0)*0.10) }, // 条件付き
+    { label: '消費税（8%）',  when: r => r[4]==='8%',  of: r => Math.round((+r[2]||0)*(+r[3]||0)*0.08) },
+    { label: '合計（税込）',  total: v => v[0]+v[1]+v[2] },                                      // 既出行から派生
+  ],
+  onCompute: vals => { /* 上部の総額表示など */ },
+});
+// sum.refresh() 手動再計算 / sum.detach() フック解除＋集計グリッド破棄
+```
+- 行は **`{label, when?, of}`**（`when` 一致行で `of(row)` を合計＝SUMIF）または **`{label, total}`**（既出行の値から派生）。`row` は内部配列（列index）で受ける。
+- ソースの **`onAfterChange`/`onStructureChange` を自動で包んで再計算**＝編集・行追加削除・Undo すべてに追従。集計グリッドは**表示専用**（同一列幅で `金額` 列が揃う）。
+
 ### 同梱プラグイン: 残高／累計（running total・縦の連鎖）
 
 `plugins/tss-running.js`＝「**前の行の結果 ＋ この行の増減**」で縦に積む列。`formula`（行内）でも `totals`（全体合計）でも出せない**縦方向の連鎖**を担う。出納帳/通帳の**残高**、在庫受払の**在庫数**、経費・ポイントの**累計**など。動く例: [`examples/running.html`](https://tssgrid.threestarsoftware.co.jp/examples/running.html)（現金出納帳＝入金・出金→残高）。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threestarsoftware/tssgrid",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "description": "軽量・ノービルド・日本語IME堅牢な編集グリッド（vanilla JS / 依存なし / MIT）。Excel ライクな入力画面を <script> タグ1本で。",
   "license": "MIT",
   "author": "ThreeStarSoftware (https://www.threestarsoftware.co.jp/)",

package/plugins/tss-datetime.css

@@ -0,0 +1,36 @@
+/* TssDatetime — 日付＋時刻 同時ピッカーのレイアウト。
+   カレンダー部は tss-calendar.css（.tss-cal-*）、時刻部は tss-time.css（.tss-time-*）のスタイルを再利用するので、
+   この3枚を読み込む（または .tss-dt 配下に必要分を内包）。ここは「合体ポップアップ」の枠だけ定義。 */
+.tss-dt {
+  --dt-bg: #fff;
+  --dt-fg: #222;
+  --dt-border: #c3ccd6;
+  --dt-accent: #2aa0d8;
+  --dt-radius: 8px;
+  --dt-font: 13px "Segoe UI", "Meiryo", sans-serif;
+
+  position: fixed; z-index: 10000; background: var(--dt-bg); color: var(--dt-fg);
+  border: 1px solid var(--dt-border); border-radius: var(--dt-radius);
+  box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: 8px; font: var(--dt-font); user-select: none; outline: none;
+}
+/* 選択中の値リードアウト＝標準の日時に無い「曜日」をここで必ず見せる */
+.tss-dt-readout { font-size: 13px; padding: 3px 6px 7px; margin-bottom: 4px; border-bottom: 1px dashed var(--dt-border); font-variant-numeric: tabular-nums; }
+.tss-dt-readout .tss-dt-ro-wd { color: var(--dt-accent); margin: 0 2px; }
+.tss-dt-readout .tss-dt-ro-empty { color: #99a; }
+
+.tss-dt-body { display: flex; gap: 12px; align-items: flex-start; }
+.tss-dt-time { padding-top: 2px; }
+.tss-dt-time-lbl { font-size: 11px; color: #889; margin: 0 0 4px 2px; }
+
+/* 合体ポップアップ内ではカレンダー/時刻の各ポップアップ枠（影・border・fixed）を無効化＝中身だけ使う */
+.tss-dt .tss-cal, .tss-dt .tss-time { position: static; box-shadow: none; border: 0; padding: 0; z-index: auto; }
+.tss-dt .tss-time-row { display: flex; align-items: center; gap: 4px; }
+.tss-dt .tss-time-row select { font: inherit; padding: 2px 4px; border: 1px solid var(--dt-border); border-radius: 5px; background: var(--dt-bg); color: var(--dt-fg); cursor: pointer; }
+.tss-dt .tss-time-sep { font-weight: 600; }
+
+.tss-dt-btns { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
+.tss-dt-btns .tss-dt-spacer { flex: 1 1 auto; }
+.tss-dt-btns button { font: inherit; padding: 4px 12px; border: 1px solid var(--dt-border); background: var(--dt-bg); color: var(--dt-fg); border-radius: 6px; cursor: pointer; }
+.tss-dt-btns button:hover { background: #eef4ff; }
+.tss-dt-btns .tss-dt-ok { border-color: var(--dt-accent); background: var(--dt-accent); color: #fff; }
+.tss-dt-btns .tss-dt-clear { color: #b6473e; }

package/plugins/tss-datetime.js

@@ -0,0 +1,183 @@
+/*! TssDatetime — 日付＋時刻を同時に設定するピッカー（TssGrid カスタムエディタ / 単体ウィジェット両用）
+ *  保存値は常に 'YYYY-MM-DDTHH:MM'（kintone DATETIME と相互変換しやすい正規形。表示は列 format で整形）。
+ *  使い方（グリッド）: columns: [{ type:'text', editor: TssDatetime({ step:5 }), format: TssDatetime.format }]
+ *  使い方（単体）   : TssDatetime({step:15}).openAt(anchorEl, 'YYYY-MM-DDTHH:MM', onPick)
+ *  opts: holidays / weekend / weekLabels / min / max（日付） / step(分刻み,既定1) / hour12 / icon(既定 '📅') / openOnClick(既定true) / className
+ */
+(function (root) {
+  'use strict';
+  function pad(n) { return String(n).padStart(2, '0'); }
+  function isoD(d) { return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()); }
+  function parseISOd(s) { var m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(s || '')); return m ? new Date(+m[1], +m[2] - 1, +m[3]) : null; }
+  // 'YYYY-MM-DD[ T]HH:MM'（時刻省略可）→ { d:Date, h:int|null, mi:int|null }
+  function parseDT(s) {
+    var m = /^(\d{4})-(\d{2})-(\d{2})(?:[ T](\d{1,2}):(\d{2}))?/.exec(String(s || '').trim());
+    if (!m) return null;
+    return { d: new Date(+m[1], +m[2] - 1, +m[3]), h: m[4] != null ? +m[4] : null, mi: m[5] != null ? +m[5] : null };
+  }
+  // 'HH:MM'（日付無し＝時刻のみ。kintone TIME フィールド互換）→ { h, m }
+  function parseTimeOnly(s) { var m = /^(\d{1,2}):(\d{2})$/.exec(String(s || '').trim()); if (!m) return null; var h = +m[1], mi = +m[2]; return (h <= 23 && mi <= 59) ? { h: h, m: mi } : null; }
+  function sameDay(a, b) { return !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); }
+  function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
+  var WD = ['日', '月', '火', '水', '木', '金', '土'];   // 既定の曜日ラベル（標準の日時に無い「曜日」を補う＝差別化点）
+
+  function TssDatetime(opts) {
+    opts = opts || {};
+    var holidays = opts.holidays || {};
+    var weekend = opts.weekend || [0, 6];
+    var weekLabels = opts.weekLabels || ['日', '月', '火', '水', '木', '金', '土'];
+    var step = Math.max(1, opts.step || 1);
+    var hour12 = !!opts.hour12;
+    var minD = parseISOd(opts.min), maxD = parseISOd(opts.max);
+    var holName = function (h) { return h == null ? null : (typeof h === 'object' ? h.name : h); };
+    var holType = function (h) { return (h && typeof h === 'object' && h.type) ? h.type : null; };
+    var ty = new Date().getFullYear();
+    var yrLo = opts.yearMin || (minD ? minD.getFullYear() : ty - 12);
+    var yrHi = opts.yearMax || (maxD ? maxD.getFullYear() : ty + 12);
+
+    var pop = null, view = null, selD = null, selH = null, selM = null, ref = null, done = false, outside = null;
+
+    function dDisabled(d) { if (minD && d < minD) return true; if (maxD && d > maxD) return true; return false; }
+
+    function calHTML() {
+      var y = view.getFullYear(), m = view.getMonth(), start = new Date(y, m, 1).getDay(), today = new Date();
+      var lo = Math.min(yrLo, y), hi = Math.max(yrHi, y), yrSel = '<select class="tss-cal-sel-yr" aria-label="年">';
+      for (var yy = lo; yy <= hi; yy++) yrSel += '<option value="' + yy + '"' + (yy === y ? ' selected' : '') + '>' + yy + '年</option>';
+      yrSel += '</select>';
+      var monSel = '<select class="tss-cal-sel-mon" aria-label="月">';
+      for (var mm = 0; mm < 12; mm++) monSel += '<option value="' + mm + '"' + (mm === m ? ' selected' : '') + '>' + (mm + 1) + '月</option>';
+      monSel += '</select>';
+      var html = '<div class="tss-cal-head">'
+        + '<button type="button" class="tss-cal-nav" data-nav="-1" aria-label="前の月">‹</button>'
+        + '<span class="tss-cal-sels">' + yrSel + monSel + '</span>'
+        + '<button type="button" class="tss-cal-nav" data-nav="1" aria-label="次の月">›</button></div>'
+        + '<div class="tss-cal-grid">';
+      for (var w = 0; w < 7; w++) { var wc = w === 0 ? ' tss-cal-sun' : (w === 6 ? ' tss-cal-sat' : ''); html += '<div class="tss-cal-wl' + wc + '">' + esc(weekLabels[w]) + '</div>'; }
+      var d = new Date(y, m, 1 - start);
+      for (var i = 0; i < 42; i++) {
+        var cls = 'tss-cal-day', dow = d.getDay(), k = isoD(d), h = holidays[k], nm = holName(h), tp = holType(h);
+        if (d.getMonth() !== m) cls += ' tss-cal-other';
+        if (dow === 0) cls += ' tss-cal-sun'; else if (dow === 6) cls += ' tss-cal-sat';
+        if (h) { cls += ' tss-cal-holiday'; if (tp) cls += ' tss-cal-hol-' + tp; }
+        if (sameDay(d, today)) cls += ' tss-cal-today';
+        if (sameDay(d, selD)) cls += ' tss-cal-sel';
+        if (dDisabled(d)) cls += ' tss-cal-disabled';
+        html += '<div class="' + cls + '" data-d="' + k + '"' + (nm ? ' title="' + esc(nm) + '"' : '') + '>' + d.getDate() + '</div>';
+        d.setDate(d.getDate() + 1);
+      }
+      return html + '</div>';
+    }
+    function timeHTML() {
+      var hSel = '<select class="tss-time-h" aria-label="時"><option value=""></option>';
+      if (hour12) { for (var i = 1; i <= 12; i++) { var d24 = (selH == null) ? null : ((selH % 12) || 12); hSel += '<option value="' + i + '"' + (d24 === i ? ' selected' : '') + '>' + i + '</option>'; } }
+      else { for (var j = 0; j <= 23; j++) hSel += '<option value="' + j + '"' + (selH === j ? ' selected' : '') + '>' + pad(j) + '</option>'; }
+      hSel += '</select>';
+      var mins = []; for (var k = 0; k < 60; k += step) mins.push(k);
+      if (selM != null && mins.indexOf(selM) < 0) { mins.push(selM); mins.sort(function (a, b) { return a - b; }); }
+      var mSel = '<select class="tss-time-m" aria-label="分"><option value=""></option>';
+      for (var n = 0; n < mins.length; n++) mSel += '<option value="' + mins[n] + '"' + (selM === mins[n] ? ' selected' : '') + '>' + pad(mins[n]) + '</option>';
+      mSel += '</select>';
+      var aSel = '';
+      if (hour12) { var pm = selH != null && selH >= 12; aSel = '<select class="tss-time-ap" aria-label="午前/午後"><option value="AM"' + (!pm ? ' selected' : '') + '>AM</option><option value="PM"' + (pm ? ' selected' : '') + '>PM</option></select>'; }
+      return '<div class="tss-dt-time-lbl">時刻</div><div class="tss-time-row">' + hSel + '<span class="tss-time-sep">:</span>' + mSel + aSel + '</div>';
+    }
+    function readoutHTML() {
+      var hasT = selH != null || selM != null;
+      var t = hasT ? pad(selH == null ? 0 : selH) + ':' + pad(selM == null ? 0 : selM) : '';
+      if (!selD) return hasT ? '<b class="tss-dt-ro-wd">' + t + '</b><span class="tss-dt-ro-empty">（日付なし）</span>' : '<span class="tss-dt-ro-empty">日付/時刻を選択</span>';
+      var wd = (opts.weekLabels || WD)[selD.getDay()];
+      return isoD(selD).replace(/-/g, '/') + '<b class="tss-dt-ro-wd">(' + esc(wd) + ')</b>' + (hasT ? ' ' + t : '');
+    }
+    function render() {
+      pop.innerHTML = '<div class="tss-dt-readout">' + readoutHTML() + '</div>'
+        + '<div class="tss-dt-body"><div class="tss-dt-cal">' + calHTML() + '</div><div class="tss-dt-time">' + timeHTML() + '</div></div>'
+        + '<div class="tss-dt-btns"><button type="button" class="tss-dt-clear">クリア</button><span class="tss-dt-spacer"></span>'
+        + '<button type="button" class="tss-dt-now">現在</button><button type="button" class="tss-dt-ok">決定</button></div>';
+    }
+    function readTime() {
+      var hS = pop.querySelector('.tss-time-h'), mS = pop.querySelector('.tss-time-m'), aS = pop.querySelector('.tss-time-ap');
+      selH = hS && hS.value !== '' ? +hS.value : null;
+      selM = mS && mS.value !== '' ? +mS.value : null;
+      if (hour12 && aS && selH != null) { selH = aS.value === 'PM' ? (selH === 12 ? 12 : selH + 12) : (selH === 12 ? 0 : selH); }
+    }
+    function value() {
+      readTime();
+      var hasT = selH != null || selM != null;
+      var t = hasT ? pad(selH == null ? 0 : selH) + ':' + pad(selM == null ? 0 : selM) : '';
+      if (selD && hasT) return isoD(selD) + 'T' + t;   // 日付＋時刻
+      if (selD) return isoD(selD);                      // 日付のみ
+      if (hasT) return t;                               // 時刻のみ（日付無し＝'HH:MM'）
+      return '';
+    }
+    function place(anchor) {
+      var r = anchor.getBoundingClientRect();
+      pop.style.left = Math.max(2, Math.min(r.left, window.innerWidth - pop.offsetWidth - 6)) + 'px';
+      var top = r.bottom + 2;
+      if (top + pop.offsetHeight > window.innerHeight) top = Math.max(2, r.top - pop.offsetHeight - 2);
+      pop.style.top = top + 'px';
+    }
+    function onClick(e) {
+      var t = e.target;
+      var nav = t.getAttribute && t.getAttribute('data-nav');
+      if (nav) { view = new Date(view.getFullYear(), view.getMonth() + (+nav), 1); render(); return; }
+      var dd = t.getAttribute && t.getAttribute('data-d');
+      if (dd) { readTime(); var d = parseISOd(dd); if (!dDisabled(d)) { selD = d; render(); } return; }   // 日付選択しても閉じない（時刻も決めるため）
+      if (t.classList.contains('tss-dt-now')) { var now = new Date(); selD = now; selH = now.getHours(); selM = Math.round(now.getMinutes() / step) * step; if (selM >= 60) selM = 60 - step; view = new Date(now.getFullYear(), now.getMonth(), 1); render(); return; }
+      if (t.classList.contains('tss-dt-clear')) { commit(''); return; }
+      if (t.classList.contains('tss-dt-ok')) { commit(value()); return; }
+    }
+    function onChange(e) {
+      var t = e.target;
+      if (t.classList.contains('tss-cal-sel-yr')) { view = new Date(+t.value, view.getMonth(), 1); render(); }
+      else if (t.classList.contains('tss-cal-sel-mon')) { view = new Date(view.getFullYear(), +t.value, 1); render(); }
+      else if (t.classList.contains('tss-time-h') || t.classList.contains('tss-time-m') || t.classList.contains('tss-time-ap')) { readTime(); var ro = pop.querySelector('.tss-dt-readout'); if (ro) ro.innerHTML = readoutHTML(); }
+    }
+    function onKey(e) {
+      if (e.key === 'Escape') { e.preventDefault(); cancel(); }
+      else if (e.key === 'Enter') { e.preventDefault(); commit(value()); }
+    }
+    function show(anchor, val, onPick, onCancel) {
+      done = false;
+      var p = parseDT(val), tp = p ? null : parseTimeOnly(val);   // 日付付き or 時刻のみ
+      selD = p ? p.d : null;
+      selH = p ? p.h : (tp ? tp.h : null);
+      selM = p ? p.mi : (tp ? tp.m : null);
+      view = selD ? new Date(selD.getFullYear(), selD.getMonth(), 1) : new Date();
+      pop = document.createElement('div'); pop.className = 'tss-dt' + (opts.className ? ' ' + opts.className : ''); pop.tabIndex = -1;
+      document.body.appendChild(pop);
+      pop.addEventListener('mousedown', function (e) { if (e.target.tagName !== 'SELECT') e.preventDefault(); });   // フォーカスを奪わない（select 除く）
+      pop.addEventListener('click', onClick);
+      pop.addEventListener('change', onChange);
+      pop.addEventListener('keydown', onKey);
+      render(); place(anchor);
+      ref = { pick: onPick, cancel: onCancel };
+      outside = function (e) { if (pop && !pop.contains(e.target) && !(anchor && anchor.contains && anchor.contains(e.target))) commit(value()); };   // 外側クリックは確定（time と同方針）
+      setTimeout(function () { document.addEventListener('mousedown', outside, true); }, 0);
+      pop.focus();
+    }
+    function teardown() { if (outside) { document.removeEventListener('mousedown', outside, true); outside = null; } if (pop) { pop.remove(); pop = null; } }
+    function commit(v) { if (done) return; done = true; var f = ref.pick; teardown(); f(v); }
+    function cancel() { if (done) return; done = true; var f = ref.cancel; teardown(); if (f) f(); }
+
+    return {
+      open: function (ctx) { show(ctx.td, ctx.value, function (v) { ctx.commit(v); }, function () { ctx.cancel(); }); },
+      close: function () { teardown(); },
+      icon: opts.icon != null ? opts.icon : '📅',
+      openOnClick: opts.openOnClick !== false,
+      openAt: function (anchorEl, val, onPick) { show(anchorEl, val, function (v) { onPick(v); }, null); },
+    };
+  }
+
+  // 表示整形ヘルパ: 'YYYY-MM-DDTHH:MM' → 'YYYY/MM/DD(曜) HH:MM'（列 format に渡せる）。
+  // 標準の日時表示で空欄になる「曜日」を必ず埋める＝本プラグインの目玉。weekday:false で曜日を消せる。
+  TssDatetime.format = function (v, o) {
+    var p = parseDT(v);
+    if (!p) return parseTimeOnly(v) ? v : (v || '');   // 時刻のみ('HH:MM')はそのまま表示／不正値は素通し
+    var d = p.d, wd = (o && o.weekday === false) ? '' : '(' + (o && o.weekLabels || WD)[d.getDay()] + ')';
+    var t = (p.h != null) ? ' ' + pad(p.h) + ':' + pad(p.mi == null ? 0 : p.mi) : '';
+    return d.getFullYear() + '/' + pad(d.getMonth() + 1) + '/' + pad(d.getDate()) + wd + t;
+  };
+
+  if (typeof module !== 'undefined' && module.exports) module.exports = TssDatetime;
+  else root.TssDatetime = TssDatetime;
+})(typeof self !== 'undefined' ? self : this);

package/plugins/tss-sum.js

@@ -0,0 +1,111 @@
+/*! TssSum — 条件付き合計グリッドの軽量プラグイン。
+ *
+ *  tss-totals との住み分け: tss-totals は「列ごとの集計（sum/avg/min/max/count）」を onTotals で返す。
+ *  tss-sum は「同じ列を条件別に複数集計＝ラベル付きの"合計行"（小計/消費税10%/消費税8%/合計 など）」＋
+ *  ソースと整列した表示グリッドまで担う（per-column キーでは消費税10%と8%が衝突するため別抽象が要る）。
+ *
+ *  ソースグリッドと「同一の列構成」の readonly 集計グリッドを作るので、金額列の幾何を共有し
+ *  画面でも印刷でも値が縦にピッタリ揃う。各合計行は宣言で（条件＋対象）または派生で定義する。
+ *  ソースの onAfterChange / onStructureChange を包んで自動で再計算する。
+ *
+ *  使い方:
+ *    const sum = TssSum.attach(grid, document.getElementById('sumgrid'), {
+ *      rows: [
+ *        { label: '小計（税抜）',  of: r => (+r[2]||0)*(+r[3]||0) },                                  // 全データ行の合計
+ *        { label: '消費税（10%）', when: r => r[4]==='10%', of: r => Math.round((+r[2]||0)*(+r[3]||0)*0.10) }, // 条件付き
+ *        { label: '消費税（8%）',  when: r => r[4]==='8%',  of: r => Math.round((+r[2]||0)*(+r[3]||0)*0.08) },
+ *        { label: '合計（税込）',  total: v => v[0]+v[1]+v[2] },                                      // 既出行から派生
+ *      ],
+ *      format: v => '¥' + Number(v).toLocaleString('ja-JP'),
+ *      onCompute: vals => { ... },   // 計算後フック（上部の総額表示など）
+ *    });
+ *    sum.refresh();   // 手動再計算 / sum.detach();   // フック解除＋集計グリッド破棄
+ *
+ *  行の定義:
+ *    { label, when?(row)->bool, of(row)->number }  … when に一致するデータ行で of(row) を合計（when 省略＝全行）
+ *    { label, total(priorValues[])->number }        … それまでの行の値配列から派生（小計＋税 など）
+ *  opts: rows(必須) / valueCol(既定=最終列) / sumCol(of 省略時に合計する列) / format / rowHeight(既定28)
+ *        / onCompute(vals) / name / TssGrid(モジュール利用時にコンストラクタを注入)
+ *  返り値: { grid, refresh, detach }
+ *  注意: ラベルの横結合に window.TssMerge を使う（無ければラベルは先頭列のみ）。集計グリッドは表示専用。
+ */
+(function (root) {
+  'use strict';
+
+  function TssSum() { /* 名前空間。attach を使う */ }
+
+  TssSum.attach = function (source, mountEl, opts) {
+    opts = opts || {};
+    var Grid = opts.TssGrid || root.TssGrid;
+    if (!Grid) throw new Error('TssSum: TssGrid が見つかりません（opts.TssGrid で渡してください）');
+    var rows = opts.rows || [];
+    var COLS = source.COLS;
+    var valueCol = (opts.valueCol != null) ? opts.valueCol : COLS - 1;
+    var fmt = opts.format || function (v) { return v; };
+
+    // ソースと同じ列幅・行ヘッダ・全体幅でミラー（＝金額列が揃う）。全セル readonly。
+    var columns = [];
+    for (var c = 0; c < COLS; c++) {
+      var col = { width: source._colWidth(c), readOnly: true };
+      if (c === valueCol) { col.align = 'right'; col.format = fmt; }
+      columns.push(col);
+    }
+    var data = rows.map(function (spec) {
+      var r = new Array(COLS).fill('');
+      r[0] = (spec.label != null) ? spec.label : '';   // ラベルは先頭列（アンカー）
+      return r;
+    });
+    var plugins = [];
+    if (root.TssMerge && valueCol > 1) {   // ラベルを valueCol の手前まで横結合
+      plugins.push(root.TssMerge.plugin({
+        merges: rows.map(function (_, r) { return { r: r, c: 0, colspan: valueCol }; }),
+      }));
+    }
+    var tg = new Grid(mountEl, {
+      name: opts.name || (source.name ? source.name + '-sum' : 'sum'),
+      width: source.width, rowHeight: opts.rowHeight || 28,
+      rowHeaders: source.rowHeaders, colHeaders: false,
+      columns: columns, data: data, plugins: plugins,
+    });
+
+    function num(v) { return Number(v) || 0; }
+    function refresh() {
+      var src = source.data, vals = [];
+      for (var i = 0; i < rows.length; i++) {
+        var spec = rows[i], v;
+        if (typeof spec.total === 'function') {
+          v = spec.total(vals.slice());
+        } else {
+          v = 0;
+          for (var k = 0; k < src.length; k++) {
+            var row = src[k];
+            if (spec.when && !spec.when(row)) continue;
+            v += spec.of ? num(spec.of(row)) : num(row[(opts.sumCol != null) ? opts.sumCol : valueCol]);
+          }
+        }
+        vals[i] = v;
+        tg.data[i][valueCol] = String(v);
+      }
+      tg.buildTable();
+      if (opts.onCompute) { try { opts.onCompute(vals.slice()); } catch (e) {} }
+    }
+
+    // ソースの変更フックを包んで自動再計算（既存ハンドラは温存）
+    var origAC = source.onAfterChange, origSC = source.onStructureChange;
+    source.onAfterChange = function () { if (origAC) origAC.apply(this, arguments); refresh(); };
+    source.onStructureChange = function () { if (origSC) origSC.apply(this, arguments); refresh(); };
+    refresh();
+
+    return {
+      grid: tg,
+      refresh: refresh,
+      detach: function () {
+        source.onAfterChange = origAC; source.onStructureChange = origSC;
+        if (tg.destroy) tg.destroy();
+      },
+    };
+  };
+
+  if (typeof module === 'object' && module.exports) module.exports = TssSum;
+  root.TssSum = TssSum;
+})(typeof window !== 'undefined' ? window : this);

package/src/tssgrid.css

@@ -60,6 +60,12 @@
   border-right: 1px solid var(--tg-border); border-bottom: 1px solid var(--tg-border); padding: 0 6px;
   font-size: var(--tg-font-size); box-sizing: border-box; white-space: nowrap; overflow: hidden;
 }
+/* 外周の二重線を解消＝最終行の下罫線・最終列の右罫線は描かない（外枠は .tg-wrap の単線が担当）。
+   右下だけ「セル罫線＋枠線」が重なって昔のHTMLTable風に見えるのを防ぐ＝上下左右が均一な単線になる。 */
+.tssgrid .tg-table tr:last-child > td,
+.tssgrid .tg-table tr:last-child > th { border-bottom: none; }
+.tssgrid .tg-table tr > td:last-child,
+.tssgrid .tg-table tr > th:last-child { border-right: none; }
 .tssgrid .tg-table th { background: var(--tg-colheader-bg); color: var(--tg-header-fg); font-weight: 600; text-align: center; }
 /* z-index 階層（.tg-wrap 内）: 通常セル 0 < 本体sticky(rowhead/frozen) 2 < 選択オーバーレイ 3
    < editor/select 4 < fillhandle 5 < ヘッダ thead 6 < 角/固定列ヘッダ 7 < リサイズ線 8。

package/src/tssgrid.js

@@ -148,6 +148,7 @@
       this.mode = 'nav'; this.dragging = false; this.filling = null;
       this.pendingCut = null;
       this.headerDrag = null; this._colAnchor = 0; this._rowAnchor = 0;  // 行/列ヘッダ選択
+      this._headerSel = null;   // 'col'/'row'/'all'=列/行/全選択モード（結合に拡張せず実列/行にクランプ＝Excel流）。null=通常セル選択
       // リサイズ（列幅・行高）
       // 列幅 colW[c]=px（未指定は既定）。指定方法は3通り、優先度＝実行時リサイズ/明示colW > columns[c].width > 既定:
       //  1) colWidths: [px, …]            … 位置指定（従来）
@@ -210,6 +211,7 @@
       this.minSpareRows = opts.minSpareRows | 0;     // 末尾に常に確保する空行数
       this.autoWrapRow = !!opts.autoWrapRow;         // Tab で行末→次行頭に折り返し
       this.autoWrapCol = !!opts.autoWrapCol;         // Enter で列末→次列頭に折り返し
+      this.navSkipReadOnly = !!opts.navSkipReadOnly; // Tab/Enter 送りで readonly セルを飛ばす（伝票入力向け＝編集する所だけ移動）
       // 行/列数の下限・上限（挿入/削除の境界。min は初期パディングにも使う）
       this.minRows = opts.minRows | 0; this.maxRows = opts.maxRows | 0;
       this.minCols = opts.minCols | 0; this.maxCols = opts.maxCols | 0;
@@ -1266,10 +1268,20 @@
       this._clipOverlay(elem, R.left, R.top, c, r);
     }
     placeRect(elem, r0, c0, r1, c1) {
-      const A = this._cellRectAuto(r0, c0), B = this._cellRectAuto(r1, c1);
-      elem.style.left = A.left + 'px'; elem.style.top = A.top + 'px';
-      elem.style.width = (B.left + B.width - A.left) + 'px'; elem.style.height = (B.top + B.height - A.top) + 'px';
-      this._clipOverlay(elem, A.left, A.top, c0, r0);
+      const L = this._colLefts, T = this._rowTops;
+      let left, top, w, h;
+      // 列/行/全選択(_headerSel)時は、角セルの結合アンカー解決で枠が範囲外へ膨らむのを避け、
+      // 列左/行上の累積で「実列/行ピッタリ」にクランプ（非固定領域のみ。固定行列が絡む場合は従来へフォールバック）。
+      if (this._headerSel && L && T && r0 >= this.frozenRows && c0 >= this.frozenCols) {
+        left = L[c0]; top = T[r0];
+        w = L[Math.min(c1 + 1, this.COLS)] - left; h = T[Math.min(r1 + 1, this.ROWS)] - top;
+      } else {
+        const A = this._cellRectAuto(r0, c0), B = this._cellRectAuto(r1, c1);
+        left = A.left; top = A.top; w = B.left + B.width - A.left; h = B.top + B.height - A.top;
+      }
+      elem.style.left = left + 'px'; elem.style.top = top + 'px';
+      elem.style.width = w + 'px'; elem.style.height = h + 'px';
+      this._clipOverlay(elem, left, top, c0, r0);
     }
     // ---- 幾何キャッシュ（step2: DOM非依存幾何の土台）----
     // buildTable / _reflow で1回だけ実測して列左・行上の累積を作る。
@@ -1340,7 +1352,14 @@
       for (let r = r0; r <= r1; r++) { const th = this.table.querySelector('th.rowhead[data-r="' + r + '"]'); if (th) th.classList.add('selhdr'); }
       this.wrap.style.setProperty('--tg-selhdr-fg', this._selhdrTextColor());   // 選択ヘッダ文字色を背景輝度から自動（暗背景→白）
       if (r0 === r1 && c0 === c1) return;
-      for (let r = r0; r <= r1; r++) for (let c = c0; c <= c1; c++) this.cellEl(r, c).classList.add('sel');
+      const clampMerge = this._headerSel && this._merges;   // 列/行選択では「範囲に収まらない結合」は塗らない（帯を塗り広げない）
+      for (let r = r0; r <= r1; r++) for (let c = c0; c <= c1; c++) {
+        if (clampMerge) {
+          const a = this._anchorOf(r, c), mc1 = a.c + this._colspanAt(a.r, a.c) - 1, mr1 = a.r + this._rowspanAt(a.r, a.c) - 1;
+          if (a.r < r0 || mr1 > r1 || a.c < c0 || mc1 > c1) continue;   // 結合が選択範囲に収まらない＝塗らない
+        }
+        this.cellEl(r, c).classList.add('sel');
+      }
     }
     // 選択ヘッダの文字色を --tg-selhdr-bg の輝度から自動決定（暗背景→白／明背景→濃紺）。
     // 既定の明るい選択色は従来どおり濃紺、暗い選択ヘッダ（slate等）でも文字が読める。buildTable でキャッシュ破棄。
@@ -1416,6 +1435,7 @@
       const a = { r: this.clampR(r), c: this._snapVisCol(this.clampC(c)) };   // 隠し列にはカーソルを置かない
       if (this._merges) { const an = this._anchorOf(a.r, a.c); a.r = an.r; a.c = an.c; }   // 結合内はアンカーへ
       if (!this._beforeSel(a, a)) return;
+      this._headerSel = null;
       this.active = a; this.extent = { ...a };
       this.place(this.editor, this.activeTd()); this.toNav(); this.editor.focus(); this.updateSelectionUI();
       this.activeTd().scrollIntoView({ block: 'nearest', inline: 'nearest' });
@@ -1431,6 +1451,7 @@
     selectRect(r0, c0, r1, c1) {
       const a = { r: r0, c: c0 }, e = { r: r1, c: c1 };
       if (!this._beforeSel(a, e)) return;
+      this._headerSel = null;
       this.active = a; this.extent = e;
       this.place(this.editor, this.activeTd()); this.toNav(); this.editor.focus(); this.updateSelectionUI();
       this._fireSelection();
@@ -1443,12 +1464,12 @@
     }
 
     // ---- 行 / 列 / 全体 の選択（ヘッダクリック） ----
-    selectCol(c) { c = this.clampC(c); this._colAnchor = c; this.selectRect(0, c, this.ROWS - 1, c); }
-    selectRow(r) { r = this.clampR(r); this._rowAnchor = r; this.selectRect(r, 0, r, this.COLS - 1); }
-    selectAll() { this._colAnchor = 0; this._rowAnchor = 0; this.selectRect(0, 0, this.ROWS - 1, this.COLS - 1); }
-    _extendCol(c) { const a = { r: 0, c: this._colAnchor }, e = { r: this.ROWS - 1, c: this.clampC(c) }; if (!this._beforeSel(a, e)) return; this.active = a; this.extent = e;
+    selectCol(c) { c = this.clampC(c); this._colAnchor = c; this.selectRect(0, c, this.ROWS - 1, c); this._headerSel = 'col'; this.updateSelectionUI(); }
+    selectRow(r) { r = this.clampR(r); this._rowAnchor = r; this.selectRect(r, 0, r, this.COLS - 1); this._headerSel = 'row'; this.updateSelectionUI(); }
+    selectAll() { this._colAnchor = 0; this._rowAnchor = 0; this.selectRect(0, 0, this.ROWS - 1, this.COLS - 1); this._headerSel = 'all'; this.updateSelectionUI(); }
+    _extendCol(c) { const a = { r: 0, c: this._colAnchor }, e = { r: this.ROWS - 1, c: this.clampC(c) }; if (!this._beforeSel(a, e)) return; this._headerSel = 'col'; this.active = a; this.extent = e;
       this.place(this.editor, this.activeTd()); this.toNav(); this.updateSelectionUI(); this._fireSelection(); }
-    _extendRow(r) { const a = { r: this._rowAnchor, c: 0 }, e = { r: this.clampR(r), c: this.COLS - 1 }; if (!this._beforeSel(a, e)) return; this.active = a; this.extent = e;
+    _extendRow(r) { const a = { r: this._rowAnchor, c: 0 }, e = { r: this.clampR(r), c: this.COLS - 1 }; if (!this._beforeSel(a, e)) return; this._headerSel = 'row'; this.active = a; this.extent = e;
       this.place(this.editor, this.activeTd()); this.toNav(); this.updateSelectionUI(); this._fireSelection(); }
     // ---- 列幅 / 行高 のリサイズ ----
     setColWidth(c, w) {
@@ -1844,8 +1865,8 @@
       if (td) {
         const r = +td.dataset.r, c = +td.dataset.c, s = this.rectRange();
         if (!(r >= s.r0 && r <= s.r1 && c >= s.c0 && c <= s.c1)) this.setActive(r, c);
-      } else if (th.dataset.c != null) this.selectCol(+th.dataset.c);
-      else if (th.dataset.r != null) this.selectRow(+th.dataset.r);
+      } else if (th.dataset.c != null) { const c = +th.dataset.c, s = this.rectRange(); if (!(c >= s.c0 && c <= s.c1)) this.selectCol(c); }   // 既存選択の中なら維持（複数列右クリックで解除しない）
+      else if (th.dataset.r != null) { const r = +th.dataset.r, s = this.rectRange(); if (!(r >= s.r0 && r <= s.r1)) this.selectRow(r); }   // 同上（複数行）
       this._showMenu(e.clientX, e.clientY);
     }
     // 既定のメニュー項目キー（allow フラグ・copyPaste で出し分け）。
@@ -2366,17 +2387,26 @@
       let [dr, dc] = D[dir] || D.down;
       if (reverse) { dr = -dr; dc = -dc; }
       let r = this.active.r, c = this.active.c;
-      if (dc !== 0) {   // 横移動は隠し列をスキップ＋結合幅を跨ぐ
-        const nc = this._stepColM(r, c, dc > 0 ? 1 : -1);
-        if (nc !== c) c = nc;
-        else if (this.autoWrapRow) { c = dc > 0 ? this._firstVisCol() : this._lastVisCol(); r += dc > 0 ? 1 : -1; }
-      }
-      if (dr !== 0) {
-        r = this._stepRowM(r, c, dr > 0 ? 1 : -1);   // 縦移動は結合高を跨ぐ
-        if (this.autoWrapCol) {   // 縦の端で列送り（送り先も可視列）
-          if (r >= this.ROWS) { r = 0; c = this._stepVisCol(c, 1); }
-          else if (r < 0) { r = this.ROWS - 1; c = this._stepVisCol(c, -1); }
+      // navSkipReadOnly 時は readonly セルを飛ばして次の編集可能セルまで送る（伝票入力向け）。
+      // OFF 時はループは1回で抜け＝従来挙動と完全同一（回帰ゼロ）。
+      for (let g = 0, lim = this.ROWS * this.COLS + 2; g < lim; g++) {
+        let nr = r, nc = c;
+        if (dc !== 0) {   // 横移動は隠し列をスキップ＋結合幅を跨ぐ
+          const stepc = this._stepColM(r, c, dc > 0 ? 1 : -1);
+          if (stepc !== c) nc = stepc;
+          else if (this.autoWrapRow) { nc = dc > 0 ? this._firstVisCol() : this._lastVisCol(); nr = r + (dc > 0 ? 1 : -1); }
+        }
+        if (dr !== 0) {
+          nr = this._stepRowM(r, c, dr > 0 ? 1 : -1);   // 縦移動は結合高を跨ぐ
+          if (this.autoWrapCol) {   // 縦の端で列送り（送り先も可視列）
+            if (nr >= this.ROWS) { nr = 0; nc = this._stepVisCol(c, 1); }
+            else if (nr < 0) { nr = this.ROWS - 1; nc = this._stepVisCol(c, -1); }
+          }
         }
+        if (nr === r && nc === c) break;                                       // 端で動かない＝終了
+        r = nr; c = nc;
+        if (r < 0 || r >= this.ROWS || c < 0 || c >= this.COLS) break;          // 範囲外＝setActive のクランプに委ねる
+        if (!this.navSkipReadOnly || !this._isReadOnly(r, c)) break;            // skip無効 or readonly でない＝確定
       }
       this.setActive(r, c);
     }
@@ -2391,7 +2421,11 @@
         if (composing) return;
         if (e.key === 'Enter') { e.preventDefault(); this.commit(); this._advance('enter', e.shiftKey); return; }
         if (e.key === 'Tab') { e.preventDefault(); this.commit(); this._advance('tab', e.shiftKey); return; }
-        if (e.key === 'Escape') {
+        // Esc／編集中の Ctrl+Z ＝ この編集をキャンセルして元値に戻す（nav へ）。
+        // input ベース編集では「打ち始め」時に元値が input に入らないためネイティブ undo では元値に戻せない。
+        // ここで元値（this.data[r][c]＝未確定）に戻す＝Excel流。続けて Ctrl+Z すると nav の history.undo で前の確定操作へ連鎖。
+        const ctrl = e.ctrlKey || e.metaKey;
+        if (e.key === 'Escape' || (ctrl && !e.shiftKey && e.key.toLowerCase() === 'z')) {
           e.preventDefault();
           const r = this.active.r, c = this.active.c, v = this.data[r][c];
           if (this.onEditEnd) { try { this.onEditEnd({ r, c, oldValue: v, newValue: v, canceled: true }); } catch (_) {} }