Construtor de dados de tabela
Abrir o construtor
Selecione uma tabela na tela. Na aba Dados do Inspetor, escolha Abrir Construtor de dados. As abas de campos, fonte e prévia separam a estrutura da tabela de seus dados.
Colunas e linhas de resumo
Em Campos, adicione colunas e defina cada título e campo de dados. Ajuste largura, formatação e aparência avançada. Você pode adicionar linhas de total, subtotal ou nota abaixo da tabela; a seção Totais explica os cálculos.
Totais
Em uma linha de total ou subtotal, escolha um Cálculo: Soma, Média, Mínimo, Máximo ou Contar linhas. O resultado vai para a Coluna de valor e considera todas as linhas dessa coluna; sem formato próprio na linha, usa o formato da coluna.
"summaryRows": [
{ "type": "total", "label": "Total geral",
"aggregate": "sum", "targetColumnKey": "total" }
]
Só contam células que chegam como números: células vazias são ignoradas, e um valor enviado como texto (“1,250.00”) deixa o resultado vazio. Um subtotal também cobre todas as linhas, não cada página. Se escolher Campo de dados, a caixa Valor lê da raiz dos dados, não da tabela: {{ grandTotal }}, por exemplo.
Fonte e JSON de exemplo
Em Fonte, escolha o array da tabela e edite o JSON de exemplo. O campo da coluna deve corresponder a uma propriedade dos objetos do array. Para mostrar quantity de items, defina o campo como quantity. Resolva avisos de JSON inválido antes de continuar.
Aparência padrão da tabela
| Item | Quantidade | Total |
|---|---|---|
| Diagnóstico de falhas | 2 | 1.700,00 |
| Módulo de conectividade | 1 | 2.850,00 |
| Calibração no local | 1 | 850,00 |
As medidas são os padrões do produto: cabeçalho 40px, linha 40px, preenchimento 10px e borda 1px. O modelo pode substituir cada um.
Um elemento de tabela, de ponta a ponta
Uma tabela se vincula a um array nos seus dados e desenha uma linha por item. O elemento abaixo é o incluído no modelo de Fatura; a chamada abaixo fornece três linhas à mesma tabela.
{
"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": "Descrição", "valueTemplate": "{{ name }}",
"align": "left", "widthPercent": 46 },
{ "key": "quantity", "label": "Quantidade", "valueTemplate": "{{ quantity }}",
"align": "right", "widthPercent": 14 },
{ "key": "unitPrice", "label": "Preço unitário", "valueTemplate": "{{ unitPrice }}",
"align": "right", "widthPercent": 20,
"format": { "kind": "currency", "currency": "USD", "decimals": 2 } },
{ "key": "total", "label": "Valor", "valueTemplate": "{{ total }}",
"align": "right", "widthPercent": 20,
"format": { "kind": "currency", "currency": "USD", "decimals": 2 } }
]
}
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": "pt",
"data": {
"document": { "title": "Resumo da fatura" },
"referenceNo": "DOC-2026-0042",
"issueDate": "2026-09-06",
"currency": "USD",
"customer": "Northwind Trading Ltd.",
"lineItems": [
{ "name": "Diagnóstico de falhas", "quantity": 2, "unitPrice": 850.00 },
{ "name": "Módulo de conectividade", "quantity": 1, "unitPrice": 2850.00 },
{ "name": "Calibração no local", "quantity": 1, "unitPrice": 850.00 }
]
}
}'
binding identifica o array nos seus dados, key identifica o campo em cada item e valueTemplate é o que será impresso. tableRepeatHeader repete o cabeçalho em cada página e tablePreventRowSplit impede que uma linha seja dividida em uma quebra de página.
Aplicar e testar tabelas longas
Confira a ordem das colunas, campos vazios e resumos na Prévia e aplique as alterações. Depois teste zero, uma e muitas linhas na prévia do documento. Textos longos e alturas de cabeçalhos e linhas afetam a paginação; não dependa apenas de um exemplo curto.
Gráficos e relatórios →Elementos dataset
Um elemento dataset renderiza a coleção vinculada como tabela e obtém suas colunas dos dados, sem declará-las. Use quando o formato da coleção for definido pelo payload, não pelo modelo.
| Valor vinculado | O que o documento mostra |
|---|---|
[{ "name": "…", "quantity": 2 }] |
Uma coluna por campo, na ordem da primeira ocorrência. Uma linha sem determinado campo ainda mantém essa coluna. |
[{ "party": { "name": "…" } }] |
Objetos aninhados são achatados em colunas com pontos, como party.name, até três níveis de profundidade. Um array dentro de uma linha permanece em uma única célula. |
["urgent", "warranty"] |
Uma coluna cujas células são os próprios valores; o título é o último segmento da vinculação. |
{ "status": "released" } |
Uma única linha, com uma coluna por campo do objeto. |
[] |
Nada é desenhado. Um elemento dataset sem vínculo também não desenha nada. |
Os títulos das colunas são os nomes dos campos. Um elemento dataset não possui rótulos próprios; use um elemento de tabela se quiser nomear as colunas.
Os problemas mais comuns
- Uma vinculação a um array inexistente nos seus dados desenha uma tabela vazia, não um erro. Se a tabela sair em branco, compare a vinculação com a chave da solicitação.
- A chave de uma coluna é uma propriedade dos objetos do array. Uma única chave escrita incorretamente esvazia uma coluna enquanto o restante da tabela parece correto.
- Valores e quantidades devem chegar como números. Uma string ignora o formatador, então a coluna perde alinhamento e separador de milhares.
- Uma tabela longa cruza páginas. Sem tableRepeatHeader, a segunda página começa só com linhas; sem tablePreventRowSplit, uma linha pode ser cortada ao meio.
- Teste zero, uma e muitas linhas. Uma tabela testada apenas com três linhas esconde tanto o caso vazio quanto a quebra de página.