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="clearCustomizing()">Clear Customizing</button>
<button onclick="startCustomizing()">Start Customizing</button>
<div id="pivot-container"></div>

JavaScript

var pivot = new Flexmonster({
	container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 430,
  toolbar: true,
  customizeCell: customizeCellFunction,
  report: {
    "dataSource": {
      "data": getData()
    },
    "slice": {
        "rows": [
            {
                "uniqueName": "Category"
            },
            {
                "uniqueName": "Quantity"
            }
        ],
        "columns": [
            {
                "uniqueName": "Color"
            },
            {
                "uniqueName": "[Measures]"
            }
        ],
        "measures": [
            {
                "uniqueName": "Price",
                "aggregation": "sum"
            }
        ],
        "expands": {
            "expandAll": true
        },
        "drillThrough": [
            "Category",
            "Quantity",
            "Color",
            "Price"
        ]
    },
    "options": {
        "grid": {
            "type": "classic",
            "showTotals": "off",
            "showGrandTotals": "rows"
        }
    }
  }
});

var isCustomizeCellOn = false;

function customizeCellFunction(cell, data) {
  if (data && data.type == "header" && data.member && data.label == "") {
  	cell.text = "&nbsp;&nbsp;&nbsp;&nbsp;" + data.member.caption;
  }
}

function clearCustomizing() {
	isCustomizeCellOn = false;
  pivot.customizeCell(null);
}

function startCustomizing() {
	isCustomizeCellOn = true;
  pivot.customizeCell(customizeCellFunction);
}

function getData() {
  return [{
    "Category": "Accessories",
    "Size": "262 oz",
    "Color": "red",
    "Destination": "Australia",
    "Business Type": "Specialty Bike Shop",
    "Country": "Australia",
    "Price": 174,
    "Quantity": 225,
    "Discount": 23
  }, {
    "Category": "Accessories",
    "Size": "214 oz",
    "Color": "yellow",
    "Destination": "Canada",
    "Business Type": "Specialty Bike Shop",
    "Country": "Canada",
    "Price": 502,
 ...