JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div id="pivot-container"></div>

JavaScript

var jsonData = [
{
  "CONTRACT_NUMBER": "H0524",
  "YEAR": "2014",
  "MONTH": "January",
  "VALUE": 93
},
{
  "CONTRACT_NUMBER": "H0524",
  "YEAR": "2014",
  "MONTH": "February",
  "VALUE": 59
},
{
  "CONTRACT_NUMBER": "H0840",
  "YEAR": "2014",
  "MONTH": "January",
  "VALUE": 79
},
{
  "CONTRACT_NUMBER": "H0840",
  "YEAR": "2014",
  "MONTH": "February",
  "VALUE": 111
},
{
  "CONTRACT_NUMBER": "H1036",
  "YEAR": "2014",
  "MONTH": "January",
  "VALUE": 1689
},
{
  "CONTRACT_NUMBER": "H1036",
  "YEAR": "2014",
  "MONTH": "February",
  "VALUE": 1863
}
];


function prepareData(data) {
  var preparedData = [];

  for(var i = 0; i<data.length; i++){
    var item = data[i]; 
    
    //Create a new measure representing each month
    item.January =  item.MONTH == "January" ? item.VALUE : 0;
    item.February =  item.MONTH == "February" ? item.VALUE : 0;
   
    preparedData.push(item);
  }
  
  return preparedData;
}


console.log(prepareData(jsonData));


var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 450,
  toolbar: true,
  report: {
    dataSource: {
      data: prepareData(jsonData),
    },
    slice: {
        rows: [
            {
                uniqueName: "CONTRACT_NUMBER"
            }
        ],
        columns: [
            {
                uniqueName: "YEAR"
            },
            {
                uniqueName: "[Measures]"
            }
        ],
        measures: [
            {
                uniqueName: "January",
                aggregation: "sum",
                grandTotalCaption: "January"
            },
            {
                uniqueName: "February",
                aggregation: "sum",
                grandTotalCaption: "February"
            },
            {
                uniqueName: "Difference of Jan & Feb",
                formula: "sum(\"January\") - sum(\"February\")",
                caption: "Difference of Jan & Feb"
            }
        ],
     ...