JSFiddle - React, Tailwind, and code Playground

by brombomb

HTML

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="http://styleguide.returnpath.net/assets/css/rp-bootstrap.min.css">
<script src="http//styleguide.returnpath.net/assets/js/rp-bootstrap.min.js"></script>
<div ng-app="app" ng-controller="DemoCtrl">
    <div class="table table-container slo-results">
        <table class="table">
            <colgroup>
                <col class="similarity" />
                <col class="subject" />
                <col class="domain" />
                <col class="read-rate" />
            </colgroup>
            <thead class="header">
                <tr>
                    <th class="similarity">Similiarity</th>
                    <th class="subject">Subject Line</th>
                    <th class="domain">Sending Domain</th>
                    <th class="read-rate">Read Rate</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="result in results | orderBy: '-similarity_score'">
                    <td class="similarity"> 
                        <span class="sim-bar filled"></span>
                         <span class="sim-bar" ng-class="{'filled': result.similarity_score > .25}"></span>
                         <span class="sim-bar" ng-class="{'filled': result.similarity_score > .50}"></span>
                         <span class="sim-bar" ng-class="{'filled': result.similarity_score > .75}"></span>
                    </td>
                    <td class="subject"> <span>{{result.subject}}</span></td>
                    <td class="domain">{{result.from_domain}}</td>
                    <td class="read-rate"> <span class="label label-primary">{{result.read_rate}}%</span></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div ng-show="app.show_pagination" class="pagination-container">
        <ul class="pagination">
            <li ng-repeat="option in app.pagination" ng-class="{'active': app.rpp ==...

CSS

.slo {
    width: 800px;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
.pagination-container {
    float: right;
}
.slo.search .input-group {
    width: 100%;
}
.slo-results {
    clear: both;
}
.slo-results .table {
    table-layout: fixed;
}
thead .search-match th {
    background-color: #ffc !important;
}
.similarity {
    width: 70px;
    text-align: center !important;
    vertical-align: middle !important;
}
.subject {
    width: 440px;
}
.subject img {
    vertical-align: middle;
}
.domain {
    width: 210px;
}
.read-rate {
    width: 80px;
}
.sim-bar {
    display: inline-block;
    height: 1.5em;
    width: .5em;
    border-radius: 1em;
    background-color: #ccc;
}
.sim-bar.filled {
    background-color: #46AF6C;
}
.ng-cloak {
    display: none;
}

JavaScript

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

  app.controller('DemoCtrl', ['$scope', '$http', function ($scope, $http) {

      $scope.results = {}; // dummy data
      
      $scope.app = {};
      $scope.app.rpp = 50; // default results per page
      $scope.app.page = 1; // always start from 1 for the math below to work
      $scope.app.total_results = 130; // This should be set by your data size
      $scope.app.show_pagination = true;
      $scope.app.pagination = [ // pagination options
      25,
      50,
      100,
      500];


      /* Pagination Controls */
      $scope.app.setRPP = function (rpp) {
          $scope.app.rpp = rpp;
          $scope.app.page = 1; // Reset back to page 1...
          $scope.search(); // Go get new data
      };

      // Used to calculate the max number of pages to disable next when at the last page
      $scope.app.numberOfPages = function () {
          return Math.ceil($scope.app.total_results / $scope.app.rpp);
      };

      // Calculates y in the  x-y of z results
      $scope.app.maxResults = function () {
          return Math.min((($scope.app.page - 1) * $scope.app.rpp) + $scope.app.rpp, $scope.app.total_results);
      };

      // Handles the prev page click
      $scope.app.prevPage = function () {
          if ($scope.app.page > 1) {
              $scope.app.page -= 1;
              $scope.search();// Go get new data
          }
      };

      // Handles the next page click
      $scope.app.nextPage = function () {
          if ($scope.app.page < $scope.app.numberOfPages()) {
              $scope.app.page += 1;
              $scope.search();// Go get new data
          }
      };
      
      /* Dummy data to load -- IGNORE BELOW */
      var data = $.param({
          json: JSON.stringify({
              "similar": {
                  "total": 130,
                  "results": [{
                      "from_domain": "e.abc.com",
                      "industry": "Apparel\/Accessories",
                     ...