JSFiddle - React, Tailwind, and code Playground

by abhijeetkarve

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div data-ng-app="myApp">
  <br>
  <div ng-controller="myCtrl">
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <table class="table table-hover table-striped table-bordered table-responsive table-condensed">
            <thead>
              <tr>
                <th ng-repeat="col in playerColumns" ng-show="col.show">
                  <a href="#" ng-click="sortField.obj.value = col.name; sortReverse.obj.value = !sortReverse.obj.value;">
                                          {{col.label}} 
                      <span ng-show="sortField.obj.value == col.name && !sortReverse.obj.value" class="fa fa-caret-down"></span>
                      <span ng-show="sortField.obj.value == col.name && sortReverse.obj.value" class="fa fa-caret-up"></span>
                                      </a>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="row in playerData | orderBy:sortField.obj.value:sortReverse.obj.value | filter:searchTerm.obj.value">
                <td ng-repeat="col in playerColumns" ng-style="{'text-align': col.talign}" ng-if="col.show ">
                  <div ng-if="col.link == true">
                  <!--  <div ng-repeat="col in playerColumns">
                      <div ng-if="col.senddata == true">{{row[col.name]}}</div>
                    </div> -->

                    <a href  ng-click="ReportNav(row)">{{row[col.name]}}</a>
                  </div>
        ...

JavaScript

(function(angular) {
  'use strict';

  // app
  angular.module('myApp', []);

  // service
  angular.module('myApp').service('mySvc', [function() {
  
  	ReportNav(row) {
    
    }

    var playerColumns = {
      "id": {
        "name": "id",
        "label": "ID",
        "senddata": true,
        "show": false
      },
      "FullName": {
        "name": "FullName",
        "label": "Player",
        "link": true,
        "show": true
      },
      "team_code": {
        "name": "team_code",
        "label": "Team",
        "talign": "right",
        "filter": "text",
        "link": false,
        "senddata": true,
        "show": true
      },
      "total": {
        "name": "total",
        "label": "total",
        "talign": "right",
        "filter": "number",
        "link": false,
        "show": true
      },
      "position": {
        "name": "position",
        "label": "Position",
        "link": false,
        "show": true
      },
      "value": {
        "name": "value",
        "label": "Value",
        "show": true,
        "link": false,
        "filter": "number",
        "talign": "right",
        "decimals": 3
      }
    };

    var playerData = [{
      "id": 0,
      "FullName": "Bryce Harper",
      "team_code": "was",
      "total": "100",
      "position": "OF",
      "value": "0.523655953332562"
    }, {
      "id": 1,
      "FullName": "Chris Davis",
      "team_code": "bal",
      "total": "200",
      "position": "1B/OF",
      "value": "0.632357647343342"
    }, {
      "id": 2,
      "FullName": "Yoenis Cespedes",
      "team_code": "nyn",
      "total": "300",
      "position": "OF",
      "value": "0.997633324334234"
    }, {
      "id": 3,
      "FullName": "Manny Machado",
      "team_code": "bal",
      "total": "400",
      "position": "3B",
      "value": "0.324132642662464"
    }, {
      "id": 4,
      "FullName": "Jose Altuve",
      "team_code": "hou",
      "total": "500",
      "position": "2B",
      "value":...