グリッドオプション

このページでは createReogrid() に渡すオプションと、グリッドの動作を制御するランタイム API について説明します。

ReogridOptions

import { createReogrid } from '@reogrid/lite';

const grid = createReogrid({
  workspace: '#grid',
  undoCapacity: 50,
  animation: true,
  animationDuration: 300,
  animationEasing: 'easeOutCubic',
  injectStyles: true,
});

オプション一覧

animation* オプションはPro版で利用可能です。formula オプションは @reogrid/lite では受け付けられません（core/Pro 専用）。

ヘッダーフォント

v1.6.0 より前、行番号・列名は 12px sans-serif 固定で描画されていたため、本文フォントを変えてもヘッダーだけ揃えられませんでした。現在は独自のフォントを指定できます。

// ブック全体に
const grid = createReogrid({
  workspace: '#grid',
  headerFont: { fontFamily: 'Meiryo', fontSize: 14 },
});

// 実行時に — あとで追加したシートにも引き継がれます
grid.setHeaderFont({ fontSize: 16 });

// シート単位に
grid.worksheet.setHeaderFont({ fontFamily: '"Segoe UI", Roboto, sans-serif' });

// 読み出し
grid.getHeaderFont();      // { fontFamily, fontSize }

指定は部分で構いません。{ fontSize: 14 } はファミリーを保ったままサイズだけ変え、null で既定に戻ります。ファミリーは単独名（'Meiryo'）でもスタック（'"Segoe UI", Roboto, sans-serif'）でも受け付けます。

ヘッダー帯はフォントに合わせて広がるので、大きくしても番号が欠けません（既定より小さいフォントでは既定のレイアウトのまま縮みません）。

これは CellStyle とは独立した画面の設定です。xlsx／JSON には保存されません。

自動調整のスキャン上限

列幅の自動調整はセルの文字を計測するため、巨大なシートではそこが重くなります。autoFitMaxScanRows（既定 1000）は、計測する行数の上限を決めます。

const grid = createReogrid({ workspace: '#grid', autoFitMaxScanRows: 5000 });

// 実行時に変更 — 1 未満は 1 に丸め、非有限値は既定に戻ります
grid.worksheet.setAutoFitMaxScanRows(5000);
grid.worksheet.getAutoFitMaxScanRows();

このオプションは v1.5.0 で WorksheetOptions に追加されましたが、v1.6.0 まで createReogrid() からは到達できませんでした。現在はブック内のすべてのシート（初期・実行時追加・インポート）に引き継がれます。

マウント先の指定

マウント先は 3 通りの方法で指定できます。

// 1. セレクター文字列
const grid = createReogrid('#grid');

// 2. HTMLElement
const el = document.getElementById('grid')!;
const grid = createReogrid(el);

// 3. オプションオブジェクト
const grid = createReogrid({ workspace: '#grid' });

React / Vue でのオプション指定

フレームワークラッパーでは options プロパティでオプションを渡します。workspace はコンポーネントの DOM 要素が自動的に使用されるため指定不要です。

React

<Reogrid
  options={{
    undoCapacity: 50,
    animation: true,
    animationDuration: 500,
  }}
  style={{ flex: 1 }}
/>

Vue

<Reogrid
  :options="{
    undoCapacity: 50,
    animation: true,
    animationDuration: 500,
  }"
  style="flex: 1"
/>

グリッド線の表示制御

セル間のグリッド線を表示・非表示にします。

const ws = grid.worksheet;

// グリッド線を非表示にする
ws.setShowGridLines(false);

// グリッド線を表示する
ws.setShowGridLines(true);

// 現在の状態を取得
const visible = ws.getShowGridLines(); // boolean

// プロパティ経由でのアクセス
ws.showGridLines = false;

グリッドサイズ

// 行数・列数を変更
ws.setGridSize(500, 50); // 500行 × 50列

// 現在のサイズ
console.log(ws.rowCount);    // 500
console.log(ws.columnCount); // 50

Lite版ではグリッドサイズは 100行 × 26列 に制限されます — 上記の呼び出し後、ws.rowCount は 100 を返します。

描画制御

// 描画を一時停止（大量更新時のパフォーマンス最適化）
ws.suspendRender();

// ... セルの一括操作 ...

// 描画を再開（自動的に再描画が発生）
ws.resumeRender();

// 手動で再描画をリクエスト
ws.render();

// リサイズ
ws.resize(800, 600); // サイズ指定
ws.resize();          // コンテナに合わせて自動調整

キーボードフォーカス

グリッドのショートカット（Undo / Redo、コピー・カット・ペースト、矢印キーでの移動）は、グリッドがキーボードフォーカスを持っている間だけ届きます。ホスト側のツールバーやメニューを操作するとフォーカスが移る（<button> をクリックするとそのボタンにフォーカスが移る）ため、処理の最後に grid.focus()（v1.5.0）を呼び戻してください。

boldButton.addEventListener('click', () => {
  grid.worksheet.selection.range?.setBold(true);
  grid.focus();   // v1.5.0 — キーボードフォーカスをグリッドへ戻す
});

呼ばない場合、次の Ctrl/Cmd+Z はブラウザへ抜けてしまいます。macOS ではグリッドではなくブラウザ自身の「元に戻す」が動作します。

インスタンスの破棄

grid.destroy();

destroy() は以下を実行します：

• イベントリスナーの解除
• オーバーレイとセルエディタの削除
• Canvas リソースの解放

なお、初期化時に作成された DOM 要素はそのまま残ります。