Need directions on how to create a two dimensional matrix using knockout.js -

i newbie knockout.js. trying create matrix html structure. trying start scratch. user have add row button, create row. able add multiple rows. trying add column. column should copy existing table , make copy , make appear in next column.

i have reached until point. link jsfiddle

i html code adding code easy reading.

<div class='liveexample'>   <div data-bind='simplegrid: gridviewmodel'> </div>  <button data-bind='click: addrowitem'>     add row </button> <button data-bind='click: addcolitem'>     add col </button>       

this java script code knockout.js functions

var initialdata = [     { name: "" } ];    var pagedgridmodel = function(items) {     this.items = ko.observablearray(items);   this.addrowitem = function() {     this.items.push({ name: "new row" }); };  this.gridviewmodel = new ko.simplegrid.viewmodel({     data: this.items,     columns: [         { headertext: "", rowtext: "name"}     ], });  }; ko.applybindings(new pagedgridmodel(initialdata)); 

the columns array in simplegrid view model needs observablearray otherwise model not know changed. similar doing data, need make columns reference observablearray.

here updated view model:

var pagedgridmodel = function(items) {     var self = this;      self.items = ko.observablearray(items);     self.columns = ko.observablearray([             { headertext: "", rowtext: "name"}         ]);      self.addrowitem = function() {         self.items.push({ name: "new row" });     };      self.addcolitem = function() {         self.columns.push({ name: "new column" });     };      self.gridviewmodel = new ko.simplegrid.viewmodel({         data: self.items,         columns: self.columns     });  };