Flowable Forms

Flowable Forms

  • Release Notes
  • Guides
  • Components
  • Storybook

›Components

Components

  • Introduction
  • Accordion
  • Button Group
  • Checkbox
  • Columns
  • Data Table
  • Date
  • Doc Gallery
  • Flex Layout
  • HR
  • HTML
  • iFrame
  • Image
  • Link
  • Link Button
  • List
  • Modal
  • Number
  • Outcome Button Group
  • Panel
  • Password
  • PDF Viewer
  • Radio button
  • REST Button
  • RichText editor
  • Assign Button
  • Select
  • Text List
  • Sub-Form
  • Tabs
  • Text
  • Textarea
  • Upload
  • Wizard

Data Table

Show data in a tabular layout.

Demo

Basic example

Attributes

AttributeTypeDescription
typestringType expected is dataTable.
styleClassstringCSS classes to be added to this component. There's a ready made class to remove some backgrounds and borders from the datatable called "flw-light-table"

See section Common attributes.

extraSettings Attributes

See section DataSource. Datatable uses the common datasource attributes and some additional attributes to configure pagination, sorting and filtering.

AttributeTypeDescription
queryUrlstringif dataSource is REST, this is the URL used to request data. Some special expression variables are available: {{$start}},{{$pageSize}},{{$page}}, {{$sort}}, {{$sortColumn}}, {{$sortDirection}}, {{$sortConfig}}, {{$filterPattern}}, {{$filterSeparator}}, {{$filterConfig}}
responseObject{ next: RESPONSE-PATH, previous: RESPONSE-PATH, total: RESPONSE-PATH } It points where in the REST response we can find the next or previous page or the total number of rows.
RESPONSE-PATH can be a string or an object {type: "head", path: "name-of-the-response-header"}

Response example

response: {
  next: "next_page",
  previous: "previous_page",
  total: "meta.count"
},

Server reponse

