Table

A Table field shows data in rows and columns, for example the list of products in an order. The client can’t edit the table. Its rows are filled through the API when the transaction is created, or by a connector, for example from a database or Salesforce.

The Table field is available in HTML templates only. For the settings that all fields share, such as the label, permissions and dependencies, see Field settings.

Add a table

Drag Table from the palette. Use a full-width column, so all the columns fit.

Columns

Define the columns on the Values & Display tab. Click Add Row to add a column, and the trash icon to remove one.

Setting	What it does
Column heading	The heading of the column. Required: the editor reports a column without a heading.
Default value	The value shown when a cell has no data.
Hidden	Hides the column.
Width %	The width of the column, as a percentage of the table width. When empty, the width is set automatically.
Prefix, Suffix	Text added before or after the value of each cell that has a value, for example a currency sign.
Align	Auto (by the language of the form), Left, Center, Right or Justify.

Keep the number of columns small. Columns that don’t fit might not be shown, in the form and in the PDF.

Footer row

Turn on Apply footer row to add a row at the bottom of the table. It is available after you add a column. Two more settings are added for each column:

Setting	What it does
Footer type	Text: a fixed text. Sum: the sum of the values in the column.
Footer value	The text, for Text.

Sum is shown only when all the values in the column are numbers or empty. Commas as thousands separators are allowed. If a cell contains other characters, for example a currency sign, no sum is shown, so add currency signs with Prefix or Suffix. The sum keeps the highest number of decimal places in the column and is shown with the column’s prefix and suffix.

Style

Setting	What it does
Bordered	Shows the borders of the table. On by default.
Striped	Gives odd and even rows different background colors.
Hover	Highlights the row under the mouse pointer.
Numbering	Adds a numbering column, with the heading “#”.
Table Font Size %	The font size of the cells, as a percentage of the default size (40 to 200).
Cell padding top-bottom (px), Cell Padding Horizontal (px)	The space inside the cells (0 to 20).
PDF View Policy	How the table is shown in the PDF: Full or Collapsed. Use Collapsed for tables with more than 6 columns, otherwise part of the table might not fit on the page. Test the PDF before you use the template in production.

The Style tab also has Background Color and Font Color.

When a table crosses a page break in the PDF, its border might be shown incorrectly.

Fill the table through the API

When you create a transaction through the API, send the rows of the table as an array of arrays: one array per row, with one value per column, in the order of the columns. Send the array as a string (JSON text).

For example, for a table with the columns Order ID, Name, Amount and Shipped:

[
  ["KL-12345-A", "Disk on key Type-A", "15.23", "Yes"],
  ["RR-87778-F", "Wireless headset", "", "Yes"],
  ["JF-99087-D", "Mechanical keyboard", "45.17", "Yes"]
]

The second row has no amount, so the column’s Default value is shown. In the request, the value of the table field (here Orders) is the same array as a string:

{
  "template": {
    "id": "your-template-id"
  },
  "initial": {
    "Orders": "[[\"KL-12345-A\",\"Disk on key Type-A\",\"15.23\",\"Yes\"],[\"RR-87778-F\",\"Wireless headset\",\"\",\"Yes\"],[\"JF-99087-D\",\"Mechanical keyboard\",\"45.17\",\"Yes\"]]"
  }
}

Fill the table with a connector

A connector can fill the table with live data, also in response to what the client does in the form. For example, when the client changes an account number, a Live connector looks up the account’s contacts in Salesforce and shows them in the table:

1. On the template’s Integrations tab, click Add Live Connector.
2. Set the connector to look up the records. In Case more than one record, select Select multiple records, so all the matching records are added as rows.
3. Set Trigger request on to Field Change and select the account number field in Trigger Field.
4. In the mapping, select the table. The columns of the table are listed, so you can map a value to each column.

See Template integrations.

Run a connector when the client clicks a row

A table can also trigger a connector, like a button. In a Live connector, set Trigger request on to Button Click and select the table in Trigger Field. When the client clicks a row, the connector runs with the values of that row.

Notes

• The heading and footer rows aren’t saved with the table data. They are shown in the form and in the PDF only.
• In conditions, a Table supports Empty and Not Empty.