Knockout.js how to fill a table with observable array?

[Travis959]

I have an observable array and I want to fill a html table with it. Each array element will be a table cell. 1) What I have done so far is to convert the array of objects into a 2 dimensional array (array of subarrays). Elements in subarrays will be columns. Using nested foreach I was able to bind my objects to table cells upon first page load. 2) However, I have an "Add" function that I allow users to add elements. The added element will appear in the table in the appropriate position: meaning in a 4x4 table, if the 4th row only has 3 elements, then the new element will take the last column of the 4th row, but if the 4th row has all 4 elements, then the new element will be in the first column of the 5th row.I haven't been able to make the 2nd part working. Please point me to a direction.Here is the \[code\]code\[/code\] I have in a jsfiddle