Tables — Editor — Data | Document Stack Docs

Adding a Table

Click Table in the toolbar
A table element appears on the canvas
Select it and open the Inspector to configure columns

Configuring Columns

In the Inspector, you define the columns for your table. Each column has:

Setting	Description
Header Text	The column title shown in the table header
Data Key	The key in your row data that maps to this column
Width	Column width (can be fixed or proportional)
Alignment	Left, center, or right text alignment

For example, an invoice line items table might have 4 columns:

Description (key: description, width: 50%)
Qty (key: qty, width: 15%, aligned right)
Rate (key: rate, width: 15%, aligned right)
Amount (key: amount, width: 20%, aligned right)

Binding Table Data

Set the table's Field Key (e.g., line_items) in the Inspector. When generating a PDF, pass an array of objects where each key matches a column's data key:

JSON

{
  "templateId": "YOUR_TEMPLATE_ID",
  "data": {
    "line_items": [
      { "description": "Web Design", "qty": "1", "rate": "$2,000", "amount": "$2,000" },
      { "description": "Frontend Development", "qty": "40 hrs", "rate": "$150/hr", "amount": "$6,000" },
      { "description": "Hosting (Annual)", "qty": "1", "rate": "$480", "amount": "$480" }
    ]
  }
}

The table automatically renders one row per item in the array. It grows dynamically — pass 2 rows or 200, the table adjusts.

Styling Your Table

In the Inspector, you can customize:

Header style — Background color, text color, font weight
Row style — Text color, font size
Alternating rows — Toggle striped rows with a custom alternate color
Borders — Show/hide borders between rows and columns
Cell padding — Control spacing inside each cell

For a clean, professional look: use a dark header with white text, no vertical borders, and light gray alternating rows.

Tips

All values in your data should be strings — format numbers and currencies in your application before sending them
Tables automatically page-break if they're too long for a single page
You can have multiple tables in one template, each with a different field key