Skip to content

Instantly share code, notes, and snippets.

@pzuraq
Last active May 17, 2017 15:07
Show Gist options
  • Save pzuraq/12d292dcf4206f0ce77f3aeb5342d388 to your computer and use it in GitHub Desktop.
Save pzuraq/12d292dcf4206f0ce77f3aeb5342d388 to your computer and use it in GitHub Desktop.
Table Component
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'td'
});
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'table'
});
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'th'
});
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'tr'
});
import Ember from 'ember';
export default Ember.Controller.extend({
columns: ['Account', 'Due Date', 'Amount', 'Period'],
rows: [{
account: 'Visa - 3412',
dueDate: '04/01/2016',
amount: '$1,190',
period: '03/01/2016 - 03/31/2016'
}, {
account: 'Visa - 6076',
dueDate: '03/01/2016',
amount: '$2,443',
period: '02/01/2016 - 02/29/2016'
}, {
account: 'Corporate AMEX',
dueDate: '03/01/2016',
amount: '$1,181',
period: '02/01/2016 - 02/29/2016'
}, {
account: 'Visa - 3412',
dueDate: '02/01/2016',
amount: '$842',
period: '01/01/2016 - 01/31/2016'
}]
});
import Ember from 'ember';
export function camelize([string]) {
return Ember.String.camelize(string);
}
export default Ember.Helper.helper(camelize);
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table tr {
background: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
{{table-component columns=columns rows=rows}}
<thead>
<tr>
{{#each columns as |columnName|}}
{{table-header text=columnName}}
{{/each}}
</tr>
</thead>
<tbody>
{{#each rows as |rowData|}}
{{table-row data=rowData columns=columns}}
{{/each}}
</tbody>
{{#each columns as |columnName|}}
{{table-cell text=(get data (camelize columnName))}}
{{/each}}
{
"version": "0.12.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.12.0",
"ember-template-compiler": "2.12.0",
"ember-testing": "2.12.0"
},
"addons": {
"ember-data": "2.12.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment