JSFiddle - React, Tailwind, and code Playground
by smlombardi
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.12/angular-animate.min.js.map"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div ng-app="ccApp">
<div ng-controller="PMTController as pmt">
{{pmt.bar}}
<table class="table">
<thead>
<tr>
<th>
<input type="checkbox" ng-model="pmt.table.allRowsSelected" ng-click="pmt.table.selectAllRows()" ng-checked="pmt.table.selectAllFilteredRows()">
</th>
<th> </th>
<th ng-if="pmt.tableColumns.team">Team</th>
<th ng-if="pmt.tableColumns.orderNum">
<a href="" class="text-nowrap" ng-click="pmt.table.sort.change('orderID')">Order Number
<i class="fa fa-caret-up text-muted" ng-if="pmt.table.sort.type !== 'orderID'"></i>
<i class="fa fa-fw" ng-if="pmt.table.sort.type === 'orderID'" ng-class="{'fa-caret-up': !pmt.table.sort.reverse, 'fa-caret-down': pmt.table.sort.reverse}"></i>
</a>
</th>
<th ng-if="pmt.tableColumns.sku">
<!-- <a href="" class="text-nowrap" ng-click="pmt.table.sort.change('merchantComRefId')">SKU
<i class="fa fa-caret-up text-muted" ng-if="pmt.table.sort.type !== 'merchantComRefId'"></i>
<i class="fa fa-fw" ng-if="pmt.table.sort.type === 'merchantComRefId'" ng-class="{'fa-caret-up': !pmt.table.sort.reverse, 'fa-caret-down': pmt.table.sort.reverse}"></i>
</a>-->SKU
</th>
<th ng-if="pmt.tableColumns.name">Name URL</th>
<th ng-if="pmt.tableColumns.qty">QTY</th>
<th ng-if="pmt.tableColumns.poe">POE</th>
<th ng-if="pmt.tableColumns.cod">COD</th>
<th ng-if="pmt.tableColumns.price">Price</th>
<th ng-if="pmt.tableColumns.team">ECCN</th>
<th...
JavaScript
var app = angular.module('ccApp', []);
app.controller('PMTController',
function() {
var _this = this;
_this.foo = 'bar';
_this.pmtData = MockDataFactory.query({
filename: 'pmt1000'
});
});