@threestarsoftware/tssgrid 0.1.6 → 0.1.7

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
 数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
 
+## [0.1.7] - 2026-08-01
+
+### 追加
+- **`format` に第3引数 `row`（その行の値配列＝`grid.data[r]`）**（コア）— `format(value, { r, c }, row)` の第3引数 `row` を追加（`options` の `(r, row)` と同形）。**行の状態でセル内容（ボタン/アイコン等）を出し分ける**時、`format` の中で `grid` を参照せず `row[列index]` から状態を読める＝**初回描画（`const grid = new TssGrid(...)` の構築中に `format` が走る時点で `grid` 未代入＝TDZ で例外）を回避**できる。既存の2引数 `format` はそのまま（後方互換）。
+- **`examples/cell-button.html` を「行の状態で切替」に刷新**＋**`examples/file-upload.html` を追加**（コア無改修のサンプル）— 前者は 未申請/申請中/編集中 で出すボタンを切替（申請/コピー・編集/削除・保存/取消）、click 委譲で状態遷移→`redraw`、複製・削除も。後者は**行ごとのファイル添付**（セル内ボタン＋ドラッグ&ドロップ／落とした行を `closest('tr[data-r]')` で特定して `setValue`）。
+
 ## [0.1.6] - 2026-07-30
 
 ### 追加

package/README.md

@@ -286,18 +286,27 @@ onAfterChange: (chs) => chs.forEach(ch => { if (ch.c === 0 && ch.oldValue !== ch
 
 ### セル内ボタン（`html:true` ＋ クリック委譲）
 
-専用のボタン列 API はありません。**`columns[c].html:true` ＋ `format` が返す HTML** でセルにボタンを描き、**`grid.table` に click 委譲**して `data-*` で拾うのが定石です（→ 動く例: [`examples/cell-button.html`](https://tssgrid.threestarsoftware.co.jp/examples/cell-button.html)）。
+専用のボタン列 API はありません。**`columns[c].html:true` ＋ `format` が返す HTML** でセルにボタンを描き、**`grid.table` に click 委譲**して `data-*` で拾うのが定石です。**行の状態でボタンを出し分け**たいときは、状態を**列に持たせて** `format` の**第3引数 `row`（その行の値配列）**から読みます（→ 動く例: [`examples/cell-button.html`](https://tssgrid.threestarsoftware.co.jp/examples/cell-button.html)＝未申請/申請中/編集中でボタン切替）。
 
 ```js
-columns: [ /* … */,
-  { html:true, readOnly:true, format: () => '<button class="mybtn" data-act="del">削除</button>' } ]
+// format の引数は (value, { r, c }, row)。row = その行の値配列（grid.data[r]）
+columns: [ /* …, 状態列(index 2), … */,
+  { html:true, readOnly:true, format: (_v, _cell, row) => {
+    const st = row[2];                       // 状態を「行の値配列」から読む（grid は参照しない）
+    if (st === '編集中') return '<button class="mybtn" data-act="save">保存</button>';
+    if (st === '申請中') return '<button class="mybtn" data-act="edit">編集</button>';
+    return '<button class="mybtn" data-act="submit">申請</button>';
+  } } ]
 grid.table.addEventListener('click', e => {
   const b = e.target.closest('.mybtn'); if (!b) return;
   const r = +b.closest('tr[data-r]').dataset.r;
-  if (b.dataset.act === 'del') grid.deleteRows(r, r);
+  grid.setValue(r, '状態', '申請中', true);   // 状態遷移（readOnly列は force=true）
+  grid.redraw();                             // ← format 再実行でボタンが変わる
 });
 ```
-- ボタン列は `readOnly:true` にして編集モードに入らないように。行番号は `closest('tr[data-r]')` から。**`html:true` はエスケープを外す**ので、ラベルにユーザー入力を入れる時は自分でエスケープを（XSS 責任は HTML 提供側）。空セルでも `format` は走ります（飾り列を全行に描ける）。
+- ボタン列は `readOnly:true` にして編集モードに入らないように。行番号は `closest('tr[data-r]')` から。空セルでも `format` は走ります（飾り列を全行に描ける）。
+- **⚠️ 初回描画は `new TssGrid(...)` の構築中に走る**ので、`format` の中で **`grid` 変数を参照しない**（まだ未代入＝TDZ で例外）。状態は**第3引数 `row`** から読むのが安全（`grid.getValue` を使いたくなるが初回で落ちる）。状態を変えたら **`grid.redraw()`** で `format` を再実行してボタンを更新します。
+- **`html:true` はエスケープを外す**ので、ラベルにユーザー入力を入れる時は自分でエスケープを（XSS 責任は HTML 提供側）。
 
 ### 非破壊フィルタ（`filter` / `clearFilter`）
 

package/package.json

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

package/src/tssgrid.d.ts

@@ -65,8 +65,10 @@ export interface ColumnDef {
   editor?: EditorDef | (() => EditorDef);
   /** 入力の正規化（保存値へ変換）。 */
   parse?: (input: string, cell: CellCoord) => any;
-  /** 表示の整形（保存値→表示）。文字列 or 宣言的 CellFormat。 */
-  format?: string | object | ((value: any, cell: CellCoord) => string);
+  /** 表示の整形（保存値→表示）。文字列 or 宣言的 CellFormat or 関数。
+   *  関数は `(value, { r, c }, row)`＝第3引数 `row` はその行の値配列（`grid.data[r]`・options と同形）。
+   *  html:true 併用でセル内にボタン/アイコン等の HTML を描ける（空セルでも実行される）。 */
+  format?: string | object | ((value: any, cell: CellCoord, row: any[]) => string);
   /** 数値型: 千区切り表示。 */
   thousands?: boolean;
   /** 数値型: 接頭辞（例 '¥'）。 */

package/src/tssgrid.js

@@ -1093,7 +1093,7 @@
       const cfg = this.colCfg(c), v = this.data[r][c];
       if (v === '') return v;
       if (typeof cfg.format === 'function') {
-        try { const out = cfg.format(v, { r, c }); return out == null ? '' : String(out); } catch (_) { return v; }
+        try { const out = cfg.format(v, { r, c }, this.data[r]); return out == null ? '' : String(out); } catch (_) { return v; }   // 第3引数=その行の値配列（options と同形）
       }
       if (typeof cfg.format === 'string') return TssGrid._applyDatePattern(v, cfg.format);  // 日付パターン表示
       if (cfg.type === 'number') return TssGrid._formatNumber(v, cfg);  // 数値書式（カンマ/小数/前後綴り）
@@ -1128,7 +1128,7 @@
       // 空セルでも format を走らせる＝ボタン/アイコン等の"飾り"を全行に描ける（_displayValue は空を素通しするので html+関数formatだけ特別扱い）。
       if (this.colCfg(c).html) {
         const fmt = this.colCfg(c).format;
-        if (typeof fmt === 'function' && this.data[r][c] === '') { try { const o = fmt('', { r, c }); return o == null ? '' : String(o); } catch (_) { return ''; } }
+        if (typeof fmt === 'function' && this.data[r][c] === '') { try { const o = fmt('', { r, c }, this.data[r]); return o == null ? '' : String(o); } catch (_) { return ''; } }
         return this._displayValue(r, c);
       }
       const _h = TssGrid.esc(this._displayValue(r, c));