Skip to content

Instantly share code, notes, and snippets.

@shawndumas

shawndumas/jsbin.UGutUyI.html

Created September 3, 2013 17:07
Show Gist options
  • Save shawndumas/6426647 to your computer and use it in GitHub Desktop.
Save shawndumas/6426647 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.UGutUyI.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://addepar.github.io/ember-table/stylesheets/bootstrap.css">
<link rel="stylesheet" href="http://addepar.github.io/ember-table/stylesheets/font-awesome.css">
<link rel="stylesheet" href="http://addepar.github.io/ember-table/stylesheets/styles.css">
<link rel="stylesheet" href="http://addepar.github.io/ember-table/stylesheets/table-base.css">
<script src="http://addepar.github.io/ember-table/javascripts/lib/modernizr-2.6.1.min.js"></script>
<script src="http://addepar.github.io/ember-table/javascripts/lib/jquery-1.8.0.min.js"></script>
<script src="http://addepar.github.io/ember-table/javascripts/lib/jquery-ui-1.9.0.custom.min.js"></script>
<script src="http://addepar.github.io/ember-table/javascripts/lib/jquery.mousewheel.js"></script>
<script src="http://addepar.github.io/ember-table/javascripts/lib/bootstrap.js"></script>
<script src="http://addepar.github.io/ember-table/javascripts/lib/underscore.min.js"></script>
<script src="http://addepar.github.io/ember-table/javascripts/lib/date.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="http://addepar.github.io/ember-table/javascripts/ember-table.min.js"></script>
<script src="http://addepar.github.io/ember-table/javascripts/data.js"></script>
<style>
body, html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.example-container {
width: 100%;
height: 500px;
}
.wrapper {
width: 100%;
max-width: 100%;
max-height: 100%;
}
</style>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<!-- ember-table templates -- start -->
<script>
delete Ember.TEMPLATES['body-container'];
delete Ember.TEMPLATES['footer-container'];
delete Ember.TEMPLATES['header-cell'];
delete Ember.TEMPLATES['header-container'];
delete Ember.TEMPLATES['header-row'];
delete Ember.TEMPLATES['table-row'];
delete Ember.TEMPLATES['tables-container'];
</script>
<script type="text/x-handlebars" data-template-name="body-container">
<div class='table-scrollable-wrapper'>
{{view Ember.Table.LazyTableBlock classNames="left-table-block"
contentBinding="controller.bodyContent"
columnsBinding="controller.fixedColumns"
widthBinding="controller._fixedBlockWidth"
numItemsShowingBinding="controller._numItemsShowing"
scrollTopBinding="controller._scrollTop"
startIndexBinding="controller._startIndex"
}}
{{view Ember.Table.LazyTableBlock classNames="right-table-block"
contentBinding="controller.bodyContent"
columnsBinding="controller.tableColumns"
scrollLeftBinding="controller._tableScrollLeft"
widthBinding="controller._tableBlockWidth"
numItemsShowingBinding="controller._numItemsShowing"
scrollTopBinding="controller._scrollTop"
startIndexBinding="controller._startIndex"
}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="footer-container">
<div class='table-fixed-wrapper'>
{{view Ember.Table.TableBlock classNames="left-table-block"
contentBinding="controller.footerContent"
columnsBinding="controller.fixedColumns"
widthBinding="controller._fixedBlockWidth"
heightBinding="controller.footerHeight"
}}
{{view Ember.Table.TableBlock classNames="right-table-block"
contentBinding="controller.footerContent"
columnsBinding="controller.tableColumns"
scrollLeftBinding="controller._tableScrollLeft"
widthBinding="controller._tableBlockWidth"
heightBinding="controller.footerHeight"
}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="header-cell">
<span {{action sortByColumn view.content}}>
{{view.content.headerCellName}}
</span>
</script>
<script type="text/x-handlebars" data-template-name="header-container">
<div class='table-fixed-wrapper'>
{{view Ember.Table.HeaderBlock classNames="left-table-block"
columnsBinding="controller.fixedColumns"
widthBinding="controller._fixedBlockWidth"
heightBinding="controller.headerHeight"
}}
{{view Ember.Table.HeaderBlock classNames="right-table-block"
columnsBinding="controller.tableColumns"
scrollLeftBinding="controller._tableScrollLeft"
widthBinding="controller._tableBlockWidth"
heightBinding="controller.headerHeight"
}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="header-row">
{{view Ember.MultiItemViewCollectionView
contentBinding="view.content"
itemViewClassField="headerCellViewClass"
widthBinding="controller._tableColumnsWidth"
}}
</script>
<script type="text/x-handlebars" data-template-name="table-row">
{{view Ember.MultiItemViewCollectionView
rowBinding="view.row"
contentBinding="view.columns"
itemViewClassField="tableCellViewClass"
widthBinding="controller._tableColumnsWidth"
}}
</script>
<script type="text/x-handlebars" data-template-name="tables-container">
{{#if controller.hasHeader}}
{{view Ember.Table.HeaderTableContainer}}
{{/if}}
{{view Ember.Table.BodyTableContainer}}
{{#if controller.hasFooter}}
{{view Ember.Table.FooterTableContainer}}
{{/if}}
{{view Ember.Table.ScrollContainer}}
</script>
<!-- ember-table templates -- end -->
<!-- application templates -- start -->
<script type="text/x-handlebars" data-template-name="application">
<div class="wrapper">
{{template section}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="section">
<section>
<div class="example-container tree-table">
{{view App.TreeTableExample.TablesContainer
controllerBinding="treeTableExampleController"}}
</div>
</section>
</script>
<script type="text/x-handlebars" data-template-name="table-header-tree-cell">
<span {{bindAttr class=":toggle controller.isCollapsed:expand:collapse"}}
{{action toggleTableCollapse target="controller"}}>
<i class="icon-chevron-down icon-white"></i>
</span>
<span class='column-title' {{action sortByColumn view.column}}>
{{view.column.headerCellName}}
</span>
</script>
<script type="text/x-handlebars" data-template-name="table-tree-cell">
<span {{bindAttr class="view.row.isLeaf::toggle
view.row.isCollapsed:expand:collapse"}}
{{action toggleCollapse view.row}}>
<i class="toggle-icon icon-chevron-down"></i>
</span>
{{view.cellContent}}
</script>
<!-- application templates -- start -->
<script>
(function() {
window.App = Ember.Application.create({
customEvents: {
blur: 'blur'
}
});
App.ApplicationView = Ember.View.extend({
classNames: 'ember-app',
templateName: 'application'
});
App.ApplicationController = Ember.Controller.extend({
treeTableExampleController: Ember.computed(function() {
var controller;
controller = Ember.get('App.TreeTableExample.TableController').create();
controller.set('data', window.treedata);
return controller;
}).property()
});
}).call(this);
</script>
<script src="http://addepar.github.io/ember-table/javascripts/examples/tree_table.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment