請求書を作る

最小構成の請求書レイアウトを組み立てます。結合したタイトルバー、スタイル付きのヘッダー行、数量・単価を持つ明細行、そして数式で計算する合計です。

完成例

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;

補足

• 範囲に対する merge() は、その範囲を1つの論理セルにまとめます。値・スタイル・型はアンカー（左上）に保持されます。結合領域内のアンカー以外のセルを読むと空になります。
• 数式には setCellInput() が必須です。setValue('=B6*C6') はリテラル文字列 =B6*C6 として保存されてしまいます。
• setFormat('$#,##0.00') は Excel 互換の書式コードを受け付けます。完全な構文は表示形式のドキュメントを参照してください。
• SUM は Pro の関数です。Lite では算術に置き換えてください: =D6+D7+D8。

関連

• セルの結合
• 表示形式
• 罫線