JSFiddle - React, Tailwind, and code Playground

HTML

<script id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-xx-bindingSyntax="complex"
    data-sap-ui-libs="sap.m, sap.ui.commons, sap.ui.table"></script>

<script id="view1" type="ui5/xmlview">
    <mvc:View 
      controllerName="view1.initial"
      xmlns="sap.ui.table"
        xmlns:mvc="sap.ui.core.mvc"
        xmlns:m="sap.m"
        xmlns:u="sap.ui.unified"
        xmlns:core="sap.ui.core" >
     <TreeTable
                    id="TreeTableBasic"
                    rows="{path:'/catalog/clothing', parameters: {arrayNames:['categories']}}"
                    selectionMode="MultiToggle"
                    enableSelectAll="false"
                    ariaLabelledBy="title">
                <toolbar>
                    <m:Toolbar>
                        <m:Title id="title" text="Clothing"/>
                        <m:ToolbarSpacer/>
                        <m:Button text="buy" press="onBuy"/>
                    </m:Toolbar>
                </toolbar>
                <columns>
                    <Column width="13rem">
                        <m:Label text="Categories"/>
                        <template>
                            <m:Text text="{name}"/>
                        </template>
                    </Column>
                    <Column width="9rem">
                        <m:Label text="Price"/>
                        <template>
                            <u:Currency value="{amount}" currency="{currency}"/>
                        </template>
                    </Column>
                    <Column width="11rem">
                        <m:Label text="Size"/>
                        <template>
                        		<m:Input value= "{size}" visible="{= !!${size}}" change="changeState" />                           
                        </template>
                    </Column>
                </columns>
            </TreeTable>
   ...

JavaScript

sap.ui.controller("view1.initial", {
    onInit: function(oEvent) {
        this.bindTable();
    },
    bindTable: function() {
        var aData = {
  "catalog": {
    "clothing": {
      "categories": [
          {"name": "Girls", "categories": [
            {"name":"Clothing", "categories": [
              {"name": "Shirts", "categories": [
                {"name": "Red T-shirt", "amount": 16.99, "currency": "USD", "size": "s", "change": false},
                {"name": "Tunic Top", "amount": 47.99, "currency": "USD", "size": "s", "change": false},
                {"name": "Fuzzy Sweater", "amount": 103.99, "currency": "USD", "size": "s", "change": false}
              ]},
              {"name": "Pants", "categories": [
                {"name": "Blue Jeans", "amount": 24.99, "currency": "USD", "size": "s", "change": false},
                {"name": "Red Pant", "amount": 54.99, "currency": "USD", "size": "s", "change": false}
              ]}
            ]}            
          ]}
        ]}
 
    }
        };
        var oModel = new sap.ui.model.json.JSONModel();
        oModel.setData(aData);
        
        

        
        this.getView().setModel(oModel);
    },
    onBuy: function(oEvent) {
    	console.log(oEvent.getSource());
    },
    changeState: function(e) {
         const view = this.getView();
      const model = view.getModel();
      const data = model.getData();
	  
      const fieldName = e.mParameters.id;
      const elem = e.oSource.oParent.mAggregations.cells.find(function(f) {
      	return f.sId === fieldName;
      });            
      const state = elem.oParent._oNodeState;
      const groups = state.groupID.split('/').filter(function(a) { return a !== '' });
      const path = groups[groups.length - 1];
      const fullPath = path.split('_');
      
      let stringPath = 'catalog.clothing';
      
      for (let i = 0; i < fullPath.length; i++) {
      	stringPath += '[' + fullPath[i] + ']'
      }
      
      const...