JSFiddle - React, Tailwind, and code Playground

by igos

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://nicolas.kruchten.com/pivottable/dist/pivot.css">
<script src="https://nicolas.kruchten.com/pivottable/dist/pivot.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<div ng-controller="ngAppDemoController">
  I can add: {{a}} + {{b}} =  {{ a+b }}
</div>

<div id="output" style="margin: 30px;"></div>

JavaScript

angular.module('ngAppDemo', []).controller('ngAppDemoController', function($scope) {
  $scope.a = 1;
  $scope.b = 2;
});

// This example loads the "Canadian Parliament 2012" dataset 
    // and adds derived attributes: "Age Bin" and "Gender Imbalance".

    $(function(){
        var derivers = $.pivotUtilities.derivers;

        $.getJSON("https://nicolas.kruchten.com/pivottable/examples/mps.json", function(mps) {
            $("#output").pivotUI(mps, {
                derivedAttributes: {
                    "Age Bin": derivers.bin("Age", 10),
                    "Gender Imbalance": function(mp) {
                        return mp["Gender"] == "Male" ? 1 : -1;
                    }
                }
            });
        });
     });