DataTable¶
A data table is a range of labeled columns and rows used to present numbers, text, or even images. Generally, data tables are a grid layout of columns and rows. In Mobile, Data Tables will scroll horizontally and diagonally by default
DataTable Properties¶
Property | Type | Required |
---|---|---|
DataPaging | DataPaging | Optional |
DataSubscriptions | DataSubscriptions | Optional |
EmptySection | EmptySection | Optional |
Footer | Footer | Optional |
Header | Header | Required |
Row | object |
Required |
StickyColumn | boolean |
Optional |
Target | LinkQueryFunctionTarget | Required |
Visible | boolean |
Optional |
_Name | string |
Optional |
_Type | const |
Required |
DataPaging¶
Configure the loading indicator shown at the end of the list, when loading next page of data. Also configure page size for fetching data. Paging is not supported on iOS currently, user needs to specify the entire data as the page size. Loading indicator is not supported for Android.
- type: DataPaging
DataSubscriptions¶
Array of data change events to subscribe to.
- type: DataSubscriptions
EmptySection¶
A section that will be displayed when the list is empty, this only applies if you are using Target binding. Allows you to show custom label when the list is empty.
- type: EmptySection
Footer¶
Footer bar to be displayed below this control's content section.
- type: Footer
Header¶
Header bar to be displayed above this control's content section. Header
is a must in Android while data can be viewed
without Header
in iOS.
- type: Header
Row¶
- type:
object
with following properties.
Property | Type | Required | Default |
---|---|---|---|
Items |
array | Optional | |
Layout |
DataTableLayout | Optional | |
OnPress |
ActionOrRule | Optional |
Items¶
Array of data items that represent columns in a data Table.
All array items must be of the type:
Layout¶
The layout of columns in a Data Table row.
OnPress¶
Event triggered when the Data Table row is pressed
- ActionOrRule
- Formatter and Binding are not supported
StickyColumn¶
Allows the first column to stick in place, even when the Data Table is scrolled horizontally
- type:
boolean
Target¶
The binding target for the Data Table. For each entry in the result of the binding, a Data Table row will be generated based on the Row configuration.
- type: LinkQueryFunctionTarget
Visible¶
Visibility of the Data Table
- type:
boolean
_Name¶
- type:
string
_Type¶
- type:
const
The value of this property must be equal to:
"Section.Type.DataTable"
Examples¶
{
"_Type": "Section.Type.DataTable",
"_Name": "DataTableSection",
"DataPaging": {
"ShowLoadingIndicator": true,
"LoadingIndicatorText": "Loading more items, please wait…"
},
"Header": {
"DataTable": {
"Items": [
{
"Text": ""
},
{
"Text": "ID"
},
{
"Text": "Description"
},
{
"Text": "Price",
"TextAlignment": "right"
}
]
}
},
"Row": {
"Items": [
{
"Image": "/MDKApp/Images/workorder.png"
},
{
"Text": "{OrderId}"
},
{
"Text": "{OrderDescription}"
},
{
"Text": "$(C,{OrderId},'USD')",
"TextAlignment": "right"
}
],
"OnPress": "/MDKApp/Actions/Messages/Message.action"
},
"Target": {
"EntitySet": "MyWorkOrderHeaders",
"Service": "/MDKApp/Services/Amw.service"
}
}
DataTable with Style¶
{
"_Type": "Section.Type.DataTable",
"_Name": "DataTableSection",
"DataPaging": {
"ShowLoadingIndicator": true,
"LoadingIndicatorText": "Loading more items, please wait…"
},
"Header": {
"DataTable": {
"Items": [
{
"Text": ""
},
{
"Text": "ID"
},
{
"Text": "Description"
},
{
"Text": "Price",
"TextAlignment": "right"
}
]
}
},
"Row": {
"Items": [
{
"Image": "sap-icon://favorite"
},
{
"Text": "{OrderId}",
"Style": "DataTableIdItem"
},
{
"Text": "{OrderDescription}"
},
{
"Text": "$(C,{OrderId},'USD')",
"TextAlignment": "right"
}
],
"OnPress": "/MDKApp/Actions/Messages/Message.action"
},
"Target": {
"EntitySet": "MyWorkOrderHeaders",
"Service": "/MDKApp/Services/Amw.service"
}
}
Style Classes Definition¶
.DataTableIdItem {
color: #3333cc;
font-name: italicSystem;
}