How to build an extensible sap.m.Table in sapui5?

I'm looking for a TreeTable type that uses it sap.m.Table

as a base. My first "hack" looks like this:

Experimental data model:

var oModel = new sap.ui.model.json.JSONModel({
    "Items" : [
               {"Name" : "A", "SubItems" : [
                                            {"Name" : "A.1" },
                                            {"Name" : "A.2" },
                                            {"Name" : "A.3" },
                                           ]
               },
               {"Name" : "B", "SubItems" : [
                                            {"Name" : "B.1" }
                                           ]
               },
               ]
});
this.getView().setModel(oModel, "expand");

      

        
        
        
      

    

Experimental table:

var oContent = new sap.m.Table({      
              items : {
                path : "expand>/Items",
                template : new sap.m.ColumnListItem({
                  customData : [ new sap.ui.core.CustomData({
                            key : "SubItems",
                            value : "SubItems",
                            customData : {
                              path : "expand>SubItems",
                              template : new sap.ui.core.CustomData({
                                key : this.createId("subItem"),
                                value : new sap.m.ColumnListItem({
                                  cells : [
                                           new sap.m.Text({
                                             text: "{expand>Name}",
                                           })
                                           ]
                                })
                              })
                            }
                          })                          
                        ],
                  type : sap.m.ListType.Active,
                  cells: [
                            new sap.m.Text({ text: "{expand>Name}" }),
                          ],
                  press : [function(oEvent) {
                    var oRow = oEvent.getSource();
                    var oTable = oRow.getParent();
                    var oItems = oTable.getItems();

                    var insertIndex = -1;
                    var oSubItemsData = undefined;

                    for (var i=0;i<oItems.length;i++) {
                      if (oItems[i]==oRow) {
                        oSubItemsData = oRow.getAggregation("customData").filter(function(oData) {return oData.getProperty("key") == "SubItems";});
                        insertIndex = i;
                      }
                    }

                    var oSubItems = oSubItemsData[0].getAggregation("customData").map(function(oData) {return oData.getValue();});
                    for (var j=0;j<oSubItems.length;j++) {
                      var mShownSubItems = oItems.filter(function(oShownItem) {
                        return oShownItem == oSubItems[j];
                      });
                      if (mShownSubItems.length>0) {
                        console.log("removing"+j);
                        oTable = oTable.removeItem(oSubItems[j]);
                      } else {
                        console.log("adding "+(insertIndex+j+1));
                        oTable = oTable.insertItem(oSubItems[j],insertIndex+j+1);
                      }                          
                    }                        
                  }, oController]
                })
              },
              columns : [ new sap.m.Column({}) ],
    });

      

        
        
        
      

    

I figured out various problems with this hack. First of all, the SubItems binding is not showing, if I use hard text the text is displayed. The second problem is that I can only insert one line.

How can this be solved?