JSONから一括読み込み

fetch・JSONファイル・データベースクエリなどから取得したオブジェクト配列があるとき、グリッドを一度のパスで投入し、数式グラフの再構築も一度だけにする方法です。

完成例

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

const data = [
  { product: 'Widget',    price:  9.99, qty: 40 },
  { product: 'Gadget',    price: 24.50, qty: 12 },
  { product: 'Gizmo',     price: 39.00, qty:  7 },
  // ...hundreds more
];

const { worksheet } = createReogrid('#grid');

const columns: { key: keyof typeof data[0]; label: string; format?: string }[] = [
  { key: 'product', label: 'Product' },
  { key: 'price',   label: 'Price',    format: '$#,##0.00' },
  { key: 'qty',     label: 'Quantity' },
];

// 1. Write the header
columns.forEach((col, c) => {
  worksheet.cell(0, c).setValue(col.label).setStyle({ bold: true, backgroundColor: '#f1f5f9' });
});

// 2. Write all data rows — no intermediate re-renders
data.forEach((row, r) => {
  columns.forEach((col, c) => {
    worksheet.cell(r + 1, c).setValue(String(row[col.key]));
  });
});

// 3. Apply column formats once
columns.forEach((col, c) => {
  if (col.format) {
    worksheet.range(1, c, data.length, c).setFormat(col.format);
  }
});

// 4. Rebuild the formula graph once at the end (only if you wrote any formulas above)
worksheet.rebuildFormulas();

なぜ最後に rebuildFormulas() なのか

数式を含む setCellInput は、その都度すぐに依存セルを再評価します。10,000セルを読み込む場合、これは10,000回のグラフ探索になります。すべての書き込みが終わった後で rebuildFormulas() を一度だけ呼ぶ方が、大量一括読み込みでは桁違いに高速です。

データに数式が無い場合は、手順4はまるごと省略できます。

パフォーマンスのコツ

• ホットループ内でのセル単位 setStyle を避ける。 スタイルは範囲や列に適用しましょう: worksheet.range('A1:C1').setStyle({ bold: true })。
• 列幅は前もって設定し、セル単位では設定しない: worksheet.column(0).width = 200。
• 行数が分かっているなら rows.setCount() で行数を事前確保:

  worksheet.rows.setCount(data.length + 1);

Lite ティアの制限

Lite は 100 行 × 26 列が上限です。この上限を超える書き込みは console.warn とともに破棄されます。より大きなデータセットには @reogrid/pro を使ってください。

関連

• セルデータ
• 行と列