JSFiddle - React, Tailwind, and code Playground

by Adam Doherty

HTML

<modal ng-app="myApp" ng-controller="landingPageController" visible="showModal">
    <div class="table-responsive">
        <!-- <div class="table-responsive"> -->
        <table class="table table-bordered table-hover success table-striped table-condensed">
            <thead>
                <tr class="success" style="table-layout:fixed">
                    <th class="alignAll visited">Country</th>
                    <th class="alignAll visited">Current Date</th>
                    <th class="alignAll visited">Previous Date</th>
                    <th class="alignAll visited">Difference</th>
                </tr>
            </thead>
            <!-- thead Ends ./ -->
            <tbody id="tableRowData">{{dim}}
                <tr ng-repeat="disp in allDimensions.data">
                    <td class="alignLeft"><strong>{{disp.country}}</strong>
                    </td>
                    <td class="textCenter">{{disp.prevDate}}</td>
                    <td class="textCenter">{{disp.prevToPrevDate}}</td>
                    <td class="textCenter">{{disp.diffRevenue}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <button type="button" class="btn btn-primary" ng-click="hideModal()" data-dismiss="modal">Close</button>
</modal>

JavaScript

var app = angular.module('myApp', []);
app.controller('landingPageController', function ($scope, $http, $rootScope, $q) {

    $scope.allDimensions = {
        "data": [

        {
            "prevDate": "2015-05-27",
                "prevToPrevDate": "2015-05-26",
                "diffRevenue": 110,
                "diffCartAbandonment": -110,
                "diffTotalOrders": -110,
                "diffPageView": -110,
                "country": "UKM",
                "prevToPrevRevenue": 110,
                "prevRevenue": 110,
                "prevToCartAbandonment": 110,
                "prevCartAbandonment": 110,
                "prevToTotalOrders": 110,
                "prevTotalOrders": 110,
                "prevToPageView": 110,
                "prevPageView": 110
        },

        {
            "prevDate": "2015-05-27",
                "prevToPrevDate": "2015-05-26",
                "diffRevenue": 110,
                "diffCartAbandonment": -110,
                "diffTotalOrders": -110,
                "diffPageView": -110,
                "country": "UKM",
                "prevToPrevRevenue": 110,
                "prevRevenue": 110,
                "prevToCartAbandonment": 110,
                "prevCartAbandonment": 110,
                "prevToTotalOrders": 110,
                "prevTotalOrders": 110,
                "prevToPageView": 110,
                "prevPageView": 110
        }]
    };

    /*Global Variables*/

    //Configure Every Page Aspect From MainController Such as common Calendar Dates

    /*Modal PopUp At RootScope*/

    $rootScope.showModal = false;
    $rootScope.toggleModal = function (val) {
        $rootScope.showModal = !$scope.showModal;
        if (val == "revenue") {
            $rootScope.dim = "totalRevenue";
            log($rootScope.allDimensions);
            // Filter Data Based On Selection
            //$scope.filterDim = $.filterByDim($scope.dim,$rootScope.allDimensions);
            // ...