JSFiddle - React, Tailwind, and code Playground

by willtx

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/fonts/glyphicons-halflings-regular.eot"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/fonts/glyphicons-halflings-regular.svg"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.22/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.min.js"></script>
<div ng-app="myApp" ng-cloak>
<div ng-show="completedPaymentData.length === 0" style="margin: 10px auto;">
     <div class="alert alert-warning">No records found for the specified criteria.</div>
 </div>
<div style="margin: 10px auto;">
  
    <table id="ordersGridtable" class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>
                    <a href="javascript:void(0)" change-sort-directive="OrderId">
                        OrderID
                        <div class="sorter" ng-show="orderPaymentsSort.orderBy === 'OrderId'">
                            <div ng-class="orderPaymentsSort.reverseSort ? 'sorting_desc':'sorting_asc'"></div>
                        </div>
                    </a>
                </th>
                <th>
                    <a href="javascript:void(0)" change-sort-directive="Address">
                        Address
                        <div class="sorter" ng-show="orderPaymentsSort.orderBy === 'Address'">
                            <div ng-class="orderPaymentsSort.reverseSort ?...

CSS

[ng\:cloak], [ng-cloak], .ng-cloak {
            display: none !important;
  }

JavaScript

var app = angular.module('myApp', ['ui.bootstrap', 'ngSanitize']);

app.controller('myController', function ($scope, $http, $filter, $q) {

    var onError = function (response, msg, action) {
        console.log(msg);
        console.log(response);
    };
    var onErrorGridError = function (response) {
        onError(response, "An error has occurred loading.", $scope.triggerUnload);
    };

    $scope.isValidDate = isValidDate;

    $scope.orderPaymentsSort = { orderBy: "PaymentDate", reverseSort: false };

    $scope.encodeURL = function (uri) {
        return encodeURIComponent(uri);
    }

    $scope.selectedVendor = { id: '' };
    $scope.completedPaymentData = [];

    $scope.changeCompletedDataSort = function(column) {
        //TODO WL
        debugger;
        console.log("$scope.orderPaymentsSort (b): ", $scope.orderPaymentsSort);
        $scope.orderPaymentsSort.orderBy = column;
        $scope.orderPaymentsSort.reverseSort = !$scope.orderPaymentsSort.reverseSort;

        $scope.$apply(function() {
            $scope.orderPaymentsSort = angular.copy($scope.orderPaymentsSort);
            console.log("$scope.orderPaymentsSort (a): ", $scope.orderPaymentsSort);
        });
        
    }

    var convertCompletedDataValuesToDoubles = function(completedData)
    {
        //TODO WL
        debugger;
        if (Array.isArray(completedData)) {
            if (completedData.length === 0) {
                return completedData;
            }

            const length = completedData.length;
            for (let i = 0; i < length; i++) {
                try {
                    completedData[i].VendorFee = typeof completedData[i].VendorFee === "string" ? parseFloat(completedData[i].VendorFee).toFixed(2) : 0.00;  
                    console.log(`completedData[${i}].VendorFee: ${completedData[i].VendorFee}`);
                } catch (e) {
                    console.log("error converting data: ", e);
                } 
            }

            return...