Skip to main content
Version: 8.4

Table data binding

When using the table component, you can bind the table to a context variable to populate the table with data from the process.

To do this, set two properties when modeling your form: Headers source and Data source.

Headers source

For Headers source, define the columns of the table. You have two options:

  • List of items: Define the headers statically by adding the headers in the Headers items section. From there, you can define a list of columns defined by a Label and a Key. The Label is the text that will be displayed in the header, and the Key is the name of the variable that will be used to populate the column.
  • Expression: Define the headers dynamically by using an expression. The expression must return a list of objects with a label and a key property. For example, if you have a list of objects with a name and a surname property, your expression must evaluate to the following JSON to define the headers:
[
{
"label": "Name",
"key": "name"
},
{
"label": "Surname",
"key": "surname"
}
]

Data source

To define the data which will be displayed as table rows, define the Data source property. This field accepts only expressions. The expression must return a list of objects, where each object represents a row in the table. Each object must have a property for each column defined in the Headers source property. For example, if you have a list of objects with a name and a surname property, your expression must evaluate to the following JSON to define the data:

[
{
"name": "John",
"surname": "Doe"
},
{
"name": "Jane",
"surname": "Doe"
}
]