ReoGrid ReoGrid Web

セルデータ

ReoGrid Web では、高レベルの CellHandle API からパフォーマンス重視の低レベルメソッドまで、さまざまな方法でセルの値を読み書きできます。

Live Demo

CellHandle によるアクセス

worksheet.cell()CellHandle を取得し、値を操作します。

const ws = grid.worksheet;

// A1 アドレスで指定
ws.cell('A1').value = 'Hello';

// 行・列インデックスで指定(0 始まり)
ws.cell(0, 1).value = 'World';

// 値の読み取り
const val = ws.cell('A1').value; // 'Hello'

チェーンメソッド

setValue() はチェーン可能です。setStyle()setFormat() と組み合わせて使えます。

ws.cell('A1')
  .setValue('売上')
  .setStyle({ bold: true, backgroundColor: '#dbeafe' })
  .setFormat('#,##0');

低レベル API

パフォーマンスが重要な場合やループ内では、直接メソッドを使います。

// 値の設定
ws.setCellInput(0, 0, 'Hello');

// 値の読み取り
const raw = ws.getCellInput(0, 0);        // 入力値(文字列)
const num = ws.getCellNumericValue(0, 0);  // 数値として取得
const text = ws.getDisplayText(0, 0);      // 表示テキスト(フォーマット適用済み)

// 数値セルかどうか
const isNum = ws.isNumericCell(0, 0);

loadCells() による一括読み込み

loadCells() で複数セルを一度に設定できます。

ws.loadCells([
  { row: 0, column: 0, value: 'Name' },
  { row: 0, column: 1, value: 'Age' },
  { row: 1, column: 0, value: 'Alice' },
  { row: 1, column: 1, value: '30' },
]);

数式の入力

値が = で始まる場合、数式として解釈されます。

ws.cell('C1').value = '=A1+B1';
ws.cell('C2').value = '=SUM(A1:B10)';

数式の詳細は 数式エンジン を参照してください。


パフォーマンスのヒント

大量のセルを更新する場合、描画を一時停止するとパフォーマンスが向上します。

ws.suspendRender();
try {
  for (let r = 0; r < 1000; r++) {
    ws.setCellInput(r, 0, `Row ${r}`);
    ws.setCellInput(r, 1, String(r * 100));
  }
} finally {
  ws.resumeRender(); // 描画を再開し、まとめて再描画
}

suspendRender() は変更ごとの Canvas 再描画を抑制します。更新が完了したら resumeRender() を呼び出して、すべての変更を一度に再描画します。