Table Component
Displays a list of complex objects as a table.
Outcomes associated with a table will be displayed in an Actions column. Each outcome will only operate on the item that the table row
is associated with e.g. an Edit outcome in a table will edit the row that the outcome is in.
If an outcome is defined as Is Bulk Action it will be displayed above the table and will operate on whatever item(s) are selected in the
table.
A search box can be made visible by checking the Searchable option in the table component editor. If the table is populated from a list
the search will act upon every visible column, if the table gets its items from a service the search will be handled by the service.
By default pagination is disabled for tables populated by a list. You can enable it by setting the pagination attribute to true.
You can adjust the amount of items that are displayed per page (default is 10) by changing the paging.table setting. See Settings
for more information. Alternatively you can adjust the page size for a specific table by adding the paginationSize attribute.
"attributes": {
"borderless": false,
"striped": false,
"radio": false,
"outcomes": "icons",
"classes": "myclass1 myclass2",
"pagination": false,
"paginationSize": 10,
"onlyDisplaySearchResults": false,
"isExecuteRequestOnRenderDisabled": false,
"noResults": null,
"isRowSelectionDisabled": false
}| Key | Value | Description |
|---|---|---|
| borderless | true or false | Removes all vertical borders, removes table-bordered class |
| striped | true or false | Adds a background color to every other row, adds the table-striped class |
| radio | true or false | Adds an extra column at the beginning of the table with a radio button input for each row. Multi-select tables will display checkboxes. |
| classes | strings | Custom class names that will be added to the table-container element |
| pagination | true or false | Enable pagination if the table is bound to a list of items |
| paginationSize | number | Set the number of items displayed on each "page" of this table. Set to zero to display all items (if supported by the Service the table is loading data from) |
| onlyDisplaySearchResults | true or false | If true then initially don't display any results until the user has performed a search# |
| isExecuteRequestOnRenderDisabled | true or false | If true then don't execute the object data request when the table is first displayed |
| noResults | string | Custom messsage that will be displayed if no results are found |
| isRowSelectionDisabled | boolean | Set to true to disable selecting a row in the table by clicking on it. If this is set to true then you'll also need to set "radio" to true to allow selection |
Package: Download
