JSFiddle - React, Tailwind, and code Playground

by Rajesh Narravula

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<body ng-app="dime" ng-controller="storeSrcWHController">
  <table ng-table="defaultWHTable" id="border-table" class="table table-hover">
    <thead>
      <tr>
        <th class="text-center" style="position: relative; width: 126px;">
          <div ng-click="sortType = 'storeId'; sortReverse = !sortReverse">
            Store ID
            <span class="glyphicon sort-icon" ng-show="sortType=='storeId'" ng-class="{'glyphicon-chevron-up':sortReverse,'glyphicon-chevron-down':!sortReverse}"></span>
          </div>
        </th>
        <th class="text-center" style="position: relative; width: 136px;">
          <div ng-click="sortType = 'storeName'; sortReverse = !sortReverse">
            Store Name
            <span class="glyphicon sort-icon" ng-show="sortType=='storeName'" ng-class="{'glyphicon-chevron-up':sortReverse,'glyphicon-chevron-down':!sortReverse}"></span>
          </div>
        </th>
        <th class="text-center" style="position: relative; width: 220px;">
          <div ng-click="sortType = 'stockingPointId'; sortReverse = !sortReverse">
            Store Default Warehouse<span class="mandatory">*</span>
            <span class="glyphicon sort-icon" ng-show="sortType=='stockingPointId'" ng-class="{'glyphicon-chevron-up':sortReverse,'glyphicon-chevron-down':!sortReverse}"></span>
          </div>
        </th>
        <th class="text-center" style="position: relative; width: 216px;">
          <div>
            Start Date Hidded<span class="mandatory">*</span></span>
          </div>
        </th>
        <th class="text-center" style="position: relative; width: 216px;">
          <div ng-click="sortType = 'startDateH'; sortReverse = !sortReverse">
           ...

JavaScript

var dimeapp = angular.module('dime', [])
  .controller('storeSrcWHController', function($scope, $http) {
    $scope.sortType = 'providerName'; // set the default sort type
    $scope.sortReverse = false; // set the default sort order

    $scope.dateChange = function(index, row) {
      console.log(row.startDateH);
    }

      $scope.tableData = [{
        "storeId": "S2000",
        "storeName": "Minneapolis Store",
        "defaultWHList": [{
          "stockingPointName": "N American Import WH",
          "stockingPointNo": "W1000",
          "stockingPointId": 1
        }, {
          "stockingPointName": "Store Supply",
          "stockingPointNo": "W10001",
          "stockingPointId": 2
        }, {
          "stockingPointName": "Investment Buy",
          "stockingPointNo": "W10002",
          "stockingPointId": 3
        }, {
          "stockingPointName": "Direct",
          "stockingPointNo": "W10003",
          "stockingPointId": 4
        }, {
          "stockingPointName": "testChamber",
          "stockingPointNo": "00101",
          "stockingPointId": 21
        }],
        "defaultWH": "21",
        "startDateH": "2011-06-11",
        "startDate": "11-06-2011",
        "hiddenStartDate": "26/02/2016",
        "endDate": null,
        "operation": null,
        "rowId": "AAAn+qAANAAALyvAAX",
        "stockingPointId": 21,
        "storeNo": 57,
        "updatedBy": null,
        "timeStamp": null
      }, {
        "storeId": "S2000",
        "storeName": "Minneapolis Store",
        "defaultWHList": [{
          "stockingPointName": "N American Import WH",
          "stockingPointNo": "W1000",
          "stockingPointId": 1
        }, {
          "stockingPointName": "Store Supply",
          "stockingPointNo": "W10001",
          "stockingPointId": 2
        }, {
          "stockingPointName": "Investment Buy",
          "stockingPointNo": "W10002",
          "stockingPointId": 3
        }, {
          "stockingPointName": "Direct",
         ...