@threestarsoftware/tssgrid 0.0.4 → 0.0.5

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,9 +255,21 @@ 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)。
+`plugins/tss-filter.js`＋`.css`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝ 各見出しの**ロート（漏斗）アイコン**をクリックで**値チェックリスト＋検索**のポップアップ（Excel風。ソートの▲▼と区別できるアイコン）。複数列の条件は **AND**。中身は上の**コア `filter()` を呼ぶだけ**。動く例: [`examples/filter-ui.html`](https://tssgrid.threestarsoftware.co.jp/examples/filter-ui.html)。
 
 ```html
 <link rel="stylesheet" href="plugins/tss-filter.css">
@@ -271,7 +284,7 @@ grid.getPlugin('filter').clearAll();            // 全条件クリア
 
 ### 同梱プラグイン: 共有マスタ（複数グリッドで1データ）
 
-`plugins/tss-shared.js`＝ **1つのマスタ（同じ行データ）を複数グリッドで共有**。左右を**別フィルタ/別ソート**で表示でき、**片方の編集がもう片方の同じ行へ即反映**（行参照を共有）。A系/B系を並べて突き合わせ編集する用途。動く例: [`examples/shared-master.html`](https://tssgrid.threestarsoftware.co.jp/examples/shared-master.html)。
+`plugins/tss-shared.js`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝ **1つのマスタ（同じ行データ）を複数グリッドで共有**。左右を**別フィルタ/別ソート**で表示でき、**片方の編集がもう片方の同じ行へ即反映**（行参照を共有）。A系/B系を並べて突き合わせ編集する用途。動く例: [`examples/shared-master.html`](https://tssgrid.threestarsoftware.co.jp/examples/shared-master.html)。
 
 ```html
 <script src="plugins/tss-shared.js"></script>
@@ -322,7 +335,7 @@ TssGrid.registerPlugin('autosave', autoSavePlugin);   // 名前登録 → plugin
 
 ## カスタムエディタ
 
-組込エディタ（text/dropdown/checkbox/date/time/number）以外に、**独自の編集UI**を列に差せます。`columns[c].editor` に**薄いオブジェクト契約**を渡すだけ。
+組込エディタ（text/dropdown/checkbox/date/time/number）以外に、**独自の編集UI**を列に差せます。`columns[c].editor` に**薄いオブジェクト契約**を渡すだけ<!--DEV-->（無依存）<!--/DEV-->。
 
 ```js
 const myEditor = {
@@ -349,7 +362,7 @@ new TssGrid(el, { columns: [{ editor: myEditor }] });
 
 ### 同梱プラグイン: 休日カレンダー対応の日付ピッカー
 
-`plugins/tss-calendar.js`＝ ネイティブ `<input type=date>` では出来ない**会社の休日カレンダー（JSON）対応**の日付ピッカー。勤怠・シフト・予約などで効きます（動く例: [`examples/calendar.html`](https://tssgrid.threestarsoftware.co.jp/examples/calendar.html)）。
+`plugins/tss-calendar.js`<!--DEV-->（**無依存**）<!--/DEV-->＝ ネイティブ `<input type=date>` では出来ない**会社の休日カレンダー（JSON）対応**の日付ピッカー。勤怠・シフト・予約などで効きます（動く例: [`examples/calendar.html`](https://tssgrid.threestarsoftware.co.jp/examples/calendar.html)）。
 
 ```html
 <link rel="stylesheet" href="plugins/tss-calendar.css">
@@ -370,7 +383,7 @@ new TssGrid(el, { columns: [{ type: 'date', editor: cal, format: 'yyyy/mm/dd' }]
 
 ### 同梱プラグイン: 時刻ピッカー（時/分プルダウン）
 
-`plugins/tss-time.js`＝ 業務の時刻入力向けの**時/分プルダウン**ピッカー（クロックフェイスのようなリッチさは省き、任意時刻を素早く）。保存値は常に **24h `'HH:MM'`**（組込 `type:'time'` と互換）。動く例: [`examples/time.html`](https://tssgrid.threestarsoftware.co.jp/examples/time.html)。
+`plugins/tss-time.js`<!--DEV-->（**無依存**）<!--/DEV-->＝ 業務の時刻入力向けの**時/分プルダウン**ピッカー（クロックフェイスのようなリッチさは省き、任意時刻を素早く）。保存値は常に **24h `'HH:MM'`**（組込 `type:'time'` と互換）。動く例: [`examples/time.html`](https://tssgrid.threestarsoftware.co.jp/examples/time.html)。
 
 ```html
 <link rel="stylesheet" href="plugins/tss-time.css">
@@ -385,7 +398,7 @@ new TssGrid(el, { columns: [{ type: 'time', editor: t }] });
 
 ### 同梱プラグイン: 派生列（formula / computed column）
 
-`plugins/tss-formula.js`＝「その行の値だけから計算する列」を `columns[c].formula` 関数で書けるようにする。金額＝数量×単価、税込＝金額×1.1 のような**派生列**を宣言的に。動く例: [`examples/formula.html`](https://tssgrid.threestarsoftware.co.jp/examples/formula.html)。
+`plugins/tss-formula.js`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝「その行の値だけから計算する列」を `columns[c].formula` 関数で書けるようにする。金額＝数量×単価、税込＝金額×1.1 のような**派生列**を宣言的に。動く例: [`examples/formula.html`](https://tssgrid.threestarsoftware.co.jp/examples/formula.html)。
 
 ```html
 <script src="plugins/tss-formula.js"></script>
@@ -408,7 +421,7 @@ new TssGrid(el, {
 
 ### 同梱プラグイン: 列の集計（totals / 縦の SUM・平均…）
 
-`plugins/tss-totals.js`＝ 列方向の集計（`sum`/`avg`/`count`/`min`/`max`/独自関数）を担う。**計算だけで描画はしない**＝結果を `onTotals` で受けて好きな場所へ（フッタ・ラベル・**別の TssGrid の合計表**でも）。`formula` と併用すると派生列の後に集計が連動。動く例: [`examples/formula.html`](https://tssgrid.threestarsoftware.co.jp/examples/formula.html)（明細＝formula／合計＝totals）。
+`plugins/tss-totals.js`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝ 列方向の集計（`sum`/`avg`/`count`/`min`/`max`/独自関数）を担う。**計算だけで描画はしない**＝結果を `onTotals` で受けて好きな場所へ（フッタ・ラベル・**別の TssGrid の合計表**でも）。`formula` と併用すると派生列の後に集計が連動。動く例: [`examples/formula.html`](https://tssgrid.threestarsoftware.co.jp/examples/formula.html)（明細＝formula／合計＝totals）。
 
 ```html
 <script src="plugins/tss-totals.js"></script>
@@ -429,7 +442,7 @@ new TssGrid(el, {
 
 ### 同梱プラグイン: 条件付き合計（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)（インボイス請求書の合計欄）。
+`plugins/tss-sum.js`<!--DEV-->（**無依存・コア無改変**／ラベル横結合に TssMerge を任意利用）<!--/DEV-->＝ **ラベル付きの"合計行"**（小計・消費税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>  <!-- ラベルの横結合に利用 -->
@@ -453,7 +466,7 @@ const sum = TssSum.attach(grid, document.getElementById('sumgrid'), {
 
 ### 同梱プラグイン: 残高／累計（running total・縦の連鎖）
 
-`plugins/tss-running.js`＝「**前の行の結果 ＋ この行の増減**」で縦に積む列。`formula`（行内）でも `totals`（全体合計）でも出せない**縦方向の連鎖**を担う。出納帳/通帳の**残高**、在庫受払の**在庫数**、経費・ポイントの**累計**など。動く例: [`examples/running.html`](https://tssgrid.threestarsoftware.co.jp/examples/running.html)（現金出納帳＝入金・出金→残高）。
+`plugins/tss-running.js`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝「**前の行の結果 ＋ この行の増減**」で縦に積む列。`formula`（行内）でも `totals`（全体合計）でも出せない**縦方向の連鎖**を担う。出納帳/通帳の**残高**、在庫受払の**在庫数**、経費・ポイントの**累計**など。動く例: [`examples/running.html`](https://tssgrid.threestarsoftware.co.jp/examples/running.html)（現金出納帳＝入金・出金→残高）。
 
 ```html
 <script src="plugins/tss-running.js"></script>
@@ -472,11 +485,11 @@ new TssGrid(el, {
 - `column`(残高列) / `initial`(前残) / `delta` か `step` / `skipEmpty`(全列空の行は連鎖を進めず空表示、既定true)。
 - **行ドラッグ移動(rowReorder)併用時**は順序が変わるので `onAfterRowMove` で `handle.recompute()` を呼ぶ。
 
-> 「**行＝formula／列＝totals／縦＝running**」の3点が揃う。いずれも `setValueRaw`＋`onAfterChange` ラップで動く**プラグイン**。
+> 「**行＝formula／列＝totals／縦＝running**」の3点が揃う。いずれも `setValueRaw`＋`onAfterChange` ラップで動く**<!--DEV-->コア無改変<!--/DEV-->プラグイン**。
 
 ### 同梱プラグイン: 氏名→フリガナ 自動入力（furigana・辞書不要）
 
-`plugins/tss-furigana.js`（**辞書不要**）＝ 漢字を入力（IME変換）すると**読みが別列に自動で入る**（スマホ連絡先の よみがな 自動入力と同じ）。辞書引きではなく、**IME変換の composition イベントから「変換前のかな」を拾う**方式。TssGrid は**アクティブセルに本物の `<input>` を重ねる**設計なので composition が確実に取れる＝「**IMEに強い**」を機能で体現。動く例: [`examples/furigana.html`](https://tssgrid.threestarsoftware.co.jp/examples/furigana.html)。
+`plugins/tss-furigana.js`（**<!--DEV-->無依存・<!--/DEV-->辞書不要<!--DEV-->・コア無改変<!--/DEV-->**）＝ 漢字を入力（IME変換）すると**読みが別列に自動で入る**（スマホ連絡先の よみがな 自動入力と同じ）。辞書引きではなく、**IME変換の composition イベントから「変換前のかな」を拾う**方式。TssGrid は**アクティブセルに本物の `<input>` を重ねる**設計なので composition が確実に取れる＝「**IMEに強い**」を機能で体現。動く例: [`examples/furigana.html`](https://tssgrid.threestarsoftware.co.jp/examples/furigana.html)。
 
 ```html
 <script src="plugins/tss-furigana.js"></script>
@@ -493,7 +506,7 @@ new TssGrid(el, {
 
 ### 同梱プラグイン: セル内ミニ計算式（calc・=12*3）
 
-`plugins/tss-calc.js`（**eval/Function 不使用**）＝ セルに `=12*3+5` と打つと確定時に **41** に。四則 `+ - * /`・括弧・小数対応の**自前再帰下降パーサ**（CSP安全）。`columns[c].parse`（入力変換）seam に乗るだけ。動く例: [`examples/calc.html`](https://tssgrid.threestarsoftware.co.jp/examples/calc.html)。
+`plugins/tss-calc.js`（**<!--DEV-->無依存・<!--/DEV-->eval/Function 不使用<!--DEV-->・コア無改変<!--/DEV-->**）＝ セルに `=12*3+5` と打つと確定時に **41** に。四則 `+ - * /`・括弧・小数対応の**自前再帰下降パーサ**（CSP安全）。`columns[c].parse`（入力変換）seam に乗るだけ。動く例: [`examples/calc.html`](https://tssgrid.threestarsoftware.co.jp/examples/calc.html)。
 
 ```html
 <script src="plugins/tss-calc.js"></script>
@@ -509,7 +522,7 @@ plugins: [ TssCalc.plugin({ columns: ['quantity', 'price'] }) ]   // columns 省
 
 ### 同梱プラグイン: オートコンプリート（autocomplete エディタ）
 
-`plugins/tss-autocomplete.js`＝ 自由入力＋**候補の絞り込み**。固定 dropdown の上位版で「だいたい決まってるが新規もある」項目（取引先・商品名）向け。**IME変換中の Enter は奪わない**（変換確定が最優先）。動く例: [`examples/autocomplete.html`](https://tssgrid.threestarsoftware.co.jp/examples/autocomplete.html)。
+`plugins/tss-autocomplete.js`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝ 自由入力＋**候補の絞り込み**。固定 dropdown の上位版で「だいたい決まってるが新規もある」項目（取引先・商品名）向け。**IME変換中の Enter は奪わない**（変換確定が最優先）。動く例: [`examples/autocomplete.html`](https://tssgrid.threestarsoftware.co.jp/examples/autocomplete.html)。
 
 ```html
 <link rel="stylesheet" href="plugins/tss-autocomplete.css">
@@ -527,7 +540,7 @@ columns: [
 
 ### 同梱プラグイン: セル内スパークライン（sparkline・ミニグラフ）
 
-`plugins/tss-sparkline.js`（**SVG自前描画**）＝ セルの数列を**ミニ折れ線/棒**で描く。`columns[c].html:true` ＋ `format`（format が返す SVG がセルに入る）seam に乗るだけ。Chart.js 等は積まない。動く例: [`examples/sparkline.html`](https://tssgrid.threestarsoftware.co.jp/examples/sparkline.html)（月次売上→動向グラフ・編集でライブ更新）。
+`plugins/tss-sparkline.js`（**<!--DEV-->無依存・<!--/DEV-->SVG自前描画<!--DEV-->・コア無改変<!--/DEV-->**）＝ セルの数列を**ミニ折れ線/棒**で描く。`columns[c].html:true` ＋ `format`（format が返す SVG がセルに入る）seam に乗るだけ。Chart.js 等は積まない。動く例: [`examples/sparkline.html`](https://tssgrid.threestarsoftware.co.jp/examples/sparkline.html)（月次売上→動向グラフ・編集でライブ更新）。
 
 ```html
 <script src="plugins/tss-sparkline.js"></script>
@@ -541,11 +554,11 @@ columns: [
   formula: (row) => ['m4','m5','m6','m7','m8','m9'].map(k=>row[k]).filter(v=>v!=='').join(',') }
 ```
 - `type`('line'/'bar') / `width` / `height` / `color` / `strokeWidth` / `fill`(折れ線下の塗り) / `min`・`max`(既定は自動)。
-- 数値しか SVG に入れない＝安全。`formula`/`html-cells` と同じ仕組みで、**有料グリッドの "セル内グラフ" を無料で**。
+- 数値しか SVG に入れない＝安全。`formula`/`html-cells` と同じ仕組みで、**有料グリッドの "セル内グラフ" を無料<!--DEV-->・無依存<!--/DEV-->で**。
 
 ### 同梱プラグイン: セル内 横棒グラフ（bar・データバー）
 
-`plugins/tss-bar.js`＝ セルの数値を**横棒**で描く（認知率・進捗%・スコア）。`html:true`＋`format` seam。`type:'number'` 併用で**バーのまま編集**（値を打つと伸びる）。動く例: [`examples/bar.html`](https://tssgrid.threestarsoftware.co.jp/examples/bar.html)。
+`plugins/tss-bar.js`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝ セルの数値を**横棒**で描く（認知率・進捗%・スコア）。`html:true`＋`format` seam。`type:'number'` 併用で**バーのまま編集**（値を打つと伸びる）。動く例: [`examples/bar.html`](https://tssgrid.threestarsoftware.co.jp/examples/bar.html)。
 
 ```html
 <script src="plugins/tss-bar.js"></script>
@@ -560,7 +573,7 @@ columns: [
 
 ### 同梱プラグイン: ヒートマップ / 背景データバー（cellStyle）
 
-`plugins/tss-heatmap.js`＝ コアの `cellStyle` フックに乗せる**連続色（ヒートマップ）**と**背景データバー**。`tss-bar.js`（前景の棒＋ラベル）と違い、**セル背景**を塗る＝**数値はそのまま見せて編集できる**。動く例: [`examples/heatmap.html`](https://tssgrid.threestarsoftware.co.jp/examples/heatmap.html)。
+`plugins/tss-heatmap.js`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝ コアの `cellStyle` フックに乗せる**連続色（ヒートマップ）**と**背景データバー**。`tss-bar.js`（前景の棒＋ラベル）と違い、**セル背景**を塗る＝**数値はそのまま見せて編集できる**。動く例: [`examples/heatmap.html`](https://tssgrid.threestarsoftware.co.jp/examples/heatmap.html)。
 
 ```html
 <script src="plugins/tss-heatmap.js"></script>
@@ -574,7 +587,7 @@ columns: [
 - `TssHeatmap`: `min`/`max`（明示。セル単位呼び出しで列範囲を知らないため）/ `colors`(2色以上のストップ) or `low`/`high` / `text`(自動文字色, 既定on)。
 - `TssDataBar`: `min`/`max` / `color` / `align`('left'/'right')。編集で即更新。
 
-> 「セル内グラフ」3点: **前景の折れ線/棒＝`html:true`+`format`（tss-sparkline / tss-bar）**、**背景の連続色/バー＝`cellStyle`（tss-heatmap）**。どれもノービルド。
+> 「セル内グラフ」3点: **前景の折れ線/棒＝`html:true`+`format`（tss-sparkline / tss-bar）**、**背景の連続色/バー＝`cellStyle`（tss-heatmap）**。どれも<!--DEV-->無依存・<!--/DEV-->ノービルド。
 
 ### グラフ連携（Chart.js などと）— 編集でライブ更新
 
@@ -588,7 +601,7 @@ new TssGrid(el, { columns, data, onAfterChange: () => { chart.data = toChartData
 
 ### 同梱プラグイン: 2択トグル（toggle・有効｜無効）
 
-`plugins/tss-toggle.js`＋`.css`＝ ラジオの2択を**並んだセグメント（有効｜無効）**で表示、クリックで切替。チェックボックスより**2ラベルが見える**。値は dropdown 同様 **value を保存**。動く例: [`examples/toggle.html`](https://tssgrid.threestarsoftware.co.jp/examples/toggle.html)。
+`plugins/tss-toggle.js`＋`.css`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝ ラジオの2択を**並んだセグメント（有効｜無効）**で表示、クリックで切替。チェックボックスより**2ラベルが見える**。値は dropdown 同様 **value を保存**。動く例: [`examples/toggle.html`](https://tssgrid.threestarsoftware.co.jp/examples/toggle.html)。
 
 ```html
 <link rel="stylesheet" href="plugins/tss-toggle.css">
@@ -605,7 +618,7 @@ plugins: [ TssToggle.plugin({ columns: {
 
 ### 同梱プラグイン: セル結合（merge・横/縦/矩形）
 
-`plugins/tss-merge.js`＝ データセルの**矩形結合**（`colspan`×`rowspan`）。左上の**アンカーが値・編集・選択の対象**で、覆われた従属セルは**描画スキップ＋読み取り専用**（貼り付け・フィルは弾く）。動く例: [`examples/merge.html`](https://tssgrid.threestarsoftware.co.jp/examples/merge.html)。（見出しの結合は `nestedHeaders` を参照）
+`plugins/tss-merge.js`<!--DEV-->（**無依存**）<!--/DEV-->＝ データセルの**矩形結合**（`colspan`×`rowspan`）。左上の**アンカーが値・編集・選択の対象**で、覆われた従属セルは**描画スキップ＋読み取り専用**（貼り付け・フィルは弾く）。動く例: [`examples/merge.html`](https://tssgrid.threestarsoftware.co.jp/examples/merge.html)。（見出しの結合は `nestedHeaders` を参照）
 
 ```html
 <script src="plugins/tss-merge.js"></script>
@@ -631,7 +644,7 @@ plugins: [ TssMerge.plugin({ merges: [
 
 ### 同梱プラグイン: 同期スクロール（syncscroll・左右2表を並べて比較）
 
-`plugins/tss-syncscroll.js`＝ 並べた複数グリッドのスクロールを連動（Excel「並べて比較＋同時にスクロール」相当）。A系/B系で別々に絞り込んだ表を**突き合わせながら編集**する用途に。動く例: [`examples/sync-scroll.html`](https://tssgrid.threestarsoftware.co.jp/examples/sync-scroll.html)。
+`plugins/tss-syncscroll.js`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝ 並べた複数グリッドのスクロールを連動（Excel「並べて比較＋同時にスクロール」相当）。A系/B系で別々に絞り込んだ表を**突き合わせながら編集**する用途に。動く例: [`examples/sync-scroll.html`](https://tssgrid.threestarsoftware.co.jp/examples/sync-scroll.html)。
 
 ```html
 <script src="plugins/tss-syncscroll.js"></script>
@@ -898,7 +911,7 @@ new TssGrid(el, {
 
 ### 入力の正規化 / 表示の整形（`parse` / `format`）
 
-**保存値**（`getData()` が返す内部値）と、**入力**・**表示**を分離できます。外部ライブラリは同梱せず、必要なら列のフックに差し込む方針です。
+**保存値**（`getData()` が返す内部値）と、**入力**・**表示**を分離できます。外部ライブラリは同梱せず、必要なら列のフックに差し込む方針です<!--DEV-->（コアは無依存のまま）<!--/DEV-->。
 
 | フック | 向き | 役割 |
 |---|---|---|
@@ -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.5",
   "description": "軽量・ノービルド・日本語IME堅牢な編集グリッド（vanilla JS / 依存なし / MIT）。Excel ライクな入力画面を <script> タグ1本で。",
   "license": "MIT",
   "author": "ThreeStarSoftware (https://www.threestarsoftware.co.jp/)",

package/plugins/tss-autocomplete.js

@@ -1,4 +1,5 @@
 /*! TssAutocomplete — 候補サジェスト付きテキスト入力（TssGrid カスタムエディタ）。
+ *  DEV: 無依存・コア無改変（dev専用メモ・公開時strip）
  *
  *  自由入力＋候補の絞り込み。固定 dropdown の上位版（取引先名・商品名など「だいたい決まってるが新規もある」項目向け）。
  *  **IME変換中の Enter は奪わない**（変換確定が最優先＝TssGrid の流儀）。

package/plugins/tss-bar.js

@@ -1,4 +1,5 @@
 /*! TssBar — セル内 横棒グラフ（データバー）。
+ *  DEV: 無依存・コア無改変
  *
  *  セルの数値を**横棒**で描く（アンケートの認知率バー、進捗%、スコアなど）。
  *  `columns[c].html:true` ＋ `format` 関数 seam に乗るだけ（format が返す <div> がセルに入る）。

package/plugins/tss-calc.js

@@ -1,4 +1,5 @@
 /*! TssCalc — セル内ミニ計算式（=12*3+5 → 41）。**eval/Function 不使用**。
+ *  DEV: 無依存・コア無改変
  *
  *  セルに数式を打つと確定時に計算結果へ。四則 + - * / と括弧 () と小数に対応。
  *  パーサは再帰下降の自前実装＝**eval を使わない**（CSP安全）。`columns[c].parse` seam に乗るだけ。

package/plugins/tss-calendar.js

@@ -1,4 +1,5 @@
 /*! TssCalendar — 日付ピッカー（TssGrid のカスタムエディタ / 単体ウィジェット両用）
+ *  DEV: 無依存
  *  休日カレンダーを JSON で渡せる（勤怠・シフト等向け）。CSS は tss-calendar.css をクラス/変数で自由に。
  *  使い方（グリッド）: columns: [{ type:'date', editor: TssCalendar({ holidays }) }]
  *  使い方（単体）   : TssCalendar({holidays}).openAt(anchorEl, isoValue, onPick)

package/plugins/tss-datetime.js

@@ -1,4 +1,5 @@
 /*! TssDatetime — 日付＋時刻を同時に設定するピッカー（TssGrid カスタムエディタ / 単体ウィジェット両用）
+ *  DEV: 無依存。カレンダー部は tss-calendar.css、時刻部は tss-time.css のクラスを再利用＋薄い tss-datetime.css。
  *  保存値は常に '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)

package/plugins/tss-filter.js

@@ -1,4 +1,5 @@
 /*! TssFilter — ヘッダのオートフィルタUI（Excel風）。コアの非破壊 filter() を呼ぶだけ。
+ *  DEV: 無依存・コア無改変
  *
  *  各リーフ見出しにロート(漏斗)アイコンを出し（ソートの▲▼と区別）、クリックで「値チェックリスト＋絞り込み検索」ポップアップ。
  *  複数列の条件は AND。適用は grid.filter(pred)／全解除で grid.clearFilter()。フィルタ済み列は印が付く。

package/plugins/tss-formula.js

@@ -1,4 +1,5 @@
 /*! TssFormula — 行スコープの派生列（computed column）プラグイン。
+ *  DEV: コア無改変
  *
  *  「その行の値だけから計算する列」を columns 定義に formula 関数で書けるようにする。
  *  例: 金額 = 数量 × 単価 / 税込 = 金額 × 1.1 / 勤怠の勤務時間 など。

package/plugins/tss-furigana.js

@@ -1,4 +1,5 @@
 /*! TssFurigana — 氏名→フリガナ 自動入力プラグイン。**辞書不要**。
+ *  DEV: コア無改変
  *
  *  スマホの連絡先のように「漢字を入力すると よみ が別列に自動で入る」。仕組みは**辞書引きではなく**、
  *  IME変換の **composition イベントから「変換前の読み（かな）」を拾う**だけ。だから辞書データを持たない。

package/plugins/tss-heatmap.js

@@ -1,4 +1,5 @@
 /*! TssHeatmap / TssDataBar — セル背景の連続ビジュアライズ（cellStyle フック用）。
+ *  DEV: 無依存・コア無改変
  *
  *  コアの `cellStyle`（セルにインラインCSSを差すフック）に乗せる。cellClass（クラス＝離散色）では出せない
  *  **値に応じた連続色（ヒートマップ）／背景データバー**を、**編集できる数値セルのまま**実現する。

package/plugins/tss-merge.js

@@ -1,4 +1,5 @@
 /*! TssMerge — 矩形セル結合（colspan×rowspan）の軽量プラグイン。
+ *  DEV: コアの薄い継ぎ目を使う
  *
  *  アンカー=(r,c)=左上が値・編集・選択の対象。覆われた従属セルは描画スキップ＋読取専用（貼付/フィルは弾く）。
  *  行/列の挿入削除では結合座標がコア側で縦横対称に追従（undo 対応）。

package/plugins/tss-messages.js

@@ -1,4 +1,5 @@
 /*! TssMessages — システム共通メッセージのカタログ作成ヘルパー（CSV/行配列 → grid.messages 用マップ）。
+ *  DEV: 無依存
  *
  *  エラー本文をコードで一元管理（トーン統一・多言語・差し替え）。validator は { code, params } を返すだけにし、
  *  本文は外部の設定（CSV/JSON/XML→行配列）に置く。ここはその設定を grid.messages の形に変換する係。

package/plugins/tss-running.js

@@ -1,4 +1,5 @@
 /*! TssRunningTotal — 残高／累計（running total）プラグイン。
+ *  DEV: コア無改変
  *
  *  「前の行の結果 ＋ この行の増減」で縦に積む列を作る。formula(行内) でも totals(全体合計) でも出せない
  *  **縦方向の連鎖**を担当。出納帳/通帳の残高、在庫受払の在庫数、経費・ポイントの累計など。

package/plugins/tss-shared.js

@@ -1,4 +1,5 @@
 /*! TssShared — 1つのマスタ(行データ)を複数グリッドで共有（A系/B系を別フィルタ・別ソートで並べて同時編集）。
+ *  DEV: 無依存・コア無改変
  *  各ビューは同じ「行参照」を持つ＝片方の編集がもう片方へ即反映（該当行を再描画）。
  *  **行の挿入/削除も伝播**（マスタ＆他ビューに反映）。**配列データ／オブジェクト配列データ どちらも対応**。
  *

package/plugins/tss-sparkline.js

@@ -1,4 +1,5 @@
 /*! TssSparkline — セル内スパークライン（ミニ折れ線/棒）。**SVG自前描画**。
+ *  DEV: 無依存・コア無改変
  *
  *  セルの値（カンマ/空白区切りの数列 "388,329,220,348,323,165"）を**小さなグラフ**として描く。
  *  仕組みは `columns[c].html:true` ＋ `format` 関数＝format が返す SVG 文字列がそのままセルに入る（html-cells と同じ seam）。

package/plugins/tss-sum.js

@@ -1,4 +1,5 @@
 /*! TssSum — 条件付き合計グリッドの軽量プラグイン。
+ *  DEV: コア無改変・無依存（ラベルの横結合に TssMerge を任意利用）
  *
  *  tss-totals との住み分け: tss-totals は「列ごとの集計（sum/avg/min/max/count）」を onTotals で返す。
  *  tss-sum は「同じ列を条件別に複数集計＝ラベル付きの"合計行"（小計/消費税10%/消費税8%/合計 など）」＋

package/plugins/tss-syncscroll.js

@@ -1,4 +1,5 @@
 /*! TssSyncScroll — 複数グリッドの同期スクロール（Excel「並べて比較＋同時にスクロール」相当）。
+ *  DEV: 無依存・コア無改変
  *
  *  左右（or 上下）に並べた 2枚以上のグリッドのスクロールを連動。A系/B系で別々に絞り込んだ表を
  *  突き合わせながら編集する用途に。`grid.wrap`(overflow:auto のスクロール枠) の scroll を相手へ転写。

package/plugins/tss-time.js

@@ -1,4 +1,5 @@
 /*! TssTime — 時刻ピッカー（TssGrid のカスタムエディタ / 単体ウィジェット両用）
+ *  DEV: 無依存
  *  時/分プルダウン方式（業務の任意時刻入力向き）。保存値は常に 24h 'HH:MM'（type:'time' と互換）。
  *  使い方（グリッド）: columns: [{ type:'time', editor: TssTime({ step:15 }) }]
  *  opts: step(分刻み,既定1) / hour12(AM/PM表示,既定false) / icon(既定 '🕐') / openOnClick(既定true) / className

package/plugins/tss-toggle.js

@@ -1,4 +1,5 @@
 /*! TssToggle — 2択セグメント・トグル（有効|無効・公開|非公開・男|女 …）。
+ *  DEV: 無依存・コア無改変
  *
  *  ラジオの2択を「並んだピル（セグメント）」で表示し、クリックでどちらかに切替。値は dropdown と同じく
  *  選んだ option の value を保存（getData も value）。html:true+format で描画、クリックは委譲で拾う。

package/plugins/tss-totals.js

@@ -1,4 +1,5 @@
 /*! TssTotals — 列方向の集計（合計/平均/件数/最小/最大）プラグイン。**計算だけ＝描画は利用者側**。
+ *  DEV: コア無改変
  *
  *  「縦の合計」をコアに埋めると合計行の置き場が minSpareRows/ソート/空行処理と衝突して肥大化する。
  *  そこで **集計ロジックだけ** を担い、結果は onTotals コールバック / getTotals() で返す。

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。

package/src/tssgrid.d.ts

@@ -126,6 +126,11 @@ export interface TssGridOptions {
   cursor?: boolean;
   stretchH?: 'none' | 'last' | 'all';
   rowHeaders?: boolean;
+  /** 行番号列の幅(px)。既定 40。大量行で桁数が増える時に広げる。 */
+  rowHeaderWidth?: number;
+  /** 仮想スクロール（固定行高ウィンドウイング）。大量行を可視窓だけ描画。true か { buffer:窓上下バッファ行数(既定6) }。
+   *  制約(v1): 行高一定／固定行列・折り返し・セル結合は非対応（指定時は自動無効化）。 */
+  virtual?: boolean | { buffer?: number };
   colHeaders?: boolean;
   hiddenColumns?: number[];
   wordWrap?: boolean;

package/src/tssgrid.js

@@ -183,6 +183,7 @@
       this.resizeRows = opts.resizeRows !== false;
       // 行/列ヘッダの表示（false で行番号列・ヘッダ行を隠す）
       this.rowHeaders = opts.rowHeaders !== false;
+      this.rowHeaderW = (opts.rowHeaderWidth | 0) || 40;   // 行番号列の幅(px)。大量行で桁数が増える時に広げる
       this.colHeaders = opts.colHeaders !== false;
       // 行ヘッダの「つまみ」をドラッグして行を並べ替える（行番号列が必要）
       this.rowReorder = !!opts.rowReorder;
@@ -212,6 +213,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 +521,7 @@
     destroy() {
       if (this._destroyed) return;
       this._destroyed = true;
+      if (this._vRAF) { try { cancelAnimationFrame(this._vRAF); } catch (_) {} this._vRAF = 0; }   // 仮想スクロールの保留フレームを破棄
       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 +982,7 @@
 
     _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）
     // ---- 列の非表示 ----
     _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 +1108,101 @@
         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 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' : '')) : '';   // 行固定
+      let 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>';
+      }
+      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 +1231,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 +1336,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 +1365,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 +1428,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 +1521,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 +1545,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();
     }
 
@@ -2114,6 +2202,7 @@
     _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 +2210,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;