With TableRowGrouping, you can group the data in your table using header rows.
As always, you should have created a Web Dynpro Project including a component with window and view.
...
1. Create a Table element.
2. Select the Table, open the context menu and select Insert RowArrangement. The New UI Element wizard appears.
3. Select TableRowGrouping and confirm with Ok.
4. Insert a Header into the TableRowGroupingelement.
5. Insert the desired number of TableColumns into the Table element.
6. Insert a Header and a TableCellEditor into each TableColumn.
Your table structure in the Outline should look similar to the graphic below:
...
1. Switch to the Context tab, select the Context root node, open the context menu and select New → Node. The Context Node Wizard appears.
2. Select Manually, enter a name for the Node, such as TableGroup and confirm with Finish.
3. Select the TableGroup node, open the context menu and select New → Node. The Context Node Wizardappears.
4. Select Manually, enter a name for the Node, such as TableGroupData and confirm with Finish.
5. Switch to the Properties tab, select the singleton property and set the value to false.
6. Switch to the Context tab, select the TableGroupData node and create the attributes you need for the TableColumns.
7. 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.
8. Repeat the last step and create an attribute called expanded of type Boolean.
...
1. 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:
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: