ReoGrid ReoGrid Web

Bulk Load from JSON

When you have an array of objects β€” from a fetch call, a JSON file, or a database query β€” populate the grid in one pass and rebuild the formula graph only once.

Full example

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 β€” skipFormula defers formula propagation
data.forEach((row, r) => {
  columns.forEach((col, c) => {
    worksheet.setCellInput(r + 1, c, String(row[col.key]), { skipFormula: true });
  });
});

// 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 β€” required after skipFormula writes
worksheet.rebuildFormulas();
Result
The three sample rows loaded, with the column format applied in one pass after the writes.
The three sample rows loaded, with the column format applied in one pass after the writes.

Why rebuildFormulas() at the end?

A plain setCellInput re-evaluates dependents immediately. When you’re loading 10,000 cells, that’s 10,000 graph walks. Passing { skipFormula: true } defers that work, and one rebuildFormulas() after all writes restores a consistent formula graph β€” an order of magnitude faster for large bulk loads. (worksheet.bulkSetCells() wraps this same pattern in a single call.)

If the sheet contains no formulas at all, you can skip both skipFormula and step 4 entirely.

Performance tips

  • Avoid per-cell setStyle in a hot loop. Apply styles to ranges: worksheet.range('A1:C1').setStyle({ bold: true }).
  • Size columns up front, not per-cell: worksheet.column(0).width = 200.
  • Set rows.setCount() to preallocate the row count if you know it:
    worksheet.rows.setCount(data.length + 1);

Lite tier limit

Lite caps at 100 rows Γ— 26 columns. Writes beyond those limits are silently ignored. For larger datasets, use @reogrid/pro.

See also

Stay Updated

Be first to know β€” get updates as they ship

Get notified of new releases, features, and announcements.
No spam β€” just updates that matter.