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>

<button onclick="switchTab('Savings')">
SAVINGS
</button>
<button onclick="switchTab('WIP')">
WIP
</button>

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

JavaScript

const Savings = [{
  uniqueName: "ITDValue",
  aggregation: "sum"
}, {
  uniqueName: "YTDValue",
  aggregation: "sum"
}, {
  uniqueName: "PriorMonthValue",
  aggregation: "sum"
}];

const WIP = [{
  uniqueName: "MTD",
  aggregation: "sum"
}, {
  uniqueName: "Shipped",
  aggregation: "sum"
}, {
  uniqueName: "InProgress",
  aggregation: "sum"
}];

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    options: {
      grid: {
        title: "Savings"
      },
      showAggregationLabels: false
    },
    dataSource: {
      type: "json",
      data: getData()
    },
    slice: {
      rows: [{
        uniqueName: "HealthSystemName"
      }],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: Savings
    }
  }
});


function getData() {
  return [{
      "HealthSystemName": "Appalachian Regional Healthcare",
      "FacilityName": "Hazard Med Ctr (Hazard, KY)",
      "ProgramName": "PAN: Non-Small Cell Lung Cancer (Medicare)",
      "ProductName": "Tecentriq",
      "BatchStatusID": 1,
      "BatchStatusName": "New",
      "ServiceName": "Foundation",
      "ITDValue": 200,
      "YTDValue": 120,
      "PriorMonthValue": 60,
      "MTD": 0,
      "Shipped": 0,
      "InProgress": 10,
    },
    {
      "HealthSystemName": "Baptist Health FL",
      "FacilityName": "Baptist Medical Center – Clay/ED",
      "ProgramName": "Generic Devices",
      "ProductName": "Balloon Generic",
      "BatchStatusID": 1,
      "BatchStatusName": "New",
      "ServiceName": "Device",
      "ITDValue": 5000,
      "YTDValue": 120,
      "PriorMonthValue": 50,
      "MTD": 0,
      "Shipped": 0,
      "InProgress": 0,
    },
    {
      "HealthSystemName": "Baptist Health FL",
      "FacilityName": "Baptist Medical Center – North/ED",
      "ProgramName": "AbbVie PAP-Humira",
      "ProductName": "Humira",
      "BatchStatusID": 1,
      "BatchStatusName": "New",
     ...