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

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    options: {
      showAggregationLabels: false
    },
    dataSource: {
      type: "json",
      data: getData()
    },
    slice: {
      rows: [{
        uniqueName: "HealthSystemName"
      }],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "ITDValue",
        caption: "Savings / ITDValue",
        aggregation: "sum"
      }, {
        uniqueName: "YTDValue",
        caption: "Savings / YTDValue",
        aggregation: "sum"
      }, {
        uniqueName: "PriorMonthValue",
        caption: "Savings / PriorMonthValue",
        aggregation: "sum"
      }, {
        uniqueName: "MTD",
        caption: "WIP / MTD",
        aggregation: "sum"
      }, {
        uniqueName: "Shipped",
        caption: "WIP / Shipped",
        aggregation: "sum"
      }, {
        uniqueName: "InProgress",
        caption: "WIP / InProgress",
        aggregation: "sum"
      }],
    }
  }
});


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,
    },
    {
...