Articles on: Components

Table Component

The Table Component allows you to iterate over list of data and provides functionality to filter, sort, and group the data. Each table cell is a Text Component with similar formatting options. The table cell type can also be changed, allowing you to work with cells just like with other components in the editor, such as Number, Date, or other components.

The Table Component doesn't support rendering images, QR codes, checkboxes, or other components within cells. To dynamically iterate over such elements, you must use the Container Component instead.

In the Table Component, merging cells or adjusting their height is not possible. The height of cells automatically adjusts based on their content.

How to set up the table

The table iterates over an array, so the array has to be assigned before the data fields are inserted. Follow these steps in the editor:

Add the Table to the template and open its Properties tab.
In Data field, select the array you want to iterate over, for example packages from the example JSON dataset below.
Fill in the first row, which is the header. Besides static text, the header cells can contain placeholders from the JSON. The header row is repeated on every page.
Fill in the second row, which is rendered once for every record of the array. Double-click the cell, click Insert data field, and select the field from the JSON.
Use the rows below the second row for summary values. For example, enter the text Total in one column and use the sum function in the numeric column.

Important: The placeholders in the second row must not contain the name of the assigned array. Use {type} instead of {packages::type}, otherwise the rows are not iterated correctly.

Information: In the editor, the table displays only a single data row. All records are rendered in the Preview and in the generated document.

Example JSON dataset

[{"billOfLadingNumber":"BL123456789","shipper":{"name":"John Smith","address":"123 Main St, Anytown, USA"},"consignee":{"name":"Jane Doe","address":"456 Elm St, Another City, USA"},"carrier":{"name":"XYZ Shipping","address":"789 Oak St, Someplace, USA"},"vessel":"MV Pacific Star","voyageNumber":"V123","portOfLoading":"Port A","portOfDischarge":"Port B","loadingDate":"2025-03-27","estimatedDischargeDate":"2025-03-30","goodsDescription":"Electronics","packages":[{"type":"Cartons","pieces":50,"description":"Electronics","class":77.5,"nmfc":"123456789012","mark":"Fragile"},{"type":"Boxes","pieces":30,"description":"Electronics","class":77.5,"nmfc":"987654321001","mark":"Handle with care"},{"type":"Pallets","pieces":10,"description":"Electronics","class":77.5,"nmfc":"543210987654","mark":"Stackable"},{"type":"Cartons","pieces":70,"description":"Clothing","class":92.5,"nmfc":"331259840220","mark":"Do not fold"},{"type":"Boxes","pieces":40,"description":"Clothing","class":92.5,"nmfc":"549876123905","mark":"Keep dry"},{"type":"Pallets","pieces":15,"description":"Furniture","class":92.5,"nmfc":"890123456789","mark":"Heavy"},{"type":"Cartons","pieces":60,"description":"Toys","class":55.5,"nmfc":"765432109876","mark":"Handle with care"},{"type":"Boxes","pieces":80,"description":"Books","class":55.5,"nmfc":"432109876543","mark":"Fragile"},{"type":"Pallets","pieces":25,"description":"Kitchenware","class":85.5,"nmfc":"675890123456","mark":"Keep upright"},{"type":"Cartons","pieces":90,"description":"Appliances","class":85.5,"nmfc":"909876543210","mark":"Fragile"},{"type":"Boxes","pieces":110,"description":"Tools","class":55.5,"nmfc":"102345678912","mark":"Heavy"},{"type":"Pallets","pieces":50,"description":"Electronics","class":77.5,"nmfc":"321765432109","mark":"Handle with care"},{"type":"Cartons","pieces":20,"description":"Clothing","class":92.5,"nmfc":"467892345678","mark":"Do not bend"},{"type":"Boxes","pieces":60,"description":"Books","class":55.5,"nmfc":"876543210987","mark":"Keep dry"}],"grossWeight":{"value":5000,"unit":"kg"},"measurement":{"length":{"value":10,"unit":"m"},"width":{"value":2.5,"unit":"m"},"height":{"value":3,"unit":"m"}},"freightCharges":{"currency":"USD","amount":5000},"address1":"St Patrick Road 4","address2":"","city":"London","company":"Test company 1","country":"United Kingdom","first_name":null,"last_name":"Mike","latitude":51.482204,"longitude":-0.142095,"phone":null,"province":null,"zip":"UK12991","name":"Mike","country_code":"GB"}]

Working with cells, rows, and columns

Use these actions to edit the content of the cells and to change the structure of the table:

Edit a cell: double-click the cell and enter static text or insert a data field.
Expand text editor: opens a larger editor for the cell. It offers the formatting options from the top panel and, on the right side, the Properties and Advanced tabs of the cell.
Cell type: the Type option of the cell lets you select Text, Number, Date, or System Text. The cell then has the options of the selected component.
Column width: the width of the column can be changed by dragging its edge or by entering the exact value in the Properties tab of the cell.
Add a column or row: right-click the column or row next to the place where the new one should be and select Insert column or Insert row.
Remove a column or row: right-click the column or row and select Delete column or Delete row.

Properties Tab

Besides the basic settings of the component, such as its position and size, the Properties tab of the table offers these options:

Automatic table – Creates the table automatically with a column for every field of the assigned array. All columns have the same width and the table has the size of the table in the editor. The option is limited, so when you want only specific fields or need more customization, leave it unchecked and create the table manually as described above.
Hide header if empty – If all columns of the header are empty, the header is hidden and no empty row is generated.
Advanced Settings – Additional options, described in the next section.

Advanced Settings

Advanced Settings in the Properties tab give you more control over the records that the table displays. You can sort the records, filter out the ones you do not need, and group them by a data field.

Sorting & Filtering

Sorting and filtering are essential features for working with dynamic data. Using the Sort by and Filter by options in the Advanced settings, you can define the order in which records appear and display only those that match specific conditions.

You can add several Sort by rules, and they are applied in the order in which they were created.

Important: Several Filter by rules are connected with AND, so a record is displayed only if it meets all of them. For OR logic, select Expression as the operator and write the condition with the expression language.

Group By Option

The Group By option allows you to easily group your dataset by specific data field. For more information about this option, refer to this article.

Advanced Tab

Unique identifier – Assigns a unique identifier to the component, which makes it easy to find and update via the API and to navigate to in the Components list.
Lock position – Locks the component in a defined position, preventing it from being affected by other components and ensuring it doesn’t affect them.

Updated on: 06/10/2026

Was this article helpful?

Thank you!