Build an Invoice

Construct a minimal invoice layout: a merged title bar, a styled header row, line items with quantities and prices, and a total calculated by formula.

Full example

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

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

// Title bar (merged A1:D1)
worksheet.range('A1:D1')
  .merge()
  .setValue('INVOICE')
  .setStyle({
    fontSize: 24,
    bold: true,
    horizontalAlignment: 'center',
    backgroundColor: '#1e3a5f',
    color: '#ffffff',
  });

// Meta row
worksheet.cell('A3').setValue('Invoice #:').setStyle({ bold: true });
worksheet.cell('B3').setValue('INV-2026-0001');
worksheet.cell('C3').setValue('Date:').setStyle({ bold: true });
worksheet.cell('D3').setValue('2026-04-15');

// Column headers
worksheet.range('A5:D5')
  .setStyle({ bold: true, backgroundColor: '#eff6ff', color: '#1e3a5f' });
worksheet.cell('A5').setValue('Item');
worksheet.cell('B5').setValue('Qty');
worksheet.cell('C5').setValue('Unit Price');
worksheet.cell('D5').setValue('Subtotal');

// Line items
const items = [
  { item: 'Design review',      qty: 4, price: 150 },
  { item: 'Prototype build',    qty: 8, price: 120 },
  { item: 'User testing',       qty: 3, price: 140 },
];
items.forEach((it, i) => {
  const row = 5 + i + 1;  // start at row 6
  worksheet.cell(row - 1, 0).setValue(it.item);
  worksheet.cell(row - 1, 1).setValue(it.qty);
  worksheet.cell(row - 1, 2).setValue(it.price);
  worksheet.setCellInput(row - 1, 3, `=B${row}*C${row}`);  // subtotal formula
});

// Total row
const totalRow = 5 + items.length + 1;  // one blank row after
worksheet.cell(totalRow - 1, 2).setValue('Total').setStyle({ bold: true, horizontalAlignment: 'right' });
worksheet.setCellInput(totalRow - 1, 3, `=SUM(D6:D${5 + items.length})`);

// Formats
worksheet.range(`C6:D${totalRow}`).setFormat('$#,##0.00');

// Borders
worksheet.range(`A5:D${5 + items.length}`).border({ style: 'solid', color: '#cbd5e1' });
worksheet.range('A5:D5').border({ style: 'solid', color: '#1e3a5f', width: 2 }, ['bottom']);
worksheet.range(`A${totalRow}:D${totalRow}`).border({ style: 'solid', color: '#1e3a5f', width: 2 }, ['top']);

// Column widths
worksheet.column(0).width = 220;
worksheet.column(1).width = 70;
worksheet.column(2).width = 110;
worksheet.column(3).width = 120;

Notes

• merge() on a range collapses it into a single logical cell. The value, style, and type live on the anchor (top-left). Reading a non-anchor cell in the merged region returns empty.
• setCellInput() is required for formulas — setValue('=B6*C6') would store the literal text =B6*C6.
• setFormat('$#,##0.00') accepts Excel-compatible format codes. See the Number Formatting doc for the full syntax.
• SUM is a Pro function. In Lite, replace with arithmetic: =D6+D7+D8.

See also

• Merging Cells
• Number Formatting
• Borders