Table components

This topic introduces table components. You add table components to invoice body sections.

Invoice builder supports two tokens that each return a list of data that appears in tables on invoices: invoice line data and tax summary data. Additional topics describe how you use some or all of the table JSON schema to build those tables: Build invoice line tables and Build tax summary tables.

Table components are contained in cells. When you build table components, you define the table, table header, and table body.

Table defines the following:

• List of data the table displays—Examples: The invoice lines token returns the list of all purchases and charges in customer orders, and the table displays one purchase and the related data in each row. The tax summary token returns all applicable taxes and associated charges, and the table displays one tax type and the related data in each row.

• Criteria to sort and group the data—Example: Group the invoice lines first by subscription ID to show all lines that belong to each subscription together. Then, group them by product so that within each subscription, all the lines associated with each product are together. Sort products alphabetically in ascending order, and sort so that non-credit lines appear before credit lines.

Header defines the following:

• A column for each data element that appears in the table—Example: Each row contains up to five pieces of data regarding the invoice line (product, edition name, price per unit, quantity purchased, and total), so there are five columns.
• A label that appears in the header row to title the column—Example: The labels are Product, Edition, Price per unit, Quantity, and Total.

Body defines the following for each column:

• For the data named by the column header label, the token that displays it in each row of that column—Example: The tokens for the columns are {{Product Name}}, {{Edition Name}}, {{Price Per Unit}}, {{Quantity}}, and {{Line Total}}.
• Whether the lines are visually grouped by the data in the column—Example: As defined in the table section example, the table is set to group lines by {{Product Name}}. The {{Product Name}} column is also set in the body to visually group them. That is, the product name appears for the first of the grouped lines but it does not appear for the rest of them.

You can apply styles to all table elements.

You can add table components to cell components. See Build cell components.

Table component JSON schema

The complete table component JSON schema is shown below. The elements used for the invoice lines and tax summary tables are defined in the following topics: Build invoice line tables and Build tax summary tables.

{
    "type": "table",
    "data": "<repeating_data_token>",
    "style": { },
    "properties": {
        "visible": < true | false >
    },
    "sortingCriteria": [{
        "key": "<column_name_token>",
        "order": "<asc | desc>"
    }],
    "customSortingCriteria": [
        {
            "key": "<column_name_token",
            "order": [
                "<value_1>",
                "<value_2>",
                ...
            ]
        }
    ],
    "groupingCriteria": ["<column_name_1">, "<column_name_2>", ... ],
    "header": {
        "style": { },
        "properties": {
            "visible": <true | false>
        },
        "columns": [
            {
                "style": { },
                "properties": { },
                "type": "text",
                "label": "<column name>"
            },
            {
                "style": {},
                "properties": { },
                "type": "text",
                "label": "<column name>"
            }
            ...
        ]
    },
    "body": {
        "style": { },
        "properties": {
            "visible": <true | false>
        },
        "columns": [
            {
                "style": {},
                "properties": { },
                "data": "<{{token}}>",
                "type": "<text | Markdown>"
            },
            {
                "style": {},
                "properties": { },
                "data": "<{{token}}>",
                "type": "<text | Markdown>"
            }
            ...
        ]
    }
}