JSFiddle - React, Tailwind, and code Playground

by Yogesh Kanthale

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.angularjs.org/1.2.19/angular.js"></script>
<script src="https://rawgit.com/Gary-Li/angular-scrollable-table/master/angular-scrollable-table.js"></script>
<link rel="stylesheet" href="https://rawgit.com/Gary-Li/angular-scrollable-table/master/scrollable-table.css">
<div ng-controller="MyCtrl" class="test-container">
      <scrollable-table watch="visibleProjects">
        <table class="table table-striped table-bordered">
          <thead>
            <tr>
               <th sortable-header col="facility">Facility</th>
               <th sortable-header col="code">Unit code</th>
               <th sortable-header col="cost">Cost</th>
               <th sortable-header col="conditionRating">Condition score</th>
               <th sortable-header col="extent">Replace %</th>
               <th sortable-header col="planYear" comparator-fn="comparator">Plan year</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="response in visibleProjects" row-id="{{ response.facility }}" 
                ng-class="{info: selected == response.facility}" >
              <td>{{ response.facility }}</td>
              <td>{{ response.code }}</td>
              <td>{{ response.cost }}</td>
              <td class="cr">{{ response.conditionRating }}</td>
              <td>{{ response.extent }}</td>
              <td>{{ response.planYear }}</td>
            </tr>
          </tbody>
        </table>
      </scrollable-table>
      <div>
        <label>Select a facility:</label>
        <select ng-model="selected" ng-options="f for f in facilities"></select>
      </div>
    </div>

CSS

body {
    margin: 20px;
}

.test-container {
    width: 800px;
}
.test-container table th {
    min-width: 80px;
}

JavaScript

/* global angular:false */
'use strict';

var myApp = angular.module('myApp',['scrollable-table'])
.service('Data', function() {
    this.get = function() {
        return [{
          facility: "Atlanta",
          code: "C-RD34",
          cost: 540000,
          conditionRating: 52,
          extent: 100,
          planYear: 2014
        }, {
          facility: "Seattle",
          code: "CRDm-4",
          cost: 23000,
          conditionRating: 40,
          extent: 88,
          planYear: 2014
        }, {
          facility: "Austin",
          code: "GR-5",
          cost: 1200000,
          conditionRating: 92,
          extent: 90,
          planYear: 2014
        }, {
          facility: "Dayton",
          code: "LY-7",
          cost: 123000,
          conditionRating: 71,
          extent: 98,
          planYear: 2014
        }, {
          facility: "Portland",
          code: "Dm-4",
          cost: 149000,
          conditionRating: 89,
          extent: 77,
          planYear: 2014
        }, {
          facility: "Dallas",
          code: "AW-3",
          cost: 14000,
          conditionRating: 89,
          extent: 79,
          planYear: 2014
        }, {
          facility: "Houston",
          code: "Dm-4",
          cost: 1100000,
          conditionRating: 93,
          extent: 79,
          planYear: 2014
        }, {
          facility: "Boston",
          code: "DD3",
          cost: 1940000,
          conditionRating: 86,
          extent: 80,
          planYear: 2015
        }, {
          facility: "New York",
          code: "ER1",
          cost: 910000,
          conditionRating: 87,
          extent: 82,
          planYear: 2015
        }];
    };
})
// when sorting by year, sort by year and then replace %
.service("Comparators", function() { 
  this.year = function(r1, r2) {
    if(r1.planYear === r2.planYear) {
      if (r1.extent === r2.extent) return 0;
      return r1.extent > r2.extent ? 1 : -1;
    } else...