With TableRowGrouping, you can group the data in your table using header rows.
Prerequisites
As always, you should have created a Web Dynpro Project including a component with window and view.
Procedures
Inserting the UI elements
- Create a Table element.
- Select the Table, open the context menu and select Insert RowArrangement. The New UI Element wizard appears.
- Select TableRowGrouping and confirm with Ok.
- Insert a Header into the TableRowGroupingelement.
- Insert the desired number of TableColumns into the Table element.
- Insert a Header and a TableCellEditor into each TableColumn.
Your table structure in the Outline should look similar to the graphic below:
Create Context Structure
- Switch to the Context tab, select the Context root node, open the context menu and select New → Node. The Context Node Wizardappears.
- Select Manually, enter a name for the Node, such as TableGroup and confirm with Finish.
- Select the TableGroup node, open the context menu and select New → Node. The Context Node Wizardappears.
- Select Manually, enter a name for the Node, such as TableGroupData and confirm with Finish.
- Switch to the Properties tab, select the singleton property and set the value to false .
- Switch to the Context tab, select the TableGroupData node and create the attributes you need for the TableColumns.
- Select the TableGroup node, open the context menu and select New → Attribute. Select Manually, enter a name for the attribute, such as GroupHeaderText and confirm with Finish.
- Repeat the last step and create an attribute called expanded of type Boolean .
Bind UI Element properties to the context
- Bind the following UI element properties to the following context nodes/attributes:
-
Table.dataSource to node TableGroup
-
TableRowGrouping . groupData to node TableGroupData
-
TableRowGrouping . expanded to the expanded attribute
-
Header . text of TableRowGrouping to attribute GroupHeaderText
- The text properties of the respective TableCellEditors of the TableColumns to the attributes under node TableGroupData.
The graphic below illustrates the data binding in this case:
Result
You have created a table including a TableRowGrouping element. You have also created an appropriate context structure and bound all relevant properties to this context.
After filling the context with data, you will have a result at runtime similar to this:
More Information:
TableRowGrouping
Binding UI Element Properties to the Context