JSFiddle - React, Tailwind, and code Playground

by smlombardi

HTML

<!DOCTYPE html>
<html ng-app="ccApp">

  <head>
    <link data-require="[email protected]" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="[email protected]" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script data-require="[email protected]" data-semver="1.2.26" src="https://code.angularjs.org/1.2.26/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="OrderSearchCtrl">
  
  <div class="container">
      <div class="row">
            <div class="col-md-12">
                 <div class="table-responsive search-results">
                     <table class="table table-condensed-extra table-hover">
                        <thead>
                            <th><a href="" ng-click="rStatus=!rStatus;order('status', rStatus)" ng-class="{desc : rStatus}">Status</a></th>
                            <th><a href="" ng-click="rOrder=!rOrder;order('ordernum', rOrder)" ng-class="{desc : rOrder}">Order Number</a></th>
                            <th><a href="" ng-click="rPlaced=!rPlaced;order('placedDate', !rPlaced)" ng-class="{desc : rPlaced}">Placed Date</a></th>
                            <th><a href="" ng-click="rConfirmed=!rConfirmed;order('confirmedDate', !rConfirmed)" ng-class="{desc : rConfirmed}">Confirmed Date</a></th>
                            <th>Commodity</th>
                            <th><a href="" ng-click="rBuyer=!rBuyer;order('buyer', !rBuyer)" ng-class="{desc : rBuyer}">Buyer</a></th>
                            <th class="centered"><a href="" ng-click="rCountry=!rCountry;order('buyerCountry', !rCountry)" ng-class="{desc : rCountry}">Buyer<br>Country</a></th>
                            <th><a href="" ng-click="rSeller=!rSeller;order('seller', !rSeller)" ng-class="{desc : rSeller}">Seller</a></th>
                           ...

JavaScript

// Code goes here


var app = angular.module('ccApp', []);

app.controller('OrderSearchCtrl', ['$scope', 'OrdersFactory', '$filter',
  function($scope, OrdersFactory, $filter) {

    $scope.searchResults = [];

    OrdersFactory.getOrders().then(function(response) {
      $scope.searchResults = response.orders;
      $scope.order('confirmedDate', true); // order by placedDate, reverse order
    });



    var orderBy = $filter('orderBy');

    $scope.order = function(predicate, reverse) {
      $scope.searchResults = orderBy($scope.searchResults, predicate, reverse);
    };

  }
]);

app.factory('OrdersFactory', ['$http',
  function($http) {

    var ordersData;

    return {
      getOrders: function() {
        if (!ordersData) {
          ordersData = $http.get('orders.js').then(function(response) {
            return response.data;
          });
        }
        return ordersData;
      }
    };

  }
]);