Data Table component icon Data Table

The Data Table component allows you to display complex data in a tabular form.

Through the Selection Mode, Data Tables can also serve as input components. Selected rows are stored in a variable.

Attributes

Group Name Description

General

ID

This is a unique id for the component.

Label

The label attribute adds a label to the component, if not empty.

Value

The binding for the component. Use an appropriate expression to bind the component to its value and thus specify where the value is saved read. For example, use {{myVariableName}} to store the value of the component in a variable named myVariableName. Use prefixes to define the scope of the value, e.g., root. for referencing the root case to store the value in or parent. to store the value in the parent work item of the current one. For instance {{root.foo}} stores the value in the root case using a variable named foo. For more information please refer to the Flowable Forms section.

Default value

If a value is not set, the default value is used. Use an appropriate value; e.g., a text, a number, an id or a comma-separated list.

Description

The description attribute additionally adds a description to the component.

Visible

Boolean value or expression specifies whether the component is visible or hidden. This expression might include another value in the same form, for instance, use a checkbox bound to {{showAdditionalFields}} and use the very same expression as the visible attribute to show or hide the component according to the checked state of the checkbox. If you want only to show the component, if the form is not used as the init-form, you can use the expression {{root.id}} which evaluates to true only, if there is a current id which is not the id in a start form.

Ignored

If true the component is hidden and the value is not part of the payload.

Enabled

A Boolean value or expression specifies whether component is enabled or disabled.

Details

Show pagination

Enable the pagination bar and buttons.

Client side pagination

Enable browser-side pagination.

Columns

A list of objects containing column definitions.

Filterable

Allow filtering per column.

Sortable

Defines if the columns are sortable.

Page size

The number of rows per page.

Page size options

Options for the page size selector. Default is: [5,10, 20, 25, 50, 100].

Show total records

Enable to show the total number of records found.

Row URL

URL to go when clicking on a row. It can have column accessor expressions, e.g., ,{{$row.first_name}}.

Sort ascending

When a column is sorted in ascending mode, this string is sent to the server.

Sort descending

When a column is sorted in descending mode, this string is sent to the server.

Sort pattern

For every column used in a multi-sort, this pattern is computed. You can use '{{$sortItem.id}}', (the column ID) and '{{$sortItem.direction}}'.

Sort separator

In a multi-sort, one or more characters can be used to separate the items. The sort pattern is repeated for every selected column and separated by the sort separator and the result is a string that is used in the query URL with the expression '{{$sort}}'.

Filter pattern

For every filterable column where the user typed a value, this pattern is computed. You can use '{{$filterItem.id}}' (the column ID) and '{{$filterItem.value}}' (the text the user wrote in the filter box).

Filter separator

The filter pattern is repeated for every column (with a filter value) and separated by the filter separator and the result is a string that can be used in the query URL with the expression '{{$filter}}'.

No data message

The message shown when there is no data.

Conditional formatting

Each rule is an Object which should contain a condition and an optional style.

Data source

Data source

Specify the data source type: Static, REST, or Master.

Path

Where to find the array of items in the response, e.g., 'data.users'.

Response object

Response object containing server pagination data.

Query URL

The REST endpoint URL used to query for the full list of items.

Show the refresh button

Display a button with the ability to reload data in the table.

Storage

Specifies how the data retrieved by the REST endpoint is stored in the variable. Choose 'ID' if only the ID of the selected entry should be saved in the variable, choose 'Full value' if the whole object should be saved and thus making it possible to display other values of the selected element within the form as well. Pay attention as storing the full value could lead to bloating the variables with unnecessary information depending on the amount of data retrieved by the REST endpoint.

Map to

The attribute of an item into which the value is mapped. For a Static data source value is commonly used as the map to attribute and for a REST data source id is commonly used as the map to attribute.

Documentation

Documentation

Documentation intended to explain concepts of its use for future reference.

Customization

Style class

Stylesheet class name. Add any style classes to be applied to the component for the desired styling and rendering.