JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">

		<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_goldreflection">
		</script>
		<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

		<script>
				sap.ui.localResources("dynamic");
				var view = sap.ui.view({id:"idcolumns1", viewName:"dynamic.columns", 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 aColumnData = [{
		        columnId: "col1"
		    }, {
		        columnId: "col2"
		    }, {
		        columnId: "col3"
		    }, {
		        columnId: "col4"
		    }, {
		        columnId: "col5"
		    }];

		    var aData = [{
		        col1: "Row 1 col 1",
		        col2: "Row 1 col 2",
		        col3: "Row 1 col 3",
		        col4: "Row 1 col 4",
		        col5: "Row 1 col 5"
		    }, {
		        col1: "Row 2 col 1",
		        col2: "Row 2 col 2",
		        col3: "Row 2 col 3",
		        col4: "Row 2 col 4",
		        col5: "Row 2 col 5"
		    }];
		    
		    var oModel = new sap.ui.model.json.JSONModel();

		    oModel.setData({
		        columns: aColumnData,
		        rows: aData
		    });
		    var oTable = new sap.ui.table.Table({
		        title: "dynamically add columns to table Hi Arash!",
		        showNoData : true,  
		        columnHeaderHeight : 10,
		        visibleRowCount: 7
		    });
		    oTable.setModel(oModel);
		    
		    
		     oTable.bindColumns("/columns", function(index, context) {
		         var sColumnId = context.getObject().columnId;
		         console.log(sColumnId)
		        return new sap.ui.table.Column({
		        	label: sColumnId, 
		            template: sColumnId, 
		            
		        });
		    });
		    
		   
		    oTable.bindRows("/rows");
		 
		    
		    
		    var button = new sap.ui.commons.Button({
		    	text : "Add new Column",
		    	press : function()
		    	{
		    		
		    		console.log(oModel)
		    		var data = oTable.getModel().oData.columns;
		    		data.push({columnId: "" + (data.length + 1) });
	                   oModel.refresh();
	                  
		    	}
		    	
		    	
		    });
		    
		  button.placeAt("content");
		  oTable.placeAt("content")