Financial Table

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  scrollLeft: null,
  scrollTop: null,
  actions: {
    scrollChange(scrollLeft, scrollTop) {
      this.set('scrollLeft', scrollLeft);
      this.set('scrollTop', scrollTop);
      Ember.$('.header-container').scrollLeft(scrollLeft);
    }
  }
});

application.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    var stuff = [];
    for (var i = 0; i < 1000; i++) {
      var content = []
      for (var j = 0; j <= 10; j++) {
      	content.push('(' + j + ',' + i + ')');
      }
      stuff.push(content);
    }
    
    var rowHeaders = [];
    for (var i = 0; i < 1000; i++) {
      rowHeaders.push('Row ' + i);
    }
    
    var columnHeaders = [];
    for (var i = 0; i <= 10; i++) {
      columnHeaders.push('Column ' + i);
    }
    
    return {
      content: stuff,
      rowHeaders: rowHeaders,
      columnHeaders: columnHeaders
    }
  }
});

application.template.hbs

<h1>Ember-collection experiment</h1>
 
<h2>ScrollLeft: {{scrollLeft}}</h2>
<h2>ScrollTop: {{scrollTop}}</h2>

<ol>
  <li>Is this the correct approach?</li>
  <li>How can I make the header row scroll to the right in sync with the content? (answered on <a href="http://stackoverflow.com/questions/35977293/how-to-build-a-lazy-loading-table-in-ember-with-a-fixed-first-column-and-header" target="_blank">Stack Overflow</a>)</li>
  <li>How do I stop the ember-collections from overlapping each other?</li>
 </ol>
<div class='table-container'>
  <div class='header-container'>
    <div class="column-headers" style="width: 1500px">
      {{#each model.columnHeaders as |columnHeader|}}
        <div class='table-cell'>
          {{columnHeader}}
        </div>
      {{/each}}
    </div>
  </div>
  <div class="full-grid">
  	<div class="col1">
  {{#ember-collection 
    items=model.rowHeaders 
    classNames='fixed-column'
    cell-layout=(fixed-grid-layout 100 20) 
    scroll-top=scrollTop
    scroll-change=(action 'scrollChange')
    as |rowHeader|
  }}
    {{rowHeader}}
  {{/ember-collection}}
   </div>
   <div class="col2">
  {{#ember-collection 
    items=model.content
    classNames='scrolling-content' 
    cell-layout=(fixed-grid-layout 1500 20) 
    scroll-top=scrollTop
    scroll-left=scrollLeft
    scroll-change=(action 'scrollChange')
    as |item|
  }}
    {{#each item as |cell|}}
      <div class='table-cell'>
        {{cell}}
      </div>
    {{/each}}
  {{/ember-collection}}
	</div>
  </div>  
</div>

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.table-container {
  position: relative;
  height: 200px; 
  width: 400px;
}

.header-container {
  position: relative;
  width: 400px;
  overflow-x: scroll;
}

.table-cell {
  width: 120px; 
  display: inline-block;
}

.full-grid {
  display: table;
  height: 100%;
  width: 500px;
} 

.scrolling-content {
  position:relative; 
  width: 500px;
  height: 100%;
}

.col1, .col2 {
  display: table-cell;
  height: 100%;
}

.fixed-column {
  position: relative;
  width: 99px; 
  height: 100%;
  ::-webkit-scrollbar {
    display: none;
  }
}

twiddle.json

{
  "version": "0.5.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.2.0",
    "ember-data": "2.2.0",
    "ember-template-compiler": "2.2.0",
    "ember-collection": "https://rawgit.com/rwjblue/e4b74b094b5955ba9b35/raw/cce3b30ff156d778e61061c95b7834ace7592a8c/ember-collection-demo.js"
  }
}