Data Table

Show data in a tabular layout.

Demo

Basic 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" } ] } }

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.