PRO freeze panes scroll
列・行の固定
固定行・固定列をインタラクティブに切り替え。50行のデータをスクロールしてもヘッダーは固定表示。
デモの解説
このデモは 50 行の地域別売上テーブルに 12 ヶ月分の列を描画し、ボタンで 4 種類のフリーズ設定を切り替えられます。
- 「行を固定」— 行 0 を固定して 50 行をスクロールしても常にヘッダーが表示
- 「列を固定」— 地域列を固定して 1〜12 月の列をスクロール
- 「両方固定」— 行 0 と列 0 を同時に固定しコーナーセルを常時表示
- 「固定なし」— 全方向に自由にスクロール可能
- 固定部分は独立した Canvas レイヤーで描画されるため、パフォーマンスへの影響ゼロ
主要 API
ws.setFrozenRows(count) 上 N 行を固定して垂直スクロール中も常に表示
ws.setFrozenColumns(count) 左 N 列を固定して水平スクロール中も常に表示
ws.setGridSize(rows, cols) データ入力前にワークシートのサイズを設定
ws.cell(row, col).setStyle(style) 固定ヘッダーセルに太字・背景色などのスタイルを適用
ソースコード
TypeScript