statelessTable

statelessTable.component.js

/**
 * usage:
 *   <stateless-table 
 *      data="[{first_name: 'Aleck', last_name: 'Landgraf'}, ...]" 
 *      on-header-click="sortData()"
 *    ></stateless-table>
 */
module.component('statelessTable', { 
  bindings: {
    data: '<',
    onHeaderClick: '&'
  },
  controller: () => {
    var ctrl = this;
    ctrl.$onInit = () => {
      ctrl.columns = keys(ctrl.data[0]);
    };
  },
  template: `
  <table>
    <tr>
      <th 
        ng-repeat="column in $ctrl.columns"
        ng-click="$ctrl.onHeaderClick(column)"
      >{{ column }}</th>
    </tr>
    <tr ng-repeat="row in $ctrl.data">
      <td ng-repeat="column in $ctrl.columns">{{ row[column] }}</td>
    </tr>
  </table>
  `});