Table

The table component shows the object 'list' in a table view. It has the following structure:

"table":{
  "actions": [
    "add"
  ],
  row:{
    "actions": [
      "remove",
      "view"
     ],
    "labels": [{
      ...
    }],
    "columns":{
      "flexColumns":true|false,
      "download":true|false,
      "properties": [{
        ...
     }],
    "region":{
    ...
    },
  }
}

The component has the following sub settings.

Setting Description

actions

Add
The events that follow when the action 'Add' is performed is floor plan specific. The consuming floor plan specifies the next possible object state when an action is taken. For details refer to the floor plan specifications.

row.actions

Remove or View
The events that follow when the action 'Remove' or View is performed is floor plan specific. The consuming floor plan specifies the next possible object state when an action is taken. For details refer to the floor plan specifications.

row.columns

Each property forms a column in the table. The label of the property is shown as the column header. Refer to the ui-presentation-configuration/components/property.adoc component description for details.

A multi value property is not supported as a column property.

Setting flexColumns to true make it possibility to auto exclude column to avoid horizontal scroll, this feature renders only the columns that can be shown based on screen resolution. The columns which are excluded can be added to the view by explicitly selecting them. By default, this setting is true.

Setting download to true makes it possible to download the data that is present in the UI to an excel. By default this setting is true for table. Only the data in column can be downloaded to an excel.

row.region

Region component- displayed as an overflow area

row.labels

Label component - displayed as an extra column in the table

This component supports the following features:

  • Column resize

  • Horizontal or Vertical scrollbar to support responsiveness

  • Editable rows

  • Possibility to add a new row

UI Specifications

The column Headers and the 'Add' button is always displayed. The column headers and values are left aligned.

Upon defining the region component, a collapsible overflow area is added. The overflow area is not expanded by default.

If a label component is present, then it shows up as a non-editable field. If multiple labels are defined for a row, then each label is displayed as a separate column. If label is set as any of the existing column property and any change to that column property value (edit mode), also changes the value of the label component on tab out. The object record is removed from the table when a user performs the action 'Remove'.

The table supports view and edit mode for the properties. When the object list is in the edit state (this is controlled by the page), the table rows are shown as editable. The property representation in view and edit mode follows the standards as described in the "Properties" chapter in the Developer Guide. The field level validations are applicable when adding or updating rows.

An empty row gets added in the table when a user performs the action 'Add'. The overflow area (if applicable) is displayed expanded for the new row.

No Results

Refer 'No Results' section in the Results Component.

Example

The table component in view mode

image

The table component in edit mode

image