グリッドオプション

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

ReogridOptions

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

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

オプション一覧

マウント先の指定

マウント先は 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.rows);    // 500
console.log(ws.columns); // 50

描画制御

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

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

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

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

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

インスタンスの破棄

grid.destroy();

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

• DOM 要素の削除
• イベントリスナーの解除
• Canvas リソースの解放
• タイマーの停止