multicolumn template

mainpage.js

ListviewTest.testController = SC.ArrayController.create({
  content: [ { 'name': 'Item 1', 'description': 'This is item 1' }, 
             { 'name': 'Item 2', 'description': 'This is item 2' } ],

});

ListviewTest.mainPage = SC.Page.design({

  // The main pane is made visible on screen as soon as your app is loaded.
  // Add childViews to this pane for views to display immediately on page 
  // load.
  mainPane: SC.MainPane.design({
    childViews: 'contentView'.w(),
    
    contentView: SC.View.extend({
      layout: { top: 20, left: 20, width: 800, height: 600 },
      childViews: 'mcListView'.w(),
      mcListView: ListviewTest.MCListView.extend({
        contentBinding: 'ListviewTest.testController',
        displayProperties: ['name', 'description'],
        columnHeaders: [ {'title': 'Name', 'width': 100 }, {'title': 'Description', 'width': 200 } ],

      }),

    })
  })
});

mclistview.handlebars

<div class="mclistview">
  {{#collection ListviewTest.MCListView.columnHeaders class="header"}}
    <li class="column-header" {{bindAttr width="content.width"}}>{{content.title}}</li>
  {{/collection}}



</div>

mclistview.js

ListviewTest.MCListView = SC.TemplateView.extend({
  templateName: 'mclistview',
  displayProperties: null
});