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

new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 550,
  toolbar: true,
  global: {
    localization: {
      fieldsList: {
        formulasGroupName: "All Values"
      }
    }
  },
  report: {
    options: {
      configuratorActive: true,
    },
    dataSource: {
      type: "api",
      url: pivotEndpoint
    },
    slice: {
      measures: [{
        uniqueName: "Price Average",
        formula: "average(\"Price\")",
        caption: "Price Average",
        folder: "Price",
        active: false
      }]
    }
  }
});


function pivotEndpoint(request, successCallback, errorCallback) {
  request = JSON.parse(request);
  var result = null;
  if (request.type == "fields") {
    result = getSchema(request.index);
  }
  successCallback(result);
}

function getSchema(index) {
  return {
    "fields": [{
      "uniqueName": "Category",
      "caption": "Category",
      "type": "string",
      "folder": ""
    }, {
      "uniqueName": "Size",
      "caption": "Size",
      "type": "string",
      "folder": ""
    }, {
      "uniqueName": "Color",
      "caption": "Color",
      "type": "string",
      "folder": ""
    }, {
      "uniqueName": "Destination",
      "caption": "Destination",
      "type": "string",
      "folder": ""
    }, {
      "uniqueName": "Business Type",
      "caption": "Business Type",
      "type": "string",
      "folder": ""
    }, {
      "uniqueName": "Country",
      "caption": "Country",
      "type": "string",
      "folder": ""
    }, {
      "uniqueName": "Price",
      "caption": "Price",
      "type": "number",
      "folder": "All Values/Price"
    }, {
      "uniqueName": "Quantity",
      "caption": "Quantity",
      "type": "number",
      "folder": "All Values"
    }, {
      "uniqueName": "Discount",
      "caption": "Discount",
      "type": "number",
      "folder": "All Values"
    }],
    "aggregations": {
      "any": ["count",...