What You'll Build

A product order form that generates a PDF with a tabular breakdown of items, quantities, prices, and a calculated grand total. The table updates dynamically based on what the customer orders.

Real-world use case: A customer selects products and quantities. They receive an order confirmation PDF showing a professional table with Product | Quantity | Price | Total - just like a real invoice.

What You'll Learn

Creating tables with addTable(headers, rows)
Dynamically building table rows from form data
Adding descriptive text before tables
Creating a summary section with calculated totals
Formatting numbers and currencies in PDFs

⚡

Interactive Learning

Every code snippet below is fully editable! Try changing the quantities in the form and watch the PDF table update dynamically.

Use the play button to run different snippets, or the refresh button to restore the original example.

Tutorial Steps

Step 1: Creating a Basic Table

Tables are perfect for showing line items. Use addTable(headers, rows) where headers is an array of column names and rows is a 2D array of cell values.

💡 Tip:

The first parameter is an array of header strings: ['Product', 'Quantity', 'Price', 'Total']. The second is an array of row arrays, where each inner array represents one row of data.

Step 2: Dynamic Table Rows

Static data is boring! Let's build the table rows dynamically from form values. We'll also only show products that were actually ordered (quantity > 0).

💡 Tip:

Create a helper function like formatCurrency() to format numbers as currency strings. Use form.integer('qty1')?.value() to get field values.

💡 Tip:

Build an empty array and push() rows conditionally. This way, if someone orders 0 of something, it won't appear in the PDF.

Step 3: Adding Context with Text

Tables need context! Add a customer info section and some introductory text before the table using addText().

💡 Tip:

Use section.addText() to add descriptive text. Combine with addSpacer() to create visual breathing room before the table.

Step 4: Adding a Grand Total

Every order needs a grand total! Calculate the sum and display it prominently after the table using a divider for visual separation.

💡 Tip:

Calculate grandTotal by summing individual line totals. Use addDivider() and addSpacer() to visually separate the summary from the table.

Step 5: Complete Order Document

Time to finalize! Add footer, page numbers, item count, and helpful next-step messages for the customer.

💡 Tip:

Use two fields in one addRow() to show "Total Items" and "Grand Total" side by side. This creates a professional summary layout.

Try It Yourself

Challenge 1: Add a 4th product (e.g., Mouse at $29) to the form and table
Challenge 2: Add a "Subtotal" row before the grand total showing the sum before any discounts
Challenge 3: Add a discount field and show the discount amount in the summary

What's Next

You've mastered tables! In the next tutorial, you'll learn how to make your PDF content dynamic - showing different sections based on user choices.

Continue to Dynamic PDF Content

Key concepts learned:

addTable(headers, rows) - Creating tables with headers and data rows
Dynamic row building - Only showing products with quantity > 0
Currency formatting - Helper function for consistent money display
Calculated totals - Summing line items for grand total
Combining text and tables - Adding context with addText()