Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ember Starter Kit</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
​
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.11.0/ember-template-compiler.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.11.0/ember.debug.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
<script src="http://builds.emberjs.com/canary/ember-data.min.js"></script>
    <link rel=stylesheet href="http://dobtco.github.io/jquery-resizable-columns/dist/jquery.resizableColumns.css">
<script src="https://rawgit.com/dobtco/jquery-resizable-columns/gh-pages/dist/jquery.resizableColumns.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">  
</head>
<body>
​
  <script type="text/x-handlebars">
    <h2>Table example</h2>
​
    {{outlet}}
  </script>
​
  <script type="text/x-handlebars" data-template-name="index">
{{my-table content=model }}
​
  </script>
  
  <script type="text/x-handlebars" data-template-name="components/my-table">
  
  <thead>
    <tr>
      <th>#</th>
      {{#each column in columns}}
        {{my-header name=column.name property=column.property action='sortBy' sortProperties=sortProperties asc=asc}}
      {{/each}}
    </tr>
  </thead>
  <tbody>
​
  {{#each row in multiSort}} 
    {{my-table-row row=row columns=columns}}
  {{/each}}
  </tbody>
  </script>
  
  <script type="text/x-handlebars" data-template-name="components/my-button">
  {{text}}
  </script>
  <script type="text/x-handlebars" data-template-name="components/my-header">
  {{name}}
  {{#if showArrow}}
    <i class="fa {{direction}}"></i>
  {{/if}}
  </script>  
  <script type="text/x-handlebars" data-template-name="components/my-button-set-save">
  {{my-button text="Delete" action="delete"}}
  {{my-button text="Save" action="save"}}
  </script>
  <script type="text/x-handlebars" data-template-name="components/my-button-set">
  {{my-button text="Delete" action="delete"}}
  </script>
  
    <script type="text/x-handlebars" data-template-name="components/my-table-row">
    <td>{{my-checkbox action='select' checked=active}} - {{active}}</td>
    
    {{#each cell in cells}}
​
        {{my-table-cell cell=cell}}
​
    {{/each}}
  </script>
  
  <script type="text/x-handlebars" data-template-name="components/my-table-cell">
    {{#if cell.component}}
      {{component cell.component}}
    {{else}}
      {{cell.value}}
    {{/if}}
  </script>    
  
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers