JSFiddle - React, Tailwind, and code Playground

by indrajith patel

HTML

<!DOCTYPE HTML>
		

		<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.ui.commons,sap.ui.table"
				data-sap-ui-theme="sap_bluecrystal">
		</script>
		<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

		<script>
				sap.ui.localResources("focus");
				var view = sap.ui.view({id:"idtablefocus1", viewName:"focus.tablefocus", type:sap.ui.core.mvc.ViewType.JS});
				view.placeAt("content");
		</script>

	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

JavaScript

var aData = [{ ID : 1 ,lname: "indrajith",   fname: "patel"},  
                        {ID : 2 ,lname: "SCN", fname: "SCN"}];    
           // Define a table      
          var oTable = new sap.ui.table.Table({    
                 title: "Line Items",    
                 visibleRowCount: 7,    
               firstVisibleRow: 3,    
              selectionMode: sap.ui.table.SelectionMode.Single,    
              
               
          });    
          oTable.addColumn(new sap.ui.table.Column({    
              label: new sap.ui.commons.Label({    
                  text: "ID"    
              }),    
              template: new sap.ui.commons.TextField("firstColumn",{    
                  value: '{ID}',    
                   
              }),    
          }));  
          oTable.addColumn(new sap.ui.table.Column({    
              label: new sap.ui.commons.Label({    
                  text: "Last Name"    
              }),    
              template: new sap.ui.commons.TextField({    
                  value: '{lname}',    
                   
              }),    
               
          }));    
          oTable.addColumn(new sap.ui.table.Column({    
              label: new sap.ui.commons.Label({    
                  text: "First Name"    
              }),    
              template: new sap.ui.commons.TextField({    
                  value: '{fname}', 
                  
                  change : function(event)
                  {
                	  
                	
                	  var modelData = oModel.getData();  
                      var rowCount   = modelData.modelData.length;    
                     rowCount++; 
                     aData.push({ID: rowCount, lname: " ",fname : ""}); 
                       oModel.setData({modelData: aData}); 
                         var parts = event.getSource().getId().split("-");
                         var rowNum = parseInt( parts[2].substring(3, parts[1].length) );
              ...