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.


The first row of the table acts as a header, while the second row is used to dynamically render each record from the dataset. In the editor view, the Table Component displays only a single data row, with all other rows being rendered after the document is generated. All subsequent rows are treated as summary rows and are rendered after the data rows.


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



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"}]


Advanced Tab


  1. Unique identifier – Allows adding a unique identifier to component, ensuring precise component identification and improving navigation in the Component list.
  2. Lock position – Locks the component in a defined position, preventing it from being affected by other components and ensuring it doesn’t affect them.


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.



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.




Updated on: 04/09/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!