帳票バインディング

v1.4.0 から、ワークシート上に帳票テンプレート（ヘッダー・繰り返し明細バンド・フッター）を {{token}} セルで設計し、プレーンなデータオブジェクトをバインドして明細バンドをレコードごとに展開できます。請求書・明細書・定型の帳票向けの機能です。

Note: 帳票バインディングは Pro 版で利用可能です。テンプレートと状態の読み取り（getReportTemplate・getReportState）は Lite でも利用できます。

3 ステップの流れ

1. リテラルセルと {{token}} プレースホルダーでレイアウトを設計する。
2. どの設計行がヘッダー / 明細 / フッターかを定義する。
3. データオブジェクトをバインドする — 明細バンドがレコードごとに繰り返され、トークンが埋まる。

import { createReogrid } from '@reogrid/pro'

const grid = createReogrid({ workspace: '#app' })
const ws = grid.worksheet

テンプレートの設計

リテラルテキストと {{token}} セルをグリッドに直接入力します。単一トークンのセルはバインド値の型を保持します（数値は数値のまま）。明細バンドでは 2 つの特殊トークンが使えます：{{#index}}（1 始まりの行番号）と {{#count}}（総レコード数）。

// ヘッダー
ws.cell('A1').setValue('請求書')
ws.cell('A3').setValue('請求番号:'); ws.cell('B3').setValue('{{invoiceNo}}')
ws.cell('A4').setValue('発行日:');   ws.cell('B4').setValue('{{date}}')
ws.cell('A5').setValue('宛先:');     ws.cell('B5').setValue('{{customer.name}}') // ドット区切りパス可

// 明細バンド（設計は 1 行、レコードごとに繰り返し）
ws.cell('A7').setValue('{{#index}}')
ws.cell('B7').setValue('{{name}}')
ws.cell('C7').setValue('{{qty}}')
ws.cell('D7').setValue('{{price}}')
ws.cell('E7').setValue('=C7*D7')      // 行ごとの数式 — 相対参照がレコードごとにシフト

// フッター
ws.cell('D9').setValue('合計')
ws.cell('E9').setValue('=SUM(E7:E7)') // 集計は展開された明細範囲まで広がる

セクションの定義

各セクションがどの 0 始まり・両端含む設計行に属するかを記述します。セクションは連続しており、detail セクションは source でデータ内の配列フィールド名を指定します。

ws.defineReportTemplate({
  columns: [0, 4], // A:E — 展開される列範囲
  sections: [
    { role: 'header', rows: [0, 5] },
    { role: 'detail', rows: [6, 6], source: 'items', pageBreakEvery: 20 },
    { role: 'footer', rows: [7, 9] },
  ],
})

ReportSection

ReportTemplateSpec は { sections: ReportSection[], columns?: [top, bottom] } です。

データのバインド

ReportData はプレーンなオブジェクトです。トップレベルのフィールドがヘッダー/フッターのトークンに、配列フィールド（各 detail の source をキーとする）が繰り返しバンドに供給されます。

ws.bindReport({
  invoiceNo: 'INV-2026-0042',
  date: '2026-06-18',
  customer: { name: '株式会社サンプル' },
  items: [
    { name: 'Webサイト制作',       qty: 1,  price: 350000 },
    { name: '保守サポート(月額)',  qty: 12, price: 30000 },
    { name: 'ドメイン取得',        qty: 2,  price: 5000 },
  ],
})

// 展開を元に戻し、テンプレート表示へ復元
ws.unbindReport()

明細バンドは縦方向に展開されます — 行は下にシフトし、列は移動しません。行ごとの数式はレコードごとに相対シフトし、=SUM(E7:E7) のようなフッター集計は展開後の明細範囲全体を覆うよう広がります。

instance.report ハンドル

同じ操作はアクティブシートにスコープされた grid.report でも利用できます。

grid.report.define({ /* ReportTemplateSpec */ })
grid.report.bind({ /* ReportData */ })
grid.report.unbind()
grid.report.get()    // ReportTemplateSpec | null
grid.report.state()  // 'none' | 'template' | 'bound'

ワークシート上の Lite 読み取り版：ws.getReportTemplate() と ws.getReportState()。

JSON への往復

テンプレートは ReoGrid JSON の各シートの reportTemplate にシリアライズされるため、設計した帳票を保存・復元し、いつでも新しいデータでバインドできます。

関連項目

• ページレイアウト — pageBreakEvery とページングモデルを組み合わせて定型出力に。
• PDFエクスポート — バインド済み帳票をそのまま PDF に出力。
• 数式エンジン — バンド内の行ごと・集計の数式。