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: {
      grid: {
        showTotals: "off",
        showGrandTotals: "columns"
      }
    },
    dataSource: {
      type: "json",
      data: getData()
    },
    slice: {
      rows: [{
        uniqueName: "HealthSystemName"
      }],
      columns: [{
        uniqueName: "Category"
      },{
        uniqueName: "Subcategory"
      }, {
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "Value",
        aggregation: "sum"
      }],
      expands: {
        columns: [{
            tuple: [
              "category.[savings]"
            ]
          },
          {
            tuple: [
              "category.[wip]"
            ]
          }
        ]
      }
    }
  }
});


function getData() {
  let result = [];

  let subcategoryToGroup = {
    "ITDValue": "Savings",
    "YTDValue": "Savings",
    "PriorMonthValue": "Savings",
    "MTD": "WIP",
    "Shipped": "WIP",
    "InProgress": "WIP",
  }

  let data = [{
      "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,
    },
    {
     ...