{meta:{"count":87},"next_page":"https://swapi.dev/api/people/?typedText=&page=2","previous_page":null,"results": ...

Pagination specific

AttributeTypeDescription
clientPaginationbooleanEnable browser-side pagination
pageSizenumberNumber of rows per page
pageSizeOptionsnumber ArrayOptions for the page size selector. Default is: [5 10, 20, 25, 50, 100]
showPaginationbooleanWill hide/show bottom pagination bar and buttons
autoHidePaginationbooleanWhen this is set to true and the table happens to have no rows, it will hide the footer and won't reserve any height for the rows
infiniteScrollbooleanWhen this is set to true, a vertical scroll is displayed instead of the pagination footer
infiniteScrollVisibleElementsnumberNumber of rows to determine the max height of the scrolling area

Infinite scroll. The next scrolling request it is calculated from the start and size property from the previous request, so these should be present in the service data response.

Sorting specific

AttributeTypeDescription
sortablebooleanDefines if data is sortable for each column, identified by arrows next to the column title
multiSortbooleanDefines if sorting supports multiSort by pressing shift key
sortSeparatorstringIn a multisort, one or more characters can be used to separate the items. The sortPattern is repeated for every selected column and separated by sortSeparator, the result is a string that can be used in the queryUrl with the expression {{$sort}}
sortPatternstringFor every column used in a multisort, this pattern will be computed. You can use {{$sortItem.id}} (the column id) and {{$sortItem.direction}} (asc or desc or whatever defined in sortAsc and sortDesc attributes)
sortAscstringWhen a column is sorted in ascending mode, this string will be sent to the server
sortDescstringWhen a column is sorted in descending mode, this string will be sent to the server

Example sort configurations:

To produce: ./api?query=type:USR+sort:asc:type,desc:name

{
  "queryUrl": "./api?query=type:USR+sort:{{$sort}}",
  "sortSeparator": ",",
  "sortPattern": "{{$sortItem.direction}}:{{$sortItem.id}}"
}

To produce: ./users?sortBy=name&sortDirection=ASC

{
  "queryUrl": "./users?sortBy={{$sortColumn}}&sortDirection={{$sortDirection}}",
  "sortAsc": "ASC",
  "sortDesc": "DESC"
}

To produce: ./anime?sort=subtype,-averageRating

{
  "queryUrl" : "./anime?sort={{$sort || 'id'}}",
  "sortAsc": "",
  "sortDesc": "-",
  "sortSeparator": ",",
  "sortPattern": "{{$sortItem.direction}}{{$sortItem.id}}",
}

Filtering specific

AttributeTypeDescription
filterablebooleanAllow filtering per column.
filterPatternstringFor every filtable column where the user typed a value, this pattern will be computed. You can use {{$filterItem.id}} (the column id) and {{$filterItem.value}} (the text the user wrote in the filter box)
filterSeparatorstringThe filterPattern is repeated for every column (with a filter value) and separated by filterSeparator, the result is a string that can be used in the queryUrl with the expression {{$filter}}

Example filter configurations:

To produce: ./anime?sort=id&filter[subtype]=TV&filter[text]=magical%20girl

{
  "queryUrl" : "./anime?sort=id&{{$filter}}",
  "filterSeparator": "&",
  "filterPattern": "filter[{{$filterItem.id}}]={{$filterItem.value}}",
}

Columns

AttributeTypeDescription
columnsObject[]Array of COLUMN

COLUMN

Column definition. Each column definition can use the following attributes:

AttributeTypeDescription
accessorstringPath of the row value to show. Doesn't apply if the component property is defined
alignmentstringAccepted values: left, right, center, justify
classNamestringAdds a css class to the cells of the column
componentObjectAny component definition to show. e.g.: component:{"type":"htmlComponent", "value":"<span>{{$item.name}}</span>"}
filterablebooleanDefines if the column is filterable; overrides the table filterable property.
idstringA unique ID is required if the accessor is not a string or if you would like to override the column name used in server-side calls
labelstringTitle in the head of the column
maxWidthnumberA maximum width for this column
minWidthnumberA minimum width for this column. If there is extra room, the column will fill available space (up to the max-width, if set)
showboolean or string(Expression)Defines if the column is visible; can be an expression like {{showColumn}} which is evaluated using form data
sortablebooleanWhether or not sorting is allowed on this column
widthnumberA fixed width for the column. This overrides both min and max width options

This component uses react-table. See react-table

Selectable

AttributeTypeDescription
selectablestringWill make rows selectable using Single (radio buttons) or Multiple (checkboxes).

To make the datatable selectable this attributes must be correctly defined too:

AttributeTypeDescription
valuestringRequired. Expression pointing where in the payload to store the selection
storagestringWheter to store an identifier (Id) or the whole row data (Full)
identitystringName of a unique field. When storage is Id only this identifier value will be stored

Conditional Formatting

AttributeTypeDescription
conditionalFormattingObject[]Array of RULE

RULE

Each rule is an Object with a condition and any of styleClass, color or bgcolor:

AttributeTypeDescription
conditionstringWhen this expression evaluates to true, the style of this rule will be applied. Please use $item to get the row data {{$item.id > 7}}.
Also the row index can be accessed through $rowIndex, e.g. {{$rowIndex > 1 && $rowIndex < 4}}
styleClassstringOptional. Class name to apply.
colorstringOptional. Font color to apply. CSS style format, e.g. lightblue, #f00
bgColorstringOptional. Background color to apply. CSS style format, e.g. lightblue, #f00

Only the first rule with a true condition will be applied. e.g.

conditionalFormatting: [
  {
    condition: "{{$item.id % 2 === 1}}",
    styleClass: "myOddClass"
  },
  {
    condition: "{{$item.last_name === 'Jackson'}}",
    color: "red",
    bgColor: "#1c98a7"
  }
]

Extra attributes

AttributeTypeDescription
noDataMessagestringMessage shown when there is no data
nodataPositionstringWhere to align the no data message: top-left, top-center, top-right, middle-left, middle-center, middle-right, bottom-left, bottom-center, bottom-right
output.numRowsstringExpression pointing where in the payload the total number of records will be stored, e.g. {{mytable.rows}}.
showRefreshButtonbooleanShow/hide refresh button. This button reloads data in the table
refreshTimenumberNumber of ms to reload data
showTotalRecordsbooleanShow/hide total number of records found
targetstringNative link target: _self, _blank, etc.
urlstringURL to go when row is clicked. Please use $item and $rowIndex to access row data, e.g. http://myaddress/search?q={{$item.first_name}}&id={{$rowIndex}}
sortableColumnsbooleanWhen true the user will be able to reorder and hide columns

Events

EventWhenAdditionalCancellable
Datatable.dataLoadedDatatable content is loadedDefinition + StateNo
Datatable.nextDatatable Next button is clickedDefinition + StateNo
Datatable.previousDatatable Previous button is clickedDefinition + StateNo
Datatable.sortDatatable column sorting is changedDefinition + State (including sort data)No
Datatable.filterDatatable column filtering is usedDefinition + State (including filters data)No

See section Events for more information.

When to use it

Use it to compare a list of items with the same structure.

← ColumnsDate →
Docs
GuidesComponents
Private
SourceStorybook
Flowable Forms
Copyright © 2020 Flowable