JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div ng-controller="MainCtrl">
    <!-- <pre><code>{{payments|json}}</code></pre> -->
    <button type="button" ng-click="action=action=='future'?'history':'future'"
<transactions-balance-table current-user="currentUser" action="transactionsFilter.action" payments="payments" ymd="yearMonthDist" future-items="futureItems"
    history-items="historyItems"></transactions-balance-table>
</div>

JavaScript

var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {
    $scope.payments = [{
        "ToFirstName": null,
            "ToLastName": null,
            "ToFullName": null,
            "FromFirstName": null,
            "FromLastName": null,
            "FromFullName": null,
            "LedgerEntryId": "018c889b-c29b-4a22-9fa1-1fdca9b0a61d",
            "PaymentCategoryId": 2,
            "Subject": "test eet039",
            "FromUserId": 6,
            "ToUserId": null,
            "LedgerStatusId": 0,
            "LedgerStatusDate": "2014-06-10T00:00:00",
            "Amount": 1200,
            "CreatedFromLedgerEntryId": null,
            "PropertyId": 1,
            "PaymentRuleId": 12,
            "GenerationFromPaymentRuleDate": null,
            "DateCreated": "2014-06-10T00:00:00",
            "PaymentRuleId1": 12,
            "Subject1": null,
            "FromUserId1": 6,
            "ToUserId1": null,
            "StartDate": null,
            "EndDate": null,
            "DueDate": "2014-06-10T00:00:00",
            "StatusDate": null,
            "RepeatType": 1,
            "PaymentRuleStatus": true,
            "PropertyId1": 1,
            "PaymentsAmount": 1200,
            "RepeatsCount": null,
            "PaymentType": 0,
            "LedgerStatusTitle": "pending",
            "CategoryTitle": "repair"
    }, {
        "ToFirstName": "Avi",
            "ToLastName": "Algaly",
            "ToFullName": "Avi Algaly",
            "FromFirstName": "Avi",
            "FromLastName": "Algaly",
            "FromFullName": "Avi Algaly",
            "LedgerEntryId": "0db1ce10-6f40-44d5-bfa9-5a13e11b67c4",
            "PaymentCategoryId": 1,
            "Subject": "Monthly Rent",
            "FromUserId": 128,
            "ToUserId": 6,
            "LedgerStatusId": 0,
            "LedgerStatusDate": "2014-06-19T00:00:00",
            "Amount": 1500,
            "CreatedFromLedgerEntryId": null,
            "PropertyId":...