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 ColumnHeaderView class="header" itemClass="column-header"}}
    <div {{bindAttr style="style"}}>{{content.title}}</div>
  {{/collection}}
</div>

mclistview.js

ListviewTest.MCListView = SC.TemplateView.extend({
  templateName: 'mclistview',
  displayProperties: null,
  
  ColumnHeaderView: SC.TemplateCollectionView.extend({
    contentBinding: ".parentView.columnHeaders",
    itemView: SC.TemplateView.extend({
      style: null,

      init: function() {
        var width = this.get('content')['width'];
        this.set('style', 'width: ' + width + 'px');
        sc_super();
      }
    })
    
  }),

});