Show TOC

Table StructureLocate this document in the navigation structure

The Table UI element allows the two-dimensional display of data in cells arranged into rows and columns. The Table itself can have a header, as can each column. The lead selection of a row is highlighted in color when displayed on the screen.

Selection Menu

As illustrated in the graphic above the table is displayed with an icon in the upper left corner indicating the selection menu. The selection menu enables the user to do the following:.

  • Select or deselect all rows
  • Copy the current selection. The user can paste a copied selection to Microsoft Excel, for example. Also the user can perform this by dragging and dropping the selection icon.

These functions are provided by the Web Dynpro Framework. You can configure this selection context menu by inserting a SelectionMenuConfiguration element into the Table. This element can also contain additional menu items. More information: TableSelectionMenuConfiguration

Scroll Bar

When the user scrolls, a tool tip is 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. More information: TableScrollTipProvider

Columns

A Table can contain any number of TableColumnelements. These columns can be grouped under a common header using TableColumnGroup. You can use the fixedPosition property to fix a column on the left or right side and thereby remove the column fromj the scroll area.

More information: TableColumnGroup , TableColumn .

Rows

The number of rows is determined by the number of node elements at runtime. Additionally you can specify the number of rows to be displayed and other properties for configuring the visual display of rows.

The rows can be grouped using TableRowGrouping or represented in a hierarchical structure with the TreeByNestingTableColumn element.

Cell Editors

Each table column contains a header (optional) and a TableCellEditor with which you can specify the UI element used for this column.

Cell editors are, for example, Button, Caption, CheckBox, DropDownByKey, DropDownByIndex, FileDownload, FileUpload, Image, Inputfield, LinkToAction, LinkToURL, ProgressIndicator, RadioButton, TextView, and ValueComparison.

Cell Variants

You can insert various cell variants into a column.

  • The TableStandardCell enables you to specify another cell editor.
  • The TableSingleMarkableCell enables you to mark and execute actions at cell level.
  • The TablePopinToggleCell. Enables you to display an additional column that indicates a TablePopin's collapse status.
  • You can remove specific cells from the scroll area of the table and fix them at the top or bottom edge. To do this, 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. You can arrange additional UI elements in a TablePopin - for example to display detailed 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 cellDesign property of the table column or cell variant to assign the highlighted area. to each other.

    More information: Legend

  • Toolbar
  • Context menu and Popup menu. You use these to integrate popup menus using those UI elements as cell editors that can have popup menus - for example, Image or TextView. More information: Implementing Menus: ContextMenu, MenuBar and PopupMenu

Data binding

The data of a table is bound at two locations:

  • The dataSource property of the table must be bound to a context node.
  • A TableCellEditor is assigned to each column. The TableCellEditor's  property that holds the data - for example value of an InputField - is bound to a context attribute inside the node to which the dataSource property is bound.

Selection of Rows and Cells

The selection of single or multiple rows or of single cells is possible. You can use the selectionModeproperty to specify whether a selection of rows is possible and whether one or multiple rows can be selected. However, only one row can have the LeadSelection.