Table

Our table component lets you list dynamic items without writing loops or extra HTML. It’s designed to help you create the perfect table for your document.

Variables for a table

We automatically generate a variable based on your table title. This variable is an array of objects, with each column becoming a key.

For example, if your table looks like this:

The variables will look like this:

{
  "table_title": [
    {
      "description": "your table_title.description value here",
      "quantity": "your table_title.quantity value here",
      "total": "your table_title.total value here"
    }
  ]
}

Each row’s variable accepts HTML strings, so you can include HTML code to customize cell content. (See our guide on HTML content for more details.)

Examples of html tags you can send as payload for rows

1. Making the cell colored and bold

`<p class="text-[#FF0000] font-bold">This is a red, bold paragraph.</p>`

1. Inserting an icon along with text

` <div class="flex items-center"> <i data-lucide="alert-circle" class="w-[14px] h-[14px]"></i><p class="ml-2">Text next to the icon.</p></div>`

1. Inserting multiple elements in a cell

`<div class="flex flex-col"> <div class="flex justify-between"> <span class="font-medium"> Item ID: 123</span> <span class="text-gray-600"> Item Description: Example Item</span></div> <div class="mt-1"><span class="text-sm text-green-500"> Stock Left: 15 </span></div></div>`

Number of columns allowed

There’s no hard limit on the number of columns, but we recommend up to 6 columns for an 810px wide page.

If you need more columns, try reducing the font size or increasing your page width.

Customizing Your Table

You can style your table by adjusting:

• Horizontal Margin: none (0px), small (12px), medium (20px) or large (20px)

• Font size: extra small (10px), small (12px), medium (14px) or large (16px)

• Show title: Choose to display the table title

• Card border: Toggle a rounded card border around the table

• Rounded table: Round the table borders with an 8px radius

• Rounded: none (0px), small (6px), medium (8px) or full (9999px)

• Headers background color: Set the first row’s background color

• Headers text color: Set the first row’s text color

• Rows background color: Set the background color for other rows

• Rows text color: Set the text color for other rows

Visibility convention

By default, the table won’t render if you don’t send the table variable in the PDF payload or if it’s an empty array. To render the table even when the variable is missing or empty, simply fill in the “empty state” input so the table will display the empty state message.