Table

Step 1: Add the component

1. Create a mobile application. For more information, see Create a mobile application.

2. In the mobile application editor, click the Components icon on the far left.

3. (Optional) Add a column component to set the page layout. For more information, see Horizontal columns and vertical columns.

4. Above the component list on the left of the canvas, enter Table in the search box to find the component, then drag it onto the canvas.

   For more information about adding components, see Add components.

Step 2: Configure a data source

1. In the Style panel on the right of the mobile application editor, click Configure Data Source next to Display Data.

2. On the Data Source Configuration page, configure the data source.

   Supported data source types include API, data table resource, static data, and application push.

3. Click OK to complete the configuration.

   On the Data Display tab, the Data Source section on the left displays the name of the configured data source. The Dimension and Measure sections display the property fields parsed from the data source.

   Note

   Data source property field matching rules:

   • Dimension: Boolean, string, and time fields.

   • Measure: Numeric fields.

4. (Optional) In the upper-left corner, click Data Table to view all data from the configured data source.

Step 3: Configure the data display

On the Data Display tab, configure the data and style for the table.

1. Drag the fields you want to display from the Dimension or Measure section to the Data Fields box.

   Note

   You can drag the fields in the Data Fields box to reorder the table columns.

2. (Optional) In the Data Fields box, click the triangle icon next to a field to perform the following operations.

   Actions	Description
   Filter	Add a field to the Filter section to filter the displayed data based on conditions. You can add up to 10 filters. You can also add a field to the Filter section by clicking the triangle icon next to a field in the Dimension or Measure section. Important This feature is available only when the data source type is data table resource. For more information, see Filter configuration.
   Color Tag	Set colors to highlight measure data that meets specific conditions. You can configure the same or different colors for data from different measure fields. The tagged fields are displayed on the Properties tab on the right, where you can edit or delete them.
   Set Display Name	Edit the display name of the field.

3. On the right of the Data Display tab, click Style to configure the display style of the component.

   Parameter	Description
   Global Style	Set the font and background color.
   Export Data Entry	Shows or hides a button to export the table data. When shown, you can configure its style. Note When Export Data Entry is enabled, you can export only the data on the current page. However, if the table uses a paginator, the export is limited to the data on the first page.
   Table Title	Shows or hides the table title. When shown, you can configure its style.
   Header Text	Set the display styles for the header text and content text.
   Content Text
   Row Style	Configure the style for rows and columns, including their height and width.
   Column Style
   Table Border	Shows or hides the table border. When shown, you can configure its style.
   Paginator	Shows or hides the paginator. When shown, you can configure its appearance. If the amount of data exceeds the table's height and you have not enabled pagination, a scrollbar appears within the table. Note To display a paginator for a table that uses an API data source, the API must meet specific requirements. For more information, see API.
   No Data Tip	Shows or hides a tip that appears when no data is available. When shown, you can configure its style.

4. Click Complete Configuration to return to the mobile application editor and view the configured component data.

5. Adjust the component's dimensions and position on the page. For more information, see General styles.

Step 4: Configure interactions

1. In the Interaction panel on the right of the mobile application editor, click Add Interaction and set the Event and Action.

   This component supports the Value Change event. For example, when the component value changes, you can run the set device properties action to send a command to a device and update a property value on that device.

   For more information, see Interaction configuration.

2. Preview and debug the component's data display and style. For more information, see Preview and debug.