Data Table
Show data in a tabular layout.
Demo
Basic example
Attributes
Attribute | Type | Description |
---|---|---|
type | string | Type expected is dataTable. |
styleClass | string | CSS 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.
Attribute | Type | Description |
---|---|---|
queryUrl | string | if 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}} |
response | Object | { 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
Attribute | Type | Description |
---|---|---|
clientPagination | boolean | Enable browser-side pagination |
pageSize | number | Number of rows per page |
pageSizeOptions | number Array | Options for the page size selector. Default is: [5 10, 20, 25, 50, 100] |
showPagination | boolean | Will hide/show bottom pagination bar and buttons |
autoHidePagination | boolean | When 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 |
infiniteScroll | boolean | When this is set to true, a vertical scroll is displayed instead of the pagination footer |
infiniteScrollVisibleElements | number | Number 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
Attribute | Type | Description |
---|---|---|
sortable | boolean | Defines if data is sortable for each column, identified by arrows next to the column title |
multiSort | boolean | Defines if sorting supports multiSort by pressing shift key |
sortSeparator | string | In 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}} |
sortPattern | string | For 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) |
sortAsc | string | When a column is sorted in ascending mode, this string will be sent to the server |
sortDesc | string | When 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
Attribute | Type | Description |
---|---|---|
filterable | boolean | Allow filtering per column. |
filterPattern | string | For 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) |
filterSeparator | string | The 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
Attribute | Type | Description |
---|---|---|
columns | Object[] | Array of COLUMN |
COLUMN
Column definition. Each column definition can use the following attributes:
Attribute | Type | Description |
---|---|---|
accessor | string | Path of the row value to show. Doesn't apply if the component property is defined |
alignment | string | Accepted values: left , right , center , justify |
className | string | Adds a css class to the cells of the column |
component | Object | Any component definition to show. e.g.: component:{"type":"htmlComponent", "value":"<span>{{$item.name}}</span>"} |
filterable | boolean | Defines if the column is filterable; overrides the table filterable property. |
id | string | A 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 |
label | string | Title in the head of the column |
maxWidth | number | A maximum width for this column |
minWidth | number | A minimum width for this column. If there is extra room, the column will fill available space (up to the max-width, if set) |
show | boolean or string(Expression) | Defines if the column is visible; can be an expression like {{showColumn}} which is evaluated using form data |
sortable | boolean | Whether or not sorting is allowed on this column |
width | number | A fixed width for the column. This overrides both min and max width options |
This component uses react-table. See react-table
Selectable
Attribute | Type | Description |
---|---|---|
selectable | string | Will make rows selectable using Single (radio buttons) or Multiple (checkboxes). |
To make the datatable selectable this attributes must be correctly defined too:
Attribute | Type | Description |
---|---|---|
value | string | Required. Expression pointing where in the payload to store the selection |
storage | string | Wheter to store an identifier (Id ) or the whole row data (Full ) |
identity | string | Name of a unique field. When storage is Id only this identifier value will be stored |
Conditional Formatting
Attribute | Type | Description |
---|---|---|
conditionalFormatting | Object[] | Array of RULE |
RULE
Each rule is an Object with a condition and any of styleClass, color or bgcolor:
Attribute | Type | Description |
---|---|---|
condition | string | When 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}} |
styleClass | string | Optional. Class name to apply. |
color | string | Optional. Font color to apply. CSS style format, e.g. lightblue , #f00 |
bgColor | string | Optional. 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
Attribute | Type | Description |
---|---|---|
noDataMessage | string | Message shown when there is no data |
nodataPosition | string | Where 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.numRows | string | Expression pointing where in the payload the total number of records will be stored, e.g. {{mytable.rows}} . |
showRefreshButton | boolean | Show/hide refresh button. This button reloads data in the table |
refreshTime | number | Number of ms to reload data |
showTotalRecords | boolean | Show/hide total number of records found |
target | string | Native link target: _self , _blank , etc. |
url | string | URL 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}} |
sortableColumns | boolean | When true the user will be able to reorder and hide columns |
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.
When to use it
Use it to compare a list of items with the same structure.