JSFiddle - React, Tailwind, and code Playground

by aman1981

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/dataTables.bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/dataTables.bootstrap.min.js"></script>
<br>
     <div id="myDiv" class="table">
    <table class="table table-striped table-bordered">
    <thead>
        <tr data-bind="foreach: columnNames">
            <th> <span data-bind="text: $data"></span>

            </th>
        </tr>
    </thead>
    <tbody data-bind="foreach: data">
        <tr data-bind="foreach: $parent.columnNames">
            <td style="width:20px"><input type="text" class="form-control textbox"/> </td>            
        </tr>
        <tr>
             <td>
        <input type="button" value="Remove Row" data-bind="click: $parent.removeRow" class="btn btn-danger" />
      </td>
        </tr>
    </tbody>
    </table>
    </div>

<br><br>
<div class="col-xs-12 col-sm-6">
  <input type="button" value="Add Row" class="btn btn-primary" data-bind="click: addRow" />   
</div>

CSS

table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

JavaScript

(function() {
  var ViewModel = function() {
    var self = this;
  self.data = ko.observableArray([]); 
   
    self.columnNames = ko.computed(function () {
        if (self.data().length === 0)
            return [];
        var props = ['Col1','Col2','Col3','Col4','Col5','Col6','Col7','Col8','Col9','Col10'];      
        return props;


    });   

    self.addRow = function() {
      self.data.push(new Data());
      //self.data.push(new item());
    };  

    self.removeRow = function(data) {
      self.data.remove(data);
    };

  }
 var Data = function() {
    var self = this;
  
    
  };

  vm = new ViewModel()
  ko.applyBindings(vm);
  
  
vm.data.push({
   
   
});


})();