@threestarsoftware/tssgrid 0.0.4 → 0.0.6

package/CHANGELOG.md

@@ -0,0 +1,75 @@
+# 変更履歴 (Changelog)
+
+TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
+数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
+
+## [0.0.6] - 2026-06-30
+
+### 追加
+- ドラッグ選択・フィルハンドルが**表示領域の外（上下左右）まで自動スクロールしながら伸びる**ように。ビューも一緒にスクロールし、速度は端からのはみ出し量に比例（少し超え＝ゆっくり／大きく超え＝速く）。仮想スクロール時・非仮想時の両方で動作。
+- `rowHeaderLabel` オプション: 行ヘッダの表示を指定（`false`＝数字なしの空ヘッダ／関数 `(r)=>文字列`＝カスタム表示／未指定＝従来の行番号）。空にしても溝は残り、クリックでの行選択は効く。
+- `rowReorder: 'header'`: 行ヘッダーセル（左端の行番号の列）**全体**を行移動の掴み手に（クリック=行選択／ドラッグ=移動）。従来の `rowReorder: true` は ⠿ アイコンのみ掴める（不変）。
+- `rowReorderMark` オプション: 行ヘッダーの ⠿ マークの位置を `'before'`（番号の前・既定）/ `'after'`（番号の後）/ `false`（出さない）から選べる。
+
+### 修正
+- 仮想スクロールでドラッグ選択／フィルが窓の端で止まっていた問題。
+- フィルが端を1行超えただけで大量に伸びてしまう暴走を修正（伸ばす先を常にポインタ位置のセルに）。
+- `examples/virtual.html`: 部署ドロップダウンの選択肢が出ない不具合（`options` 指定漏れ）を修正／表示中インジケータの更新でツールバーがずれる問題を修正／パネルを縦リサイズ可能に。
+
+### ドキュメント
+- 比較表（`examples/compare.html`）: 仮想スクロールの行を「対応（`virtual:true`・opt-in）」に更新し、デモリンクに `virtual.html` を追加。
+
+## [0.0.5] - 2026-06-25
+
+### 追加
+- **仮想スクロール `virtual: true`**（コア）— 大量行を「画面に見える窓ぶん＋バッファだけ」描画。全件を一度に DOM 化しないので、初期描画が一瞬・スクロールも軽い。有効化はオプション一行。
+  - 自社調べ: 10万行で初回描画 ≈ 46ms（全件描画 ≈ 10.5秒に対して）。デモ: `examples/virtual.html`。
+  - 制約(v1): 行高一定／固定行列・折り返し・セル結合は非対応（指定時は自動無効化）。
+- **`rowHeaderWidth` オプション**（コア）— 大量行で行番号の桁数が増える時に行ヘッダ幅を調整。
+
+### ドキュメント
+- README: 非破壊フィルタの説明を実測値に正確化（「絞り込み後が軽い」を自社調べ値で）＋仮想スクロール節を追加。
+- 比較表（`examples/compare.html`）に Tabulator を追加（公式デモ準拠）。
+
+## [0.0.4] - 2026-06-24
+
+### 追加
+- 見積書デモ（`examples/quote.html`）— 印刷／日付ピッカー／列幅固定／Enter 横送り（`nextCell`）。
+- `navSkipReadOnly` オプション（Tab/Enter 送りで readonly セルを飛ばす＝伝票入力向け）。
+- プラグイン `tss-datetime`（日付＋時刻の同時ピッカー・曜日つき・別フィールド結合・時刻のみ対応）。
+
+### 修正
+- 編集中の `Ctrl+Z` で元の値に戻せない不具合（input 編集を Esc 同等でキャンセル）。
+- グリッド外周の右・下が二重線になる不具合（最終行/列のセル罫線を枠線に一本化）。
+- 全幅見出し帯の結合セルで列/行選択が他列へ広がる不具合（Excel 流にクランプ）。
+- 結合解除で見出しラベルが消える不具合。
+
+## [0.0.3] - 2026-06-23
+
+### 追加
+- プラグイン `tss-sum`（条件付き合計）＋請求書デモで採用。
+
+### 修正
+- 請求書デモの合計欄を別グリッド化して金額列に完全整列／No. 列見出しが選択色になる不具合／印刷で選択枠を非表示。
+
+## [0.0.2] - 2026-06-22
+
+### 追加
+- **npm パッケージ化**（`@threestarsoftware/tssgrid`）＋公開 API の型定義 `tssgrid.d.ts`。
+- 請求書（インボイス対応）デモ。
+- サイト: `/docs` ドキュメント・`/api` リファレンス（`.d.ts` から自動生成）・会社名フッター。
+
+### 修正
+- 行/列ヘッダ選択中の右クリックで複数選択が解除される不具合。
+
+## [0.0.1] - 2026-06-19
+
+- 初回公開。コア（編集グリッド／日本語 IME 堅牢・全角半角・セル結合・固定行列・非破壊フィルタ・条件付き書式・コピー/貼付・Undo/Redo ほか）＋同梱プラグイン＋サンプル一式。
+- 目玉デモ（方眼ガント／在庫管理）をサイトでライブ化。
+
+[0.0.6]: https://github.com/threestarsoftware/TssGrid/releases/tag/v0.0.6
+[0.0.5]: https://github.com/threestarsoftware/TssGrid/releases/tag/v0.0.5
+[0.0.4]: https://github.com/threestarsoftware/TssGrid/releases/tag/v0.0.4
+[0.0.3]: https://github.com/threestarsoftware/TssGrid/releases/tag/v0.0.3
+[0.0.2]: https://github.com/threestarsoftware/TssGrid/releases/tag/v0.0.2
+[0.0.1]: https://github.com/threestarsoftware/TssGrid/releases/tag/v0.0.1

package/README.md

@@ -238,7 +238,8 @@ grid.moveRows(r0, r1, to);                        // 連続する複数行をま
 
 ### 非破壊フィルタ（`filter` / `clearFilter`）
 
