Data Table
Show data in a tabular layout.
Use it to compare a list of items with the same structure.
Example
{
"type": "dataTable",
"extraSettings": {
"clientPagination": false,
"dataSource": "Rest",
"queryUrl": "https://kitsu.io/api/edge/anime?page[limit]={{$pageSize}}&page[offset]={{$start}}&sort=id",
"pageSize": 4,
"path": "data",
"response": {
"total": "meta.count"
},
"columns": [
{
"label": "id",
"accessor": "id",
"maxWidth": 40
},
{
"label": "Name",
"accessor": "attributes.canonicalTitle"
},
{
"label": "Rating",
"width": 60,
"accessor": "attributes.averageRating"
}
]
}
}
Properties
note
This component uses a Data Source.
:::palette-item com.flowable.design:flowable-core-palette,com.flowable.design:flowable-core-palette com/flowable/palette/core.form.palette,com/flowable/palette/form.template.palette cloud-datatable
Configuration Examples
Conditional Formatting Configuration
| Condition | CSS class | Color | Background color |
|---|---|---|---|
{{$item.id % 2 === 1}} | myOddClass | ||
{{$item.lastName === 'Jackson'}} | red | #1c98a7 |
Response Object Configuration
Assuming the following REST Endpoint:
{
"meta":{"count":87},
"next_page":"https://swapi.dev/api/people/?typedText=&page=2",
"previous_page":null,
"results": [
...
]
}
Configuration:
| Key | Value |
|---|---|
| next | next_page |
| previous | previous_page |
| total | meta.count |
Sorting Configuration
To produce: ./api?query=type:USR+sort:asc:type,desc:name
| Field | Value |
|---|---|
| Query URL | ./api?query=type:USR+sort:{{$sort}} |
| Sortable | true |
| Sort ascending | <not set> |
| Sort descending | <not set> |
| Sort pattern | {{$sortItem.direction}}:{{$sortItem.id}} |
| Sort separator | , |
To produce: ./users?sortBy=name&sortDirection=ASC
| Field | Value |
|---|---|
| Query URL | ./users?sortBy={{$sortColumn}}&sortDirection={{$sortDirection}} |
| Sortable | true |
| Sort ascending | ASC |
| Sort descending | DESC |
| Sort pattern | <not set> |
| Sort separator | <not set> |
To produce: ./anime?sort=subtype,-averageRating
| Field | Value |
|---|---|
| Query URL | ./anime?sort={{$sort || 'id'}} |
| Sortable | true |
| Sort ascending | <empty> |
| Sort descending | - |
| Sort pattern | {{$sortItem.direction}}{{$sortItem.id}} |
| Sort separator | , |
Filter Configuration
To produce: ./anime?sort=id&filter[subtype]=TV&filter[text]=magical
| Field | Value |
|---|---|
| Query URL | ./anime?sort=id&{{$filter}} |
| Filterable | true |
| Filter pattern | filter[{{$filterItem.id}}]={{$filterItem.value}} |
| Filter separator | & |
Events
| Event | When | Additional | Cancellable |
|---|---|---|---|
Datatable.dataLoaded | Datatable content is loaded | Definition + State | No |
Datatable.next | Datatable Next button is clicked | Definition + State | No |
Datatable.previous | Datatable Previous button is clicked | Definition + State | No |
Datatable.sort | Datatable column sorting is changed | Definition + State (including sort data) | No |
Datatable.filter | Datatable column filtering is used | Definition + State (including filters data) | No |
See section Events for more information.