How to create TreeTable with Grouping Header without subitems UI5?

Viewed 26

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:

enter image description here

I would like it to look like this:

enter image description here Is there any way to do this?Help is really appreciated :)

0 Answers
Related