Working with Tables

Tables are perfect for displaying structured data like invoice line items, product lists, schedules, and any information that fits a row-and-column format.

Creating a Table

1. Click Add element in the left panel
2. Select Table
3. A default table appears on the canvas (2 columns × 2 rows)
4. Drag it to position it where you want

Table Structure

Every table has:

• Header row - The top row, typically used for column labels (Description, Quantity, Price, etc.)
• Data rows - The rows below the header that contain your actual data

The header row cells are styled slightly differently by default to distinguish them visually.

Managing Columns

Adding Columns

When you select the table, a green + button appears on the right edge. Click it to add a new column.

Removing Columns

A red × button appears above each column. Click it to delete that column.

Resizing Columns

Hover between two column headers to see the resize handle. Drag left or right to adjust column widths.

How resizing works:

• The column to the left grows or shrinks
• The column to the right adjusts inversely
• Total table width stays the same

This “Excel-style” behavior keeps your table at a consistent width while letting you balance column proportions.

Managing Rows

Adding Rows

A green + button appears at the bottom edge of the table. Click it to add a new row.

Removing Rows

A red × button appears beside each row. Click it to delete that row.

Resizing Rows

Hover between two rows to see the resize handle. Drag up or down to adjust row heights.

Unlike columns, row heights are independent - making one row taller doesn’t affect other rows.

Editing Cell Content

To edit the text in a cell:

1. Double-click the cell
2. Type your content
3. Click outside the cell when done

You can enter static text or use variables for dynamic content:

{{item.description}}

Styling Cells

Select the table to access cell styling options in the right panel.

Two Styling Modes

All Cells Apply the same style to every cell in the table at once. Great for consistent formatting.

Individual Cell Click a specific cell, then style just that cell. Useful for header rows or highlighting specific data.

Available Style Options

Typography

• Font family
• Font size
• Font weight
• Text color
• Text alignment (left, center, right)

Fill

• Background color

Border

• Border width
• Border style (solid, dashed, dotted, etc.)
• Border color

Padding

• Inner spacing between cell edge and text

Example: Invoice Line Items

Here’s how to set up a typical invoice table:

Header Row: | Description | Qty | Unit Price | Total |

Data Row (with variables): | {{item.description}} | {{item.quantity}} | {{item.unit_price}} | {{item.total}} |

When you generate the PDF, each item in your data array creates a row in the table.

Tips

• Start simple - Begin with the default 2×2 table and add rows/columns as needed
• Style the header first - Make column labels stand out with bold text or a background color
• Consistent alignment - Numbers often look better right-aligned, text left-aligned
• Cell padding - Add some padding so text doesn’t crowd the cell edges
• Test with data - Preview your template with sample data to see how it looks

Next Steps

• Styling - Complete styling reference
• Data Binding - Learn about variables and dynamic content