Skip to content

Instantly share code, notes, and snippets.

@cball
Forked from camunching/application.controller.js
Created March 14, 2016 02:19
Show Gist options
  • Save cball/9712e368c938ff19b0b2 to your computer and use it in GitHub Desktop.
Save cball/9712e368c938ff19b0b2 to your computer and use it in GitHub Desktop.
Financial Table
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.$('.column-headers').scrollLeft(scrollLeft);
}
}
});
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
}
}
});
<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?</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>
{{#ember-collection
items=model.rowHeaders
classNames='fixed-column'
cell-layout=(fixed-grid-layout 1500 20)
scroll-top=scrollTop
scroll-change=(action 'scrollChange')
as |rowHeader|
}}
{{rowHeader}}
{{/ember-collection}}
{{#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>
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;
}
.scrolling-content {
left: 150px;
}
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment