@threestarsoftware/tssgrid 0.1.16 → 0.1.18

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
 数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
 
+## [0.1.18] - 2026-10-05
+
+### 修正
+- **見出し無しのチェックボックス列で、ヘッダの全選択チェックが中央からずれる不具合を修正**（コア・CSS/JS）— ヘッダの `.tg-head-cb` は見出し文字との間隔用に `margin-right:4px` を持つため、**見出しが無い（`title` 未設定/`''`）単独チェックの時はその4pxで列中央から左にずれ**、本体セル（`margin:0 auto` で中央）と縦に揃わなかった（v0.1.17 でヘッダ空が一般化して露出）。見出し文字が無い時は `tg-head-cb-solo` を付与し `display:block; margin:0 auto` で**本体と同じ中央寄せ**に。見出し有りは従来どおりインライン＋4px間隔。
+
+## [0.1.17] - 2026-10-05
+
+### 修正
+- **チェックボックス列のヘッダに `data` 名（'checked' 等）が出てしまう不具合を修正**（コア）— `{ type:'checkbox', data:'checked' }` のように **`title` を書かない**と、見出し決定ロジックが「title 未設定 → `data` 名」に落ちてヘッダに「checked」が表示されていた。checkbox 列のヘッダは「**全選択チェックボックス**」なので data 名が出るのはほぼ常に不要。**checkbox 列は title 未設定でもヘッダを空**にするよう修正（`title` を明示すればそれを尊重／`title:''` も従来どおり空）。**非 checkbox 列は従来どおり**（title 未設定なら data 名→列ラベル）。
+
 ## [0.1.16] - 2026-10-04
 
 ### 修正

package/package.json

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

package/src/tssgrid.css

@@ -186,6 +186,8 @@
 .tssgrid .tg-table td .tg-cb { display: block; margin: 0 auto; cursor: pointer; }
 /* ヘッダの全選択チェックボックス（columns[c].headerCheckbox:false で非表示）。外部CSSで再デザイン可 */
 .tssgrid .tg-table thead th .tg-head-cb { display: inline-block; margin: 0 4px 0 0; vertical-align: middle; cursor: pointer; }
+/* 見出し文字が無い（単独）＝本体セルと同じく中央寄せ（右 4px を打ち消して列中央でチェックが縦に揃う） */
+.tssgrid .tg-table thead th .tg-head-cb.tg-head-cb-solo { display: block; margin: 0 auto; }
 
 /* ドロップダウン列: V（シェブロン）キャレットを常時表示。編集中の <select> と同じ SVG＝サイズも一致 */
 .tssgrid .tg-table td.tg-dropdown { position: relative; padding-right: 18px; cursor: pointer; }

package/src/tssgrid.js

@@ -61,8 +61,15 @@
       this.name = opts.name || 'grid';
       this.columns = opts.columns || [];
       // 見出し: 明示 headers > columns の title/data 由来 > 既定 A,B,C
+      // 見出しの決定: 明示 title（'' 含む）を最優先で尊重。checkbox 列は「ヘッダ＝全選択チェック」なので
+      // title 未設定でも data 名（'checked' 等）を出さない（空）。それ以外は title 未設定なら data 名→無ければ列ラベル。
       this.headers = opts.headers || (this.columns.length
-        ? this.columns.map((c, i) => (c && (c.title || c.data)) || TssGrid._colLabel(i))
+        ? this.columns.map((c, i) => {
+            if (!c) return undefined;                            // 列定義なし＝従来どおり（空表示）
+            if (c.title != null) return c.title;                 // 明示 title（'' で見出し無し）を尊重
+            if (c.type === 'checkbox') return '';                // checkbox は data 名を見出しに出さない
+            return c.data || TssGrid._colLabel(i);               // 従来: title 未設定は data 名 → 無ければ列ラベル
+          })
         : ['A', 'B', 'C']);
       this.COLS = this.headers.length;
       // データ取り込み: 配列(string[][]) と オブジェクト配列(object[]) を自動判別。
@@ -1361,10 +1368,13 @@
         if (this._isHidden(c)) cls.push('tg-hidden');
         const a = cls.length ? ' class="' + cls.join(' ') + '"' : '';
         const grip = (this.resizeCols && this.colCfg(c).resizable !== false) ? '<div class="tg-colgrip"></div>' : '';
-        const headCb = (this.colType(c) === 'checkbox' && this.colCfg(c).headerCheckbox !== false) ? '<input type="checkbox" class="tg-cb tg-head-cb" tabindex="-1">' : '';
         let lbl = labels ? labels[c] : this.headers[c];
         if (lbl && typeof lbl === 'object') lbl = lbl.label != null ? lbl.label : '';
-        html += '<th data-c="' + c + '"' + a + '>' + headCb + TssGrid.esc(lbl != null ? lbl : '') + grip + '</th>';
+        const lblStr = lbl != null ? String(lbl) : '';
+        // 見出しチェック: 見出し文字が無い（単独）なら中央寄せ＝本体セルの中央チェックと揃える。文字がある時だけ右 4px で間隔。
+        const headCb = (this.colType(c) === 'checkbox' && this.colCfg(c).headerCheckbox !== false)
+          ? '<input type="checkbox" class="tg-cb tg-head-cb' + (lblStr === '' ? ' tg-head-cb-solo' : '') + '" tabindex="-1">' : '';
+        html += '<th data-c="' + c + '"' + a + '>' + headCb + TssGrid.esc(lblStr) + grip + '</th>';
       }
       if (delHdr) html += '<th class="tg-rowdel-hdr"></th>';   // 右端削除列の見出し（無地・非データ）。ネストヘッダ時は角を rowspan で出すのでここでは出さない
       return html + '</tr>';