I'm quite new to UI5 and searched a long time for a solution now, but I couldn't find any, so I hope someone can help me out here.
Given the following example model:
let test = [
{"name":"TestWithSubitems", "subItems":
[{"color": "#ff00ff", "id": -1, "name": "subitem", "isUsed": "true"}]},
{"name":"TestWithoutSubitems", "subItems":[]}]
this.getView().setModel(new JSONModel(test), "test");
I want my treetable to group the items based on the object name.In case there is no subItem like in the "TestWithoutSubitems" object, I want a group header to be shown, that is not expandable.
<t:TreeTable
id="randomId"
class="sapUxAPObjectPageSubSectionAlignContent"
ariaLabelledBy="title"
useGroupMode="true"
groupHeaderProperty='name'
rows="{
path: 'test>/'
}"
visibleRowCount= 'length'
rowSelectionChange=".onSelectionChange"
toggleOpenState=".onToggleState">
<t:columns>
<t:Column>
<m:Text text="{i18n>Configure.Object.Column.Color}" />
<t:template>
<core:Icon src="sap-icon://color-fill" color="(${test>color}"/>
</t:template>
</t:Column>
----other columns not shown to reduce complexity----
</t:columns>
</t:TreeTable>
Currently it looks like this:
I would like it to look like this:

