Show TOC Start of Content Area

Component documentationTable  Locate the document in its SAP Library structure

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 and context text 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.

This graphic is explained in the accompanying text

Selection Button

As illustrated in the graphic above the table has a selection button. The selection button enables the user to

These functions are provided by the Web Dynpro Framework.

Scroll bar

If the user scrolls, a tool tip will be shown as illustrated in the screenshot below. You can define texts for this scroll tip using the TableScrollTipProvider. If new data has to be loaded, the roundtrip to the server is triggered when the user releases the mouse button.

This graphic is explained in the accompanying text

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 fixedPositionproperty to fix a column at the left or right side and thereby take out the column of the scroll area.

Note

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

Rows

With TableRowGrouping you can group rows and display them under a header row.

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 highlighted in color. You can use the semantics property of a LegendItem and the cellDesignproperty of the table column or cell variant to assign the high lightings 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 textproperty or value property 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 selectionModeproperty 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.

 

End of Content Area