-**コア内蔵**の非破壊フィルタ（行インデックスマッパ）。全行は内部の `_allRows`（マスタ）に保持したまま、**可視部分集合だけ描画**します。**10万行でも絞り込んだ数百行だけ描く**ので、仮想スクロール無しで軽い → 動く例: [`examples/filter-live.html`](https://tssgrid.threestarsoftware.co.jp/examples/filter-live.html)。
+**コア内蔵**の非破壊フィルタ（行インデックスマッパ）。全行は内部の `_allRows`（マスタ）に保持したまま、**絞り込んだ可視部分集合だけを描画**します。要点は**絞り込み後の描画・ライブ検索が軽い**こと（自社調べ：10万行を保持して約200行に絞り込み → 初回描画 ≈ 0.5 秒、絞り込み済みのライブ検索 ≈ 数 ms）→ 動く例: [`examples/filter-live.html`](https://tssgrid.threestarsoftware.co.jp/examples/filter-live.html)。
+なお**全件をそのままスクロール表示**したい大量行は、仮想スクロール `virtual: true` を使います（下記）。
 
 ```js
 grid.filter(row => row[2] >= 100);     // 述語: (row, masterIndex, src) => bool
@@ -254,6 +255,18 @@ grid.getAllRows();                     // マスタ全行（フィルタ中で
 - 制限（v1）: フィルタ中は **列の挿入削除・行移動・セル結合**はロック（解除してから）。`filter`/`clearFilter` は**Undo履歴をクリア**（ビューindex基準の履歴が境界を跨ぐと不整合になるため）。
 - **フィルタUI**（ヘッダの絞り込み等）はコアに入れず**プラグイン** `tss-filter`（下記）で。素朴な `setData` 差し替え方式の旧サンプルは [`examples/filter.html`](https://tssgrid.threestarsoftware.co.jp/examples/filter.html)。
 
+### 仮想スクロール（`virtual: true`）
+
+大量行を**全件そのままスクロール表示**したい時に。全行は `data` に保持したまま、**画面に見える窓ぶん＋バッファだけを描画**します（固定行高ウィンドウイング）。全件を一度に DOM 化しないので**初期描画が一瞬・スクロールも軽い**。有効化は**オプション一行**だけ。
+
+```js
+new TssGrid(el, { virtual: true, data, /* … */ });
+new TssGrid(el, { virtual: { buffer: 10 }, data });   // 窓の上下バッファ行数（既定6）
+```
+- **自社調べ**（headless Chrome / Win11）: 10 万行で**初回描画 ≈ 46 ms**（全件描画 ≈ 10.5 秒に対して）。スクロール 1 コマの窓差し替え ≈ 3 ms。動く例: [`examples/virtual.html`](https://tssgrid.threestarsoftware.co.jp/examples/virtual.html)。
+- 制約（v1）: **行高一定**／**固定行列・折り返し・セル結合は非対応**（指定時は自動で無効化＋警告）。行番号の桁数が増える場合は `rowHeaderWidth` で行ヘッダ幅を広げられます。
+- フィルタとの関係: `filter()` は「絞り込んだ部分集合だけ描く」軽さ、`virtual` は「絞らず全件をスクロールする」軽さ。用途で使い分け（v1 では併用は未対応）。
+
 ### 同梱プラグイン: ヘッダ オートフィルタ（filter UI）
 
 `plugins/tss-filter.js`＋`.css`＝ 各見出しの**ロート（漏斗）アイコン**をクリックで**値チェックリスト＋検索**のポップアップ（Excel風。ソートの▲▼と区別できるアイコン）。複数列の条件は **AND**。中身は上の**コア `filter()` を呼ぶだけ**。動く例: [`examples/filter-ui.html`](https://tssgrid.threestarsoftware.co.jp/examples/filter-ui.html)。
@@ -1108,7 +1121,7 @@ command は `{ apply(), revert(), label }`。
 ## 制限
 
 - 外部（Excel等）→グリッドの貼り付けはブラウザのクリップボード読取許可が必要。`file://` で読めない場合は http（ローカルサーバ）で開く。グリッド間・グリッド内のコピペは内部バッファで常に動く。
-- 仮想スクロール未対応（大量行が必要なら今後）。日付の連番フィルはコピー扱い（数値のみ連番）。
+- 仮想スクロールは `virtual: true` で対応（固定行高・固定行列/折り返し/セル結合は非対応）。日付の連番フィルはコピー扱い（数値のみ連番）。
 
 ## License
 

package/package.json

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

package/src/tssgrid.css

@@ -66,6 +66,8 @@
 .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 tr.tg-vspace > td { border: none; padding: 0; background: transparent; }
 .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。
@@ -132,6 +134,11 @@
 .tssgrid .tg-rowmove { cursor: grab; color: #b3b6c8; margin-right: 2px; font-size: 11px; line-height: 1; user-select: none; vertical-align: 1px; }
 .tssgrid .tg-rowmove:hover { color: var(--tg-accent); }
 .tssgrid .tg-rowmove:active { cursor: grabbing; }
+.tssgrid .tg-rowmove.tg-mark-after { margin-right: 0; margin-left: 4px; }   /* ⠿ を番号の後ろに置く時の間隔 */
+.tssgrid .tg-rowmove.tg-mark-only { margin: 0; }   /* 番号なし=⠿だけ＝前後の区別をやめて中央に */
+/* rowReorder:'header' = 行ヘッダーセル全体が移動ハンドル（クリック=選択／ドラッグ=移動） */
+.tssgrid .tg-table th.rowhead.tg-rowmove-cell { cursor: grab; }
+.tssgrid .tg-table th.rowhead.tg-rowmove-cell:active { cursor: grabbing; }
 .tssgrid .tg-colgrip:hover { background: var(--tg-edit-accent); opacity: .5; }
 .tssgrid .tg-rowgrip:hover { background: var(--tg-edit-accent); opacity: .5; }
 /* リサイズのプレビュー線（ドラッグ中だけ表示、離して確定） */

package/src/tssgrid.d.ts

@@ -126,6 +126,17 @@ export interface TssGridOptions {
   cursor?: boolean;
   stretchH?: 'none' | 'last' | 'all';
   rowHeaders?: boolean;
+  /** 行番号列の幅(px)。既定 40。大量行で桁数が増える時に広げる。 */
+  rowHeaderWidth?: number;
+  /** 行ヘッダの表示内容。未指定=行番号(r+1) / false=数字なし(空) / (r)=>文字列=カスタム表示。 */
+  rowHeaderLabel?: false | ((r: number) => string | number);
+  /** 行のドラッグ並べ替え。true=行ヘッダーセルの ⠿ アイコンを掴んで移動 / 'header'=行ヘッダーセル全体が移動ハンドル（クリック=選択／ドラッグ=移動）。 */
+  rowReorder?: boolean | 'header';
+  /** 行ヘッダーの ⠿ マークの位置。'before'=番号の前（既定）/ 'after'=番号の後 / false=マークを出さない。 */
+  rowReorderMark?: 'before' | 'after' | false;
+  /** 仮想スクロール（固定行高ウィンドウイング）。大量行を可視窓だけ描画。true か { buffer:窓上下バッファ行数(既定6) }。
+   *  制約(v1): 行高一定／固定行列・折り返し・セル結合は非対応（指定時は自動無効化）。 */
+  virtual?: boolean | { buffer?: number };
   colHeaders?: boolean;
   hiddenColumns?: number[];
   wordWrap?: boolean;

package/src/tssgrid.js

@@ -146,6 +146,7 @@
 
       this.active = { r: 0, c: 0 }; this.extent = { r: 0, c: 0 };
       this.mode = 'nav'; this.dragging = false; this.filling = null;
+      this._asRAF = 0; this._dragDir = 0; this._fillRow = null;   // ドラッグ/フィルの端自動スクロール状態
       this.pendingCut = null;
       this.headerDrag = null; this._colAnchor = 0; this._rowAnchor = 0;  // 行/列ヘッダ選択
       this._headerSel = null;   // 'col'/'row'/'all'=列/行/全選択モード（結合に拡張せず実列/行にクランプ＝Excel流）。null=通常セル選択
@@ -183,9 +184,13 @@
       this.resizeRows = opts.resizeRows !== false;
       // 行/列ヘッダの表示（false で行番号列・ヘッダ行を隠す）
       this.rowHeaders = opts.rowHeaders !== false;
+      this.rowHeaderW = (opts.rowHeaderWidth | 0) || 40;   // 行番号列の幅(px)。大量行で桁数が増える時に広げる
+      this.rowHeaderLabel = opts.rowHeaderLabel;   // 行ヘッダ表示: 未指定=行番号(r+1) / false=数字なし(空) / (r)=>文字列=カスタム
       this.colHeaders = opts.colHeaders !== false;
       // 行ヘッダの「つまみ」をドラッグして行を並べ替える（行番号列が必要）
       this.rowReorder = !!opts.rowReorder;
+      this.rowReorderWhole = opts.rowReorder === 'header';   // 'header'=行ヘッダーセル全体が移動ハンドル（クリック=選択/ドラッグ=移動）／true=⠿アイコンのみ
+      this.rowReorderMark = opts.rowReorderMark === undefined ? 'before' : opts.rowReorderMark;   // ⠿の位置: 'before'(番号の前/既定) | 'after'(番号の後) | false(出さない)
       // 選択カーソル（緑の選択枠・範囲・セルハイライト・フィルハンドル）を表示するか。
       // false で表示専用グリッド向けに非表示（内部の選択は保持＝コピーは可）。
       this.cursor = opts.cursor !== false;
@@ -212,6 +217,16 @@
       this.autoWrapRow = !!opts.autoWrapRow;         // Tab で行末→次行頭に折り返し
       this.autoWrapCol = !!opts.autoWrapCol;         // Enter で列末→次列頭に折り返し
       this.navSkipReadOnly = !!opts.navSkipReadOnly; // Tab/Enter 送りで readonly セルを飛ばす（伝票入力向け＝編集する所だけ移動）
+      // 仮想スクロール（簡易版・固定行高ウィンドウイング）: 大量行で「可視窓＋バッファ」だけ描画。
+      // 全行は data に保持・行座標は絶対のまま、tbody は窓ぶん＋上下スペーサ行のみ。幾何はモデル（一定行高）。
+      // 制約(v1): 行高一定／セル結合・固定行列・折り返し非対応。指定時は無効化して警告。OFF時は一切作動せず従来通り。
+      this.virtual = !!opts.virtual;
+      this._vBuf = (opts.virtual && typeof opts.virtual === 'object' && opts.virtual.buffer) || 6;  // 窓の上下バッファ行数
+      this._vStart = 0; this._vEnd = 0; this._vRAF = 0; this._vRendered = false;
+      if (this.virtual && (this.frozenRows || this.frozenCols || this.wordWrap)) {
+        try { console.warn('[TssGrid] virtual:true は固定行列/折り返し非対応のため、それらを無効化しました'); } catch (_) {}
+        this.frozenRows = 0; this.frozenCols = 0; this.wordWrap = false;
+      }
       // 行/列数の下限・上限（挿入/削除の境界。min は初期パディングにも使う）
       this.minRows = opts.minRows | 0; this.maxRows = opts.maxRows | 0;
       this.minCols = opts.minCols | 0; this.maxCols = opts.maxCols | 0;
@@ -510,6 +525,8 @@
     destroy() {
       if (this._destroyed) return;
       this._destroyed = true;
+      if (this._vRAF) { try { cancelAnimationFrame(this._vRAF); } catch (_) {} this._vRAF = 0; }   // 仮想スクロールの保留フレームを破棄
+      this._stopAutoScroll();   // ドラッグ自動スクロールの保留フレームを破棄
       for (const p of this._plugins) { if (p.handle && typeof p.handle.destroy === 'function') { try { p.handle.destroy(); } catch (_) {} } }
       this._plugins = [];
       if (this._ro) { try { this._ro.disconnect(); } catch (_) {} this._ro = null; }
@@ -970,7 +987,14 @@
 
     _colWidth(c) { return this.colW[c] != null ? this.colW[c] : this.defColW; }
     _rowHeight(r) { return this.rowH[r] != null ? this.rowH[r] : this.defRowH; }
-    _rhW() { return this.rowHeaders ? 40 : 0; }   // 行ヘッダ列の幅（非表示なら 0）
+    _rhW() { return this.rowHeaders ? this.rowHeaderW : 0; }   // 行ヘッダ列の幅（非表示なら 0）
+    // 行ヘッダの表示内容: false=空（数字なし）/ 関数=カスタム（エスケープ）/ 既定=行番号(r+1)。
+    _rowHeadLabel(r) {
+      const L = this.rowHeaderLabel;
+      if (L === false) return '';
+      if (typeof L === 'function') { let v; try { v = L(r); } catch (_) {} return TssGrid.esc(v == null ? '' : v); }
+      return (r + 1);
+    }
     // ---- 列の非表示 ----
     _isHidden(c) { return this.hiddenCols.has(c); }
     _visCols() { const a = []; for (let c = 0; c < this.COLS; c++) if (!this.hiddenCols.has(c)) a.push(c); return a; }
@@ -1096,10 +1120,107 @@
         top += tr.offsetHeight;
       });
     }
+    // 1行ぶんの <tr>…</tr> を生成（buildTable の本体ループと、仮想スクロールの窓再描画 _renderWindow で共用）。
+    _rowHTML(r) {
+      const rh = this.rowHeaders;
+      const rgrip = (rh && this.resizeRows) ? '<div class="tg-rowgrip"></div>' : '';
+      const canMove = rh && this.rowReorder && !this._hasVMerge();
+      const lbl = this._rowHeadLabel(r);
+      const after = this.rowReorderMark === 'after' && lbl !== '';   // 番号が無いなら「前/後」は無意味＝中央に固定（マージンも消す）
+      const markCls = 'tg-rowmove' + (lbl === '' ? ' tg-mark-only' : (after ? ' tg-mark-after' : ''));
+      const mark = (canMove && this.rowReorderMark !== false) ? '<span class="' + markCls + '" title="ドラッグで行を移動">⠿</span>' : '';
+      const inner = after ? (lbl + mark) : (mark + lbl);   // ⠿ を番号の前/後に（rowReorderMark）。番号なしは前後どちらでも中央
+      const rhCls = (canMove && this.rowReorderWhole) ? ' tg-rowmove-cell' : '';   // 'header'=行ヘッダーセル全体を掴み手に（grab カーソル）。番号/⠿の表示は独立
+      const rcls = (r < this.frozenRows) ? (' tg-frozen-row' + (r === this.frozenRows - 1 ? ' tg-frozen-row-edge' : '')) : '';   // 行固定
+      let html = '<tr data-r="' + r + '" class="tg-row' + rcls + '" style="height:' + this._rowHeight(r) + 'px">' + (rh ? '<th class="rowhead' + rhCls + '" data-r="' + r + '">' + inner + rgrip + '</th>' : '');
+      for (let c = 0; c < this.COLS; c++) {
+        if (this._merges && this._isCovered(r, c)) continue;   // 結合に覆われた従属セルは td を出さない（アンカーが colspan で覆う）
+        const cs = this._merges ? this._colspanAt(r, c) : 1;   // 結合アンカーは colspan で従属列ぶんを覆う
+        const rs = this._merges ? this._rowspanAt(r, c) : 1;   // 縦結合は rowspan で従属行ぶんを覆う
+        const cls = [];
+        if (cs > 1 || rs > 1) cls.push('tg-merged');   // 結合アンカー（CSS で中央寄せ等のフック）
+        if (c < this.frozenCols) { cls.push('tg-frozen'); if (c === this.frozenCols - 1) cls.push('tg-frozen-edge'); }
+        if (this._isHidden(c)) cls.push('tg-hidden');   // 非表示列
+        if (this.colType(c) === 'dropdown') cls.push('tg-dropdown');  // ▾ キャレット表示用
+        if (this.colType(c) === 'number') cls.push('tg-num');  // 数値は右寄せ
+        if (this._isReadOnly(r, c)) cls.push('tg-readonly');  // 読み取り専用（淡色＋カーソル既定）
+        if (this.colCfg(c).wordWrap) cls.push('tg-wrap-cell');  // 列単位の折り返し
+        if (this.data[r][c] === '' && this._placeholder(c) != null) cls.push('tg-placeholder');  // 空セルのヒント
+        const al = this._cellAlign(r, c);   // 整列（列既定＋セル上書き）
+        if (al.h) cls.push('tg-h-' + al.h); if (al.v) cls.push('tg-v-' + al.v);
+        let titleAttr = '';
+        if (this._marksInvalid) { const _iv = this._coerceCell(r, c, this.data[r][c]); if (!_iv.ok) { cls.push('tg-invalid'); titleAttr = ' data-err-level="' + TssGrid.esc(_iv.level || 'error') + '"'; if (this.invalidTitle) titleAttr += ' title="' + TssGrid.esc(_iv.message || '入力値が不正です') + '"'; } }
+        const ed = this.colCfg(c).editor;   // カスタムエディタが icon を申告していれば右端に表示
+        const ico = (ed && ed.icon) ? ' data-ico="' + TssGrid.esc(ed.icon) + '"' : '';
+        if (ico) cls.push('tg-haspicker');
+        const ccls = (this.cellClass || this.colCfg(c).cellClass) ? this._cellClasses(r, c) : [];   // 条件付き書式
+        for (const k of ccls) cls.push(k);
+        const dccls = ccls.length ? ' data-ccls="' + TssGrid.esc(ccls.join(' ')) + '"' : '';
+        let sty = '';   // セル単位インラインスタイル（連続色・データバー幅などCSS変数も）
+        if (this.cellStyle || this.colCfg(c).cellStyle) {
+          const so = this._cellStyleObj(r, c), sk = Object.keys(so);
+          if (sk.length) { let css = ''; for (const k of sk) css += k + ':' + so[k] + ';'; sty = ' style="' + TssGrid.esc(css) + '" data-cstyle="' + TssGrid.esc(sk.join(' ')) + '"'; }
+        }
+        const a = cls.length ? ' class="' + cls.join(' ') + '"' : '';
+        const csAttr = (cs > 1 ? ' colspan="' + cs + '"' : '') + (rs > 1 ? ' rowspan="' + rs + '"' : '');
+        html += '<td' + a + ico + dccls + sty + titleAttr + csAttr + ' data-r="' + r + '" data-c="' + c + '">' + this._cellHTML(r, c) + '</td>';
+      }
+      return html + '</tr>';
+    }
+    // 仮想スクロール: 現在の scrollTop から描画すべき窓 [start,end)（絶対行）を算出。バッファ込み。
+    _vWindow() {
+      const rowH = this.defRowH;
+      const viewH = (this.wrap && this.wrap.clientHeight) || parseInt(this.height, 10) || 400;
+      const visible = Math.ceil(viewH / rowH) + 1;
+      const scrollTop = this.wrap ? this.wrap.scrollTop : 0;
+      let start = Math.floor(scrollTop / rowH) - this._vBuf;
+      if (start < 0) start = 0;
+      let end = start + visible + this._vBuf * 2;
+      if (end > this.ROWS) end = this.ROWS;
+      return { start, end };
+    }
+    // 仮想スクロール: tbody を窓ぶん＋上下スペーサ行に差し替え（buildTable せず軽量再描画）。
+    _renderWindow(win, force) {
+      if (!force && this._vRendered && win.start === this._vStart && win.end === this._vEnd) return false;
+      const tbody = this.table && this.table.querySelector('tbody');
+      if (!tbody) return false;
+      const rh = this.rowHeaders, colsSpan = this.COLS + (rh ? 1 : 0);
+      const topH = win.start * this.defRowH, botH = (this.ROWS - win.end) * this.defRowH;
+      let html = '';
+      if (topH > 0) html += '<tr class="tg-vspace" aria-hidden="true" style="height:' + topH + 'px"><td colspan="' + colsSpan + '"></td></tr>';
+      for (let r = win.start; r < win.end; r++) html += this._rowHTML(r);
+      if (botH > 0) html += '<tr class="tg-vspace" aria-hidden="true" style="height:' + botH + 'px"><td colspan="' + colsSpan + '"></td></tr>';
+      tbody.innerHTML = html;
+      this._vStart = win.start; this._vEnd = win.end; this._vRendered = true;
+      this._syncHeaderCheckboxes();
+      this.updateSelectionUI();   // セルが作り直されたので窓内の選択シェード/オーバーレイを再適用
+      return true;
+    }
+    // 仮想スクロール: スクロールで窓がずれたら再描画（rAF スロットル）。
+    _vSync() {
+      if (!this.virtual || this._vRAF) return;
+      this._vRAF = requestAnimationFrame(() => {
+        this._vRAF = 0;
+        if (this._destroyed) return;
+        this._renderWindow(this._vWindow(), false);
+      });
+    }
+    // 仮想スクロール: 行 r を可視域に入れる（scrollTop 調整→窓を同期描画）。setActive/setExtent から。
+    _vEnsureVisible(r) {
+      if (!this.virtual || !this.wrap) return;
+      const rowH = this.defRowH, head = this._theadH || 0;
+      const rowTop = head + r * rowH;
+      const cur = this.wrap.scrollTop, viewH = this.wrap.clientHeight || 400;
+      let st = cur;
+      if (rowTop < cur + head) st = rowTop - head;                 // 上のヘッダ下に隠れてる→上端へ
+      else if (rowTop + rowH > cur + viewH) st = rowTop + rowH - viewH;  // 下に隠れてる→下端へ
+      if (st !== cur) this.wrap.scrollTop = st;
+      this._renderWindow(this._vWindow(), false);   // 窓を即同期（place 前に DOM を確定）
+    }
     buildTable() {
       this._selhdrFg = null;   // 選択ヘッダ文字色キャッシュ破棄（テーマ変更に追従）
       const rh = this.rowHeaders;
-      let html = '<colgroup>' + (rh ? '<col style="width:40px">' : '');
+      let html = '<colgroup>' + (rh ? '<col style="width:' + this.rowHeaderW + 'px">' : '');
       for (let c = 0; c < this.COLS; c++) html += '<col data-c="' + c + '"' + (this._isHidden(c) ? ' class="tg-hidden"' : '') + ' style="width:' + (this._isHidden(c) ? 0 : this._colWidth(c)) + 'px">';
       html += '</colgroup>';
       if (this.colHeaders) {
@@ -1128,44 +1249,15 @@
         html += '</thead>';
       }
       html += '<tbody>';
-      for (let r = 0; r < this.ROWS; r++) {
-        const rgrip = (rh && this.resizeRows) ? '<div class="tg-rowgrip"></div>' : '';
-        const dgrip = (rh && this.rowReorder && !this._hasVMerge()) ? '<span class="tg-rowmove" title="ドラッグで行を移動">⠿</span>' : '';   // 横結合は行と一緒に移動可／縦結合中は不可
-        const rcls = (r < this.frozenRows) ? (' tg-frozen-row' + (r === this.frozenRows - 1 ? ' tg-frozen-row-edge' : '')) : '';   // 行固定
-        html += '<tr data-r="' + r + '" class="tg-row' + rcls + '" style="height:' + this._rowHeight(r) + 'px">' + (rh ? '<th class="rowhead" data-r="' + r + '">' + dgrip + (r + 1) + rgrip + '</th>' : '');
-        for (let c = 0; c < this.COLS; c++) {
-          if (this._merges && this._isCovered(r, c)) continue;   // 結合に覆われた従属セルは td を出さない（アンカーが colspan で覆う）
-          const cs = this._merges ? this._colspanAt(r, c) : 1;   // 結合アンカーは colspan で従属列ぶんを覆う
-          const rs = this._merges ? this._rowspanAt(r, c) : 1;   // 縦結合は rowspan で従属行ぶんを覆う
-          const cls = [];
-          if (cs > 1 || rs > 1) cls.push('tg-merged');   // 結合アンカー（CSS で中央寄せ等のフック）
-          if (c < this.frozenCols) { cls.push('tg-frozen'); if (c === this.frozenCols - 1) cls.push('tg-frozen-edge'); }
-          if (this._isHidden(c)) cls.push('tg-hidden');   // 非表示列
-          if (this.colType(c) === 'dropdown') cls.push('tg-dropdown');  // ▾ キャレット表示用
-          if (this.colType(c) === 'number') cls.push('tg-num');  // 数値は右寄せ
-          if (this._isReadOnly(r, c)) cls.push('tg-readonly');  // 読み取り専用（淡色＋カーソル既定）
-          if (this.colCfg(c).wordWrap) cls.push('tg-wrap-cell');  // 列単位の折り返し
-          if (this.data[r][c] === '' && this._placeholder(c) != null) cls.push('tg-placeholder');  // 空セルのヒント
-          const al = this._cellAlign(r, c);   // 整列（列既定＋セル上書き）
-          if (al.h) cls.push('tg-h-' + al.h); if (al.v) cls.push('tg-v-' + al.v);
-          let titleAttr = '';
-          if (this._marksInvalid) { const _iv = this._coerceCell(r, c, this.data[r][c]); if (!_iv.ok) { cls.push('tg-invalid'); titleAttr = ' data-err-level="' + TssGrid.esc(_iv.level || 'error') + '"'; if (this.invalidTitle) titleAttr += ' title="' + TssGrid.esc(_iv.message || '入力値が不正です') + '"'; } }
-          const ed = this.colCfg(c).editor;   // カスタムエディタが icon を申告していれば右端に表示
-          const ico = (ed && ed.icon) ? ' data-ico="' + TssGrid.esc(ed.icon) + '"' : '';
-          if (ico) cls.push('tg-haspicker');
-          const ccls = (this.cellClass || this.colCfg(c).cellClass) ? this._cellClasses(r, c) : [];   // 条件付き書式
-          for (const k of ccls) cls.push(k);
-          const dccls = ccls.length ? ' data-ccls="' + TssGrid.esc(ccls.join(' ')) + '"' : '';
-          let sty = '';   // セル単位インラインスタイル（連続色・データバー幅などCSS変数も）
-          if (this.cellStyle || this.colCfg(c).cellStyle) {
-            const so = this._cellStyleObj(r, c), sk = Object.keys(so);
-            if (sk.length) { let css = ''; for (const k of sk) css += k + ':' + so[k] + ';'; sty = ' style="' + TssGrid.esc(css) + '" data-cstyle="' + TssGrid.esc(sk.join(' ')) + '"'; }
-          }
-          const a = cls.length ? ' class="' + cls.join(' ') + '"' : '';
-          const csAttr = (cs > 1 ? ' colspan="' + cs + '"' : '') + (rs > 1 ? ' rowspan="' + rs + '"' : '');
-          html += '<td' + a + ico + dccls + sty + titleAttr + csAttr + ' data-r="' + r + '" data-c="' + c + '">' + this._cellHTML(r, c) + '</td>';
-        }
-        html += '</tr>';
+      if (this.virtual) {
+        const win = this._vWindow(); this._vStart = win.start; this._vEnd = win.end; this._vRendered = true;
+        const colsSpan = this.COLS + (rh ? 1 : 0);
+        const topH = win.start * this.defRowH, botH = (this.ROWS - win.end) * this.defRowH;
+        if (topH > 0) html += '<tr class="tg-vspace" aria-hidden="true" style="height:' + topH + 'px"><td colspan="' + colsSpan + '"></td></tr>';
+        for (let r = win.start; r < win.end; r++) html += this._rowHTML(r);
+        if (botH > 0) html += '<tr class="tg-vspace" aria-hidden="true" style="height:' + botH + 'px"><td colspan="' + colsSpan + '"></td></tr>';
+      } else {
+        for (let r = 0; r < this.ROWS; r++) html += this._rowHTML(r);
       }
       html += '</tbody>';
       this.table.innerHTML = html;
@@ -1262,7 +1354,8 @@
     // 通常は buildTable/_reflow（ResizeObserver が table/wrap を監視）で自動更新される）。
     refreshGeometry() { this._buildGeomCache(); this.updateSelectionUI(); }
     place(elem, td) {
-      const r = +td.dataset.r, c = +td.dataset.c, R = this._cellRectAuto(r, c);
+      // 仮想スクロールで active が窓外だと td=null。その場合は active 座標＋モデル幾何で配置（窓外なら overflow で隠れる）。
+      const r = td ? +td.dataset.r : this.active.r, c = td ? +td.dataset.c : this.active.c, R = this._cellRectAuto(r, c);
       elem.style.left = R.left + 'px'; elem.style.top = R.top + 'px';
       elem.style.width = R.width + 'px'; elem.style.height = R.height + 'px';
       this._clipOverlay(elem, R.left, R.top, c, r);
@@ -1290,9 +1383,15 @@
     // 行高は wordWrap で、列幅は stretch の DOM 改変で可変なので、モデル計算でなく実測が要る。
     _buildGeomCache() {
       if (!this.wrap || !this.table) { this._rowTops = this._colLefts = null; return; }
-      const trs = this.table.querySelectorAll('tbody tr');
-      const RT = new Array(this.ROWS + 1); RT[0] = this._theadH || 0;
-      for (let r = 0; r < this.ROWS; r++) { const tr = trs[r]; RT[r + 1] = RT[r] + (tr ? tr.getBoundingClientRect().height : this._rowHeight(r)); }
+      const RT = new Array(this.ROWS + 1);
+      if (this.virtual) {
+        const base = this._theadH || 0, rowH = this.defRowH;   // 仮想モードは一定行高＝モデルで全行（窓外も算出可）
+        for (let r = 0; r <= this.ROWS; r++) RT[r] = base + r * rowH;
+      } else {
+        const trs = this.table.querySelectorAll('tbody tr');
+        RT[0] = this._theadH || 0;
+        for (let r = 0; r < this.ROWS; r++) { const tr = trs[r]; RT[r + 1] = RT[r] + (tr ? tr.getBoundingClientRect().height : this._rowHeight(r)); }
+      }
       this._rowTops = RT;
       // 列幅: リーフヘッダ th（マージ無しで確実）→ 無ければ colgroup col。stretch 後の実幅を拾う。
       const colEl = c => (this.colHeaders ? this.table.querySelector('thead th[data-c="' + c + '"]') : null) || this.table.querySelector('colgroup col[data-c="' + c + '"]');
@@ -1347,18 +1446,21 @@
     highlightRange() {
       this.table.querySelectorAll('td.sel, th.selhdr').forEach(el => el.classList.remove('sel', 'selhdr'));
       const { r0, r1, c0, c1 } = this.rectRange();
-      // 選択範囲が及ぶ行/列ヘッダをハイライト（Excel 風のアフォーダンス）
+      // 選択範囲が及ぶ行/列ヘッダをハイライト（Excel 風のアフォーダンス）。仮想時は行ヘッダを窓内にクランプ（大量行で querySelector を無駄打ちしない）。
+      const hlo = this.virtual ? Math.max(r0, this._vStart) : r0;
+      const hhi = this.virtual ? Math.min(r1, this._vEnd - 1) : r1;
       for (let c = c0; c <= c1; c++) { const th = this.table.querySelector('thead th[data-c="' + c + '"]'); if (th) th.classList.add('selhdr'); }
-      for (let r = r0; r <= r1; r++) { const th = this.table.querySelector('th.rowhead[data-r="' + r + '"]'); if (th) th.classList.add('selhdr'); }
+      for (let r = hlo; r <= hhi; 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;
       const clampMerge = this._headerSel && this._merges;   // 列/行選択では「範囲に収まらない結合」は塗らない（帯を塗り広げない）
-      for (let r = r0; r <= r1; r++) for (let c = c0; c <= c1; c++) {
+      // 仮想スクロール: 窓内の行だけシェード（範囲枠 selrange は placeRect がモデル幾何で全域を描く）。
+      for (let r = hlo; r <= hhi; 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');
+        const el = this.cellEl(r, c); if (el) el.classList.add('sel');
       }
     }
     // 選択ヘッダの文字色を --tg-selhdr-bg の輝度から自動決定（暗背景→白／明背景→濃紺）。
@@ -1437,15 +1539,18 @@
       if (!this._beforeSel(a, a)) return;
       this._headerSel = null;
       this.active = a; this.extent = { ...a };
+      if (this.virtual) this._vEnsureVisible(a.r);   // 窓に入れてから placement（窓外なら activeTd=null になるため）
       this.place(this.editor, this.activeTd()); this.toNav(); this.editor.focus(); this.updateSelectionUI();
-      this.activeTd().scrollIntoView({ block: 'nearest', inline: 'nearest' });
+      if (!this.virtual) this.activeTd().scrollIntoView({ block: 'nearest', inline: 'nearest' });   // 仮想は _vEnsureVisible が可視化済み
       this._fireSelection();
     }
     setExtent(r, c) {
       const e = { r: this.clampR(r), c: this.clampC(c) };
       if (!this._beforeSel(this.active, e)) return;
-      this.extent = e; this.updateSelectionUI();
-      this.cellEl(this.extent.r, this.extent.c).scrollIntoView({ block: 'nearest', inline: 'nearest' });
+      this.extent = e;
+      if (this.virtual) this._vEnsureVisible(e.r);
+      this.updateSelectionUI();
+      if (!this.virtual) this.cellEl(this.extent.r, this.extent.c).scrollIntoView({ block: 'nearest', inline: 'nearest' });
       this._fireSelection();
     }
     selectRect(r0, c0, r1, c1) {
@@ -1458,8 +1563,9 @@
     }
     focusAndSelect(sel) {
       this.active = { ...sel.active }; this.extent = { ...sel.extent };
+      if (this.virtual) this._vEnsureVisible(this.active.r);
       this.place(this.editor, this.activeTd()); this.toNav(); this.editor.focus(); this.updateSelectionUI();
-      this.activeTd().scrollIntoView({ block: 'nearest', inline: 'nearest' });
+      if (!this.virtual) this.activeTd().scrollIntoView({ block: 'nearest', inline: 'nearest' });
       this._fireSelection();
     }
 
@@ -1610,7 +1716,10 @@
       } else if (th.dataset.r != null) {                // 行ヘッダ
         const r = +th.dataset.r;
         if (e.shiftKey) this._extendRow(r); else this.selectRow(r);
-        this.editor.focus(); this.headerDrag = 'row';
+        this.editor.focus();
+        // 'header'モード: 行ヘッダーセル全体が移動ハンドル＝行を選択した上で移動を armする（クリック=選択のまま／ドラッグで移動）。縦結合/フィルタ中は不可。
+        if (this.rowReorderWhole && !e.shiftKey && !this._hasVMerge() && !this._allRows) this._startRowMove(e);
+        else this.headerDrag = 'row';   // 通常: ドラッグで複数行選択
       } else {                                          // 左上の角 → 全選択
         this.selectAll(); this.editor.focus();
       }
@@ -2109,11 +2218,72 @@
     clearCopyMarquee() { this.copybox.style.display = 'none'; this.pendingCut = null; }
 
     _tdAtPoint(e) { const el = document.elementFromPoint(e.clientX, e.clientY); return el && el.closest ? el.closest('td[data-r]') : null; }
+    // ポインタ Y から絶対行を算出（td が無い窓外/スペーサ上でも使える＝仮想スクロールのドラッグ用。一定行高モデル）。
+    _rowFromPointerY(clientY) {
+      const wr = this.wrap.getBoundingClientRect();
+      const contentY = clientY - wr.top + this.wrap.scrollTop - (this.colHeaders ? (this._theadH || 0) : 0);
+      return Math.max(0, Math.min(this.ROWS - 1, Math.floor(contentY / this.defRowH)));
+    }
+    // ポインタ X から列を算出（_colLefts 累積から。隠し列は飛ばす）。
+    _colFromPointerX(clientX) {
+      const wr = this.wrap.getBoundingClientRect(), x = clientX - wr.left + this.wrap.scrollLeft, L = this._colLefts;
+      if (L) for (let c = this.COLS - 1; c >= 0; c--) if (!this._isHidden(c) && x >= L[c]) return c;
+      return this.extent.c;
+    }
+    _stopAutoScroll() { if (this._asRAF) { try { cancelAnimationFrame(this._asRAF); } catch (_) {} this._asRAF = 0; } this._dragDir = 0; }
+    _updateFillPreview(r, c, alt) {
+      this._fillRow = r;
+      const fr = this.fillRectFromPointer(r, c, this.filling.src, alt);
+      if (fr) { this.placeRect(this.fillpreview, fr.r0, fr.c0, fr.r1, fr.c1); this.fillpreview.style.display = 'block'; }
+      else this.fillpreview.style.display = 'none';
+    }
+    // ドラッグ/フィル中に上下端を越えたら自動スクロールしながら選択/プレビューを伸ばす。
+    // 重要: 伸ばす先は「カウンタ加算」でなく常に【ポインタ位置の行】＝端を1pxだけ超えたら1行しか伸びない（暴走しない）。
+    // 自動スクロール速度は端からのはみ出し量に比例（少し超えた＝ゆっくり / 大きく超えた＝速く）。
+    _edgeAutoScroll(e, mode) {
+      this._dragY = e.clientY; this._dragX = e.clientX; this._dragAlt = !!e.altKey; this._dragMode = mode;
+      const r = this._rowFromPointerY(e.clientY), c = this._colFromPointerX(e.clientX);
+      if (mode === 'drag') this._extendTo(r, c); else this._updateFillPreview(r, c, this._dragAlt);   // まずポインタ位置のセルへ
+      const wr = this.wrap.getBoundingClientRect();
+      const headB = wr.top + (this.colHeaders ? (this._theadH || 0) : 0);   // 上端＝ヘッダ下
+      const leftB = wr.left + this._frozenPaneW();                          // 左端＝固定ペイン(行番号+固定列)の右
+      const past = e.clientY > wr.bottom || e.clientY < headB || e.clientX > wr.right || e.clientX < leftB;
+      if (past && !this._asRAF) this._asRAF = requestAnimationFrame(() => this._autoScrollTick());
+    }
+    _autoScrollTick() {
+      this._asRAF = 0;
+      if (!this.dragging && !this.filling) return;
+      const wr = this.wrap.getBoundingClientRect();
+      const headB = wr.top + (this.colHeaders ? (this._theadH || 0) : 0), leftB = wr.left + this._frozenPaneW();
+      const amp = d => Math.min(24, 2 + d * 0.2);   // px/フレーム＝はみ出し量に比例（上限24・暴走しない）
+      let v = 0, vh = 0;
+      if (this._dragY > wr.bottom) v = amp(this._dragY - wr.bottom); else if (this._dragY < headB) v = -amp(headB - this._dragY);
+      if (this._dragX > wr.right) vh = amp(this._dragX - wr.right); else if (this._dragX < leftB) vh = -amp(leftB - this._dragX);
+      if (v !== 0) {
+        const before = this.wrap.scrollTop;
+        this.wrap.scrollTop = Math.max(0, before + v);
+        if (this.wrap.scrollTop !== before && this.virtual) this._renderWindow(this._vWindow(), false);   // 縦は仮想時のみ再窓（非仮想で呼ぶと tbody を壊す）
+      }
+      if (vh !== 0) this.wrap.scrollLeft = Math.max(0, this.wrap.scrollLeft + vh);   // 横は全列描画なので scrollLeft だけ
+      const r = this._rowFromPointerY(this._dragY), c = this._colFromPointerX(this._dragX);   // 伸ばす先は常にポインタのセル
+      if (this._dragMode === 'drag') this._extendTo(r, c); else this._updateFillPreview(r, c, this._dragAlt);
+      const maxTop = this.wrap.scrollHeight - this.wrap.clientHeight, maxLeft = this.wrap.scrollWidth - this.wrap.clientWidth;
+      const vStuck = (v > 0 && this.wrap.scrollTop >= maxTop) || (v < 0 && this.wrap.scrollTop <= 0);
+      const hStuck = (vh > 0 && this.wrap.scrollLeft >= maxLeft) || (vh < 0 && this.wrap.scrollLeft <= 0);
+      if ((v !== 0 && !vStuck) || (vh !== 0 && !hStuck)) this._asRAF = requestAnimationFrame(() => this._autoScrollTick());
+    }
+    // setExtent の自動可視化(_vEnsureVisible)を伴わない版＝自動スクロールは _autoScrollTick が手動制御するため、二重スクロールを避ける。
+    _extendTo(r, c) {
+      const e = { r: this.clampR(r), c: this.clampC(c) };
+      if (!this._beforeSel(this.active, e)) return;
+      this.extent = e; this.updateSelectionUI(); this._fireSelection();
+    }
 
     // スクロール / リサイズでセル位置が動いた時、エディタと選択枠を貼り直す
     _reflow() {
       if (this.stretchH !== 'none') this._applyStretch();   // 枠幅が変わったら余白を再配分
       this._buildGeomCache();   // 幅/枠が変わったので実測幾何を取り直す（リサイズ/ResizeObserver/window resize）
+      if (this.virtual) this._renderWindow(this._vWindow(), false);   // 枠高が変われば窓行数も変わる＝窓を同期
       const td = this.activeTd(); if (!td) return;
       this.place(this.editor, td);
       if (this.select && this.select.style.display !== 'none') this.place(this.select, td);
@@ -2121,6 +2291,7 @@
     }
 
     _bind() {
+      if (this.virtual) this.wrap.addEventListener('scroll', () => this._vSync(), { passive: true });  // 仮想スクロール: 窓再描画
       this.editor.addEventListener('keydown', (e) => this._onKey(e));
       this.editor.addEventListener('compositionstart', () => {
         if (this.mode !== 'nav') return;
@@ -2158,7 +2329,7 @@
         const cls = e.target.classList;
         if (cls && cls.contains('tg-colgrip')) { this._startColResize(e); return; }  // 列幅リサイズ
         if (cls && cls.contains('tg-rowgrip')) { this._startRowResize(e); return; }  // 行高リサイズ
-        if (cls && cls.contains('tg-rowmove')) { this._startRowMove(e); return; }    // 行つまみドラッグ移動
+        if (cls && cls.contains('tg-rowmove') && !this.rowReorderWhole) { this._startRowMove(e); return; }    // ⠿つまみドラッグ移動（'header'モードはセル全体扱い＝_onHeaderMouseDown 経由で選択も伴う）
         const th = e.target.closest('th');
         if (th) { this._onHeaderMouseDown(e, th); return; }   // 行/列/全体 選択
         const td = e.target.closest('td[data-r]'); if (!td) return;
@@ -2188,7 +2359,7 @@
         const td = e.target.closest('td[data-r]'); if (!td) return;
         this.setActive(+td.dataset.r, +td.dataset.c); this._beginEdit(this.active.r, this.active.c);
       });
-      this.fillhandle.addEventListener('mousedown', (e) => { e.preventDefault(); e.stopPropagation(); this.filling = { src: this.rectRange() }; });
+      this.fillhandle.addEventListener('mousedown', (e) => { e.preventDefault(); e.stopPropagation(); this.filling = { src: this.rectRange() }; this._fillRow = null; });
       // 右クリックメニュー（行/列の挿入・削除）
       this.table.addEventListener('contextmenu', (e) => this._onContextMenu(e));
       this.menuEl.addEventListener('mousedown', (e) => {
@@ -2256,12 +2427,15 @@
           }
           return;
         }
-        if (this.dragging) { const td = this._tdAtPoint(e); if (td) this.setExtent(+td.dataset.r, +td.dataset.c); }
+        if (this.dragging) {
+          const td = this._tdAtPoint(e);
+          if (td) { this._stopAutoScroll(); this.setExtent(+td.dataset.r, +td.dataset.c); }
+          else this._edgeAutoScroll(e, 'drag');   // 窓外/端＝自動スクロール＋モデル幾何で伸ばす
+        }
         else if (this.filling) {
-          const td = this._tdAtPoint(e); if (!td) return;
-          const fr = this.fillRectFromPointer(+td.dataset.r, +td.dataset.c, this.filling.src, e.altKey);
-          if (fr) { this.placeRect(this.fillpreview, fr.r0, fr.c0, fr.r1, fr.c1); this.fillpreview.style.display = 'block'; }
-          else this.fillpreview.style.display = 'none';
+          const td = this._tdAtPoint(e);
+          if (td) { this._stopAutoScroll(); this._updateFillPreview(+td.dataset.r, +td.dataset.c, e.altKey); }
+          else this._edgeAutoScroll(e, 'fill');
         }
       });
       this._on(document, 'mouseup', (e) => {
@@ -2280,8 +2454,9 @@
           return;
         }
         if (this.headerDrag) { this.headerDrag = null; return; }
-        if (this.dragging) { this.dragging = false; return; }
+        if (this.dragging) { this.dragging = false; this._stopAutoScroll(); return; }
         if (this.filling) {
+          this._stopAutoScroll();
           // autoInsertRow: フィルハンドルをテーブル下端より下へドロップしたら、足りない行を追加（縦フィル時）
           if (this.fillAutoInsertRow && this.fillDirection !== 'horizontal' && !this._tdAtPoint(e)) {
             const tb = this.table.getBoundingClientRect();
@@ -2291,8 +2466,11 @@
               this.buildTable();
             }
           }
-          const td = this._tdAtPoint(e) || this.cellEl(this.filling.src.r1, this.filling.src.c1);
-          const fr = this.fillRectFromPointer(+td.dataset.r, +td.dataset.c, this.filling.src, e.altKey);
+          // 確定の対象セル: td があればそれ、無ければ（窓外）モデル幾何＝直近のフィル行/ポインタ位置から。
+          const td = this._tdAtPoint(e);
+          const tr = td ? +td.dataset.r : (this._fillRow != null ? this._fillRow : this._rowFromPointerY(e.clientY));
+          const tc = td ? +td.dataset.c : this._colFromPointerX(e.clientX);
+          const fr = this.fillRectFromPointer(tr, tc, this.filling.src, e.altKey);
           this.fillpreview.style.display = 'none';
           const src = this.filling.src; this.filling = null;
           if (fr) { this.doFill(src, fr, e.ctrlKey || e.metaKey); this.selectRect(fr.r0, fr.c0, fr.r1, fr.c1); }