Table 

The Table UI element allows the two-dimensional display of data in cells arranged into rows and columns. The UI element consists of a header area, context text area, and footer area. The lead selection of a row is highlighted in color when displayed on the screen. The Table UI element can contain any number of GroupedTableColumn elements. The following graphic shows how the UI element is displayed.

Display of a Table

Pushbuttons provided in the footer of the table allow navigation. The following scroll bar functions are available:   First page Page up Line up Last page Page down Line down

Table Structure

Columns

A table – which is an element of the IWDTable – consists of grouped table columns which can be of the type IWDTableColumn or IWDTableColumnGroup. Each group can contain additional groups and columns. You can use the TableColumnGroup to group columns under a common header. You can use the fixedPosition property to fix a column at the left or right side and thereby take out the column of the scroll area.

When using the table template assistent, only TableColumn elements are created which you cannot group at a later time.

A specific table column is the IWDTreeByNestingTableColumn which allows you to display a tree structure within a column. A table can only contain one of these columns.

Cell Editors

A table column contains a header and a TableCellEditor which specifies the UI element in which the cells of this column are displayed.

Cell editors are, for example, Button, Caption, CheckBox, DropDownByKey, DropDownByIndex, FileDownload, FileUpload, Image, Inputfield, LinkToAction, LinkToURL, ProgressIndicator, RadioButton, TextView, and ValueComparison. The ValueComparison element is used to display various numerical values line by line.

Cell Variants

You can insert various cell variants in a column. The TableStandardCell enables you to highlight single cells in color or to select a different cell editor. The TableSingleMarkableCell can be used to mark and execute actions at cell level. For the TableSingleMarkableCell, the following cell editors can be used: Image, Inputfield, TextView, DropDownByIndex, DropDownByKey.

Specific cells can be taken out of the scroll area of the table and be fixed at the top or bottom edge. To do this, you can use the interfaces IWDFixedBottomCell and IWDFixedTopCell.

Enhancements

The following enhancements of a table are possible:

·        TablePopin. A TablePopin can be assigned to the table or a single column. When the user clicks the TablePopinToggleCell, the TablePopin opens as an enhancement below the corresponding row. You can arrange additional UI elements in a TablePopin - for example, for the display of detail information of a data record. 

·        Legend A legend enables you to add descriptions for single cells highlighed in color. You can use the semantics property of a LegendItem and the cellDesign property of the table column or cell variant to assign the highlightings to each other.

·        Toolbar

·        Popup menu For the integration of popup menus, you can use UI elements as cell editors. They can be assigned a popup menu - for example, Image or TextView.

Data binding

The data of a table is bound at two locations:

·        The dataSourceproperty of the table must be bound to a context node.

·        A TableCellEditor is assigned to each column. The text property or valueproperty of the TableCellEditor is bound to a context attribute.

At runtime, the number of rows is determined by the number of node elements.

Selection of Rows and Cells

The selection of single or multipe rows or of single cells is possible.

You can use the selectionMode property to specify whether a selection of rows is possibe and whether one or multiple rows can be selected. However, only one row can have the LeadSelection.

Alternatively, you can use cell variants of the type TableSingleMarkableCell to select single cells.