How to perform a foreach loop of a multi-row and multi-column list in Knockout.js

You need to group it based on user index. The end goal is to create an array of arrays where the inner array contains the data for each column. You can create a computed property like this:

var viewModel = function() {
  var self = this;

  self.users = [
   { name: "name 1"}, 
   { name: "name 2"}, 
   { name: "name 3"}, 
   { name: "name 4"}, 
   { name: "name 5"}, 
   { name: "name 6"}, 
   { name: "name 7"}, 
 ];

  // this array looks: [[user1,user2,user3], [user4,user5,user6]]
  self.groupedUsers = ko.computed(function() {
    var rows = [];

    self.users.forEach(function(user, i) {
      // whenever i = 0, 3, 6 etc, we need to initialize the inner array
      if (i % 3 == 0)
        rows[i/3] = [];

      rows[Math.floor(i/3)][i % 3] = user;
    });

    return rows;
  });
};

ko.applyBindings(new viewModel());

and in your html:

<table>
  <tbody data-bind="foreach: groupedUsers">
    <tr data-bind="foreach: $data">
      <td data-bind="text: name">
      </td>
    </tr>
  </tbody>
</table>

$dataThis is the internal array in the context. You can read about binding contexts here.

Here is the fiddle for the test

CSS options:

I'm no expert, but the key here is whether you have one for containereach of you row. This can be achieved with pure if there is no delimiter between each line css. You can float: leftuse on user container, which will count users per row based on screen size and container width.

The same argument can be made if you use a similar framework bootstrapor one foundationwith grid class help . You'll have it all columnin one rowclass and the grid will automatically adjust based on screen size and customization col-mdand col-smclasses set based on device level requirements .