製品・APIガイド

表データビルダー

ビルダーを開く

キャンバスで表を選択します。インスペクターのデータタブで「データビルダーを開く」を選択してください。フィールド、ソース、プレビューの各タブで、表の構造とデータを分けて扱います。

列と集計行

フィールドで列を追加し、各見出しとデータフィールドを設定します。必要に応じて幅、書式、詳細な外観を調整してください。表の下に合計、小計、注記の行を追加できます。計算方法は「合計」で説明します。

合計

合計行または小計行で、計算方法として合計、平均、最小値、最大値、行数を選択します。結果は値の列に出力され、その列のすべての行から計算されます。行に独自の書式がない場合は、列の書式を使用します。

JSON 
"summaryRows": [
  { "type": "total", "label": "総合計",
    "aggregate": "sum", "targetColumnKey": "total" }
]

数値として届いたセルのみが対象です。空のセルは無視され、金額が文字列（“1,250.00”）で送られると、結果は空になります。小計もページ単位ではなく、すべての行が対象です。「データフィールド」を選んだ場合、値欄は表ではなくデータのルートを参照します。例えば{{ grandTotal }}です。

ソースとサンプルJSON

ソースで表のデータ配列を選び、サンプルJSONを編集します。列のfieldは、その配列内のオブジェクトのプロパティと一致させてください。例えば、itemsのquantityを表示するには、列のfieldをquantityにします。JSONが無効という警告は、続行前に解消してください。

表の既定の外観

品目 数量 合計
故障診断21.700,00
接続モジュール12.850,00
現地での校正1850,00

寸法は製品の既定値です。ヘッダー40px、行40px、セルの余白10px、罫線1pxです。テンプレートごとに上書きできます。

表要素の一連の操作

表はデータ内の配列に接続され、各項目につき1行を描画します。以下の要素は、請求書テンプレートに含まれるものです。その下の呼び出しでは、同じ表に3行のデータを渡します。

JSON 
{
  "id": "invoice-items",
  "type": "table",
  "placementMode": "flow",
  "binding": "lineItems",
  "layout": { "x": 0, "y": 330, "width": 100, "widthUnit": "percent", "height": 220 },
  "style": {
    "tableHeaderHeight": 36,
    "tableRowHeight": 34,
    "tableRepeatHeader": true,
    "tablePreventRowSplit": true
  },
  "columns": [
    { "key": "name", "label": "説明", "valueTemplate": "{{ name }}",
      "align": "left", "widthPercent": 46 },
    { "key": "quantity", "label": "数量", "valueTemplate": "{{ quantity }}",
      "align": "right", "widthPercent": 14 },
    { "key": "unitPrice", "label": "単価", "valueTemplate": "{{ unitPrice }}",
      "align": "right", "widthPercent": 20,
      "format": { "kind": "currency", "currency": "USD", "decimals": 2 } },
    { "key": "total", "label": "金額", "valueTemplate": "{{ total }}",
      "align": "right", "widthPercent": 20,
      "format": { "kind": "currency", "currency": "USD", "decimals": 2 } }
  ]
}
cURL 
curl -X POST https://api.pdfgine.com/api/v1/render \
  -H "X-PDFgine-Key: $PDFGINE_KEY" \
  -H "Content-Type: application/json" \
  -d '{
        "templateCode": "invoice",
        "format": "pdf",
        "locale": "ja",
        "data": {
          "document": { "title": "請求書の概要" },
          "referenceNo": "DOC-2026-0042",
          "issueDate": "2026-09-06",
          "currency": "USD",
          "customer": "Northwind Trading Ltd.",
          "lineItems": [
            { "name": "故障診断", "quantity": 2, "unitPrice": 850.00 },
            { "name": "接続モジュール", "quantity": 1, "unitPrice": 2850.00 },
            { "name": "現地での校正", "quantity": 1, "unitPrice": 850.00 }
          ]
        }
      }'

bindingはデータ内の配列、keyは各項目内のフィールド、valueTemplateは出力内容を指定します。tableRepeatHeaderはすべてのページにヘッダーを繰り返し、tablePreventRowSplitは改ページで行が分割されるのを防ぎます。

長い表への適用とテスト

プレビューで列の順序、空のフィールド、集計を確認し、変更を表に適用します。続いてドキュメントのプレビューで、0行、1行、多数の行をテストしてください。長いテキスト、ヘッダーの高さ、行の高さはページ分割に影響します。短いサンプルだけで判断しないでください。

グラフとレポート →

dataset要素

dataset要素は、接続されたコレクションを表として描画し、データから列を自動で決めるため、列の定義は不要です。コレクションの構造がテンプレートではなくペイロードで決まる場合に使用してください。

バインドされた値 ドキュメントの表示内容
[{ "name": "…", "quantity": 2 }] フィールドが最初に現れる順に、各フィールドを1列として表示します。ある行でフィールドが省略されても、列は残ります。
[{ "party": { "name": "…" } }] 入れ子のオブジェクトは、最大3階層までparty.nameのようなドット区切りの列に展開されます。行内の配列は1つのセルに残ります。
["urgent", "warranty"] 値自体をセルに表示する1列になります。見出しはbindingの最後の部分です。
{ "status": "released" } 1行になり、オブジェクトの各フィールドが1列になります。
[] 何も描画されません。未接続のdataset要素も何も描画しません。

列の見出しはフィールド名です。dataset要素には独自のラベルがないため、列名を自分で指定する場合はtable要素を使用してください。

よくある問題

  • データに存在しない配列をbindingで指定すると、エラーではなく空の表が描画されます。表が空の場合は、bindingとリクエストのキーを比較してください。
  • 列のkeyは、その配列内のオブジェクトのプロパティです。キーを1つ誤記すると、ほかの列は正常でも、その列だけが空になります。
  • 金額と数量は、数値として送信する必要があります。文字列では書式設定が適用されず、列の配置や桁区切りが失われます。
  • 長い表は複数ページにまたがります。tableRepeatHeaderがないと、2ページ目は見出しなしで始まり、tablePreventRowSplitがないと、行が途中で分割される場合があります。
  • 0行、1行、多数の行でテストしてください。3行でしか試していない表では、空のケースや改ページの問題が見えません。