JSFiddle - React, Tailwind, and code Playground

by manoj

HTML

<script src="http://code.angularjs.org/angular-0.10.5.js"
        ng:autobind></script>

<div ng:controller="RequisitionsIndexCtrl">
    
<!-- SIDEBAR -->
<div class="jv-filters">
  <form ng:submit="search()">
      <h3>Search</h3>
      <textarea ng:model="searchKeywords" placeholder="Keyword, Title or Req. ID"></textarea>
      <input type="submit" value="Search" class="jv-button">
  </form>
</div>
    
    
    
    
    
<!-- RESULTS TABLE -->    
<div class="jv-results">
  <table>
      <thead>
          <tr>
              <th colspan="4">
                  <a class="jv-button" href="#">Send Jobvite</a>
              </th>
              <th colspan="4">
                  
              </th>
          </tr>
          <tr>
              <th>
                  <input type="checkbox" ng:model="checkAll" ng:click="selectAll()">
              </th>
              <th>
                  <a ng:click="sort='name';reverse=!reverse">Requisitions</a>
              </th>
              <th>
                    <a ng:click="sort='id';reverse=!reverse" ng:class="sortIs('id')">Req ID</a>
              </th>
              <th>
                    Info
              </th>
              <th>
                    Recruiter and Hiring Manager
              </th>
              <th>
                    <a ng:click="sort='status';reverse=!reverse">Status</a>
              </th>
              <th>
                    <a ng:click="sort='updated';reverse=!reverse">Updated</a>
              </th>
              <th>
                    <a ng:click="sort='candidates';reverse=!reverse">Candidates</a>
              </th>
          </tr>
      </thead>
      <tbody>
          <tr ng:repeat="requisition in requisitions.$orderBy(sort, reverse)">
              <td>
                  <input type="checkbox" ng:model="requisition.selected" value="1">
              </td>
              <td class="jv-req">
                  <strong>{{requisition.name}}</strong>
                 ...

SCSS

html, body {
    margin: 0;
    height: 100%;
}

.currentSort {
    color:green;
}

.currentSortReverse {
    color:orange;
}

.jv-filters {
 //float: left;
  width: 200px;
   height: 100%; 
    > div {
        border: 1px solid #ccc;
        padding: 5px;
        background: #bbb;
    }
}
table {
    width: 100%;
}
.jv-results {
     //margin-left: 200px;   
}
.jv-button {
    display: inline-block;
    background: green;
    color: white;
    padding: 5px;
    border-radius: 5px;
    text-decoration: none;
}
.jv-reqInfo {
    background: no-repeat left center blue url(../img/logo.png);
    height: 16px;
    width: 16px;
    text-indent: -5000px;
}

JavaScript

function RequisitionsIndexCtrl() {
    var scope = this;
    scope.sort = '';
    scope.sortIs = function(sortType) {
        if (scope.sort == sortType) {
            if (scope.reverse) {
                return "currentSortReverse";
            } else {
                 return "currentSort"   
            }
        } else {
            return "";            
        }
    } 
    
    scope.reverse = false;
    scope.requisitions = [
        {
        id: 3,
        name: 'third',
        location: 'here',
        status: 'Awaiting Approval',
        updated: '12/2/2011',
        candidates: 3},
    {
        id: 4,
        name: 'fourth',
        location: 'there',
        status: 'Open',
        updated: '12/2/2011',
        candidates: 6},

    {
        id: 5,
        name: 'fifth',
        location: 'there',
        status: 'Open',
        updated: '12/2/2011',
        candidates: 0},

    {
        id: 6,
        name: 'sixth',
        location: 'there',
        status: 'Awaiting Approval',
        updated: '12/2/2011',
        candidates: 1},

    {
        id: 7,
        name: 'seventh',
        location: 'anywhere',
        status: 'Draft',
        updated: '12/2/2011',
        candidates: 2}
    ];

    scope.selectAll = function() {
        angular.forEach(scope.requisitions, function(requisition, i) {
            if (scope.checkAll) {
                requisition.selected = true;
            } else {
                requisition.selected = false;
            }
        });
    };

    scope.search = function() {
        scope.searchKeywords
    };
    
    scope.log = function(variable) {
        console.log(variable);
    };
}