JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.5.js"></script>
<link rel="stylesheet" href="http://flamejs.github.com/flame-address-book/css/flame.css">
<script src="http://flamejs.github.com/flame-address-book/js/libs/flame_with_github_image_urls.min.js"></script>
<script type="text/x-handlebars">
{{view App.RootView}}
</script>
JavaScript
/* An example of using Flame.TableView. The Flame table view renders
* the table without using any real child views, which gives it very
* good performance for big tables. The table view is very versatile,
* supporting column resizing, Excel-like movement and in-place
* editing of the cells, among other things. (We'll need to write
* more documentation on harnessing its full power.)
*/
App = Ember.Application.create();
App.Person = Ember.Object.extend();
App.personsController = Ember.ArrayProxy.create({
content: [
App.Person.create({firstName:'Oliver', lastName:'Smith'}),
App.Person.create({firstName:'Thomas', lastName:'Smith'}),
App.Person.create({firstName:'Harry', lastName:'McIntosh'}),
App.Person.create({firstName:'Joshua', lastName:'Doe'}),
App.Person.create({firstName:'Alfie', lastName:'Smith'}),
App.Person.create({firstName:'Charlie', lastName:'Smith'}),
App.Person.create({firstName:'Daniel', lastName:'Smith'}),
App.Person.create({firstName:'James', lastName:'Smith'}),
App.Person.create({firstName:'William', lastName:'Doe'})
]
});
App.testTable = Flame.ArrayTableController.create({
contentBinding: 'App.personsController.content',
columns: [
{label: 'First name', property: 'firstName'},
{label: 'Last name', property: 'lastName'}
],
headerProperty: 'firstName'
});
App.RootView = Flame.RootView.extend({
childViews: ['tableView'],
tableView: Flame.TableView.extend({
contentBinding: 'App.testTable'
})
});