Skip to content

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.


DataSubscriptions

Array of data change events to subscribe to.


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.


Footer bar to be displayed below this control's content section.


Header bar to be displayed above this control's content section.


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


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.


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;
}